import React, { useState } from 'react';
import { 
  X, 
  User, 
  Mail, 
  Phone, 
  MapPin, 
  FileText, 
  Calendar,
  CreditCard,
  Plus,
  Eye,
  Trash2,
  Edit
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Card } from '@/components/ui/card';
import { cn } from '@/lib/utils';

export const ClientPanel = ({ isOpen, onClose, clients = [] }) => {
    const [selectedClient, setSelectedClient] = useState(null);
    const [viewMode, setViewMode] = useState('list'); // 'list' | 'detail' | 'form'

    if (!isOpen) return null;

    const handleSelectClient = (client) => {
        setSelectedClient(client);
        setViewMode('detail');
    };

    const handleBack = () => {
        setViewMode('list');
        setSelectedClient(null);
    };

    return (
        <div className="fixed inset-0 z-50 flex justify-end">
            {/* Backdrop */}
            <div className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity" onClick={onClose} />

            {/* Panel */}
            <div className="relative w-full max-w-2xl bg-white h-full shadow-2xl border-l border-slate-200 animate-in slide-in-from-right duration-300 flex flex-col">
                
                {/* Header */}
                <div className="h-24 border-b border-slate-100 flex items-center justify-between px-8 shrink-0 bg-slate-50/50">
                   <div>
                       <h2 className="text-2xl font-black text-slate-900 tracking-tight">Gestão de Clientes</h2>
                       <p className="text-xs text-slate-500 font-medium">Base total: <span className="text-emerald-600 font-bold">{clients.length} clientes</span> cadastrados</p>
                   </div>
                   <Button variant="ghost" size="icon" onClick={onClose} className="rounded-full hover:bg-slate-200 text-slate-400 hover:text-slate-900 transition-colors">
                       <X className="w-5 h-5" />
                   </Button>
                </div>

                {/* Content */}
                <ScrollArea className="flex-1 p-8">
                    {/* LIST VIEW */}
                    {viewMode === 'list' && (
                        <div className="space-y-6">
                            <div className="flex justify-between items-center mb-8 gap-4">
                                <div className="relative flex-1 group">
                                    <Input placeholder="Buscar cliente por nome ou CPF/CNPJ..." className="bg-slate-50 border-slate-200 h-10 text-sm pl-4 focus:ring-emerald-500/20 focus:border-emerald-500/50 transition-all" />
                                </div>
                                <Button size="sm" className="bg-emerald-600 hover:bg-emerald-700 text-white font-black text-[10px] uppercase tracking-widest px-6 h-10 shadow-lg shadow-emerald-600/20 transition-all active:scale-95" onClick={() => setViewMode('form')}>
                                    <Plus className="w-4 h-4 mr-2" strokeWidth={3} /> Novo Cliente
                                </Button>
                            </div>

                            <div className="grid gap-4">
                                {(!clients || clients.length === 0) ? (
                                    <div className="flex flex-col items-center justify-center py-20 border-2 border-dashed border-slate-100 rounded-3xl text-slate-400 gap-4">
                                        <div className="w-12 h-12 bg-slate-50 rounded-full flex items-center justify-center">
                                            <Users className="w-6 h-6 text-slate-300" />
                                        </div>
                                        <p className="text-sm font-medium">Nenhum cliente disponível para exibição.</p>
                                    </div>
                                ) : clients.map(client => (
                                    <div 
                                        key={client?.id}
                                        onClick={() => handleSelectClient(client)}
                                        className="bg-white p-5 rounded-2xl border border-slate-100 hover:border-emerald-500/30 hover:shadow-xl hover:shadow-emerald-900/5 cursor-pointer transition-all group relative overflow-hidden"
                                    >
                                        <div className="flex justify-between items-center relative z-10">
                                            <div className="flex items-center gap-4">
                                                <div className="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-600 font-black border border-slate-100 group-hover:bg-emerald-50 group-hover:border-emerald-100 group-hover:text-emerald-600 transition-all duration-300">
                                                    {(client?.nome || "??").substring(0,2).toUpperCase()}
                                                </div>
                                                <div>
                                                    <h3 className="font-bold text-slate-900 text-base group-hover:text-emerald-600 transition-colors leading-tight">{client?.nome || 'Cliente Sem Nome'}</h3>
                                                    <div className="flex items-center gap-2 mt-1">
                                                        <p className="text-xs text-slate-500 font-medium">{client?.email || 'Sem e-mail'}</p>
                                                        <span className="w-1 h-1 bg-slate-300 rounded-full" />
                                                        <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">{client?.cpf_cnpj || 'Sem Documento'}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <Badge variant="outline" className={cn(
                                                "text-[9px] font-black uppercase tracking-[0.1em] px-3 py-1 rounded-full",
                                                client?.status_serv === 'Ativo' 
                                                    ? 'bg-emerald-50 text-emerald-600 border-emerald-100' 
                                                    : 'bg-slate-50 text-slate-400 border-slate-100'
                                            )}>
                                                {client?.status_serv || 'Indefinido'}
                                            </Badge>
                                        </div>
                                        {/* Background Decoration */}
                                        <div className="absolute top-0 right-0 w-24 h-24 bg-emerald-500/[0.02] rounded-full blur-2xl -mr-12 -mt-12 group-hover:bg-emerald-500/[0.05] transition-all" />
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* DETAIL VIEW */}
                    {viewMode === 'detail' && selectedClient && (
                         <div className="space-y-8 animate-in slide-in-from-right-4 duration-300">
                            <Button variant="ghost" onClick={handleBack} className="text-slate-500 hover:text-emerald-600 px-0 hover:bg-transparent flex items-center gap-2 mb-2 font-bold text-xs uppercase tracking-widest transition-colors">
                                <X className="w-4 h-4" /> Voltar para lista
                            </Button>

                            <div className="bg-white rounded-3xl p-8 border border-slate-100 relative overflow-hidden shadow-lg shadow-slate-200/50">
                                <div className="absolute top-0 right-0 p-8 opacity-5">
                                    <User className="w-40 h-40 text-slate-900" />
                                </div>
                                
                                <div className="relative z-10">
                                    <div className="flex items-center gap-4 mb-6">
                                        <div className="w-16 h-16 rounded-3xl bg-emerald-600 flex items-center justify-center text-white text-2xl font-black shadow-xl shadow-emerald-600/20">
                                            {(selectedClient.nome || "??").substring(0,2).toUpperCase()}
                                        </div>
                                        <div>
                                            <h2 className="text-3xl font-black text-slate-900 tracking-tight leading-none mb-2">{selectedClient.nome}</h2>
                                            <p className="text-sm text-emerald-600 font-bold flex items-center gap-2">
                                                <Activity className="w-3.5 h-3.5" />
                                                {selectedClient.dominio || "Domínio não informado"}
                                            </p>
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-6 gap-x-12 text-sm pt-4">
                                         <div className="flex flex-col gap-1.5">
                                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">E-mail de Contato</span>
                                            <div className="flex items-center gap-3 text-slate-700 font-bold text-xs">
                                                <Mail className="w-4 h-4 text-emerald-500" /> {selectedClient.email}
                                            </div>
                                         </div>
                                         <div className="flex flex-col gap-1.5">
                                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Telefone</span>
                                            <div className="flex items-center gap-3 text-slate-700 font-bold text-xs">
                                                <Phone className="w-4 h-4 text-emerald-500" /> {selectedClient.telefone}
                                            </div>
                                         </div>
                                         <div className="flex flex-col gap-1.5">
                                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">CPF / CNPJ</span>
                                            <div className="flex items-center gap-3 text-slate-700 font-bold text-xs">
                                                <FileText className="w-4 h-4 text-emerald-500" /> {selectedClient.cpf_cnpj}
                                            </div>
                                         </div>
                                         <div className="flex flex-col gap-1.5">
                                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Localização</span>
                                            <div className="flex items-center gap-3 text-slate-700 font-bold text-xs">
                                                <MapPin className="w-4 h-4 text-emerald-500" /> {selectedClient.cidade} - {selectedClient.uf}
                                            </div>
                                         </div>
                                    </div>
                                </div>
                            </div>

                            <Card className="border border-slate-100 shadow-sm bg-white overflow-hidden rounded-3xl">
                                <div className="p-6 border-b border-slate-50 flex justify-between items-center bg-slate-50/50">
                                    <h4 className="font-black text-slate-800 text-[10px] uppercase tracking-[0.2em] flex items-center gap-3">
                                        <div className="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
                                            <CreditCard className="w-4 h-4 text-emerald-600" />
                                        </div>
                                        Faturas Recentes
                                    </h4>
                                    <Button size="sm" variant="ghost" className="h-8 text-[10px] font-black uppercase text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50 tracking-widest">Ver todas faturas</Button>
                                </div>
                                <div className="p-2">
                                    {[1,2,3].map(i => (
                                        <div key={i} className="flex justify-between items-center p-4 hover:bg-slate-50 rounded-2xl transition-colors group">
                                            <div className="flex items-center gap-4">
                                                <div className="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center group-hover:bg-white transition-colors">
                                                    <FileText className="w-5 h-5 text-slate-400" />
                                                </div>
                                                <div>
                                                    <p className="text-xs font-bold text-slate-900 underline decoration-slate-200 group-hover:decoration-emerald-500/30 transition-all">Fatura #{202400 + i}</p>
                                                    <p className="text-[10px] text-slate-500 font-medium">Vencimento: 10/01/2026</p>
                                                </div>
                                            </div>
                                            <div className="text-right">
                                                <p className="text-sm font-black text-slate-900">R$ 750,00</p>
                                                <Badge className="text-[8px] font-black bg-emerald-100 text-emerald-700 border-none px-2 h-4">PAGO</Badge>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </Card>

                            <div className="flex gap-4 pt-4">
                                <Button className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-900 border-none font-black text-[10px] uppercase tracking-widest h-12 shadow-sm">
                                    <Edit className="w-4 h-4 mr-2" /> Editar Cadastro
                                </Button>
                                <Button className="flex-1 bg-rose-50 text-rose-600 hover:bg-rose-100 border border-rose-100 font-black text-[10px] uppercase tracking-widest h-12">
                                    <Trash2 className="w-4 h-4 mr-2" /> Excluir Cliente
                                </Button>
                            </div>
                         </div>
                    )}
                </ScrollArea>
            </div>
        </div>
    );
};

