import React from 'react';
import { 
  X, 
  Server, 
  Plus,
  Edit,
  Trash2,
  DollarSign
} 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';

export const ServicesPanel = ({ isOpen, onClose, services = [] }) => {
    if (!isOpen) return null;

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

            <div className="relative w-full max-w-xl bg-white h-full shadow-2xl border-l border-slate-100 animate-in slide-in-from-right duration-300 flex flex-col">
                 <div className="h-24 border-b border-slate-100 flex items-center justify-between px-8 shrink-0 bg-slate-50/50">
                   <div className="flex items-center gap-4">
                       <div className="w-12 h-12 bg-emerald-600 rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-600/20">
                           <Server className="w-6 h-6 text-white" strokeWidth={2.5} />
                       </div>
                       <div>
                           <h2 className="text-xl font-black text-slate-900 tracking-tight">Catálogo de Serviços</h2>
                           <p className="text-xs text-slate-500 font-bold">Gerencie os planos e serviços oferecidos</p>
                       </div>
                   </div>
                   <Button variant="ghost" size="icon" onClick={onClose} className="rounded-full hover:bg-slate-100 text-slate-400 hover:text-slate-900 transition-colors">
                       <X className="w-5 h-5" />
                   </Button>
                </div>

                <ScrollArea className="flex-1 p-8">
                    <div className="flex justify-between items-center mb-8">
                        <Input placeholder="Buscar serviço..." className="bg-white border-slate-200 h-10 text-sm w-72 font-medium placeholder:text-slate-400 focus:border-emerald-500 focus:ring-emerald-500/20 rounded-xl shadow-sm" />
                        <Button size="sm" className="bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs h-10 px-5 rounded-xl shadow-lg shadow-emerald-600/20 transition-all active:scale-95">
                            <Plus className="w-4 h-4 mr-2" strokeWidth={2.5} /> Novo Serviço
                        </Button>
                    </div>

                    <div className="space-y-4">
                        {(!services || services.length === 0) ? (
                            <div className="text-center py-16 border-2 border-dashed border-slate-200 rounded-3xl text-slate-400 text-sm font-bold bg-slate-50/30">
                                <Server className="w-12 h-12 mx-auto mb-4 text-slate-300" strokeWidth={1.5} />
                                Nenhum serviço cadastrado.
                            </div>
                        ) : services.map(service => (
                            <div key={service?.idservicos} className="bg-white p-5 rounded-2xl border border-slate-200 flex items-center justify-between group hover:border-emerald-500/50 hover:shadow-lg hover:shadow-emerald-500/5 transition-all">
                                <div className="flex items-center gap-5">
                                    <div className="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center border border-emerald-100 group-hover:bg-emerald-100 transition-colors">
                                        <Server className="w-6 h-6 text-emerald-600" strokeWidth={2.5} />
                                    </div>
                                    <div>
                                        <h3 className="font-black text-slate-900 text-sm tracking-tight">{service?.servico || 'Serviço s/ Nome'}</h3>
                                        <div className="flex items-center gap-2 text-xs text-slate-500 font-bold mt-1">
                                            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Ativo no sistema
                                        </div>
                                    </div>
                                </div>
                                <div className="flex items-center gap-8">
                                    <div className="text-right">
                                        <span className="text-[9px] text-slate-400 uppercase font-black block tracking-wider">Valor Base</span>
                                        <span className="text-base font-black text-slate-900 mt-1 block">
                                            {new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(service?.valor || 0)}
                                        </span>
                                    </div>
                                    <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <Button size="icon" variant="ghost" className="h-9 w-9 text-slate-400 hover:text-emerald-600 hover:bg-emerald-50 rounded-xl transition-colors">
                                            <Edit className="w-4 h-4" strokeWidth={2.5} />
                                        </Button>
                                        <Button size="icon" variant="ghost" className="h-9 w-9 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-xl transition-colors">
                                            <Trash2 className="w-4 h-4" strokeWidth={2.5} />
                                        </Button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </ScrollArea>
            </div>
        </div>
    );
};

