import { useState, useRef, useEffect, useCallback } from 'react';
import type { DashboardData } from './types';
import { motion, AnimatePresence } from 'framer-motion';
import { Button } from './components/ui/button';
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
} 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}wawp/v1/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>
          <Button onClick={() => handleSave(false)} disabled={isSaving} className="bg-[#004449] hover:bg-[#003337] text-white rounded-[5px] shadow-none font-bold text-xs uppercase tracking-widest px-6 h-10 transition-all active:scale-95">
            {isSaving ? <RefreshCw className="mr-2 h-4 w-4 animate-spin" /> : <CheckCircle2 className="mr-2 h-4 w-4" />}
            Deploy Block List
          </Button>
        </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="h-11 border-slate-200 rounded-[5px]"
                            placeholder="Phone number with country code"
                        />
                      </div>
                      <Button onClick={handleAddNumber} className="bg-[#004449] hover:bg-[#003337] text-white rounded-[5px] h-11 px-8 font-bold text-xs uppercase tracking-widest shadow-none active:scale-95 transition-all shrink-0">
                        <Plus className="mr-2 h-4 w-4" strokeWidth={3} /> Add
                      </Button>
                    </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>
  );
}