import { useEffect, useState } from 'react'
import axios from 'axios'
import { X, Bot, Tag, Target, Users, Plus, Trash2, Save, Flag, Check, Ban } from 'lucide-react'
import clsx from 'clsx'

interface RoboticsSettingsProps {
  isOpen: boolean
  onClose: () => void
  apiBase: string
}

type ReportedMistake = {
  id: number;
  company_id: number;
  company: { name: string }; // Assuming company name is eagerly loaded
  field_name: string;
  wrong_value: string | null;
  corrected_value: string | null;
  source_url: string | null;
  quote: string | null;
  user_comment: string | null;
  status: 'PENDING' | 'APPROVED' | 'REJECTED';
  created_at: string;
  updated_at: string;
}

export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsProps) {
  const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles' | 'mistakes'>(
    localStorage.getItem('roboticsSettingsActiveTab') as 'robotics' | 'industries' | 'roles' | 'mistakes' || 'robotics'
  )
  
  const [roboticsCategories, setRoboticsCategories] = useState<any[]>([])
  const [industries, setIndustries] = useState<any[]>([])
  const [jobRoles, setJobRoles] = useState<any[]>([])
  const [reportedMistakes, setReportedMistakes] = useState<ReportedMistake[]>([])
  const [currentMistakeStatusFilter, setCurrentMistakeStatusFilter] = useState<string>("PENDING");
  const [isLoading, setIsLoading] = useState(false);

  const fetchAllData = async () => {
    setIsLoading(true);
    try {
      const [resRobotics, resIndustries, resJobRoles, resMistakes] = await Promise.all([
        axios.get(`${apiBase}/robotics/categories`),
        axios.get(`${apiBase}/industries`),
        axios.get(`${apiBase}/job_roles`),
        axios.get(`${apiBase}/mistakes?status=${currentMistakeStatusFilter}`),
      ]);
      setRoboticsCategories(resRobotics.data);
      setIndustries(resIndustries.data);
      setJobRoles(resJobRoles.data);
      setReportedMistakes(resMistakes.data.items);
    } catch (e) {
      console.error("Failed to fetch settings data:", e);
      alert("Fehler beim Laden der Settings. Siehe Konsole.");
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    if (isOpen) {
      fetchAllData();
    }
  }, [isOpen]);

  useEffect(() => {
    localStorage.setItem('roboticsSettingsActiveTab', activeTab);
  }, [activeTab]);


  const handleUpdateRobotics = async (id: number, description: string, reasoning: string) => {
      setIsLoading(true);
      try {
          await axios.put(`${apiBase}/robotics/categories/${id}`, { description, reasoning_guide: reasoning });
          fetchAllData();
      } catch (e) { 
          alert("Update failed");
          console.error(e);
      } finally {
          setIsLoading(false);
      }
  }

  const handleUpdateMistakeStatus = async (mistakeId: number, newStatus: 'APPROVED' | 'REJECTED') => {
    setIsLoading(true);
    try {
      await axios.put(`${apiBase}/mistakes/${mistakeId}`, { status: newStatus });
      fetchAllData(); // Refresh all data, including mistakes
    } catch (e) {
      alert("Failed to update mistake status");
      console.error(e);
    } finally {
      setIsLoading(false);
    }
  };

  const handleAddJobRole = async () => {
      setIsLoading(true);
      try { 
          await axios.post(`${apiBase}/job_roles`, { pattern: "New Pattern", role: "Operativer Entscheider" }); 
          fetchAllData();
      } catch (e) { 
          alert("Failed to add job role");
          console.error(e);
      } finally {
          setIsLoading(false);
      }
  }
  const handleDeleteJobRole = async (id: number) => {
      setIsLoading(true);
      try { 
          await axios.delete(`${apiBase}/job_roles/${id}`); 
          fetchAllData();
      } catch (e) { 
          alert("Failed to delete job role");
          console.error(e);
      } finally {
          setIsLoading(false);
      }
  }

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-white dark:bg-slate-900 w-full max-w-4xl max-h-[85vh] rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 flex flex-col overflow-hidden">
        {/* Header */}
        <div className="p-6 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center bg-slate-50 dark:bg-slate-950/50">
          <div>
            <h2 className="text-xl font-bold text-slate-900 dark:text-white">Settings & Classification Logic</h2>
            <p className="text-sm text-slate-500">Define how AI evaluates leads and matches roles.</p>
          </div>
          <button onClick={onClose} className="p-2 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-full transition-colors text-slate-500">
            <X className="h-6 w-6" />
          </button>
        </div>

        {/* Tab Nav */}
        <div className="flex flex-shrink-0 border-b border-slate-200 dark:border-slate-800 px-6 bg-white dark:bg-slate-900 overflow-x-auto">
             {[
                 { id: 'robotics', label: 'Robotics Potential', icon: Bot },
                 { id: 'industries', label: 'Industry Focus', icon: Target },
                 { id: 'roles', label: 'Job Role Mapping', icon: Users },
                 { id: 'mistakes', label: 'Reported Mistakes', icon: Flag },
             ].map(t => (
                 <button 
                    key={t.id}
                    onClick={() => setActiveTab(t.id as any)}
                    className={clsx(
                        "flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-all whitespace-nowrap",
                        activeTab === t.id 
                            ? "border-blue-500 text-blue-600 dark:text-blue-400" 
                            : "border-transparent text-slate-500 hover:text-slate-800 dark:hover:text-slate-300"
                    )}
                 >
                    <t.icon className="h-4 w-4" /> {t.label}
                 </button>
             ))}
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-6 space-y-6 bg-white dark:bg-slate-900">
          
          {isLoading && <div className="text-center py-12 text-slate-500">Loading...</div>}

          <div key="robotics-content" className={clsx("grid grid-cols-1 md:grid-cols-2 gap-6", { 'hidden': isLoading || activeTab !== 'robotics' })}>
            {roboticsCategories.map(cat => ( <CategoryCard key={cat.id} category={cat} onSave={handleUpdateRobotics} /> ))}
          </div>

          <div key="industries-content" className={clsx("space-y-4", { 'hidden': isLoading || activeTab !== 'industries' })}>
              <div className="flex justify-between items-center">
                  <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Industry Verticals (Synced from Notion)</h3>
              </div>
              <div className="grid grid-cols-1 gap-3">
                  {industries.map(ind => (
                      <div key={ind.id} className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg p-4 flex flex-col gap-3 group relative overflow-hidden">
                          {ind.notion_id && (
                              <div className="absolute top-0 right-0 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-[9px] font-bold px-2 py-0.5 rounded-bl">SYNCED</div>
                          )}
                          <div className="flex gap-4 items-start pr-12">
                              <div className="flex-1">
                                  <h4 className="font-bold text-slate-900 dark:text-white text-sm">{ind.name}</h4>
                                  <div className="flex flex-wrap gap-2 mt-1">
                                      {ind.status_notion && <span className="text-[10px] border border-slate-300 dark:border-slate-700 px-1.5 rounded text-slate-500">{ind.status_notion}</span>}
                                  </div>
                              </div>
                              <div className="text-right">
                                  <div className="flex items-center gap-1.5 justify-end">
                                      <span className={clsx("w-2 h-2 rounded-full", ind.is_focus ? "bg-green-500" : "bg-slate-300 dark:bg-slate-700")} />
                                      <span className="text-xs text-slate-500">{ind.is_focus ? "Focus" : "Standard"}</span>
                                  </div>
                              </div>
                          </div>
                          <p className="text-xs text-slate-600 dark:text-slate-300 italic whitespace-pre-wrap">{ind.description || "No definition"}</p>
                          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-[10px] bg-white dark:bg-slate-900 p-2 rounded border border-slate-200 dark:border-slate-800">
                              <div><span className="block text-slate-400 font-bold uppercase">Whale &gt;</span><span className="text-slate-700 dark:text-slate-200">{ind.whale_threshold || "-"}</span></div>
                              <div><span className="block text-slate-400 font-bold uppercase">Min Req</span><span className="text-slate-700 dark:text-slate-200">{ind.min_requirement || "-"}</span></div>
                              <div><span className="block text-slate-400 font-bold uppercase">Unit</span><span className="text-slate-700 dark:text-slate-200 truncate">{ind.scraper_search_term || "-"}</span></div>
                              <div><span className="block text-slate-400 font-bold uppercase">Product</span><span className="text-slate-700 dark:text-slate-200 truncate">{roboticsCategories.find(c => c.id === ind.primary_category_id)?.name || "-"}</span></div>
                          </div>
                          {ind.scraper_keywords && <div className="text-[10px]"><span className="text-slate-400 font-bold uppercase mr-2">Keywords:</span><span className="text-slate-600 dark:text-slate-400 font-mono">{ind.scraper_keywords}</span></div>}
                          {ind.standardization_logic && <div className="text-[10px]"><span className="text-slate-400 font-bold uppercase mr-2">Standardization:</span><span className="text-slate-600 dark:text-slate-400 font-mono">{ind.standardization_logic}</span></div>}
                      </div>
                  ))}
              </div>
          </div>

          <div key="roles-content" className={clsx("space-y-4", { 'hidden': isLoading || activeTab !== 'roles' })}>
              <div className="flex justify-between items-center"><h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Job Title Mapping Patterns</h3><button onClick={handleAddJobRole} className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded"><Plus className="h-3 w-3" /> ADD PATTERN</button></div>
              <div className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg overflow-hidden">
                  <table className="w-full text-left text-xs">
                      <thead className="bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 text-slate-500 font-bold uppercase"><tr><th className="p-3">Job Title Pattern (Regex/Text)</th><th className="p-3">Mapped Role</th><th className="p-3 w-10"></th></tr></thead>
                      <tbody className="divide-y divide-slate-200 dark:divide-slate-800">
                          {jobRoles.map(role => (
                              <tr key={role.id} className="group">
                                  <td className="p-2"><input className="w-full bg-transparent border border-transparent hover:border-slate-300 dark:hover:border-slate-700 rounded px-2 py-1 text-slate-900 dark:text-slate-200 outline-none focus:border-blue-500" defaultValue={role.pattern} /></td>
                                  <td className="p-2"><select className="w-full bg-transparent border border-transparent hover:border-slate-300 dark:hover:border-slate-700 rounded px-2 py-1 text-slate-900 dark:text-slate-200 outline-none focus:border-blue-500" defaultValue={role.role}><option>Operativer Entscheider</option><option>Infrastruktur-Verantwortlicher</option><option>Wirtschaftlicher Entscheider</option><option>Innovations-Treiber</option></select></td>
                                  <td className="p-2 text-center"><button onClick={() => handleDeleteJobRole(role.id)} className="text-slate-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 className="h-4 w-4" /></button></td>
                              </tr>
                          ))}
                          {jobRoles.length === 0 && (<tr><td colSpan={3} className="p-8 text-center text-slate-500 italic">No patterns defined yet.</td></tr>)}
                      </tbody>
                  </table>
              </div>
          </div>

          <div key="mistakes-content" className={clsx("space-y-4", { 'hidden': isLoading || activeTab !== 'mistakes' })}>
              <div className="flex justify-between items-center">
                  <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Reported Data Mistakes</h3>
                  <div className="flex items-center gap-2">
                    <span className="text-xs text-slate-500">Filter:</span>
                    <select
                      value={currentMistakeStatusFilter}
                      onChange={e => setCurrentMistakeStatusFilter(e.target.value)}
                      className="bg-slate-50 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-2 py-1 text-xs text-slate-900 dark:text-white focus:ring-1 focus:ring-blue-500 outline-none"
                    >
                      <option value="PENDING">Pending</option>
                      <option value="APPROVED">Approved</option>
                      <option value="REJECTED">Rejected</option>
                      <option value="ALL">All</option>
                    </select>
                  </div>
              </div>
              <div className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg overflow-hidden">
                  <table className="w-full text-left text-xs">
                      <thead className="bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 text-slate-500 font-bold uppercase"><tr>
                        <th className="p-3">Company</th>
                        <th className="p-3">Field</th>
                        <th className="p-3">Wrong Value</th>
                        <th className="p-3">Corrected Value</th>
                        <th className="p-3">Source / Quote / Comment</th>
                        <th className="p-3">Status</th>
                        <th className="p-3 w-10">Actions</th>
                      </tr></thead>
                      <tbody className="divide-y divide-slate-200 dark:divide-slate-800">
                          {reportedMistakes.length > 0 ? (
                              reportedMistakes.map(mistake => (
                                  <tr key={mistake.id} className="group">
                                      <td className="p-2 font-medium text-slate-900 dark:text-slate-200">{mistake.company.name}</td>
                                      <td className="p-2 text-slate-700 dark:text-slate-300">{mistake.field_name}</td>
                                      <td className="p-2 text-red-600 dark:text-red-400">{mistake.wrong_value || '-'}</td>
                                      <td className="p-2 text-green-600 dark:text-green-400">{mistake.corrected_value || '-'}</td>
                                      <td className="p-2 text-slate-500">
                                          {mistake.source_url && <a href={mistake.source_url} target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1 mb-1"><ExternalLink className="h-3 w-3" /> Source</a>}
                                          {mistake.quote && <p className="italic text-[10px] my-1">"{mistake.quote}"</p>}
                                          {mistake.user_comment && <p className="text-[10px]">Comment: {mistake.user_comment}</p>}
                                      </td>
                                      <td className="p-2">
                                        <span className={clsx("px-2 py-0.5 rounded-full text-[10px] font-semibold", {
                                          "bg-yellow-100 text-yellow-700": mistake.status === "PENDING",
                                          "bg-green-100 text-green-700": mistake.status === "APPROVED",
                                          "bg-red-100 text-red-700": mistake.status === "REJECTED",
                                        })}>
                                          {mistake.status}
                                        </span>
                                      </td>
                                      <td className="p-2 text-center">
                                        {mistake.status === "PENDING" && (
                                          <div className="flex gap-1 justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                            <button
                                              onClick={() => handleUpdateMistakeStatus(mistake.id, "APPROVED")}
                                              className="text-green-600 hover:text-green-700"
                                              title="Approve Mistake"
                                            >
                                              <Check className="h-4 w-4" />
                                            </button>
                                            <button
                                              onClick={() => handleUpdateMistakeStatus(mistake.id, "REJECTED")}
                                              className="text-red-600 hover:text-red-700"
                                              title="Reject Mistake"
                                            >
                                              <Ban className="h-4 w-4" />
                                            </button>
                                          </div>
                                        )}
                                      </td>
                                  </tr>
                              ))
                          ) : (
                              <tr><td colSpan={7} className="p-8 text-center text-slate-500 italic">No reported mistakes found.</td></tr>
                          )}
                      </tbody>
                  </table>
              </div>
          </div>
        </div>
      </div>
    </div>
        </div>
      </div>
    </div>
  )
}

function CategoryCard({ category, onSave }: { category: any, onSave: any }) {
    const [desc, setDesc] = useState(category.description)
    const [guide, setGuide] = useState(category.reasoning_guide)
    const [isDirty, setIsDirty] = useState(false)

    useEffect(() => { setIsDirty(desc !== category.description || guide !== category.reasoning_guide) }, [desc, guide])

    return (
        <div className="bg-slate-50 dark:bg-slate-950/50 border border-slate-200 dark:border-slate-800 rounded-xl p-4 flex flex-col gap-3">
            <div className="flex items-center gap-2">
                <div className="p-1.5 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded"><Tag className="h-4 w-4" /></div>
                <span className="font-bold text-slate-900 dark:text-white uppercase tracking-tight text-sm">{category.name}</span>
            </div>
            <div className="space-y-1"><label className="text-[10px] uppercase font-bold text-slate-500">Definition for LLM</label><textarea className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-2 text-xs text-slate-800 dark:text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none h-20" value={desc} onChange={e => setDesc(e.target.value)} /></div>
            <div className="space-y-1"><label className="text-[10px] uppercase font-bold text-slate-500">Reasoning Guide (Scoring)</label><textarea className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-2 text-xs text-slate-800 dark:text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none h-20" value={guide} onChange={e => setGuide(e.target.value)} /></div>
            {isDirty && (<button onClick={() => onSave(category.id, desc, guide)} className="mt-2 bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-bold py-1.5 rounded transition-all animate-in fade-in flex items-center justify-center gap-1"><Save className="h-3 w-3" /> SAVE CHANGES</button>)}
        </div>
    )
}