import React from 'react';
import { 
  List, 
  Plus, 
  Search, 
  Filter,
  Edit,
  Trash2,
  CheckCircle2,
  Clock,
  MoreHorizontal
} from 'lucide-react';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { 
  Table, 
  TableBody, 
  TableCell, 
  TableHead, 
  TableHeader, 
  TableRow 
} from '@/components/ui/table';
import { cn } from '@/lib/utils';

export const RegistrosView = ({ data = [] }) => {
    const formatDate = (dateString) => {
        try {
            if (!dateString) return "N/D";
            const date = new Date(dateString);
            return isNaN(date.getTime()) ? "Data Inválida" : date.toLocaleDateString('pt-BR');
        } catch (e) {
            return "Erro Data";
        }
    };

    const formatCurrency = (val) => {
        return new Intl.NumberFormat('pt-BR', { 
            style: 'currency', 
            currency: 'BRL' 
        }).format(val || 0);
    };

    return (
        <Card className="bg-[#1e293b]/40 backdrop-blur-md border-slate-800 shadow-2xl mt-6 relative overflow-hidden">
             {/* Decorative Background Glow */}
             <div className="absolute -top-24 -right-24 w-64 h-64 bg-emerald-500/5 rounded-full blur-3xl pointer-events-none" />
             
             <CardHeader className="py-4 px-6 border-b border-slate-800/50 flex flex-col md:flex-row items-center justify-between gap-4 relative z-10">
                <div className="flex items-center gap-4 w-full md:w-auto">
                    <div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
                        <List className="w-5 h-5 text-emerald-500" />
                    </div>
                    <div>
                        <h3 className="font-bold text-white flex items-center gap-2 text-nowrap">
                            Extrato de Entradas
                            <Badge variant="outline" className="text-[10px] border-slate-700 text-slate-400 bg-slate-900/50">
                                {(data?.length || 0)} REGISTROS
                            </Badge>
                        </h3>
                        <p className="text-[10px] text-slate-500 font-medium uppercase tracking-wider">Monitoramento de fluxo de entrada</p>
                    </div>
                </div>
                
                <div className="flex items-center gap-3 w-full md:w-auto">
                    <div className="relative group">
                        <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-emerald-500 transition-colors" />
                        <Input 
                            placeholder="Buscar cliente ou NF..." 
                            className="bg-slate-900/80 border-slate-700 w-full md:w-64 pl-9 h-9 text-xs text-white placeholder:text-slate-600 focus:border-emerald-500/50 transition-all rounded-lg"
                        />
                    </div>
                    <Button size="sm" className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs shrink-0 shadow-lg shadow-emerald-500/20 px-4 h-9">
                        <Plus className="w-3.5 h-3.5 mr-2" /> Nova Entrada
                    </Button>
                </div>
            </CardHeader>
            <CardContent className="p-0 relative z-10">
                <div className="overflow-x-auto">
                    <Table>
                        <TableHeader className="bg-slate-900/80 sticky top-0">
                            <TableRow className="border-slate-800 hover:bg-transparent">
                                <TableHead className="text-slate-500 font-bold text-[10px] uppercase h-10 w-[120px] pl-6">Data de Entrada</TableHead>
                                <TableHead className="text-slate-500 font-bold text-[10px] uppercase h-10">Cliente / Descrição</TableHead>
                                <TableHead className="text-slate-500 font-bold text-[10px] uppercase h-10">Categoria</TableHead>
                                <TableHead className="text-slate-500 font-bold text-[10px] uppercase h-10 text-right">Valor</TableHead>
                                <TableHead className="text-slate-500 font-bold text-[10px] uppercase h-10 text-center">Status</TableHead>
                                <TableHead className="text-slate-500 font-bold text-[10px] uppercase h-10 text-right pr-6">Ações</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {!data || data.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={6} className="h-40 text-center text-slate-500 text-sm font-medium">
                                        Nenhuma entrada registrada.
                                    </TableCell>
                                </TableRow>
                            ) : data.map((item) => (
                                <TableRow key={item.id} className="border-slate-800/50 hover:bg-slate-800/30 transition-all duration-200 group">
                                    <TableCell className="font-mono text-xs text-slate-300 font-medium py-4 pl-6">
                                        {formatDate(item.dataEntrada)}
                                    </TableCell>
                                    <TableCell className="py-4">
                                        <div className="flex flex-col">
                                            <span className="text-sm text-white font-bold tracking-tight">{item.cliente}</span>
                                            <span className="text-[10px] text-slate-500 flex items-center gap-1">
                                                {item.descricao}
                                            </span>
                                        </div>
                                    </TableCell>
                                    <TableCell className="py-4">
                                        <Badge variant="outline" className="bg-slate-900 border-slate-800 text-slate-400 text-[9px] uppercase font-bold px-2">
                                            {item.categoria}
                                        </Badge>
                                    </TableCell>
                                    <TableCell className="font-mono text-xs font-black text-emerald-400 text-right py-4">
                                        {formatCurrency(item.valor)}
                                    </TableCell>
                                    <TableCell className="py-4 text-center">
                                        <Badge className={cn(
                                            "text-[9px] font-black tracking-widest uppercase px-2 py-0.5 rounded-sm shadow-sm",
                                            item.status === 'Recebido' 
                                                ? 'bg-emerald-500/10 text-emerald-500 border border-emerald-500/20' 
                                                : 'bg-amber-500/10 text-amber-500 border border-amber-500/20 animate-pulse'
                                        )}>
                                            <div className="flex items-center gap-1">
                                                {item.status === 'Recebido' ? <CheckCircle2 className="w-2.5 h-2.5" /> : <Clock className="w-2.5 h-2.5" />}
                                                {item.status}
                                            </div>
                                        </Badge>
                                    </TableCell>
                                    <TableCell className="py-4 text-right pr-6">
                                        <div className="flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-2 group-hover:translate-x-0">
                                            <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400 hover:bg-slate-800 rounded-lg">
                                                <Edit className="w-3.5 h-3.5" />
                                            </Button>
                                            <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-red-400 hover:bg-slate-800 rounded-lg">
                                                <Trash2 className="w-3.5 h-3.5" />
                                            </Button>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </div>
            </CardContent>
        </Card>
    );
};
