import { useState, useRef, useEffect, useCallback } from 'react';
import type { DashboardData } from './types';
import { motion, AnimatePresence } from 'framer-motion';

import { Label } from './components/ui/label';
import { CheckCircle2, RefreshCw, AlertTriangle, Plus, X, Phone, ShieldAlert, UserX } from 'lucide-react';
import { toast } from 'sonner';
import {
  SettingCard,
  SettingsLayout,
  SettingsHeader,
  ModernCardHeader,
  AdminButton
} from './components/ui/settings-ui';
import PhoneInput from './components/ui/PhoneInput';
import type { PhoneInputRef } from './components/ui/PhoneInput';

export default function BlockManager({ data: dashboardData }: { data: DashboardData }) {
  const data = dashboardData?.blockManagerData || { blockedNumbers: [], nonces: {} };
  const [blockedNumbers, setBlockedNumbers] = useState<string[]>(data.blockedNumbers || []);
  const [isSaving, setIsSaving] = useState(false);
  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
  const [statusMessage, setStatusMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);

  const phoneInputRef = useRef<PhoneInputRef>(null);
  const [validation, setValidation] = useState<{
    text: string,
    type: 'valid' | 'invalid' | 'waiting' | 'none',
    waStatus: 'found' | 'not' | 'none'
  }>({ text: '', type: 'none', waStatus: 'none' });

  const handleAddNumber = () => {
    if (!phoneInputRef.current) return;

    const fullNumber = phoneInputRef.current.getNumber();

    if (!fullNumber || fullNumber.length < 7) {
      toast.error('Please enter a valid phone number.');
      return;
    }

    if (!blockedNumbers.includes(fullNumber)) {
      setBlockedNumbers([...blockedNumbers, fullNumber]);
      setHasUnsavedChanges(true);
      setSaveStatus('idle');
      toast.success(`${fullNumber} added to list.`);
      phoneInputRef.current.clear();
    } else {
      toast.info('Number is already in the list.');
    }
    setValidation({ text: '', type: 'none', waStatus: 'none' });
  };

  const handleRemoveNumber = (num: string) => {
    setBlockedNumbers(blockedNumbers.filter(n => n !== num));
    setHasUnsavedChanges(true);
    setSaveStatus('idle');
  };

  const handleSave = useCallback(async (silent = true) => {
    if (!silent) setIsSaving(true);
    setSaveStatus('saving');
    try {
      const response = await fetch(`${dashboardData.global.restUrl}/settings`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': dashboardData.global.nonce
        },
        body: JSON.stringify({
          settings: {
            wawp_block_list: blockedNumbers.join('\n')
          }
        }),
      });

      if (response.ok) {
        setHasUnsavedChanges(false);
        setSaveStatus('saved');
        window.dispatchEvent(new CustomEvent('wawp-refresh-data'));
        if (!silent) toast.success("Block list updated successfully!");
        setTimeout(() => setSaveStatus('idle'), 3000);
      } else {
        setSaveStatus('error');
        if (!silent) toast.error("Failed to save block list.");
      }
    } catch (error) {
      console.error(error);
      setSaveStatus('error');
      if (!silent) toast.error("An unexpected error occurred.");
    } finally {
      if (!silent) setIsSaving(false);
    }
  }, [blockedNumbers, dashboardData]);

  // Auto-save logic
  useEffect(() => {
    if (!hasUnsavedChanges) return;
    const timer = setTimeout(() => handleSave(), 1500);
    return () => clearTimeout(timer);
  }, [blockedNumbers, hasUnsavedChanges, handleSave]);

  return (
    <SettingsLayout className="pb-12 bg-transparent p-0">
      <div className="max-w-7xl mx-auto space-y-4 animate-in fade-in duration-500">

        {/* Header */}
        <SettingsHeader
          title="Access Control"
          description="Restrict access and delivery to specific phone numbers globally."
          backUrl="admin.php?page=wawp&wawp_section=senders"
          className="mb-6"
        >
          <AnimatePresence mode="wait">
            {saveStatus === 'saving' && (
              <motion.div
                initial={{ opacity: 0, x: 10 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -10 }}
                className="flex items-center gap-2 px-3 py-1.5 bg-indigo-50 text-indigo-600 rounded-[5px] text-[10px] font-black uppercase tracking-widest border border-indigo-100/50"
              >
                <span className="w-1.5 h-1.5 bg-indigo-500 rounded-full animate-pulse" />
                Updating List...
              </motion.div>
            )}
            {saveStatus === 'saved' && (
              <motion.div
                initial={{ opacity: 0, x: 10 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -10 }}
                className="flex items-center gap-2 px-3 py-1.5 bg-emerald-50 text-emerald-600 rounded-[5px] text-[10px] font-black uppercase tracking-widest border border-emerald-100/50"
              >
                <CheckCircle2 size={14} /> Shield Updated
              </motion.div>
            )}
            {hasUnsavedChanges && saveStatus === 'idle' && (
              <motion.div
                initial={{ opacity: 0, x: 10 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -10 }}
                className="flex items-center gap-2 px-3 py-1.5 bg-amber-50 text-amber-600 rounded-[5px] text-[10px] font-black uppercase tracking-widest border border-amber-100/50"
              >
                <span className="w-1.5 h-1.5 bg-amber-500 rounded-full animate-ping" />
                Unsaved Changes
              </motion.div>
            )}
          </AnimatePresence>
          <AdminButton onClick={() => handleSave(false)} disabled={isSaving} className="uppercase tracking-widest px-6 shadow-none" icon={isSaving ? RefreshCw : CheckCircle2} loading={isSaving}>
            Deploy Block List
          </AdminButton>
        </SettingsHeader>

        {statusMessage && (
          <div className={`p-4 rounded-[5px] border flex items-start gap-3 text-sm font-bold animate-in zoom-in-95 duration-200 relative group ${statusMessage.type === 'success' ? 'bg-emerald-50 border-emerald-100 text-emerald-700' : 'bg-rose-50 border-rose-100 text-rose-700'}`}>
            {statusMessage.type === 'success' ? <CheckCircle2 className="w-5 h-5 mt-0.5 shrink-0" /> : <AlertTriangle className="w-5 h-5 mt-0.5 shrink-0" />}
            <span className="whitespace-pre-wrap leading-relaxed flex-1">{statusMessage.text}</span>
            <button
              onClick={() => setStatusMessage(null)}
              className={`p-1 rounded hover:bg-black/5 transition-colors shrink-0 ${statusMessage.type === 'success' ? 'text-emerald-400 hover:text-emerald-600' : 'text-rose-400 hover:text-rose-600'}`}
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        )}

        {/* Main Settings Card */}
        <SettingCard className="overflow-hidden p-0 shadow-none border-[#dcdcde] rounded-[5px]">
          <ModernCardHeader
            title="Global Block List"
            description="Numbers here will be denied all services"
            icon={ShieldAlert}
          />
          <div className="p-6 space-y-8">

            <div className="w-full space-y-4 pb-4">
              <div className="space-y-2">
                <Label className="text-xs font-bold text-slate-700 uppercase tracking-wide">Add Number to Blocklist</Label>
                <div className="flex gap-3">
                  <div className="flex-1">
                    <PhoneInput
                      ref={phoneInputRef}
                      onValidationChange={setValidation}
                      hideMessage
                      className="border-slate-200 rounded-[5px]"
                      placeholder="Phone number with country code"
                    />
                  </div>
                  <AdminButton onClick={handleAddNumber} className="px-8 uppercase tracking-widest shadow-none" icon={Plus}>
                    Add
                  </AdminButton>
                </div>
              </div>

              {validation.type !== 'none' && (
                <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-[5px] border border-slate-100">
                  <span className={`text-[11px] font-bold uppercase tracking-tight ${validation.type === 'valid' ? 'text-emerald-600' :
                    validation.type === 'invalid' ? 'text-rose-500' :
                      'text-blue-500'
                    }`}>
                    {validation.text}
                  </span>

                  {validation.waStatus === 'found' && (
                    <div className="h-4 w-px bg-slate-200" />
                  )}

                  {validation.waStatus === 'found' && (
                    <span className="flex items-center gap-1.5 text-[10px] bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full font-bold">
                      <i className="ri-whatsapp-line"></i> WhatsApp Active
                    </span>
                  )}
                </div>
              )}
            </div>

            <div className="space-y-3 pt-2">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <UserX className="w-4 h-4 text-slate-400" />
                  <span className="text-sm font-bold text-slate-700 tracking-tight">Currently Restricted Numbers</span>
                  <span className="text-[10px] bg-slate-100 text-slate-500 px-2 rounded-full font-bold ml-1">{blockedNumbers.length}</span>
                </div>
                {blockedNumbers.length > 0 && (
                  <button onClick={() => { setBlockedNumbers([]); setHasUnsavedChanges(true); setSaveStatus('idle'); }} className="text-[10px] font-bold text-rose-500 hover:text-rose-700 uppercase tracking-widest transition-colors">Clear All</button>
                )}
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2.5 p-5 bg-slate-50/30 border border-slate-100 rounded-[5px] min-h-[120px]">
                {blockedNumbers.length > 0 ? (
                  blockedNumbers.map((num, idx) => (
                    <div key={idx} className="flex items-center justify-between bg-white border border-[#dcdcde] rounded-[5px] py-2 px-3 group hover:border-rose-200 transition-all animate-in zoom-in-95 duration-200 shadow-sm">
                      <div className="flex items-center gap-2.5 overflow-hidden">
                        <div className="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center shrink-0">
                          <Phone className="w-2.5 h-2.5 text-slate-400" />
                        </div>
                        <span className="font-mono text-xs font-bold text-slate-700 truncate">{num}</span>
                      </div>
                      <button
                        onClick={() => handleRemoveNumber(num)}
                        className="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-rose-50 text-rose-400 hover:text-rose-600 transition-all ml-2"
                        title="Unblock Number"
                      >
                        <X className="w-3.5 h-3.5" />
                      </button>
                    </div>
                  ))
                ) : (
                  <div className="col-span-full flex flex-col items-center justify-center text-slate-300 py-6 opacity-60">
                    <ShieldAlert className="w-8 h-8 mb-2 stroke-[1.5]" />
                    <p className="text-xs font-bold uppercase tracking-widest italic">The blocklist is currently empty</p>
                  </div>
                )}
              </div>
            </div>

          </div>
        </SettingCard>
      </div>
    </SettingsLayout>
  );
}