'use client';

import { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { toast } from 'react-toastify';
import { api } from '@/lib/api';

interface JobSummary {
  id: number;
  title: string;
  department?: string;
  location: string;
  experience_band?: string;
  ctc_band?: string;
  notice_period?: string;
  shift?: string;
  working_days?: string;
  must_have_skills?: string;
  good_to_have_skills?: string;
  qualifications?: string;
  work_details: string;
  questions?: (string | { question?: string; answer?: string })[];
  client_name?: string | null;
  hunar_agent_id?: string;
}

interface AgentModalProps {
  job: JobSummary | null;
  isOpen: boolean;
  onClose: () => void;
  onAgentLinked?: (jobId: number, agentId: string) => void;
}

const VOICE_PERSONAS = ['NEHA', 'ROY', 'ZOE', 'SAM', 'MIRA', 'EESHA'];
const LANGUAGES = [
  'ENGLISH',
  'HINDI',
  'TAMIL',
  'TELUGU',
  'KANNADA',
  'MARATHI',
  'MALAYALAM',
  'GUJARATI',
  'BENGALI',
  'TURKISH',
  'ARABIC',
  'SPANISH',
];

export default function AgentModal({ job, isOpen, onClose, onAgentLinked }: AgentModalProps) {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [mode, setMode] = useState<'view' | 'create' | 'edit'>('create');
  const [activeTab, setActiveTab] = useState<'agent' | 'jd'>('agent');
  const [existingAgent, setExistingAgent] = useState<any>(null);

  // Form Fields
  const [name, setName] = useState('');
  const [voicePersona, setVoicePersona] = useState('NEHA'); // Pre-selected default
  const [language, setLanguage] = useState('ENGLISH');
  const [personaName, setPersonaName] = useState('Neha');
  const [objective, setObjective] = useState('');
  const [introduction, setIntroduction] = useState('');
  const [agentPrompt, setAgentPrompt] = useState('');
  const [resultPrompt, setResultPrompt] = useState('');
  const [resultSchemaStr, setResultSchemaStr] = useState('{\n  "type": "object",\n  "properties": {}\n}');

  // Load existing agent or generate prompt when modal opens
  useEffect(() => {
    if (!isOpen || !job) return;

    setActiveTab('agent');
    setExistingAgent(null);

    const initModal = async () => {
      setLoading(true);
      try {
        if (job.hunar_agent_id) {
          // Attempt to fetch linked agent details
          try {
            const res = (await api.get(`/ai-calls/agents/${job.hunar_agent_id}/`)) as any;
            const ag = res?.data || res;
            if (ag && ag.id) {
              setExistingAgent(ag);
              setMode('view');
              populateFormFromAgent(ag);
              setLoading(false);
              return;
            }
          } catch {
            // Agent fetch failed or 404, fall back to creation mode
          }
        }

        // If no agent linked or fetch failed, generate prompt from JD via LLM
        await generatePromptFromJD();
      } catch (err) {
        toast.error('Failed to initialize AI Agent configuration');
      } finally {
        setLoading(false);
      }
    };

    initModal();
  }, [isOpen, job?.id, job?.hunar_agent_id]);

  const populateFormFromAgent = (ag: any) => {
    setName(ag.name || '');
    setVoicePersona(ag.voice_persona || 'NEHA');
    setLanguage(ag.language || 'ENGLISH');
    setPersonaName(ag.persona_name || 'Neha');
    setObjective(ag.objective || '');
    setIntroduction(ag.introduction || '');
    setAgentPrompt(ag.agent_prompt || '');
    setResultPrompt(ag.result_prompt || '');
    setResultSchemaStr(
      ag.result_schema ? JSON.stringify(ag.result_schema, null, 2) : '{\n  "type": "object",\n  "properties": {}\n}'
    );
  };

  const generatePromptFromJD = async () => {
    if (!job) return;
    setLoading(true);
    try {
      const res = (await api.post(`/jobs/${job.id}/generate-agent-prompt/`)) as any;
      const data = res?.data || res;
      setName(data.name || `AI Agent - ${job.title}`);
      setVoicePersona(data.voice_persona || 'NEHA');
      setLanguage(data.language || 'ENGLISH');
      setPersonaName(data.persona_name || 'Neha');
      setObjective(data.objective || '');
      setIntroduction(data.introduction || '');
      setAgentPrompt(data.agent_prompt || '');
      setResultPrompt(data.result_prompt || '');
      setResultSchemaStr(
        data.result_schema ? JSON.stringify(data.result_schema, null, 2) : '{\n  "type": "object",\n  "properties": {}\n}'
      );
      setMode('create');
    } catch {
      toast.error('Failed to generate prompt from Job Description');
    } finally {
      setLoading(false);
    }
  };

  const handleCreateOrUpdate = async () => {
    if (!name.trim() || name.length < 3) {
      toast.error('Agent Name must be at least 3 characters');
      return;
    }
    if (!agentPrompt.trim()) {
      toast.error('AI Agent System Prompt is required');
      return;
    }

    let parsedSchema: Record<string, unknown> = {};
    try {
      parsedSchema = JSON.parse(resultSchemaStr);
    } catch {
      toast.error('Invalid Result Schema JSON format');
      return;
    }

    setSaving(true);
    try {
      const payload = {
        name: name.trim(),
        language: language.toUpperCase(),
        voice_persona: voicePersona.toUpperCase(),
        persona_name: personaName.trim() || 'Neha',
        objective: objective.trim(),
        introduction: introduction.trim(),
        agent_prompt: agentPrompt,
        result_prompt: resultPrompt || 'Evaluate response and produce evaluation scores.',
        result_schema: parsedSchema,
      };

      if (mode === 'edit' && existingAgent?.id) {
        // Update existing Hunar voice agent
        const updateRes = (await api.put(`/ai-calls/agents/${existingAgent.id}/`, payload)) as any;
        const updatedAg = updateRes?.data || updateRes;
        setExistingAgent(updatedAg);
        setMode('view');
        toast.success('Hunar AI Agent updated successfully!');
      } else {
        // Create new Hunar voice agent
        const createRes = (await api.post('/ai-calls/agents/', payload)) as any;
        const createdAg = createRes?.data || createRes;
        const agentId = createdAg?.id;

        if (!agentId) {
          throw new Error('No Agent ID returned by Hunar API');
        }

        // Link Agent ID to JD in backend
        if (job) {
          await api.post(`/jobs/${job.id}/link-agent/`, { agent_id: agentId });
          if (onAgentLinked) {
            onAgentLinked(job.id, agentId);
          }
        }

        setExistingAgent(createdAg);
        setMode('view');
        toast.success('Hunar AI Agent created and linked to Job Description successfully!');
      }
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to save Hunar AI Agent');
    } finally {
      setSaving(false);
    }
  };

  if (!isOpen || !job) return null;

  return (
    <AnimatePresence>
      <div
        className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-950/60 backdrop-blur-sm p-4 overflow-y-auto"
        onClick={onClose}
      >
        <motion.div
          initial={{ opacity: 0, scale: 0.96 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.96 }}
          transition={{ duration: 0.2 }}
          onClick={(e) => e.stopPropagation()}
          className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col my-auto"
        >
          {/* Header */}
          <div className="flex items-center justify-between px-6 py-4 bg-[#405189] text-white shrink-0">
            <div className="flex items-center gap-3 min-w-0">
              <div className="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center text-white shrink-0">
                <i className="fa-solid fa-robot text-lg" />
              </div>
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  <span className="text-[10px] uppercase font-black tracking-widest bg-emerald-400 text-slate-900 px-2 py-0.5">
                    Hunar AI Agent
                  </span>
                  <span className="text-xs text-indigo-200 font-bold">JD #{job.id}</span>
                </div>
                <h2 className="text-base font-extrabold truncate text-white mt-0.5">{job.title}</h2>
              </div>
            </div>
            <button
              onClick={onClose}
              className="w-8 h-8 rounded-none flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 transition cursor-pointer"
            >
              <i className="fa-solid fa-xmark text-lg" />
            </button>
          </div>

          {/* Navigation Sub-Tabs */}
          <div className="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 px-6 bg-slate-50 dark:bg-slate-900/50 shrink-0">
            <div className="flex gap-4">
              <button
                onClick={() => setActiveTab('agent')}
                className={`py-3 text-xs font-extrabold border-b-2 transition cursor-pointer flex items-center gap-2 ${
                  activeTab === 'agent'
                    ? 'border-[#405189] text-[#405189] dark:border-indigo-400 dark:text-indigo-400'
                    : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400'
                }`}
              >
                <i className="fa-solid fa-headset text-xs" /> AI Agent Config & Prompt
              </button>
              <button
                onClick={() => setActiveTab('jd')}
                className={`py-3 text-xs font-extrabold border-b-2 transition cursor-pointer flex items-center gap-2 ${
                  activeTab === 'jd'
                    ? 'border-[#405189] text-[#405189] dark:border-indigo-400 dark:text-indigo-400'
                    : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400'
                }`}
              >
                <i className="fa-solid fa-file-invoice text-xs" /> Job Description Details
              </button>
            </div>

            {existingAgent && (
              <span className="text-xs font-bold text-emerald-600 dark:text-emerald-400 flex items-center gap-1.5 py-2">
                <i className="fa-solid fa-circle-check text-xs" /> Agent Linked ({existingAgent.id.slice(0, 8)}…)
              </span>
            )}
          </div>

          {/* Modal Body */}
          <div className="p-6 overflow-y-auto custom-scrollbar flex-1 min-h-0 space-y-5">
            {loading ? (
              <div className="py-16 text-center space-y-3">
                <i className="fa-solid fa-circle-notch fa-spin text-3xl text-[#405189]" />
                <p className="text-sm font-bold text-slate-600 dark:text-slate-300">
                  Analyzing Job Description & Generating AI Agent Prompt…
                </p>
              </div>
            ) : activeTab === 'jd' ? (
              /* Tab B: Reused Job Description Details */
              <div className="space-y-4 text-xs">
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                  {[
                    ['Job Title', job.title],
                    ['Job ID', `JD #${job.id}`],
                    ['Client / Division', job.client_name || 'Internal Job'],
                    ['Department', job.department || '—'],
                    ['Experience Band', job.experience_band || '—'],
                    ['Location', job.location || '—'],
                    ['Notice Period', job.notice_period || '—'],
                    ['Shift / Working Days', job.shift || job.working_days || 'Standard'],
                  ].map(([label, val]) => (
                    <div key={label} className="border border-slate-200 dark:border-slate-800 p-3">
                      <p className="text-[9px] uppercase font-bold text-slate-400">{label}</p>
                      <p className="text-xs font-extrabold text-slate-800 dark:text-slate-200 mt-0.5 truncate">{val}</p>
                    </div>
                  ))}
                </div>

                <div>
                  <p className="text-[10px] uppercase font-extrabold text-[#405189] dark:text-indigo-400 mb-1">
                    Required Skills (Must Have)
                  </p>
                  <p className="text-xs font-bold text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-2.5 border border-slate-200 dark:border-slate-700">
                    {job.must_have_skills || '—'}
                  </p>
                </div>

                {job.good_to_have_skills && (
                  <div>
                    <p className="text-[10px] uppercase font-extrabold text-slate-500 mb-1">Preferred Skills (Good to Have)</p>
                    <p className="text-xs text-slate-600 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-2.5 border border-slate-200 dark:border-slate-700">
                      {job.good_to_have_skills}
                    </p>
                  </div>
                )}

                {job.questions && job.questions.length > 0 && (
                  <div>
                    <p className="text-[10px] uppercase font-extrabold text-slate-500 mb-1">Screening Questions ({job.questions.length})</p>
                    <ul className="list-disc pl-5 space-y-1 text-xs text-slate-700 dark:text-slate-300">
                      {job.questions.map((q, i) => (
                        <li key={i}>{typeof q === 'string' ? q : q.question || JSON.stringify(q)}</li>
                      ))}
                    </ul>
                  </div>
                )}

                <div>
                  <p className="text-[10px] uppercase font-extrabold text-slate-500 mb-1">Job Description & Responsibilities</p>
                  <p className="text-xs text-slate-700 dark:text-slate-300 whitespace-pre-line border border-slate-200 dark:border-slate-800 p-3 bg-white dark:bg-slate-900">
                    {job.work_details || '—'}
                  </p>
                </div>
              </div>
            ) : (
              /* Tab A: AI Agent Configuration & Prompt Editor */
              <div className="space-y-5">
                {/* Existing Agent Banner & Options */}
                {existingAgent && (
                  <div className="border border-emerald-200 dark:border-emerald-900/50 bg-emerald-50/70 dark:bg-emerald-950/30 p-4 flex flex-wrap items-center justify-between gap-3">
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="text-[10px] uppercase font-black bg-emerald-600 text-white px-2 py-0.5">
                          Existing Agent Found
                        </span>
                        <span className="text-xs font-extrabold text-slate-800 dark:text-slate-200">
                          {existingAgent.name}
                        </span>
                      </div>
                      <p className="text-xs text-slate-600 dark:text-slate-400 mt-1">
                        Agent ID: <code className="font-mono text-emerald-700 dark:text-emerald-300 font-bold">{existingAgent.id}</code> · Persona:{' '}
                        <strong>{existingAgent.voice_persona || 'NEHA'}</strong> ({existingAgent.language || 'ENGLISH'})
                      </p>
                    </div>

                    <div className="flex items-center gap-2 flex-wrap">
                      <button
                        type="button"
                        onClick={() => {
                          setMode('view');
                          populateFormFromAgent(existingAgent);
                        }}
                        className={`px-3 py-1.5 text-xs font-bold transition cursor-pointer border ${
                          mode === 'view'
                            ? 'bg-emerald-600 text-white border-emerald-600'
                            : 'bg-white text-emerald-700 border-emerald-300 hover:bg-emerald-100'
                        }`}
                      >
                        View Agent
                      </button>
                      <button
                        type="button"
                        onClick={() => {
                          setMode('edit');
                          populateFormFromAgent(existingAgent);
                        }}
                        className={`px-3 py-1.5 text-xs font-bold transition cursor-pointer border ${
                          mode === 'edit'
                            ? 'bg-[#405189] text-white border-[#405189]'
                            : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-100'
                        }`}
                      >
                        Edit Agent
                      </button>
                      <button
                        type="button"
                        onClick={generatePromptFromJD}
                        className="px-3 py-1.5 text-xs font-bold bg-white text-indigo-700 border border-indigo-300 hover:bg-indigo-50 transition cursor-pointer flex items-center gap-1"
                      >
                        <i className="fa-solid fa-wand-magic-sparkles text-[11px]" /> Regenerate Prompt
                      </button>
                      <button
                        type="button"
                        onClick={() => {
                          setMode('create');
                          generatePromptFromJD();
                        }}
                        className="px-3 py-1.5 text-xs font-bold bg-[#405189] text-white border border-[#405189] hover:bg-[#334267] transition cursor-pointer"
                      >
                        Recreate Agent
                      </button>
                    </div>
                  </div>
                )}

                {/* Form Controls */}
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs">
                  <div>
                    <label className="block text-[10px] uppercase font-extrabold text-slate-500 mb-1">
                      Agent Name <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="text"
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                      disabled={mode === 'view'}
                      placeholder="e.g. AI Agent - Senior Developer"
                      className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 font-bold focus:outline-none focus:border-[#405189] disabled:opacity-60"
                    />
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-extrabold text-slate-500 mb-1">
                      Voice Persona <span className="text-emerald-600 font-bold">(Neha Pre-Selected)</span>
                    </label>
                    <select
                      value={voicePersona}
                      onChange={(e) => {
                        setVoicePersona(e.target.value);
                        if (e.target.value === 'NEHA') setPersonaName('Neha');
                      }}
                      disabled={mode === 'view'}
                      className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 font-bold focus:outline-none focus:border-[#405189] disabled:opacity-60"
                    >
                      {VOICE_PERSONAS.map((vp) => (
                        <option key={vp} value={vp}>
                          {vp === 'NEHA' ? 'Neha Voice (Default Pre-Selected)' : `${vp} Voice`}
                        </option>
                      ))}
                    </select>
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-extrabold text-slate-500 mb-1">Language</label>
                    <select
                      value={language}
                      onChange={(e) => setLanguage(e.target.value)}
                      disabled={mode === 'view'}
                      className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 font-bold focus:outline-none focus:border-[#405189] disabled:opacity-60"
                    >
                      {LANGUAGES.map((lang) => (
                        <option key={lang} value={lang}>
                          {lang}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>

                <div>
                  <div className="flex items-center justify-between mb-1">
                    <label className="text-[10px] uppercase font-extrabold text-[#405189] dark:text-indigo-400">
                      AI Agent System Prompt (Dynamically Generated from JD) <span className="text-red-500">*</span>
                    </label>
                    {mode !== 'view' && (
                      <button
                        type="button"
                        onClick={generatePromptFromJD}
                        className="text-[11px] text-indigo-600 font-bold hover:underline flex items-center gap-1 cursor-pointer"
                      >
                        <i className="fa-solid fa-arrows-rotate text-[10px]" /> Reset Prompt from JD
                      </button>
                    )}
                  </div>
                  <textarea
                    rows={8}
                    value={agentPrompt}
                    onChange={(e) => setAgentPrompt(e.target.value)}
                    disabled={mode === 'view'}
                    placeholder="Enter the AI screening conversation prompt..."
                    className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 font-mono text-xs focus:outline-none focus:border-[#405189] leading-relaxed disabled:opacity-75"
                  />
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-[10px] uppercase font-extrabold text-slate-500 mb-1">Agent Objective</label>
                    <textarea
                      rows={3}
                      value={objective}
                      onChange={(e) => setObjective(e.target.value)}
                      disabled={mode === 'view'}
                      className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 text-xs focus:outline-none focus:border-[#405189] disabled:opacity-75"
                    />
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-extrabold text-slate-500 mb-1">Opening Greeting / Introduction</label>
                    <textarea
                      rows={3}
                      value={introduction}
                      onChange={(e) => setIntroduction(e.target.value)}
                      disabled={mode === 'view'}
                      className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 text-xs focus:outline-none focus:border-[#405189] disabled:opacity-75"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-[10px] uppercase font-extrabold text-slate-500 mb-1">
                    Result Schema (JSON Configuration)
                  </label>
                  <textarea
                    rows={4}
                    value={resultSchemaStr}
                    onChange={(e) => setResultSchemaStr(e.target.value)}
                    disabled={mode === 'view'}
                    className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 font-mono text-xs focus:outline-none focus:border-[#405189] disabled:opacity-75"
                  />
                </div>
              </div>
            )}
          </div>

          {/* Footer Actions */}
          <div className="flex items-center justify-between px-6 py-4 bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-800 shrink-0">
            <button
              onClick={onClose}
              className="px-4 py-2 text-xs font-bold text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800 transition cursor-pointer"
            >
              Close
            </button>

            {activeTab === 'agent' && mode !== 'view' && (
              <button
                onClick={handleCreateOrUpdate}
                disabled={saving}
                className="px-6 py-2 text-xs font-bold bg-[#0ab39c] hover:bg-[#099885] text-white shadow-md transition cursor-pointer flex items-center gap-2 disabled:opacity-50"
              >
                {saving ? (
                  <>
                    <i className="fa-solid fa-spinner fa-spin" /> Saving Agent…
                  </>
                ) : mode === 'edit' ? (
                  <>
                    <i className="fa-solid fa-pen-to-square" /> Update Hunar AI Agent
                  </>
                ) : (
                  <>
                    <i className="fa-solid fa-plus-circle" /> Create Hunar AI Agent
                  </>
                )}
              </button>
            )}
          </div>
        </motion.div>
      </div>
    </AnimatePresence>
  );
}