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

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

export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsProps) {
  const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles'>('robotics')
  
  // Data States
  const [roboticsCategories, setRoboticsCategories] = useState<any[]>([])
  const [industries, setIndustries] = useState<any[]>([])
  const [jobRoles, setJobRoles] = useState<any[]>([])

  const fetchRobotics = async () => {
    try { const res = await axios.get(`${apiBase}/robotics/categories`); setRoboticsCategories(res.data) } catch (e) { console.error(e) }
  }
  
  const fetchIndustries = async () => {
    try { const res = await axios.get(`${apiBase}/industries`); setIndustries(res.data) } catch (e) { console.error(e) }
  }

  const fetchJobRoles = async () => {
    try { const res = await axios.get(`${apiBase}/job_roles`); setJobRoles(res.data) } catch (e) { console.error(e) }
  }

  useEffect(() => {
    if (isOpen) {
        fetchRobotics()
        fetchIndustries()
        fetchJobRoles()
    }
  }, [isOpen])

  // Robotics Handlers
  const handleUpdateRobotics = async (id: number, description: string, reasoning: string) => {
      try {
          await axios.put(`${apiBase}/robotics/categories/${id}`, { description, reasoning_guide: reasoning })
          fetchRobotics()
      } catch (e) { alert("Update failed") }
  }

  // Industry Handlers
  const handleAddIndustry = async () => {
      try { await axios.post(`${apiBase}/industries`, { name: "New Industry" }); fetchIndustries() } catch (e) { alert("Failed") }
  }
  const handleUpdateIndustry = async (id: number, data: any) => {
      try { await axios.put(`${apiBase}/industries/${id}`, data); fetchIndustries() } catch (e) { alert("Failed") }
  }
  const handleDeleteIndustry = async (id: number) => {
      try { await axios.delete(`${apiBase}/industries/${id}`); fetchIndustries() } catch (e) { alert("Failed") }
  }

  // Job Role Handlers
  const handleAddJobRole = async () => {
      try { await axios.post(`${apiBase}/job_roles`, { pattern: "New Pattern", role: "Operativer Entscheider" }); fetchJobRoles() } catch (e) { alert("Failed") }
  }
  const handleDeleteJobRole = async (id: number) => {
      try { await axios.delete(`${apiBase}/job_roles/${id}`); fetchJobRoles() } catch (e) { alert("Failed") }
  }

  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 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 },
             ].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">
          
          {/* ROBOTICS TAB */}
          {activeTab === 'robotics' && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {roboticsCategories.map(cat => (
                    <CategoryCard key={cat.id} category={cat} onSave={handleUpdateRobotics} />
                ))}
              </div>
          )}

          {/* INDUSTRIES TAB */}
          {activeTab === 'industries' && (
              <div className="space-y-4">
                  <div className="flex justify-between items-center">
                      <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Industry Verticals</h3>
                      <button onClick={handleAddIndustry} 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 NEW
                      </button>
                  </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 gap-4 items-start group">
                              <div className="flex-1 space-y-2">
                                  <div className="flex gap-2">
                                      <input 
                                        className="bg-transparent border-b border-transparent focus:border-blue-500 outline-none font-bold text-slate-900 dark:text-white text-sm w-full"
                                        defaultValue={ind.name}
                                        onBlur={(e) => handleUpdateIndustry(ind.id, { name: e.target.value })}
                                      />
                                      <div className="flex items-center gap-2">
                                          <input 
                                            type="checkbox" 
                                            checked={ind.is_focus}
                                            onChange={(e) => handleUpdateIndustry(ind.id, { is_focus: e.target.checked })}
                                            className="rounded border-slate-300 dark:border-slate-700"
                                          />
                                          <span className="text-xs text-slate-500">Focus?</span>
                                      </div>
                                  </div>
                                  <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-600 dark:text-slate-300 focus:ring-1 focus:ring-blue-500 outline-none h-16 resize-none"
                                    defaultValue={ind.description}
                                    placeholder="Description / Abgrenzung..."
                                    onBlur={(e) => handleUpdateIndustry(ind.id, { description: e.target.value })}
                                  />
                                  <select 
                                    className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-1.5 text-xs text-slate-600 dark:text-slate-300 outline-none"
                                    value={ind.primary_category_id || ""}
                                    onChange={(e) => handleUpdateIndustry(ind.id, { primary_category_id: e.target.value ? parseInt(e.target.value) : null })}
                                  >
                                      <option value="">-- No Primary Product --</option>
                                      {roboticsCategories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                                  </select>
                              </div>
                              <button onClick={() => handleDeleteIndustry(ind.id)} className="p-2 text-slate-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
                                  <Trash2 className="h-4 w-4" />
                              </button>
                          </div>
                      ))}
                  </div>
              </div>
          )}

          {/* JOB ROLES TAB */}
          {activeTab === 'roles' && (
              <div className="space-y-4">
                  <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}
                                            // Real-time update would require more state management or blur
                                          />
                                      </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>
      </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>
    )
}