"use client";

/**
 * SIP Trunk Configuration Panel
 *
 * Dashboard component for configuring custom SIP trunks
 * This is Phase 2 preparation - UI only, backend to be implemented later
 */

import React, { useState } from "react";
import {
  Settings,
  Plus,
  Server,
  Shield,
  AlertTriangle,
  ChevronDown,
  ChevronUp,
  Info,
} from "lucide-react";

interface SipConfigPanelProps {
  lang?: "en" | "ar";
  isEnabled?: boolean; // Feature flag for Phase 2
}

const translations = {
  en: {
    title: "SIP Trunk Configuration",
    subtitle: "Connect your own SIP trunk for voice calls",
    comingSoon: "Coming Soon",
    comingSoonDesc:
      "Custom SIP trunk configuration will be available in a future update. For now, you can use Twilio phone numbers for voice calls.",
    addTrunk: "Add SIP Trunk",
    learnMore: "Learn More",

    // Form fields (for future implementation)
    name: "Trunk Name",
    namePlaceholder: "My SIP Trunk",
    sipUri: "SIP URI",
    sipUriPlaceholder: "sip:username@provider.com",
    sipUsername: "SIP Username",
    sipPassword: "SIP Password",
    codec: "Audio Codec",
    transport: "Transport Protocol",
    outboundProxy: "Outbound Proxy (Optional)",
    testConnection: "Test Connection",

    // Status messages
    configured: "Configured",
    notConfigured: "Not Configured",
    testing: "Testing...",
    testSuccess: "Connection successful",
    testFailed: "Connection failed",

    // Info sections
    whatIsSip: "What is SIP Trunking?",
    sipDescription:
      "SIP (Session Initiation Protocol) trunking allows you to connect your own phone system or provider to our AI voice agents. This gives you more control over your phone numbers and potentially lower costs.",
    requirements: "Requirements",
    requirement1: "A SIP trunk provider account (e.g., Twilio, Vonage, Telnyx)",
    requirement2: "SIP credentials from your provider",
    requirement3: "Supported codecs: G.711 (PCMU/PCMA), Opus",
    requirement4: "Static IP address or FQDN for your SIP endpoint",
  },
  ar: {
    title: "تكوين SIP Trunk",
    subtitle: "قم بتوصيل SIP trunk الخاص بك للمكالمات الصوتية",
    comingSoon: "قريباً",
    comingSoonDesc:
      "سيكون تكوين SIP trunk المخصص متاحاً في تحديث مستقبلي. في الوقت الحالي، يمكنك استخدام أرقام هاتف Twilio للمكالمات الصوتية.",
    addTrunk: "إضافة SIP Trunk",
    learnMore: "معرفة المزيد",

    // Form fields
    name: "اسم Trunk",
    namePlaceholder: "SIP Trunk الخاص بي",
    sipUri: "SIP URI",
    sipUriPlaceholder: "sip:username@provider.com",
    sipUsername: "اسم مستخدم SIP",
    sipPassword: "كلمة مرور SIP",
    codec: "برنامج ترميز الصوت",
    transport: "بروتوكول النقل",
    outboundProxy: "Outbound Proxy (اختياري)",
    testConnection: "اختبار الاتصال",

    // Status messages
    configured: "مُكوّن",
    notConfigured: "غير مُكوّن",
    testing: "جاري الاختبار...",
    testSuccess: "الاتصال ناجح",
    testFailed: "فشل الاتصال",

    // Info sections
    whatIsSip: "ما هو SIP Trunking؟",
    sipDescription:
      "يتيح لك SIP (بروتوكول بدء الجلسة) توصيل نظام الهاتف الخاص بك أو مزودك بوكلائنا الصوتيين الذكيين. يمنحك هذا المزيد من التحكم في أرقام هاتفك وتكاليف أقل محتملة.",
    requirements: "المتطلبات",
    requirement1: "حساب مزود SIP trunk (مثل Twilio, Vonage, Telnyx)",
    requirement2: "بيانات اعتماد SIP من مزودك",
    requirement3: "برامج الترميز المدعومة: G.711 (PCMU/PCMA), Opus",
    requirement4: "عنوان IP ثابت أو FQDN لنقطة نهاية SIP الخاصة بك",
  },
};

export function SipConfigPanel({
  lang = "en",
  isEnabled = false,
}: SipConfigPanelProps) {
  const t = translations[lang];
  const [showInfo, setShowInfo] = useState(false);

  // Phase 2: When isEnabled is true, show the full configuration UI
  // For now, show coming soon message

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
      {/* Header */}
      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
              <Server className="h-5 w-5 text-brand-500" />
              {t.title}
            </h3>
            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
              {t.subtitle}
            </p>
          </div>
          {isEnabled && (
            <button className="flex items-center gap-2 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors">
              <Plus className="h-4 w-4" />
              {t.addTrunk}
            </button>
          )}
        </div>
      </div>

      {/* Content */}
      {!isEnabled ? (
        // Coming Soon State
        <div className="px-6 py-8">
          <div className="bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 rounded-lg p-6">
            <div className="flex items-start gap-4">
              <div className="p-3 bg-brand-100 dark:bg-brand-800 rounded-full">
                <AlertTriangle className="h-6 w-6 text-brand-600 dark:text-brand-300" />
              </div>
              <div>
                <div className="flex items-center gap-2 mb-2">
                  <h4 className="text-lg font-semibold text-gray-900 dark:text-white">
                    {t.comingSoon}
                  </h4>
                  <span className="px-2 py-0.5 bg-brand-100 text-brand-800 dark:bg-brand-800 dark:text-brand-200 rounded-full text-xs font-medium">
                    Phase 2
                  </span>
                </div>
                <p className="text-gray-600 dark:text-gray-400 mb-4">
                  {t.comingSoonDesc}
                </p>

                {/* Learn More Toggle */}
                <button
                  onClick={() => setShowInfo(!showInfo)}
                  className="flex items-center gap-1 text-brand-600 dark:text-brand-400 hover:text-brand-700 dark:hover:text-brand-300 text-sm font-medium"
                >
                  <Info className="h-4 w-4" />
                  {t.learnMore}
                  {showInfo ? (
                    <ChevronUp className="h-4 w-4" />
                  ) : (
                    <ChevronDown className="h-4 w-4" />
                  )}
                </button>
              </div>
            </div>

            {/* Expanded Info */}
            {showInfo && (
              <div className="mt-6 pt-6 border-t border-brand-200 dark:border-brand-700 space-y-6">
                {/* What is SIP */}
                <div>
                  <h5 className="font-medium text-gray-900 dark:text-white mb-2">
                    {t.whatIsSip}
                  </h5>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    {t.sipDescription}
                  </p>
                </div>

                {/* Requirements */}
                <div>
                  <h5 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                    <Shield className="h-4 w-4" />
                    {t.requirements}
                  </h5>
                  <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                    <li>{t.requirement1}</li>
                    <li>{t.requirement2}</li>
                    <li>{t.requirement3}</li>
                    <li>{t.requirement4}</li>
                  </ul>
                </div>
              </div>
            )}
          </div>
        </div>
      ) : (
        // Enabled State - Full UI (Phase 2)
        <div className="px-6 py-8">
          <div className="text-center py-8">
            <Settings className="h-12 w-12 text-gray-400 mx-auto mb-4 animate-spin-slow" />
            <p className="text-gray-600 dark:text-gray-400">
              SIP configuration UI will be implemented in Phase 2
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

export default SipConfigPanel;