'use client';

import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { X, Save, Plus, Trash2, ChevronDown, ChevronRight, Pencil, Check, Play, Square, RefreshCw } from 'lucide-react';
import { toast } from 'sonner';
import { createAgent, updateAgent, getProviders, syncOpenRouterModels, previewVoice } from '@client/api/ai-agents';
import type { AiAgent, LlmProvider, VoiceProvider } from '@client/api/ai-agents';
import AgentPreview from './AgentPreview';
import { useLanguage } from '@client/contexts/LanguageContext';

interface FallbackRule {
  id: string;
  trigger: string;
  action: string;
  priority: 'high' | 'medium' | 'low';
}

interface Props {
  agent: AiAgent | null;
  onClose: () => void;
  onSaved: (agent: AiAgent, isNew: boolean) => void;
}

const CAPABILITY_OPTIONS = [
  { key: 'order_taking', label: 'Order Taking' },
  { key: 'reservation_booking', label: 'Reservation Booking' },
  { key: 'escalation', label: 'Escalation to Human' },
];

const PRIORITY_CLASS: Record<string, string> = {
  high: 'badge-danger',
  medium: 'badge-warning',
  low: 'badge-neutral',
};

export default function AgentDrawer({ agent, onClose, onSaved }: Props) {
  const { t } = useLanguage();
  const isEditing = !!agent?.id;

  const CAPABILITY_OPTIONS = [
    { key: 'order_taking', label: t('aiAgentConfig.capabilities.order_taking', 'Order Taking') },
    { key: 'reservation_booking', label: t('aiAgentConfig.capabilities.reservation_booking', 'Reservation Booking') },
    { key: 'escalation', label: t('aiAgentConfig.capabilities.escalation', 'Escalation to Human') },
  ];

  const [name, setName] = useState(agent?.name ?? '');
  const [description, setDescription] = useState(agent?.description ?? '');
  const [llmModelId, setLlmModelId] = useState(agent?.llm_model_id ?? '');
  const [voiceModelId, setVoiceModelId] = useState(agent?.voice_model_id ?? '');
  const [voiceLanguageCode, setVoiceLanguageCode] = useState(agent?.voice_language_code ?? 'hi-IN');
  const [realtimeModel, setRealtimeModel] = useState(agent?.realtime_model ?? 'gpt-realtime-1.5');
  const [vadThreshold, setVadThreshold] = useState<number>(agent?.vad_threshold ?? 0.5);
  const [vadPrefixPaddingMs, setVadPrefixPaddingMs] = useState<number>(agent?.vad_prefix_padding_ms ?? 300);
  const [vadSilenceDurationMs, setVadSilenceDurationMs] = useState<number>(agent?.vad_silence_duration_ms ?? 600);
  const [systemPrompt, setSystemPrompt] = useState(agent?.system_prompt ?? '');
  const [greetingScript, setGreetingScript] = useState(agent?.greeting_script ?? '');
  const [closingScript, setClosingScript] = useState(agent?.closing_script ?? '');
  const [isDefault, setIsDefault] = useState(agent?.is_default ?? false);
  const [channelVoice, setChannelVoice] = useState(() => {
    const ch = agent?.channels ?? ['chat', 'voice'];
    return ch.includes('voice');
  });
  const [channelChat, setChannelChat] = useState(() => {
    const ch = agent?.channels ?? ['chat', 'voice'];
    return ch.includes('chat');
  });
  const [capabilities, setCapabilities] = useState<Record<string, boolean>>(() => {
    const caps: Record<string, boolean> = {};
    CAPABILITY_OPTIONS.forEach(c => { caps[c.key] = (agent?.capabilities as Record<string, boolean>)?.[c.key] ?? false; });
    return caps;
  });
  const [fallbackRules, setFallbackRules] = useState<FallbackRule[]>(() =>
    (agent?.fallback_rules ?? []).map((r, i) => ({ id: String(i), trigger: r.trigger, action: r.action, priority: (r.priority as FallbackRule['priority']) || 'medium' }))
  );

  const [llmProviders, setLlmProviders] = useState<LlmProvider[]>([]);
  const [voiceProviders, setVoiceProviders] = useState<VoiceProvider[]>([]);
  const [saving, setSaving] = useState(false);
  const [syncing, setSyncing] = useState(false);
  const [previewing, setPreviewing] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  const [showAddRule, setShowAddRule] = useState(false);
  const [newRule, setNewRule] = useState<{ trigger: string; action: string; priority: FallbackRule['priority'] }>({ trigger: '', action: '', priority: 'medium' });
  const [editingRuleId, setEditingRuleId] = useState<string | null>(null);
  const [editRuleForm, setEditRuleForm] = useState<{ trigger: string; action: string; priority: FallbackRule['priority'] }>({ trigger: '', action: '', priority: 'medium' });
  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set(['identity', 'channels', 'llm', 'voice', 'vad', 'scripts', 'capabilities', 'fallback']));
  const [voiceProviderId, setVoiceProviderId] = useState<string>('');

  const audioRef = useRef<HTMLAudioElement | null>(null);
  const audioBlobUrl = useRef<string | null>(null);

  const toggleSection = (key: string) => {
    setExpandedSections(prev => {
      const n = new Set(prev);
      n.has(key) ? n.delete(key) : n.add(key);
      return n;
    });
  };

  const fetchProviders = useCallback(async () => {
    try {
      const providersRes = await getProviders();
      setLlmProviders(providersRes.providers.llm);
      setVoiceProviders(providersRes.providers.voice);
    } catch (err: unknown) {
      toast.error(t('aiAgentConfig.errors.loadProviders', 'Failed to load providers: ') + (err instanceof Error ? err.message : ''));
    }
  }, [t]);

  useEffect(() => { fetchProviders(); }, [fetchProviders]);

  const filteredVoiceProviders = useMemo(() =>
    voiceProviders.filter(vp => vp.name === 'openai_realtime'),
    [voiceProviders]
  );

  useEffect(() => {
    if (voiceProviders.length > 0) {
      if (voiceModelId) {
        const found = voiceProviders.find(vp => vp.models.some(m => m.id === voiceModelId));
        if (found) setVoiceProviderId(found.id);
      } else if (voiceProviders.length === 1) {
        setVoiceProviderId(voiceProviders[0].id);
      }
    }
  }, [voiceProviders, voiceModelId]);

  useEffect(() => {
    setName(agent?.name ?? '');
    setDescription(agent?.description ?? '');
    setLlmModelId(agent?.llm_model_id ?? '');
    setVoiceModelId(agent?.voice_model_id ?? '');
    setVoiceLanguageCode(agent?.voice_language_code ?? 'hi-IN');
    setRealtimeModel(agent?.realtime_model ?? 'gpt-realtime-1.5');
    setVadThreshold(agent?.vad_threshold ?? 0.5);
    setVadPrefixPaddingMs(agent?.vad_prefix_padding_ms ?? 300);
    setVadSilenceDurationMs(agent?.vad_silence_duration_ms ?? 600);
    setSystemPrompt(agent?.system_prompt ?? '');
    setGreetingScript(agent?.greeting_script ?? '');
    setClosingScript(agent?.closing_script ?? '');
    setIsDefault(agent?.is_default ?? false);
    const ch = agent?.channels ?? ['chat', 'voice'];
    setChannelVoice(ch.includes('voice'));
    setChannelChat(ch.includes('chat'));
    const caps: Record<string, boolean> = {};
    CAPABILITY_OPTIONS.forEach(c => { caps[c.key] = (agent?.capabilities as Record<string, boolean>)?.[c.key] ?? false; });
    setCapabilities(caps);
    setFallbackRules(
      (agent?.fallback_rules ?? []).map((r, i) => ({ id: String(i), trigger: r.trigger, action: r.action, priority: (r.priority as FallbackRule['priority']) || 'medium' }))
    );
    setVoiceProviderId('');
    audioRef.current?.pause();
    if (audioRef.current) audioRef.current.currentTime = 0;
    setIsPlaying(false);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [agent?.id]);

  useEffect(() => {
    return () => {
      if (audioBlobUrl.current) URL.revokeObjectURL(audioBlobUrl.current);
      audioRef.current?.pause();
    };
  }, []);

  const selectedVoiceProvider = useMemo(() =>
    voiceProviders.find(vp => vp.id === voiceProviderId),
    [voiceProviders, voiceProviderId]
  );

  const isOpenAIRealtime = selectedVoiceProvider?.name === 'openai_realtime';

  const handleVoiceProviderChange = (providerId: string) => {
    setVoiceProviderId(providerId);
    setVoiceModelId('');
    stopAudio();
  };

  const stopAudio = () => {
    audioRef.current?.pause();
    if (audioRef.current) audioRef.current.currentTime = 0;
    setIsPlaying(false);
  };

  const handlePlayPreview = async () => {
    if (isPlaying) {
      stopAudio();
      return;
    }
    if (!voiceModelId) {
      toast.error(t('aiAgentConfig.errors.selectVoice', 'Select a voice first'));
      return;
    }
    setPreviewing(true);
    try {
      const previewText = greetingScript.trim() || undefined;
      const arrayBuf = await previewVoice(voiceModelId, previewText, undefined);
      if (audioBlobUrl.current) URL.revokeObjectURL(audioBlobUrl.current);
      const blob = new Blob([arrayBuf], { type: 'audio/wav' });
      const url = URL.createObjectURL(blob);
      audioBlobUrl.current = url;

      const audio = new Audio(url);
      audioRef.current = audio;
      audio.onended = () => setIsPlaying(false);
      audio.onerror = () => { setIsPlaying(false); toast.error(t('aiAgentConfig.errors.playbackFailed', 'Audio playback failed')); };
      await audio.play();
      setIsPlaying(true);
    } catch (err: unknown) {
      toast.error(err instanceof Error ? err.message : t('aiAgentConfig.errors.previewFailed', 'Preview failed'));
    } finally {
      setPreviewing(false);
    }
  };

  const handleSyncModels = async () => {
    setSyncing(true);
    try {
      const result = await syncOpenRouterModels();
      if (result.success) {
        toast.success(t('aiAgentConfig.syncSuccess', 'Synced {{count}} models from OpenRouter', { count: result.upserted }));
        await fetchProviders();
      } else {
        toast.error(result.error || t('aiAgentConfig.errors.syncFailed', 'Sync failed'));
      }
    } catch (err: unknown) {
      toast.error(err instanceof Error ? err.message : t('aiAgentConfig.errors.syncFailed', 'Sync failed'));
    } finally {
      setSyncing(false);
    }
  };

  const handleSave = async () => {
    if (!name.trim()) { toast.error(t('aiAgentConfig.errors.nameRequired', 'Agent name is required')); return; }
    setSaving(true);
    try {
      const channels: string[] = [];
      if (channelVoice) channels.push('voice');
      if (channelChat) channels.push('chat');
      if (channels.length === 0) {
        toast.error(t('aiAgentConfig.errors.channelRequired', 'At least one channel (Voice or Chat) must be enabled'));
        setSaving(false);
        return;
      }
      const payload: Partial<AiAgent> = {
        name: name.trim(),
        description: description.trim() || null,
        channels,
        llm_model_id: llmModelId || null,
        voice_model_id: voiceModelId || null,
        voice_language_code: null,
        realtime_model: isOpenAIRealtime ? (realtimeModel || 'gpt-realtime-1.5') : null,
        vad_threshold: isOpenAIRealtime ? vadThreshold : null,
        vad_prefix_padding_ms: isOpenAIRealtime ? vadPrefixPaddingMs : null,
        vad_silence_duration_ms: isOpenAIRealtime ? vadSilenceDurationMs : null,
        system_prompt: systemPrompt.trim() || null,
        greeting_script: greetingScript.trim() || null,
        closing_script: closingScript.trim() || null,
        is_default: isDefault,
        capabilities,
        fallback_rules: fallbackRules.map(r => ({ trigger: r.trigger, action: r.action, priority: r.priority })),
      };
      let result: { agent: AiAgent };
      if (isEditing) {
        result = await updateAgent(agent!.id, payload);
      } else {
        result = await createAgent(payload);
      }
      onSaved(result.agent, !isEditing);
      toast.success(isEditing ? t('aiAgentConfig.agentUpdated', 'Agent updated') : t('aiAgentConfig.agentCreated', 'Agent created'));
      onClose();
    } catch (err: unknown) {
      toast.error((err instanceof Error ? err.message : t('aiAgentConfig.errors.saveFailed', 'Save failed')));
    } finally {
      setSaving(false);
    }
  };

  const handleAddRule = () => {
    if (!newRule.trigger.trim() || !newRule.action.trim()) return;
    setFallbackRules(prev => [...prev, { id: Date.now().toString(), ...newRule }]);
    setNewRule({ trigger: '', action: '', priority: 'medium' });
    setShowAddRule(false);
  };

  const startEditRule = (rule: FallbackRule) => {
    setEditingRuleId(rule.id);
    setEditRuleForm({ trigger: rule.trigger, action: rule.action, priority: rule.priority });
  };

  const handleUpdateRule = () => {
    if (!editingRuleId || !editRuleForm.trigger.trim() || !editRuleForm.action.trim()) return;
    setFallbackRules(prev => prev.map(r =>
      r.id === editingRuleId ? { ...r, ...editRuleForm } : r
    ));
    setEditingRuleId(null);
  };

  return (
    <div className="fixed inset-0 z-50 flex">
      <div className="flex-1 bg-black/40 backdrop-blur-sm" onClick={onClose} />
      <div className="w-full max-w-xl bg-white shadow-2xl flex flex-col h-full overflow-hidden">
        <div className="flex items-center justify-between px-5 py-4 border-b" style={{ borderColor: 'hsl(var(--border))' }}>
          <h2 className="font-bold text-lg" style={{ color: 'hsl(var(--foreground))' }}>
            {isEditing ? t('aiAgentConfig.editAgent', 'Edit Agent') : t('aiAgentConfig.newAgent', 'New Agent')}
          </h2>
          <button className="btn-ghost p-1.5" onClick={onClose}><X size={18} /></button>
        </div>

        <div className="flex-1 overflow-y-auto px-5 py-4 space-y-4">
          {/* ── Identity ── */}
          <SectionHeader title={t('aiAgentConfig.sections.identity', 'Identity')} sectionKey="identity" expanded={expandedSections} toggle={toggleSection} />
          {expandedSections.has('identity') && (
            <div className="space-y-3">
              <div>
                <label className="label-base">{t('aiAgentConfig.agentName', 'Agent Name *')}</label>
                <input className="input-base" placeholder={t('aiAgentConfig.placeholders.agentName', 'e.g. Orders Bot')} value={name} onChange={e => setName(e.target.value)} />
              </div>
              <div>
                <label className="label-base">{t('aiAgentConfig.description', 'Description')}</label>
                <input className="input-base" placeholder={t('aiAgentConfig.placeholders.description', "Short description of this agent's purpose")} value={description} onChange={e => setDescription(e.target.value)} />
              </div>
              <div className="flex items-center pt-1">
                <label className="flex items-center gap-2 text-sm cursor-pointer" style={{ color: 'hsl(var(--foreground))' }}>
                  <input type="checkbox" checked={isDefault} onChange={e => setIsDefault(e.target.checked)} />
                  {t('aiAgentConfig.setDefault', 'Set as default agent')}
                </label>
              </div>
            </div>
          )}

          {/* ── Channels ── */}
          <SectionHeader title={t('aiAgentConfig.sections.channels', 'Channels')} sectionKey="channels" expanded={expandedSections} toggle={toggleSection} />
          {expandedSections.has('channels') && (
            <div className="space-y-2">
              <p className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>
                {t('aiAgentConfig.channelsSubtitle', 'Enable the channels this agent should handle. At least one must be active.')}
              </p>
              <div className="flex gap-3">
                <label className="flex items-center gap-3 flex-1 p-3 rounded-lg cursor-pointer border transition-colors"
                  style={{
                    borderColor: channelVoice ? 'hsl(var(--primary))' : 'hsl(var(--border))',
                    backgroundColor: channelVoice ? 'hsl(var(--primary-light))' : 'transparent',
                  }}>
                  <input
                    type="checkbox"
                    checked={channelVoice}
                    onChange={e => setChannelVoice(e.target.checked)}
                    className="w-4 h-4 rounded"
                  />
                  <div>
                    <p className="text-sm font-medium" style={{ color: 'hsl(var(--foreground))' }}>{t('aiAgentConfig.channelVoice', 'Voice')}</p>
                    <p className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>{t('aiAgentConfig.channelVoiceDesc', 'Phone calls & SIP')}</p>
                  </div>
                </label>
                <label className="flex items-center gap-3 flex-1 p-3 rounded-lg cursor-pointer border transition-colors"
                  style={{
                    borderColor: channelChat ? 'hsl(var(--primary))' : 'hsl(var(--border))',
                    backgroundColor: channelChat ? 'hsl(var(--primary-light))' : 'transparent',
                  }}>
                  <input
                    type="checkbox"
                    checked={channelChat}
                    onChange={e => setChannelChat(e.target.checked)}
                    className="w-4 h-4 rounded"
                  />
                  <div>
                    <p className="text-sm font-medium" style={{ color: 'hsl(var(--foreground))' }}>{t('aiAgentConfig.channelChat', 'Chat')}</p>
                    <p className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>{t('aiAgentConfig.channelChatDesc', 'Web & in-app chat')}</p>
                  </div>
                </label>
              </div>
            </div>
          )}

          {/* ── LLM Provider ── */}
          <SectionHeader title={t('aiAgentConfig.sections.llm', 'LLM Provider')} sectionKey="llm" expanded={expandedSections} toggle={toggleSection} />
          {expandedSections.has('llm') && (
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <label className="label-base mb-0">{t('aiAgentConfig.llmModel', 'LLM Model')}</label>
                <button
                  className="flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-lg border transition-colors"
                  style={{
                    color: 'hsl(var(--primary))',
                    borderColor: 'hsl(var(--primary))',
                    opacity: syncing ? 0.6 : 1,
                  }}
                  onClick={handleSyncModels}
                  disabled={syncing}
                  title={t('aiAgentConfig.syncModelsTitle', 'Fetch latest models from OpenRouter API')}
                >
                  <RefreshCw size={12} className={syncing ? 'animate-spin' : ''} />
                  {syncing ? t('aiAgentConfig.syncing', 'Syncing...') : t('aiAgentConfig.syncModels', 'Sync Models')}
                </button>
              </div>
              <select className="input-base" value={llmModelId} onChange={e => setLlmModelId(e.target.value)}>
                <option value="">{t('aiAgentConfig.placeholders.selectLlm', 'Select an LLM model')}</option>
                {llmProviders.map(p => (
                  <optgroup key={p.id} label={p.display_name}>
                    {p.models.map(m => (
                      <option key={m.id} value={m.id}>{m.display_name}</option>
                    ))}
                  </optgroup>
                ))}
              </select>
            </div>
          )}

          {/* ── Voice Provider ── */}
          <SectionHeader title={t('aiAgentConfig.sections.voice', 'Voice Provider')} sectionKey="voice" expanded={expandedSections} toggle={toggleSection} />
          {expandedSections.has('voice') && (
            <div className="space-y-3">
              <div>
                <label className="label-base">{t('aiAgentConfig.voiceProvider', 'Voice Provider')}</label>
                <select className="input-base" value={voiceProviderId} onChange={e => handleVoiceProviderChange(e.target.value)}>
                  <option value="">{t('aiAgentConfig.placeholders.selectProvider', 'Select a provider')}</option>
                  {filteredVoiceProviders.map(vp => (
                    <option key={vp.id} value={vp.id}>{vp.display_name}</option>
                  ))}
                </select>
              </div>
              {selectedVoiceProvider && (
                <div className="space-y-3">
                  <div>
                    <label className="label-base">{t('aiAgentConfig.voice', 'Voice')}</label>
                    <div className="flex gap-2">
                      <select
                        className="input-base flex-1"
                        value={voiceModelId}
                        onChange={e => { setVoiceModelId(e.target.value); stopAudio(); }}
                      >
                        <option value="">{t('aiAgentConfig.placeholders.selectVoice', 'Select a voice')}</option>
                        {selectedVoiceProvider.models.map(vm => (
                          <option key={vm.id} value={vm.id}>
                            {`${vm.display_name}${vm.gender ? ` — ${vm.gender}` : ''}`}
                          </option>
                        ))}
                      </select>
                      <button
                        onClick={handlePlayPreview}
                        disabled={previewing || !voiceModelId}
                        title={isPlaying ? t('aiAgentConfig.stopPreview', 'Stop preview') : t('aiAgentConfig.playPreview', 'Play voice preview')}
                        className="flex items-center gap-1.5 px-3 py-2 rounded-lg border text-sm font-medium transition-colors shrink-0"
                        style={{
                          color: isPlaying ? 'hsl(var(--danger))' : 'hsl(var(--primary))',
                          borderColor: isPlaying ? 'hsl(var(--danger))' : 'hsl(var(--primary))',
                          opacity: !voiceModelId ? 0.4 : 1,
                          backgroundColor: 'transparent',
                          cursor: !voiceModelId ? 'not-allowed' : 'pointer',
                        }}
                      >
                        {previewing
                          ? <span className="w-3.5 h-3.5 border-2 border-current border-t-transparent rounded-full animate-spin" />
                          : isPlaying
                            ? <Square size={13} fill="currentColor" />
                            : <Play size={13} fill="currentColor" />
                        }
                        {previewing ? t('aiAgentConfig.loading', 'Loading') : isPlaying ? t('aiAgentConfig.stop', 'Stop') : t('aiAgentConfig.play', 'Play')}
                      </button>
                    </div>
                  </div>
                  {isOpenAIRealtime && (
                    <div>
                      <label className="label-base">{t('aiAgentConfig.realtimeModel', 'Realtime Model')}</label>
                      <select
                        className="input-base"
                        value={realtimeModel}
                        onChange={e => setRealtimeModel(e.target.value)}
                      >
                        <option value="gpt-realtime-1.5">{t('aiAgentConfig.realtimeModels.best', 'GPT Realtime 1.5 — Best Quality')}</option>
                        <option value="gpt-realtime-mini">{t('aiAgentConfig.realtimeModels.mini', 'GPT Realtime Mini — Cost-Efficient')}</option>
                        <option value="gpt-realtime">{t('aiAgentConfig.realtimeModels.standard', 'GPT Realtime (Standard)')}</option>
                        <option value="gpt-audio-1.5">{t('aiAgentConfig.realtimeModels.audio', 'GPT Audio 1.5 — Audio-Optimised')}</option>
                      </select>
                    </div>
                  )}
                </div>
              )}
            </div>
          )}

          {/* ── Voice Activity Detection ── */}
          {isOpenAIRealtime && (
            <>
              <SectionHeader title={t('aiAgentConfig.sections.vad', 'Voice Activity Detection')} sectionKey="vad" expanded={expandedSections} toggle={toggleSection} />
              {expandedSections.has('vad') && (
                <div className="space-y-4">
                  <p className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>
                    {t('aiAgentConfig.vadSubtitle', "Controls how the AI detects when you've finished speaking. Lower threshold = more sensitive. Longer silence = waits more before responding.")}
                  </p>
                  <div>
                    <div className="flex items-center justify-between mb-1">
                      <label className="label-base mb-0">{t('aiAgentConfig.detectionThreshold', 'Detection Threshold')}</label>
                      <span className="text-xs font-mono" style={{ color: 'hsl(var(--primary))' }}>{vadThreshold.toFixed(2)}</span>
                    </div>
                    <input
                      type="range"
                      min={0}
                      max={1}
                      step={0.05}
                      value={vadThreshold}
                      onChange={e => setVadThreshold(parseFloat(e.target.value))}
                      className="w-full accent-primary"
                    />
                    <div className="flex justify-between text-xs mt-0.5" style={{ color: 'hsl(var(--muted-foreground))' }}>
                      <span>{t('aiAgentConfig.moreSensitive', 'More sensitive (0)')}</span>
                      <span>{t('aiAgentConfig.lessSensitive', 'Less sensitive (1)')}</span>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="label-base">{t('aiAgentConfig.prefixPadding', 'Prefix Padding (ms)')}</label>
                      <input
                        type="number"
                        className="input-base"
                        min={0}
                        max={1000}
                        step={50}
                        value={vadPrefixPaddingMs}
                        onChange={e => setVadPrefixPaddingMs(Math.max(0, Math.min(1000, parseInt(e.target.value, 10) || 0)))}
                      />
                      <p className="text-xs mt-0.5" style={{ color: 'hsl(var(--muted-foreground))' }}>{t('aiAgentConfig.prefixPaddingDesc', 'Audio kept before speech')}</p>
                    </div>
                    <div>
                      <label className="label-base">{t('aiAgentConfig.silenceDuration', 'Silence Duration (ms)')}</label>
                      <input
                        type="number"
                        className="input-base"
                        min={200}
                        max={3000}
                        step={100}
                        value={vadSilenceDurationMs}
                        onChange={e => setVadSilenceDurationMs(Math.max(200, Math.min(3000, parseInt(e.target.value, 10) || 600)))}
                      />
                      <p className="text-xs mt-0.5" style={{ color: 'hsl(var(--muted-foreground))' }}>{t('aiAgentConfig.silenceDurationDesc', 'Pause before turn ends')}</p>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}

          {/* ── Scripts ── */}
          <SectionHeader title={t('aiAgentConfig.sections.scripts', 'Scripts')} sectionKey="scripts" expanded={expandedSections} toggle={toggleSection} />
          {expandedSections.has('scripts') && (
            <div className="space-y-3">
              <div>
                <label className="label-base">{t('aiAgentConfig.greetingScript', 'Greeting Script')}</label>
                <textarea className="input-base resize-none w-full" rows={3} placeholder={t('aiAgentConfig.placeholders.greetingScript', "Hello! Welcome to our restaurant...")}
                  value={greetingScript} onChange={e => setGreetingScript(e.target.value)} />
              </div>
              <div>
                <label className="label-base">{t('aiAgentConfig.closingScript', 'Closing Script')}</label>
                <textarea className="input-base resize-none w-full" rows={3} placeholder={t('aiAgentConfig.placeholders.closingScript', "Thank you for choosing us...")}
                  value={closingScript} onChange={e => setClosingScript(e.target.value)} />
              </div>
              <div>
                <label className="label-base">{t('aiAgentConfig.systemPrompt', 'System Prompt')}</label>
                <textarea className="input-base resize-none w-full" rows={5}
                  placeholder={t('aiAgentConfig.placeholders.systemPrompt', "You are a helpful restaurant assistant. Always be polite and focus on menu recommendations...")}
                  value={systemPrompt} onChange={e => setSystemPrompt(e.target.value)} />
              </div>
            </div>
          )}

          {/* ── Capabilities ── */}
          <SectionHeader title={t('aiAgentConfig.sections.capabilities', 'Capabilities')} sectionKey="capabilities" expanded={expandedSections} toggle={toggleSection} />
          {expandedSections.has('capabilities') && (
            <div className="space-y-2">
              {CAPABILITY_OPTIONS.map(cap => (
                <div key={cap.key} className="flex items-center justify-between p-3 rounded-lg" style={{ backgroundColor: 'hsl(var(--muted))' }}>
                  <span className="text-sm" style={{ color: 'hsl(var(--foreground))' }}>{cap.label}</span>
                  <button onClick={() => setCapabilities(prev => ({ ...prev, [cap.key]: !prev[cap.key] }))}>
                    <div className="w-10 h-6 rounded-full transition-colors flex items-center px-0.5"
                      style={{ backgroundColor: capabilities[cap.key] ? 'hsl(var(--success))' : 'hsl(var(--muted-foreground))' }}>
                      <span className="w-5 h-5 bg-white rounded-full shadow transition-transform"
                        style={{ transform: capabilities[cap.key] ? 'translateX(16px)' : 'translateX(0)' }} />
                    </div>
                  </button>
                </div>
              ))}
            </div>
          )}

          {/* ── Fallback Rules ── */}
          <SectionHeader title={t('aiAgentConfig.sections.fallback', 'Fallback Rules')} sectionKey="fallback" expanded={expandedSections} toggle={toggleSection} />
          {expandedSections.has('fallback') && (
            <div className="space-y-3">
              <div className="flex justify-end">
                <button className="btn-ghost text-xs px-2 py-1 flex items-center gap-1" style={{ color: 'hsl(var(--primary))' }}
                  onClick={() => setShowAddRule(true)}>
                  <Plus size={13} /> {t('aiAgentConfig.addRule', 'Add Rule')}
                </button>
              </div>

              {showAddRule && (
                <RuleForm
                  rule={newRule}
                  onChange={setNewRule}
                  onSave={handleAddRule}
                  onCancel={() => setShowAddRule(false)}
                  saveLabel={t('aiAgentConfig.add', 'Add')}
                  t={t}
                />
              )}

              {fallbackRules.length === 0 && !showAddRule && (
                <p className="text-xs text-center py-4" style={{ color: 'hsl(var(--muted-foreground))' }}>
                  {t('aiAgentConfig.noFallbackRules', 'No fallback rules configured. Add rules to handle edge cases.')}
                </p>
              )}

              {fallbackRules.map(rule => (
                editingRuleId === rule.id ? (
                  <RuleForm
                    key={rule.id}
                    rule={editRuleForm}
                    onChange={setEditRuleForm}
                    onSave={handleUpdateRule}
                    onCancel={() => setEditingRuleId(null)}
                    saveLabel={t('aiAgentConfig.save', 'Save')}
                    t={t}
                  />
                ) : (
                  <div key={rule.id} className="flex items-center gap-2 p-3 rounded-lg" style={{ backgroundColor: 'hsl(var(--muted))' }}>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium truncate" style={{ color: 'hsl(var(--foreground))' }}>{rule.trigger}</p>
                      <p className="text-xs truncate" style={{ color: 'hsl(var(--muted-foreground))' }}>{rule.action}</p>
                    </div>
                    <span className={`badge ${PRIORITY_CLASS[rule.priority]} text-xs`}>{t(`aiAgentConfig.priorities.${rule.priority}`, rule.priority)}</span>
                    <button className="btn-ghost p-1" style={{ color: 'hsl(var(--primary))' }}
                      onClick={() => startEditRule(rule)}>
                      <Pencil size={12} />
                    </button>
                    <button className="btn-ghost p-1" style={{ color: 'hsl(var(--danger))' }}
                      onClick={() => setFallbackRules(prev => prev.filter(r => r.id !== rule.id))}>
                      <Trash2 size={13} />
                    </button>
                  </div>
                )
              ))}
            </div>
          )}

          <div className="lg:hidden pt-4">
            <AgentPreview name={name} greeting={greetingScript} systemPrompt={systemPrompt} closing={closingScript} />
          </div>
        </div>

        <div className="px-5 py-4 border-t flex gap-3" style={{ borderColor: 'hsl(var(--border))' }}>
          <button className="btn-secondary flex-1" onClick={onClose}>{t('aiAgentConfig.cancel', 'Cancel')}</button>
          <button className="btn-primary flex-1" onClick={handleSave} disabled={saving}>
            {saving ? <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <Save size={15} />}
            {saving ? t('aiAgentConfig.saving', 'Saving...') : isEditing ? t('aiAgentConfig.updateAgent', 'Update Agent') : t('aiAgentConfig.createAgent', 'Create Agent')}
          </button>
        </div>
      </div>
    </div>
  );
}

function SectionHeader({ title, sectionKey, expanded, toggle }: {
  title: string; sectionKey: string; expanded: Set<string>; toggle: (k: string) => void;
}) {
  const isOpen = expanded.has(sectionKey);
  return (
    <button onClick={() => toggle(sectionKey)}
      className="flex items-center gap-2 w-full py-2 border-b"
      style={{ borderColor: 'hsl(var(--border))' }}>
      {isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
      <span className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'hsl(var(--muted-foreground))' }}>
        {title}
      </span>
    </button>
  );
}

function RuleForm({ rule, onChange, onSave, onCancel, saveLabel, t }: {
  rule: { trigger: string; action: string; priority: 'high' | 'medium' | 'low' };
  onChange: (r: { trigger: string; action: string; priority: 'high' | 'medium' | 'low' }) => void;
  onSave: () => void;
  onCancel: () => void;
  saveLabel: string;
  t: (key: string, fallback: string) => string;
}) {
  return (
    <div className="border rounded-xl p-3 space-y-2" style={{ borderColor: 'hsl(var(--primary))' }}>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
        <input className="input-base text-sm" placeholder={t('aiAgentConfig.placeholders.fallbackTrigger', 'Trigger condition')}
          value={rule.trigger} onChange={e => onChange({ ...rule, trigger: e.target.value })} autoFocus />
        <input className="input-base text-sm" placeholder={t('aiAgentConfig.placeholders.fallbackAction', 'Action to take')}
          value={rule.action} onChange={e => onChange({ ...rule, action: e.target.value })} />
        <select className="input-base text-sm" value={rule.priority}
          onChange={e => onChange({ ...rule, priority: e.target.value as 'high' | 'medium' | 'low' })}>
          <option value="high">{t('aiAgentConfig.priorities.high', 'High')}</option>
          <option value="medium">{t('aiAgentConfig.priorities.medium', 'Medium')}</option>
          <option value="low">{t('aiAgentConfig.priorities.low', 'Low')}</option>
        </select>
      </div>
      <div className="flex gap-2">
        <button className="btn-primary text-xs py-1.5 flex-1" onClick={onSave}>
          <Check size={12} /> {saveLabel}
        </button>
        <button className="btn-secondary text-xs py-1.5" onClick={onCancel}>
          <X size={12} /> {t('aiAgentConfig.cancel', 'Cancel')}
        </button>
      </div>
    </div>
  );
}
