'use client';

import { useState } from 'react';
import Link from 'next/link';
import { Phone, ArrowLeft, Bot, Save, Voicemail, PhoneForwarded } from 'lucide-react';
import { usePageHeader } from '@client/contexts/PageHeaderContext';
import { useLanguage } from '@client/contexts/LanguageContext';

export default function PhoneNumberDetailPage() {
  const { t } = useLanguage();
  const agents = [t('phoneNumbers.agents.main', 'Main Voice Agent'), t('phoneNumbers.agents.ukBranch', 'UK Branch Agent'), t('phoneNumbers.agents.unassigned', 'Unassigned')];
  const routingRules = [
    t('phoneNumbers.routing.voicemail', 'Ring for 30s then voicemail'),
    t('phoneNumbers.routing.fallback', 'Ring for 30s then fallback number'),
    t('phoneNumbers.routing.alwaysVoicemail', 'Always voicemail'),
    t('phoneNumbers.routing.alwaysForward', 'Always forward to fallback')
  ];

  usePageHeader("+1 (415) 555-0192", t('phoneNumbers.detail.subtitle', "Phone number configuration and routing rules"));
  const [assignedAgent, setAssignedAgent] = useState(agents[0]);
  const [routingRule, setRoutingRule] = useState(routingRules[0]);
  const [voicemailEnabled, setVoicemailEnabled] = useState(true);
  const [fallbackNumber, setFallbackNumber] = useState('');
  const [saved, setSaved] = useState(false);

  const handleSave = () => { setSaved(true); setTimeout(() => setSaved(false), 2000); };

  return (
    <>
      <div className="max-w-2xl">
        <Link href="/ai-agent-config/phone-numbers" className="flex items-center gap-2 text-sm mb-6" style={{ color: 'hsl(var(--muted-foreground))' }}>
          <ArrowLeft size={15} /> {t('phoneNumbers.detail.backLink', 'Back to Phone Numbers')}
        </Link>

        {/* Number info card */}
        <div className="rounded-2xl p-5 mb-5 flex items-center gap-4" style={{ backgroundColor: 'hsl(var(--surface))', border: '1px solid hsl(var(--border))' }}>
          <div className="w-14 h-14 rounded-2xl flex items-center justify-center" style={{ backgroundColor: 'hsl(var(--primary-light))', color: 'hsl(var(--primary))' }}>
            <Phone size={24} />
          </div>
          <div>
            <p className="font-mono font-bold text-xl" style={{ color: 'hsl(var(--foreground))' }}>+1 (415) 555-0192</p>
            <div className="flex items-center gap-3 mt-1">
              <span className="text-sm">🇺🇸 {t('phoneNumbers.countries.us', 'United States')}</span>
              <span className="text-xs font-semibold px-2 py-0.5 rounded-full" style={{ backgroundColor: 'hsl(22, 100%, 96%)', color: 'hsl(22, 89%, 48%)' }}>📱 {t('phoneNumbers.typePurchased', 'Purchased')}</span>
              <span className="text-xs font-semibold px-2 py-0.5 rounded-full" style={{ backgroundColor: 'hsl(142, 72%, 96%)', color: 'hsl(142, 72%, 29%)' }}>● {t('phoneNumbers.statusActive', 'Active')}</span>
            </div>
          </div>
          <div className="ml-auto text-right">
            <p className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>{t('phoneNumbers.detail.monthlyCalls', 'Monthly calls')}</p>
            <p className="text-xl font-bold" style={{ color: 'hsl(var(--foreground))' }}>1,284</p>
          </div>
        </div>

        <div className="space-y-4">
          {/* Assign to agent */}
          <div className="rounded-2xl p-5" style={{ backgroundColor: 'hsl(var(--surface))', border: '1px solid hsl(var(--border))' }}>
            <h3 className="font-semibold text-sm mb-4 flex items-center gap-2" style={{ color: 'hsl(var(--foreground))' }}>
              <Bot size={16} style={{ color: 'hsl(var(--primary))' }} /> {t('phoneNumbers.detail.assignTitle', 'Assign to AI Agent')}
            </h3>
            <div>
              <label className="block text-xs font-semibold mb-1.5" style={{ color: 'hsl(var(--foreground-secondary))' }}>{t('phoneNumbers.detail.aiAgent', 'AI Agent')}</label>
              <select value={assignedAgent} onChange={e => setAssignedAgent(e?.target?.value)} className="input-field w-full">
                {agents?.map(a => <option key={a}>{a}</option>)}
              </select>
              <p className="text-xs mt-1.5" style={{ color: 'hsl(var(--muted-foreground))' }}>
                {t('phoneNumbers.detail.aiAgentHint', 'The selected AI agent will handle all inbound calls to this number.')}
              </p>
            </div>
          </div>

          {/* Call routing */}
          <div className="rounded-2xl p-5" style={{ backgroundColor: 'hsl(var(--surface))', border: '1px solid hsl(var(--border))' }}>
            <h3 className="font-semibold text-sm mb-4 flex items-center gap-2" style={{ color: 'hsl(var(--foreground))' }}>
              <PhoneForwarded size={16} style={{ color: 'hsl(210, 100%, 40%)' }} /> {t('phoneNumbers.detail.routingTitle', 'Call Routing Rules')}
            </h3>
            <div className="space-y-3">
              <div>
                <label className="block text-xs font-semibold mb-1.5" style={{ color: 'hsl(var(--foreground-secondary))' }}>{t('phoneNumbers.detail.whenUnanswered', 'When AI cannot answer')}</label>
                <select value={routingRule} onChange={e => setRoutingRule(e?.target?.value)} className="input-field w-full">
                  {routingRules?.map(r => <option key={r}>{r}</option>)}
                </select>
              </div>
              <div>
                <label className="block text-xs font-semibold mb-1.5" style={{ color: 'hsl(var(--foreground-secondary))' }}>{t('phoneNumbers.detail.fallbackNumber', 'Fallback Phone Number')}</label>
                <input
                  type="tel"
                  placeholder="+1 (555) 000-0000"
                  value={fallbackNumber}
                  onChange={e => setFallbackNumber(e?.target?.value)}
                  className="input-field w-full font-mono"
                />
                <p className="text-xs mt-1" style={{ color: 'hsl(var(--muted-foreground))' }}>{t('phoneNumbers.detail.fallbackHint', 'Used when routing rule includes "fallback number"')}</p>
              </div>
            </div>
          </div>

          {/* Voicemail */}
          <div className="rounded-2xl p-5" style={{ backgroundColor: 'hsl(var(--surface))', border: '1px solid hsl(var(--border))' }}>
            <h3 className="font-semibold text-sm mb-4 flex items-center gap-2" style={{ color: 'hsl(var(--foreground))' }}>
              <Voicemail size={16} style={{ color: 'hsl(142, 72%, 29%)' }} /> {t('phoneNumbers.detail.voicemailTitle', 'Voicemail')}
            </h3>
            <div className="flex items-center justify-between p-4 rounded-xl" style={{ backgroundColor: 'hsl(var(--muted))' }}>
              <div>
                <p className="text-sm font-medium" style={{ color: 'hsl(var(--foreground))' }}>{t('phoneNumbers.detail.enableVoicemail', 'Enable Voicemail')}</p>
                <p className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>{t('phoneNumbers.detail.voicemailHint', 'Record voicemail when calls go unanswered')}</p>
              </div>
              <button
                onClick={() => setVoicemailEnabled(!voicemailEnabled)}
                className="relative inline-flex items-center w-11 h-6 rounded-full transition-colors"
                style={{ backgroundColor: voicemailEnabled ? 'hsl(var(--primary))' : 'hsl(var(--border-strong))' }}
              >
                <span
                  className="inline-block w-4 h-4 bg-white rounded-full shadow transition-transform"
                  style={{ transform: voicemailEnabled ? 'translateX(22px)' : 'translateX(3px)' }}
                />
              </button>
            </div>
          </div>

          <div className="flex gap-3">
            <button className="btn-primary flex-1" onClick={handleSave}>
              <Save size={15} /> {saved ? t('common.saved', 'Saved!') : t('phoneNumbers.detail.saveButton', 'Save Configuration')}
            </button>
            <Link href="/ai-agent-config/phone-numbers" className="btn-secondary">{t('common.cancel', 'Cancel')}</Link>
          </div>
        </div>
      </div>
    </>
  );
}