import React, { useState } from 'react';
import { JobFeedItem, PlatformType } from '../types';
import { 
  Rss, 
  Sparkles, 
  ExternalLink, 
  Building2, 
  MapPin, 
  DollarSign, 
  Send, 
  Filter, 
  Search,
  CheckCircle2,
  Clock
} from 'lucide-react';

interface JobFeedsProps {
  jobFeeds: JobFeedItem[];
  onTailorJobFeed: (item: JobFeedItem) => void;
  onQuickApplyFeed: (item: JobFeedItem) => Promise<void>;
}

export const JobFeeds: React.FC<JobFeedsProps> = ({
  jobFeeds,
  onTailorJobFeed,
  onQuickApplyFeed
}) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedPlatform, setSelectedPlatform] = useState<string>('ALL');
  const [minMatch, setMinMatch] = useState<number>(80);
  const [appliedFeedIds, setAppliedFeedIds] = useState<string[]>([]);

  const filteredFeeds = jobFeeds.filter(feed => {
    const matchesSearch = 
      feed.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      feed.company.toLowerCase().includes(searchTerm.toLowerCase()) ||
      feed.location.toLowerCase().includes(searchTerm.toLowerCase());

    const matchesPlatform = selectedPlatform === 'ALL' || feed.platform === selectedPlatform;
    const matchesMatch = feed.estimatedMatch >= minMatch;

    return matchesSearch && matchesPlatform && matchesMatch;
  });

  const handleApply = async (feed: JobFeedItem) => {
    setAppliedFeedIds(prev => [...prev, feed.id]);
    await onQuickApplyFeed(feed);
  };

  return (
    <div className="space-y-6">
      
      {/* Top Banner */}
      <div className="p-6 rounded-2xl bg-slate-900 border border-slate-800 shadow-xl flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h2 className="text-base font-bold text-white flex items-center gap-2">
            <Rss className="w-5 h-5 text-indigo-400" /> Active Job Feeds & Scraped Postings
          </h2>
          <p className="text-xs text-slate-400 mt-1">
            Aggregated real-time job openings from LinkedIn, Greenhouse, Lever, Workday, and Glassdoor with AI match scoring.
          </p>
        </div>

        <div className="flex items-center gap-2 text-xs font-semibold text-slate-300">
          <button
            onClick={async () => {
              const res = await fetch('/api/jobs/fetch-feeds');
              if (res.ok) {
                const data = await res.json();
                if (data.jobs) window.location.reload();
              }
            }}
            className="px-3 py-1.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white transition flex items-center gap-1.5 shadow-lg shadow-indigo-600/20"
          >
            <Rss className="w-3.5 h-3.5" /> Refresh Live Feeds (API & RSS)
          </button>
          <span className="px-3 py-1.5 rounded-xl bg-slate-800 border border-slate-700">
            Total Feeds: <strong className="text-indigo-400">{jobFeeds.length}</strong>
          </span>
        </div>
      </div>

      {/* Filter Bar */}
      <div className="p-4 rounded-2xl bg-slate-900 border border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-4">
        
        {/* Search */}
        <div className="relative flex-1 min-w-[240px]">
          <Search className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" />
          <input
            type="text"
            placeholder="Search feed openings by title, company, or skills..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-10 pr-4 py-2 rounded-xl bg-slate-950 border border-slate-800 text-slate-200 text-xs placeholder:text-slate-500 focus:outline-none focus:border-indigo-500"
          />
        </div>

        {/* Platform & Match Threshold */}
        <div className="flex items-center gap-3 text-xs">
          <select
            value={selectedPlatform}
            onChange={(e) => setSelectedPlatform(e.target.value)}
            className="px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-slate-300 text-xs focus:outline-none focus:border-indigo-500"
          >
            <option value="ALL">All Platforms</option>
            <option value="LinkedIn">LinkedIn</option>
            <option value="Greenhouse">Greenhouse</option>
            <option value="Lever">Lever</option>
            <option value="Workday">Workday</option>
            <option value="Glassdoor">Glassdoor</option>
            <option value="Direct">Direct</option>
          </select>

          <div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-950 border border-slate-800">
            <span className="text-slate-400 font-medium">Min Match:</span>
            <span className="font-bold text-indigo-300">{minMatch}%</span>
            <input
              type="range"
              min="70"
              max="95"
              value={minMatch}
              onChange={(e) => setMinMatch(Number(e.target.value))}
              className="w-20 accent-indigo-500 cursor-pointer"
            />
          </div>
        </div>

      </div>

      {/* Feed Cards Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {filteredFeeds.length === 0 ? (
          <div className="col-span-full p-12 text-center text-slate-500 bg-slate-900 border border-slate-800 rounded-2xl">
            No active job feed listings match your criteria.
          </div>
        ) : (
          filteredFeeds.map((feed) => {
            const isApplied = appliedFeedIds.includes(feed.id);

            return (
              <div key={feed.id} className="p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-indigo-500/40 transition-all flex flex-col justify-between space-y-4">
                
                <div>
                  <div className="flex items-start justify-between gap-3 mb-2">
                    <div>
                      <h3 className="font-bold text-white text-sm hover:text-indigo-300 transition-colors">{feed.title}</h3>
                      <p className="text-slate-400 text-xs font-semibold flex items-center gap-2 mt-0.5">
                        <span>{feed.company}</span>
                        <span>•</span>
                        <span className="px-2 py-0.5 rounded bg-slate-800 text-slate-300 border border-slate-700 text-[10px]">{feed.platform}</span>
                      </p>
                    </div>

                    <div className="flex items-center justify-center px-2.5 py-1 rounded-xl bg-indigo-950 border border-indigo-500/40 text-indigo-300 font-bold text-xs shrink-0">
                      {feed.estimatedMatch}% Match
                    </div>
                  </div>

                  <p className="text-xs text-slate-300 leading-relaxed line-clamp-2 my-2">
                    {feed.description}
                  </p>

                  <div className="flex items-center flex-wrap gap-1.5 mt-3">
                    {feed.requiredSkills.map((sk, idx) => (
                      <span key={idx} className="px-2 py-0.5 rounded-md bg-slate-950 text-slate-400 border border-slate-800 text-[10px]">
                        {sk}
                      </span>
                    ))}
                  </div>
                </div>

                <div className="pt-3 border-t border-slate-800 flex items-center justify-between gap-2 text-xs">
                  <div className="text-[11px] text-slate-500 flex items-center gap-2">
                    <span className="flex items-center gap-1"><MapPin className="w-3 h-3" /> {feed.location}</span>
                    <span>•</span>
                    <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {feed.postedDate}</span>
                  </div>

                  <div className="flex items-center gap-2">
                    <button
                      onClick={() => onTailorJobFeed(feed)}
                      className="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 font-semibold text-xs flex items-center gap-1"
                    >
                      <Sparkles className="w-3.5 h-3.5 text-amber-400" />
                      <span>Tailor & Walkthrough</span>
                    </button>

                    <button
                      onClick={() => handleApply(feed)}
                      disabled={isApplied}
                      className={`px-3 py-1.5 rounded-xl font-bold text-xs flex items-center gap-1 transition-all ${
                        isApplied 
                          ? 'bg-emerald-950 text-emerald-300 border border-emerald-500/30' 
                          : 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-md shadow-indigo-600/20'
                      }`}
                    >
                      {isApplied ? <CheckCircle2 className="w-3.5 h-3.5" /> : <Send className="w-3.5 h-3.5" />}
                      <span>{isApplied ? 'Applied' : 'AI Auto-Apply'}</span>
                    </button>
                  </div>
                </div>

              </div>
            );
          })
        )}
      </div>

    </div>
  );
};