import React from 'react';
import {
  Settings2,
  ListRestart,
  Database,
  Languages,
  Type,
  Layout,
  ShieldCheck,
  Smartphone,
  Trash2
} from 'lucide-react';
import { cn } from '../../lib/utils';
import { Label } from '../ui/label';
import { Switch } from '../ui/switch';
import { SearchableSelect } from '../ui/searchable-select';
import { SettingInput } from '../ui/settings-ui';

interface WhatsAppAuthSettingsProps {
  settings: Record<string, string | number | boolean>;
  updateSetting: (key: string, value: string | number) => void;
  optionNames: Record<string, string>;
  availability?: Record<string, unknown>;
  msgs?: Record<string, string>;
}

const WhatsAppAuthSettings: React.FC<WhatsAppAuthSettingsProps> = ({
  settings,
  updateSetting,
  optionNames,
  msgs: t = {}
}) => {
  const opts = optionNames || {};

  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">


      {/* Auth Method Selection */}
      <div className="space-y-4">
        <Label className="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-1">{t.preferredChannel || "Preferred Verification Channel"}</Label>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            {
              id: 'otp',
              label: 'Standard OTP',
              desc: '6-digit code via Message',
              icon: Smartphone,
              color: 'text-emerald-600',
              bg: 'bg-emerald-50',
              border: 'border-emerald-100'
            },
            {
              id: 'list',
              label: 'Interactive List',
              desc: 'One-tap Verify/Reject',
              icon: ListRestart,
              color: 'text-[#004449]',
              bg: 'bg-slate-50',
              border: 'border-slate-200'
            }
          ].map(item => (
            <div key={item.id} className="relative group">
              <label
                className={cn(
                  "flex items-center gap-4 p-4 rounded-xl border-2 transition-all cursor-pointer relative overflow-hidden",
                  settings[opts.whatsappAuthType] === item.id
                    ? "bg-white border-[#004449] ring-4 ring-[#004449]/5"
                    : "bg-white border-slate-100 hover:border-slate-200"
                )}
              >
                <input
                  type="radio"
                  name="whatsapp_auth_type"
                  value={item.id}
                  checked={settings[opts.whatsappAuthType] === item.id}
                  onChange={() => updateSetting(opts.whatsappAuthType, item.id)}
                  className="sr-only"
                />
                <div className={cn(
                  "w-12 h-12 rounded-lg flex items-center justify-center transition-all border duration-300 shrink-0",
                  settings[opts.whatsappAuthType] === item.id ? `${item.bg} ${item.border}` : "bg-slate-50 border-slate-100"
                )}>
                  <item.icon size={22} className={cn("transition-colors", settings[opts.whatsappAuthType] === item.id ? item.color : "text-slate-400")} />
                </div>
                <div className="flex-1 min-w-0 flex flex-col justify-center">
                  <h4 className={cn(
                    "text-[15px] font-bold tracking-tight !m-0 !p-0 leading-tight",
                    settings[opts.whatsappAuthType] === item.id ? "text-slate-900" : "text-slate-700"
                  )}>{item.label}</h4>
                  <p className="text-[12px] font-medium text-slate-400 truncate !m-0 !p-0 mt-0.5 leading-tight">{item.desc}</p>
                </div>
                <div className={cn(
                  "w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all shrink-0",
                  settings[opts.whatsappAuthType] === item.id
                    ? "bg-[#004449] border-[#004449] text-white"
                    : "border-slate-200 shadow-inner bg-slate-50"
                )}>
                  {settings[opts.whatsappAuthType] === item.id && <ShieldCheck size={14} strokeWidth={3} />}
                </div>
              </label>
            </div>
          ))}
        </div>
      </div>

      {/* Content Customization based on type */}
      <div className="p-6 md:p-8 rounded-2xl border border-slate-100 bg-slate-50/20 space-y-8">
        {settings[opts.whatsappAuthType] === 'otp' ? (
          <div className="space-y-6 animate-in fade-in slide-in-from-left-4 duration-300">
            <div className="flex items-center gap-2 pb-2 border-b border-slate-100">
              <Database size={14} className="text-emerald-500" />
              <h4 className="text-[11px] font-black uppercase text-slate-900 tracking-widest">{t.msg_config_label || "Message Configuration"}</h4>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="space-y-4">
                <Label className="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-1">{t.force_lang_label || "Force Language"}</Label>
                <SearchableSelect
                  options={[
                    { value: "site", label: "Auto (Site Locale)" },
                    { value: "user", label: "User Context (Dynamic)" },
                    { value: "custom", label: "Forced (Manual Selection)" }
                  ]}
                  value={(settings[opts.whatsappOtpLangType] as string) || 'site'}
                  onChange={(val) => updateSetting(opts.whatsappOtpLangType, val)}
                  className="h-11 bg-white border-slate-200 text-slate-700 font-bold text-[13px] hover:border-[#004449]/30 transition-all rounded-[5px]"
                />
              </div>

              {settings[opts.whatsappOtpLangType] === 'custom' && (
                <div className="space-y-4">
                  <Label className="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-1">Select Language</Label>
                  <SearchableSelect
                    options={[
                      { code: 'ar', name: 'Arabic' }, { code: 'en', name: 'English' }, { code: 'es', name: 'Spanish' },
                      { code: 'fr', name: 'French' }, { code: 'pt', name: 'Portuguese' }, { code: 'in', name: 'Indonesian' },
                      { code: 'ru', name: 'Russian' }, { code: 'tr', name: 'Turkish' }, { code: 'de', name: 'German' }
                    ].map(l => ({ value: l.code, label: l.name }))}
                    value={(settings[opts.whatsappOtpCustomLang] as string) || 'ar'}
                    onChange={(val) => updateSetting(opts.whatsappOtpCustomLang, val)}
                    className="h-11 bg-white border-slate-200 text-slate-700 font-bold text-[13px] hover:border-[#004449]/30 transition-all rounded-[5px]"
                  />
                </div>
              )}
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between pl-1">
                <Label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t.enable_custom_footer_label || "Enable Custom Footer"}</Label>
                <Switch checked={settings[opts.whatsappOtpFooterEnabled] == 1} onCheckedChange={(checked) => updateSetting(opts.whatsappOtpFooterEnabled, checked ? 1 : 0)} />
              </div>
              {settings[opts.whatsappOtpFooterEnabled] == 1 && (
                <SettingInput
                  label="Footer Content"
                  value={(settings[opts.whatsappOtpFooter] as string) || ''}
                  onChange={(val: string) => updateSetting(opts.whatsappOtpFooter, val)}
                  placeholder="Support Wawp Engine"
                  icon={Layout}
                  showFormatting={false}
                  showEmoji={true}
                />
              )}
            </div>
          </div>
        ) : (
          <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300">
            <div className="flex items-center gap-2 pb-2 border-b border-slate-100">
              <Layout size={14} className="text-[#004449]" />
              <h4 className="text-[11px] font-black uppercase text-slate-900 tracking-widest">{t.list_ui_label || "List Interface Design"}</h4>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <SettingInput label="List Title" value={(settings[opts.whatsappListTitle] as string) || ''} onChange={(val: string) => updateSetting(opts.whatsappListTitle, val)} icon={Type} placeholder="Secure Authentication" showFormatting={false} showEmoji={true} />
              <SettingInput label="Main Description" value={(settings[opts.whatsappListDesc] as string) || ''} onChange={(val: string) => updateSetting(opts.whatsappListDesc, val)} icon={Languages} placeholder="Verify your identity to continue" showFormatting={false} showEmoji={true} />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="p-5 rounded-2xl border border-slate-100 bg-white/50 space-y-5">
                <div className="flex items-center gap-2">
                  <div className="w-6 h-6 rounded-lg bg-emerald-50 text-emerald-500 flex items-center justify-center border border-emerald-100">
                    <ShieldCheck size={12} />
                  </div>
                  <h5 className="text-[11px] font-black text-emerald-600 uppercase tracking-widest">Item 1 (Success Action)</h5>
                </div>
                <div className="space-y-4">
                  <SettingInput label="Action Title" value={(settings[opts.whatsappListItem1] as string) || ''} onChange={(val: string) => updateSetting(opts.whatsappListItem1, val)} placeholder="Approve Request" showFormatting={false} showEmoji={true} />
                  <SettingInput label="Action Description" value={(settings[opts.whatsappListItem1Desc] as string) || ''} onChange={(val: string) => updateSetting(opts.whatsappListItem1Desc, val)} placeholder="This is my login attempt" showFormatting={false} showEmoji={true} />
                </div>
              </div>

              <div className="p-5 rounded-2xl border border-slate-100 bg-white/50 space-y-5">
                <div className="flex items-center gap-2">
                  <div className="w-6 h-6 rounded-lg bg-rose-50 text-rose-500 flex items-center justify-center border border-rose-100">
                    <Trash2 size={12} strokeWidth={3} />
                  </div>
                  <h5 className="text-[11px] font-black text-rose-600 uppercase tracking-widest">Item 2 (Reject Action)</h5>
                </div>
                <div className="space-y-4">
                  <SettingInput label="Action Title" value={(settings[opts.whatsappListItem2] as string) || ''} onChange={(val: string) => updateSetting(opts.whatsappListItem2, val)} placeholder="Reject & Report" showFormatting={false} showEmoji={true} />
                  <SettingInput label="Action Description" value={(settings[opts.whatsappListItem2Desc] as string) || ''} onChange={(val: string) => updateSetting(opts.whatsappListItem2Desc, val)} placeholder="I don't recognize this" showFormatting={false} showEmoji={true} />
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <SettingInput label="Selection Button" value={(settings[opts.whatsappListButton] as string) || ''} onChange={(val: string) => updateSetting(opts.whatsappListButton, val)} icon={Settings2} placeholder="Choose Action" showFormatting={false} showEmoji={true} />
              <SettingInput label="Bottom Footer" value={(settings[opts.whatsappListFooter] as string) || ''} onChange={(val: string) => updateSetting(opts.whatsappListFooter, val)} icon={Layout} placeholder="Authorized by Wawp Engine" showFormatting={false} showEmoji={true} />
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default WhatsAppAuthSettings;