import React, { useState, useEffect } from 'react';
import { Layers, Plus, Edit, Trash2, ChevronUp, ChevronDown, Loader2, X, CheckCircle2 } from 'lucide-react';
import { getFunnels, createFunnel, updateFunnel, deleteFunnel } from '../services/dataService';
import { FunnelStageDef } from '../types';

export const Funnels: React.FC = () => {
  const [funnels, setFunnels] = useState<FunnelStageDef[]>([]);
  const [loading, setLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingFunnel, setEditingFunnel] = useState<FunnelStageDef | null>(null);
  const [formData, setFormData] = useState({ name: '', color_class: '' });
  const [isSaving, setIsSaving] = useState(false);

  const tenantId = localStorage.getItem('ctms_tenant_id') || '';

  const PRESET_COLORS = [
    { label: 'Cinza (Neutro)', value: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border' },
    { label: 'Azul (Início)', value: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800' },
    { label: 'Roxo (Meio)', value: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800' },
    { label: 'Laranja (Atenção)', value: 'bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-900/30 dark:text-orange-400 dark:border-orange-800' },
    { label: 'Verde (Sucesso)', value: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800' },
    { label: 'Vermelho (Perda)', value: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800' },
  ];

  const loadFunnels = async () => {
    setLoading(true);
    const data = await getFunnels(tenantId);
    setFunnels(data.sort((a, b) => a.order_index - b.order_index));
    setLoading(false);
  };

  useEffect(() => {
    loadFunnels();
  }, [tenantId]);

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSaving(true);
    try {
      if (editingFunnel) {
        await updateFunnel(editingFunnel.id, formData);
      } else {
        await createFunnel({ ...formData, tenantId, order_index: funnels.length });
      }
      setIsModalOpen(false);
      loadFunnels();
    } catch (err) {
      alert("Erro ao salvar etapa.");
    } finally {
      setIsSaving(false);
    }
  };

  const handleDelete = async (id: string) => {
    if (confirm('Tem certeza que deseja excluir esta etapa?')) {
      await deleteFunnel(id);
      loadFunnels();
    }
  };

  const handleMove = async (index: number, direction: 'up' | 'down') => {
    if (direction === 'up' && index === 0) return;
    if (direction === 'down' && index === funnels.length - 1) return;

    const newIndex = direction === 'up' ? index - 1 : index + 1;
    const newFunnels = [...funnels];
    
    // Swap order_index
    const tempOrder = newFunnels[index].order_index;
    newFunnels[index].order_index = newFunnels[newIndex].order_index;
    newFunnels[newIndex].order_index = tempOrder;

    // Optimistic UI update
    setFunnels(newFunnels.sort((a, b) => a.order_index - b.order_index));

    // Persist to backend
    await Promise.all([
      updateFunnel(newFunnels[index].id, { order_index: newFunnels[index].order_index }),
      updateFunnel(newFunnels[newIndex].id, { order_index: newFunnels[newIndex].order_index })
    ]);
  };

  const openModal = (funnel?: FunnelStageDef) => {
    if (funnel) {
      setEditingFunnel(funnel);
      setFormData({ name: funnel.name, color_class: funnel.color_class });
    } else {
      setEditingFunnel(null);
      setFormData({ name: '', color_class: PRESET_COLORS[0].value });
    }
    setIsModalOpen(true);
  };

  if (loading) return <div className="p-12 flex justify-center"><Loader2 className="animate-spin text-zinc-400" size={32} /></div>;

  return (
    <div className="max-w-4xl mx-auto space-y-6 pb-12 transition-colors duration-300">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Personalizar Funil</h1>
          <p className="text-zinc-500 dark:text-zinc-400 text-sm">Crie, edite e reordene as etapas do funil de vendas da sua organização.</p>
        </div>
        <button onClick={() => openModal()} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-4 py-2 rounded-lg flex items-center gap-2 text-sm font-bold shadow-sm hover:opacity-90 transition-all shrink-0">
          <Plus size={16} /> Nova Etapa
        </button>
      </div>

      <div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm overflow-hidden">
        <div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-bg/50">
          <h3 className="font-bold text-zinc-900 dark:text-zinc-50 flex items-center gap-2">
            <Layers className="text-brand-yellow" size={18} /> Etapas do Funil
          </h3>
        </div>
        
        <div className="divide-y divide-zinc-100 dark:divide-dark-border">
          {funnels.map((f, index) => (
            <div key={f.id} className="p-4 flex items-center justify-between group hover:bg-zinc-50 dark:hover:bg-dark-bg transition-colors">
              <div className="flex items-center gap-4">
                <div className="flex flex-col gap-1">
                  <button onClick={() => handleMove(index, 'up')} disabled={index === 0} className="p-1 text-zinc-300 hover:text-zinc-900 dark:hover:text-white disabled:opacity-30 transition-colors">
                    <ChevronUp size={16} />
                  </button>
                  <button onClick={() => handleMove(index, 'down')} disabled={index === funnels.length - 1} className="p-1 text-zinc-300 hover:text-zinc-900 dark:hover:text-white disabled:opacity-30 transition-colors">
                    <ChevronDown size={16} />
                  </button>
                </div>
                <div>
                  <span className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide border ${f.color_class}`}>
                    {f.name}
                  </span>
                </div>
              </div>
              
              <div className="flex gap-2">
                <button onClick={() => openModal(f)} className="p-2 text-zinc-400 hover:text-brand-yellow hover:bg-zinc-100 dark:hover:bg-dark-input rounded-lg transition-colors">
                  <Edit size={16} />
                </button>
                <button onClick={() => handleDelete(f.id)} className="p-2 text-zinc-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors">
                  <Trash2 size={16} />
                </button>
              </div>
            </div>
          ))}
          {funnels.length === 0 && (
            <div className="p-8 text-center text-zinc-500 dark:text-dark-muted">Nenhuma etapa configurada.</div>
          )}
        </div>
      </div>

      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm">
          <div className="bg-white dark:bg-dark-card rounded-xl shadow-xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
            <div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center bg-zinc-50/50 dark:bg-dark-bg/50">
              <h3 className="font-bold text-zinc-900 dark:text-zinc-50">{editingFunnel ? 'Editar Etapa' : 'Nova Etapa'}</h3>
              <button onClick={() => setIsModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
            </div>
            <form onSubmit={handleSave} className="p-6 space-y-4">
              <div>
                <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Nome da Etapa</label>
                <input 
                  type="text" 
                  value={formData.name} 
                  onChange={e => setFormData({...formData, name: e.target.value})} 
                  placeholder="Ex: Qualificação"
                  className="w-full bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border p-3 rounded-lg text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all" 
                  required 
                />
              </div>
              
              <div>
                <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-2 block">Cor Visual</label>
                <div className="grid grid-cols-2 gap-2">
                  {PRESET_COLORS.map((color, i) => (
                    <label key={i} className={`flex items-center gap-2 p-2 border rounded-lg cursor-pointer transition-all ${formData.color_class === color.value ? 'border-brand-yellow bg-yellow-50/50 dark:bg-yellow-900/10' : 'border-zinc-200 dark:border-dark-border hover:bg-zinc-50 dark:hover:bg-dark-input'}`}>
                      <input 
                        type="radio" 
                        name="color" 
                        value={color.value} 
                        checked={formData.color_class === color.value} 
                        onChange={(e) => setFormData({...formData, color_class: e.target.value})}
                        className="sr-only"
                      />
                      <span className={`w-3 h-3 rounded-full border ${color.value.split(' ')[0]} ${color.value.split(' ')[2]}`}></span>
                      <span className="text-xs font-medium text-zinc-700 dark:text-zinc-300">{color.label}</span>
                    </label>
                  ))}
                </div>
              </div>

              <div className="pt-4 flex justify-end gap-3 mt-6 border-t border-zinc-100 dark:border-dark-border pt-6">
                <button type="button" onClick={() => setIsModalOpen(false)} className="px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg text-sm font-medium transition-colors">Cancelar</button>
                <button type="submit" disabled={isSaving} className="px-6 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all shadow-sm disabled:opacity-70">
                  {isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Salvar Etapa'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};