import { useState, useEffect } from 'react';
import api from '../lib/api';
import {
  Building2,
  Save,
  Mail,
  Phone,
  FileText,
  Trash2,
  Edit2,
  Eye,
  X,
  Globe,
  Sparkles,
  UserCheck,
  Volume2,
  ShieldCheck,
  PhoneForwarded,
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

interface TransferNumber {
  department: string;
  phoneNumber: string;
}

interface CompanyRecord {
  _id: string;
  tenantName: string;
  companyName: string;
  notificationEmail: string;
  twilioPhoneNumber?: string;
  agentName?: string;
  language?: string;
  voiceId?: string;
  customGreeting?: string;
  recordingConsentEnabled?: boolean;
  companyDetails: string;
  transferNumbers?: TransferNumber[];
}

interface IndustryTemplate {
  id: string;
  name: string;
  industry: string;
  agentName: string;
  language: string;
  customGreeting: string;
  companyDetails: string;
  transferNumbers: TransferNumber[];
}

const VOICE_OPTIONS = [
  { id: '21m00Tcm4TlvDq8ikWAM', label: 'Rachel (Natural Warm Female - ElevenLabs)' },
  { id: 'EXAVITQu4vr4xnSDxMaL', label: 'Bella (Professional Receptionist - ElevenLabs)' },
  { id: 'ErXwobaYiN019PkySvjV', label: 'Antoni (Clear Executive Male - ElevenLabs)' },
  { id: 'TxGEqnHWrfWFTfGW9XjX', label: 'Josh (Conversational Male - ElevenLabs)' },
];

const LANGUAGE_OPTIONS = [
  { code: 'en-US', label: 'English (US)' },
  { code: 'en-GB', label: 'English (UK)' },
  { code: 'de-DE', label: 'Deutsch (DE / DACH)' },
  { code: 'fr-FR', label: 'Français (FR)' },
  { code: 'es-ES', label: 'Español (ES)' },
  { code: 'nl-NL', label: 'Nederlands (NL)' },
  { code: 'it-IT', label: 'Italiano (IT)' },
];

const CompanyRegistration = () => {
  const [companies, setCompanies] = useState<CompanyRecord[]>([]);
  const [templates, setTemplates] = useState<IndustryTemplate[]>([]);
  const [websiteUrlInput, setWebsiteUrlInput] = useState('');
  const [generatingFromUrl, setGeneratingFromUrl] = useState(false);
  const [showForwardingGuide, setShowForwardingGuide] = useState(false);

  const [formData, setFormData] = useState({
    tenantName: 'admin@example.com',
    companyName: '',
    notificationEmail: '',
    twilioPhoneNumber: '',
    agentName: 'Sarah',
    language: 'en-US',
    voiceId: '21m00Tcm4TlvDq8ikWAM',
    customGreeting: '',
    recordingConsentEnabled: true,
    companyDetails: '',
    transferNumbers: [] as TransferNumber[],
  });

  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState('');
  const [knowledgeFile, setKnowledgeFile] = useState<File | null>(null);
  const [editCompanyId, setEditCompanyId] = useState<string | null>(null);
  const [viewCompany, setViewCompany] = useState<CompanyRecord | null>(null);

  const fetchCompanies = async () => {
    try {
      const res = await api.get<CompanyRecord[]>('/company');
      setCompanies(res.data);
    } catch (err) {
      console.error('Failed to fetch companies', err);
    }
  };

  useEffect(() => {
    let active = true;
    Promise.all([
      api.get<CompanyRecord[]>('/company'),
      api.get<IndustryTemplate[]>('/company/templates').catch(() => ({ data: [] })),
    ])
      .then(([compRes, tmplRes]) => {
        if (!active) return;
        setCompanies(compRes.data);
        setTemplates(tmplRes.data);
      })
      .catch((err) => console.error('Failed to initialize agent builder', err));

    return () => {
      active = false;
    };
  }, []);

  const handleGenerateFromUrl = async () => {
    if (!websiteUrlInput.trim()) return;
    setGeneratingFromUrl(true);
    setMessage('');
    try {
      const res = await api.post<{
        companyName: string;
        agentName: string;
        language: string;
        customGreeting: string;
        companyDetails: string;
        transferNumbers: TransferNumber[];
      }>('/company/generate-from-url', { url: websiteUrlInput.trim() });

      const draft = res.data;
      setFormData((prev) => ({
        ...prev,
        companyName: draft.companyName || prev.companyName,
        agentName: draft.agentName || prev.agentName,
        language: draft.language || prev.language,
        customGreeting: draft.customGreeting || prev.customGreeting,
        companyDetails: draft.companyDetails || prev.companyDetails,
        transferNumbers:
          draft.transferNumbers && draft.transferNumbers.length > 0
            ? draft.transferNumbers
            : prev.transferNumbers,
      }));
      setMessage('Successfully generated AI Agent configuration from website URL! Review and click Save below.');
    } catch (err: unknown) {
      const apiErr = err as { response?: { data?: { error?: string } } };
      setMessage(
        apiErr?.response?.data?.error || 'Could not crawl URL. Check the URL format or SSRF policy.'
      );
    } finally {
      setGeneratingFromUrl(false);
    }
  };

  const applyTemplate = (tmpl: IndustryTemplate) => {
    setFormData((prev) => ({
      ...prev,
      companyName: prev.companyName || tmpl.name,
      agentName: tmpl.agentName,
      language: tmpl.language,
      customGreeting: tmpl.customGreeting,
      companyDetails: tmpl.companyDetails,
      transferNumbers: tmpl.transferNumbers,
    }));
    setMessage(`Applied "${tmpl.name}" template! Customize any details below and click Save.`);
  };

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleTransferChange = (
    index: number,
    field: 'department' | 'phoneNumber',
    value: string
  ) => {
    const updated = [...formData.transferNumbers];
    updated[index][field] = value;
    setFormData({ ...formData, transferNumbers: updated });
  };

  const addTransferNumber = () => {
    setFormData({
      ...formData,
      transferNumbers: [...formData.transferNumbers, { department: '', phoneNumber: '' }],
    });
  };

  const removeTransferNumber = (index: number) => {
    const updated = [...formData.transferNumbers];
    updated.splice(index, 1);
    setFormData({ ...formData, transferNumbers: updated });
  };

  const editCompany = (company: CompanyRecord) => {
    setEditCompanyId(company._id);
    setFormData({
      tenantName: company.tenantName,
      companyName: company.companyName,
      notificationEmail: company.notificationEmail,
      twilioPhoneNumber: company.twilioPhoneNumber || '',
      agentName: company.agentName || 'Sarah',
      language: company.language || 'en-US',
      voiceId: company.voiceId || '21m00Tcm4TlvDq8ikWAM',
      customGreeting: company.customGreeting || '',
      recordingConsentEnabled: company.recordingConsentEnabled ?? true,
      companyDetails: company.companyDetails,
      transferNumbers: company.transferNumbers || [],
    });
    setKnowledgeFile(null);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const deleteCompany = async (id: string) => {
    if (!confirm('Are you sure you want to delete this company and its agent configuration?')) return;
    try {
      await api.delete(`/company/${id}`);
      fetchCompanies();
    } catch (err) {
      console.error('Failed to delete company', err);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    setMessage('');

    try {
      const formDataToSend = new FormData();
      formDataToSend.append('tenantName', formData.tenantName);
      formDataToSend.append('companyName', formData.companyName);
      formDataToSend.append('notificationEmail', formData.notificationEmail);
      formDataToSend.append('twilioPhoneNumber', formData.twilioPhoneNumber);
      formDataToSend.append('agentName', formData.agentName);
      formDataToSend.append('language', formData.language);
      formDataToSend.append('voiceId', formData.voiceId);
      formDataToSend.append('customGreeting', formData.customGreeting);
      formDataToSend.append('companyDetails', formData.companyDetails);
      formDataToSend.append('transferNumbers', JSON.stringify(formData.transferNumbers));

      if (knowledgeFile) {
        formDataToSend.append('knowledgeFile', knowledgeFile);
      }

      if (editCompanyId) {
        await api.put(`/company/${editCompanyId}`, formDataToSend);
        setMessage('Company & AI Agent updated successfully!');
      } else {
        await api.post('/company', formDataToSend);
        setMessage('Company & AI Agent registered successfully!');
      }

      fetchCompanies();
      setFormData({
        tenantName: 'admin@example.com',
        companyName: '',
        notificationEmail: '',
        twilioPhoneNumber: '',
        agentName: 'Sarah',
        language: 'en-US',
        voiceId: '21m00Tcm4TlvDq8ikWAM',
        customGreeting: '',
        recordingConsentEnabled: true,
        companyDetails: '',
        transferNumbers: [],
      });
      setKnowledgeFile(null);
      setEditCompanyId(null);
    } catch {
      setMessage('Error saving company.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="space-y-8 max-w-6xl pb-12"
    >
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold text-white flex items-center gap-2">
            <Building2 className="w-6 h-6 text-indigo-400" />
            AI Phone Agent Builder & Companies
          </h2>
          <p className="text-slate-400 mt-1 text-sm">
            Auto-generate an AI receptionist from your website URL, pick an industry template, or customize every detail.
          </p>
        </div>
        <button
          type="button"
          onClick={() => setShowForwardingGuide(true)}
          className="flex items-center gap-2 px-4 py-2.5 bg-indigo-500/10 hover:bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 rounded-xl text-sm font-medium transition-colors"
        >
          <PhoneForwarded className="w-4 h-4" />
          Connect Your Own Number / SIP Guide
        </button>
      </div>

      {/* Magic Website-to-Agent Generator + Industry Templates */}
      <div className="bg-gradient-to-br from-indigo-950/40 via-slate-900/80 to-purple-950/30 border border-indigo-500/30 rounded-2xl p-6 shadow-xl space-y-5">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <span className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-indigo-400 bg-indigo-500/10 px-2.5 py-1 rounded-full border border-indigo-500/20">
              <Sparkles className="w-3.5 h-3.5" /> Magic Setup (2-Minute Onboarding)
            </span>
            <h3 className="text-lg font-bold text-white mt-2">
              Generate AI Phone Assistant from Website URL
            </h3>
            <p className="text-xs text-slate-400">
              Enter your company website URL — our SSRF-guarded crawler extracts services, hours, and FAQs automatically.
            </p>
          </div>
          <div className="flex gap-2 w-full md:w-[440px]">
            <div className="relative flex-1">
              <Globe className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
              <input
                type="url"
                value={websiteUrlInput}
                onChange={(e) => setWebsiteUrlInput(e.target.value)}
                placeholder="https://yourbusiness.com"
                className="w-full bg-slate-950/80 border border-white/15 rounded-xl pl-10 pr-3 py-2.5 text-sm text-white placeholder:text-slate-500 focus:ring-2 focus:ring-indigo-500 outline-none"
              />
            </div>
            <button
              type="button"
              onClick={handleGenerateFromUrl}
              disabled={generatingFromUrl || !websiteUrlInput.trim()}
              className="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm font-medium rounded-xl flex items-center gap-2 whitespace-nowrap transition-colors"
            >
              <Sparkles className="w-4 h-4" />
              {generatingFromUrl ? 'Analyzing...' : 'Auto-Generate'}
            </button>
          </div>
        </div>

        {/* Industry Templates Bar */}
        {templates.length > 0 && (
          <div className="pt-4 border-t border-white/10">
            <p className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3">
              Or start from a pre-trained Industry Template:
            </p>
            <div className="flex flex-wrap gap-2">
              {templates.map((tmpl) => (
                <button
                  key={tmpl.id}
                  type="button"
                  onClick={() => applyTemplate(tmpl)}
                  className="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-indigo-500/20 border border-white/10 hover:border-indigo-500/40 text-xs font-medium text-slate-200 transition-all"
                >
                  {tmpl.name}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Main Agent & Company Builder Form */}
      <div className="bg-slate-900/70 backdrop-blur-xl rounded-2xl shadow-xl border border-white/10 p-8">
        <h3 className="text-lg font-semibold text-white mb-6">
          {editCompanyId ? 'Edit Company & AI Agent Persona' : 'Configure Company & AI Agent Persona'}
        </h3>

        {message && (
          <div
            className={`p-4 mb-6 rounded-xl text-sm font-medium ${
              message.includes('successfully') || message.includes('Applied') || message.includes('Successfully')
                ? 'bg-emerald-500/10 text-emerald-300 border border-emerald-500/30'
                : 'bg-rose-500/10 text-rose-300 border border-rose-500/30'
            }`}
          >
            {message}
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">Company Name</label>
              <input
                required
                type="text"
                name="companyName"
                value={formData.companyName}
                onChange={handleChange}
                className="w-full bg-slate-950/60 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-indigo-500 outline-none"
                placeholder="e.g. Churchill Tax Advisory"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">
                Notification Email (Post-Call Summaries)
              </label>
              <div className="relative">
                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <input
                  required
                  type="email"
                  name="notificationEmail"
                  value={formData.notificationEmail}
                  onChange={handleChange}
                  className="w-full bg-slate-950/60 border border-white/10 rounded-xl pl-11 pr-4 py-3 text-white focus:ring-2 focus:ring-indigo-500 outline-none"
                  placeholder="reception@company.com"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">
                Dedicated Twilio / Inbound Phone Number
              </label>
              <div className="relative">
                <Phone className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <input
                  required
                  type="text"
                  name="twilioPhoneNumber"
                  value={formData.twilioPhoneNumber}
                  onChange={handleChange}
                  className="w-full bg-slate-950/60 border border-white/10 rounded-xl pl-11 pr-4 py-3 text-white focus:ring-2 focus:ring-indigo-500 outline-none"
                  placeholder="+15706308358"
                />
              </div>
            </div>
          </div>

          {/* Agent Persona, Voice & Language Row */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-2">
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">
                AI Receptionist Name
              </label>
              <div className="relative">
                <UserCheck className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <input
                  type="text"
                  name="agentName"
                  value={formData.agentName}
                  onChange={handleChange}
                  className="w-full bg-slate-950/60 border border-white/10 rounded-xl pl-11 pr-4 py-3 text-white focus:ring-2 focus:ring-indigo-500 outline-none"
                  placeholder="Sarah"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">
                Call Language & Locale
              </label>
              <select
                name="language"
                value={formData.language}
                onChange={handleChange}
                className="w-full bg-slate-950/60 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-indigo-500 outline-none"
              >
                {LANGUAGE_OPTIONS.map((lang) => (
                  <option key={lang.code} value={lang.code} className="bg-slate-900">
                    {lang.label}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">
                Neural Voice Persona (Auto-Failover Enabled)
              </label>
              <div className="relative">
                <Volume2 className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <select
                  name="voiceId"
                  value={formData.voiceId}
                  onChange={handleChange}
                  className="w-full bg-slate-950/60 border border-white/10 rounded-xl pl-11 pr-4 py-3 text-white focus:ring-2 focus:ring-indigo-500 outline-none"
                >
                  {VOICE_OPTIONS.map((v) => (
                    <option key={v.id} value={v.id} className="bg-slate-900">
                      {v.label}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-300 mb-2">
              Custom Welcome Greeting (Spoken after 350ms natural pickup pause)
            </label>
            <input
              type="text"
              name="customGreeting"
              value={formData.customGreeting}
              onChange={handleChange}
              className="w-full bg-slate-950/60 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-indigo-500 outline-none"
              placeholder="Hello! Thank you for calling [Company]. My name is Sarah, how may I help you today?"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-300 mb-2">
              Company Knowledge, Services, Opening Hours & Domain Rules (Strict Guardrail Context)
            </label>
            <div className="relative">
              <FileText className="absolute left-4 top-4 w-4 h-4 text-slate-400" />
              <textarea
                required
                name="companyDetails"
                value={formData.companyDetails}
                onChange={handleChange}
                rows={6}
                className="w-full bg-slate-950/60 border border-white/10 rounded-xl pl-11 pr-4 py-3 text-white focus:ring-2 focus:ring-indigo-500 outline-none"
                placeholder="Enter services, pricing, opening hours, FAQs, and specific instructions..."
              />
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">
                Upload Supplementary Knowledge Document (PDF / TXT)
              </label>
              <div className="border-2 border-dashed border-white/15 rounded-xl p-5 text-center hover:border-indigo-500 transition-colors relative cursor-pointer">
                <input
                  type="file"
                  accept=".txt,.pdf"
                  onChange={(e) => setKnowledgeFile(e.target.files ? e.target.files[0] : null)}
                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                />
                <div className="flex flex-col items-center justify-center pointer-events-none">
                  <FileText className="w-6 h-6 text-indigo-400 mb-1.5" />
                  <p className="text-sm font-medium text-slate-200">
                    {knowledgeFile ? knowledgeFile.name : 'Click or drag file to upload (PDF, TXT)'}
                  </p>
                  <p className="text-xs text-slate-500 mt-1">
                    Automatically chunked and embedded into Vector RAG memory.
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white/[0.02] border border-white/10 rounded-xl p-5 flex flex-col justify-between">
              <div className="flex items-start gap-3">
                <ShieldCheck className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />
                <div>
                  <h4 className="text-sm font-semibold text-white">
                    GDPR & AI Act Compliance Posture
                  </h4>
                  <p className="text-xs text-slate-400 mt-1">
                    Domain-locked responses prevent out-of-scope hallucinations. PII is redacted in logs, and callers are informed of AI assistance.
                  </p>
                </div>
              </div>
              <label className="flex items-center gap-3 mt-4 cursor-pointer">
                <input
                  type="checkbox"
                  checked={formData.recordingConsentEnabled}
                  onChange={(e) =>
                    setFormData({ ...formData, recordingConsentEnabled: e.target.checked })
                  }
                  className="w-4 h-4 rounded accent-indigo-500"
                />
                <span className="text-xs text-slate-300">
                  Enable Call Transcript & Recording Consent Notice
                </span>
              </label>
            </div>
          </div>

          <div>
            <div className="flex justify-between items-center mb-2">
              <label className="block text-sm font-medium text-slate-300">
                Live Call Transfer / Escalation Departments (Warm/Cold Forwarding)
              </label>
              <button
                type="button"
                onClick={addTransferNumber}
                className="text-sm text-indigo-400 hover:text-indigo-300 font-medium"
              >
                + Add Department Number
              </button>
            </div>

            <div className="space-y-3">
              {formData.transferNumbers.map((transfer, index) => (
                <div key={index} className="flex gap-4 items-center">
                  <input
                    type="text"
                    placeholder="Department (e.g. Urgent Support / Sales)"
                    value={transfer.department}
                    onChange={(e) => handleTransferChange(index, 'department', e.target.value)}
                    className="flex-1 bg-slate-950/60 border border-white/10 rounded-xl px-4 py-2.5 text-white focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                  />
                  <input
                    type="text"
                    placeholder="Phone Number (+1...)"
                    value={transfer.phoneNumber}
                    onChange={(e) => handleTransferChange(index, 'phoneNumber', e.target.value)}
                    className="flex-1 bg-slate-950/60 border border-white/10 rounded-xl px-4 py-2.5 text-white focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                  />
                  <button
                    type="button"
                    onClick={() => removeTransferNumber(index)}
                    className="text-rose-400 hover:text-rose-300 p-2 rounded-lg hover:bg-rose-500/10"
                  >
                    ×
                  </button>
                </div>
              ))}
              {formData.transferNumbers.length === 0 && (
                <div className="text-xs text-slate-400 p-4 border border-dashed border-white/10 rounded-xl text-center">
                  No forwarding numbers added. Add department numbers if you want the AI to transfer callers on request.
                </div>
              )}
            </div>
          </div>

          <div className="flex justify-end gap-3">
            {editCompanyId && (
              <button
                type="button"
                onClick={() => {
                  setEditCompanyId(null);
                  setFormData({
                    tenantName: 'admin@example.com',
                    companyName: '',
                    notificationEmail: '',
                    twilioPhoneNumber: '',
                    agentName: 'Sarah',
                    language: 'en-US',
                    voiceId: '21m00Tcm4TlvDq8ikWAM',
                    customGreeting: '',
                    recordingConsentEnabled: true,
                    companyDetails: '',
                    transferNumbers: [],
                  });
                }}
                className="px-6 py-3 bg-white/5 hover:bg-white/10 text-slate-200 font-medium rounded-xl transition-colors"
              >
                Cancel Edit
              </button>
            )}
            <button
              type="submit"
              disabled={saving}
              className="flex items-center px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-xl transition-colors disabled:opacity-50"
            >
              <Save className="w-5 h-5 mr-2" />
              {saving ? 'Saving...' : editCompanyId ? 'Update Company & Agent' : 'Save Company & Agent'}
            </button>
          </div>
        </form>
      </div>

      {/* Registered Companies Table */}
      <div className="bg-slate-900/60 rounded-2xl p-8 border border-white/10">
        <h3 className="text-lg font-semibold text-white mb-6">Configured Companies & AI Agents</h3>
        {companies.length === 0 ? (
          <p className="text-slate-400 text-sm">No companies registered yet.</p>
        ) : (
          <div className="overflow-x-auto rounded-xl border border-white/10 bg-slate-950/40">
            <table className="w-full text-left text-sm text-slate-300">
              <thead className="bg-white/5 text-xs uppercase text-slate-400 border-b border-white/10">
                <tr>
                  <th className="px-6 py-4 font-semibold">Company & Agent</th>
                  <th className="px-6 py-4 font-semibold">Contact & Phone Line</th>
                  <th className="px-6 py-4 font-semibold">Transfer Departments</th>
                  <th className="px-6 py-4 font-semibold text-right">Actions</th>
                </tr>
              </thead>
              <tbody>
                {companies.map((company) => (
                  <tr
                    key={company._id}
                    className="border-b border-white/5 hover:bg-white/[0.02] transition-colors"
                  >
                    <td className="px-6 py-4">
                      <div className="font-semibold text-white">{company.companyName}</div>
                      <div className="text-xs text-indigo-400 mt-1">
                        Agent: {company.agentName || 'Sarah'} ({company.language || 'en-US'})
                      </div>
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex items-center gap-2 mb-1 text-xs">
                        <Mail className="w-3.5 h-3.5 text-slate-400" /> {company.notificationEmail}
                      </div>
                      <div className="flex items-center gap-2 text-xs font-mono">
                        <Phone className="w-3.5 h-3.5 text-emerald-400" />{' '}
                        {company.twilioPhoneNumber || 'Not Assigned'}
                      </div>
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex flex-wrap gap-1.5">
                        {company.transferNumbers && company.transferNumbers.length > 0 ? (
                          company.transferNumbers.map((t, i) => (
                            <span
                              key={i}
                              className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-indigo-500/10 text-indigo-300 border border-indigo-500/20"
                            >
                              {t.department}
                            </span>
                          ))
                        ) : (
                          <span className="text-xs text-slate-500">None</span>
                        )}
                      </div>
                    </td>
                    <td className="px-6 py-4 text-right">
                      <div className="flex justify-end items-center gap-2">
                        <button
                          onClick={() => setViewCompany(company)}
                          className="p-2 text-sky-400 hover:bg-sky-500/10 rounded-lg transition-colors"
                          title="View Details"
                        >
                          <Eye className="w-4 h-4" />
                        </button>
                        <button
                          onClick={() => editCompany(company)}
                          className="p-2 text-indigo-400 hover:bg-indigo-500/10 rounded-lg transition-colors"
                          title="Edit"
                        >
                          <Edit2 className="w-4 h-4" />
                        </button>
                        <button
                          onClick={() => deleteCompany(company._id)}
                          className="p-2 text-rose-400 hover:bg-rose-500/10 rounded-lg transition-colors"
                          title="Delete"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* BYO Phone Number & SIP Call Forwarding Guide Modal */}
      <AnimatePresence>
        {showForwardingGuide && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
          >
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="bg-slate-900 rounded-2xl shadow-2xl border border-white/10 p-6 max-w-2xl w-full space-y-5"
            >
              <div className="flex justify-between items-center border-b border-white/10 pb-4">
                <h3 className="text-lg font-bold text-white flex items-center gap-2">
                  <PhoneForwarded className="w-5 h-5 text-indigo-400" />
                  Connect Your Phone Number or Existing PBX (Call Forwarding & SIP)
                </h3>
                <button
                  onClick={() => setShowForwardingGuide(false)}
                  className="text-slate-400 hover:text-white"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>

              <div className="space-y-4 text-sm text-slate-300">
                <div className="p-4 rounded-xl bg-white/5 border border-white/10">
                  <h4 className="font-semibold text-white mb-1">
                    Option 1: Keep Your Existing Business Number (Call Forwarding)
                  </h4>
                  <p className="text-xs text-slate-400 mb-2">
                    Forward unanswered calls or all calls from your current carrier (AT&T, Verizon, Vodafone, Telekom, O2, BT) to your assigned AI number:
                  </p>
                  <ul className="text-xs space-y-1 font-mono bg-slate-950 p-3 rounded-lg border border-white/5 text-indigo-300">
                    <li>• Forward All Calls (Unconditional): Dial *21*+15706308358#</li>
                    <li>• Forward When Busy: Dial *67*+15706308358#</li>
                    <li>• Forward When Unanswered (15s): Dial *61*+15706308358#</li>
                    <li>• Disable Call Forwarding: Dial ##002#</li>
                  </ul>
                </div>

                <div className="p-4 rounded-xl bg-white/5 border border-white/10">
                  <h4 className="font-semibold text-white mb-1">
                    Option 2: Direct Twilio Webhook / SIP Trunking
                  </h4>
                  <p className="text-xs text-slate-400">
                    In your Twilio Console under <strong>Phone Numbers → Active Numbers</strong>, set the <strong>A Call Comes In</strong> webhook to:
                  </p>
                  <code className="block mt-2 p-2.5 rounded-lg bg-slate-950 text-emerald-400 text-xs font-mono border border-white/5">
                    POST https://your-public-domain/twilio/inbound-call
                  </code>
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* View Company Modal */}
      <AnimatePresence>
        {viewCompany && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
          >
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="bg-slate-900 rounded-2xl shadow-xl border border-white/10 p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto"
            >
              <div className="flex justify-between items-center mb-6 border-b border-white/10 pb-4">
                <h3 className="text-xl font-bold text-white flex items-center gap-3">
                  <Building2 className="text-indigo-400" />
                  {viewCompany.companyName}
                </h3>
                <button
                  onClick={() => setViewCompany(null)}
                  className="text-slate-400 hover:text-white transition-colors"
                >
                  <X className="w-6 h-6" />
                </button>
              </div>

              <div className="space-y-6">
                <div>
                  <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">
                    Company Specifications & Domain Knowledge
                  </h4>
                  <div className="bg-slate-950 p-4 rounded-xl border border-white/10 whitespace-pre-wrap text-sm text-slate-300">
                    {viewCompany.companyDetails}
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div className="bg-slate-950 p-4 rounded-xl border border-white/10">
                    <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">
                      Contact Email
                    </h4>
                    <p className="text-sm text-white font-medium">
                      {viewCompany.notificationEmail}
                    </p>
                  </div>
                  <div className="bg-slate-950 p-4 rounded-xl border border-white/10">
                    <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">
                      Twilio Number
                    </h4>
                    <p className="text-sm text-white font-medium">
                      {viewCompany.twilioPhoneNumber || 'Not Configured'}
                    </p>
                  </div>
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
};

export default CompanyRegistration;