"use client";

import { useState } from 'react';
import {
    CalendarIcon,
    MagnifyingGlassIcon,
    PlusIcon,
    FunnelIcon,
    ArrowPathIcon,
    EllipsisVerticalIcon
} from "@heroicons/react/24/outline";
import { Button, Input, Select, PageHeader, Card, StatsCard, Tabs, DatePicker, CustomSelect } from "@/components/ui";
import {
    UsersIcon,
    CurrencyDollarIcon,
    BriefcaseIcon as BriefcaseSolidIcon,
    ArrowTrendingUpIcon,
    TableCellsIcon,
    ChartPieIcon,
    Cog6ToothIcon as CogIcon
} from "@heroicons/react/24/outline";

export default function TestPage() {
    const [searchTerm, setSearchTerm] = useState('');
    const [dateRange, setDateRange] = useState<{ start: Date | null; end: Date | null }>({ start: null, end: null });
    const [status, setStatus] = useState('all');

    // Dados fictícios para a lista
    const items = [
        { id: 1, name: 'Projeto Alpha', client: 'Empresa A', date: '2023-10-01', status: 'Ativo', amount: 'R$ 1.500,00' },
        { id: 2, name: 'Serviço Beta', client: 'Empresa B', date: '2023-10-05', status: 'Pendente', amount: 'R$ 2.300,00' },
        { id: 3, name: 'Consultoria Gamma', client: 'Empresa C', date: '2023-10-10', status: 'Concluído', amount: 'R$ 800,00' },
        { id: 4, name: 'Design Delta', client: 'Empresa D', date: '2023-10-12', status: 'Ativo', amount: 'R$ 4.200,00' },
    ];

    return (
        <div className="p-6 max-w-[1600px] mx-auto space-y-6">
            <PageHeader
                title="Página de Teste"
                description="Área de desenvolvimento e homologação de novos componentes do padrão Aggios."
                primaryAction={{
                    label: "Novo Item",
                    icon: <PlusIcon className="w-4 h-4" />,
                    onClick: () => console.log('Novo Item')
                }}
            />

            {/* Stats Grid */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <StatsCard
                    title="Total de Clientes"
                    value="1.240"
                    icon={<UsersIcon className="w-6 h-6" />}
                    trend={{ value: '12%', label: 'vs mês passado', type: 'up' }}
                />
                <StatsCard
                    title="Receita Mensal"
                    value="R$ 45.200"
                    icon={<CurrencyDollarIcon className="w-6 h-6" />}
                    trend={{ value: '8.4%', label: 'vs mês passado', type: 'up' }}
                />
                <StatsCard
                    title="Projetos Ativos"
                    value="42"
                    icon={<BriefcaseSolidIcon className="w-6 h-6" />}
                    trend={{ value: '2', label: 'novos esta semana', type: 'neutral' }}
                />
                <StatsCard
                    title="Taxa de Conversão"
                    value="18.5%"
                    icon={<ArrowTrendingUpIcon className="w-6 h-6" />}
                    trend={{ value: '2.1%', label: 'vs mês passado', type: 'down' }}
                />
            </div>

            {/* Filters Area: Clean Visual (Solid contrast) */}
            <div className="flex flex-col md:flex-row gap-4 items-center">
                <div className="flex-1 w-full">
                    <Input
                        placeholder="Pesquisar registros..."
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                        leftIcon={<MagnifyingGlassIcon className="w-5 h-5 text-zinc-400" />}
                        className="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 focus:border-zinc-400 dark:focus:border-zinc-500"
                    />
                </div>
                <div className="w-full md:w-80">
                    <DatePicker
                        value={dateRange}
                        onChange={setDateRange}
                        buttonClassName="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-400"
                    />
                </div>
                <div className="w-full md:w-56">
                    <CustomSelect
                        value={status}
                        onChange={setStatus}
                        options={[
                            { label: 'Todos os Status', value: 'all' },
                            { label: 'Ativo', value: 'active', color: 'bg-emerald-500' },
                            { label: 'Pendente', value: 'pending', color: 'bg-amber-500' },
                            { label: 'Concluído', value: 'done', color: 'bg-blue-500' },
                        ]}
                        buttonClassName="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 hover:border-zinc-400"
                    />
                </div>
            </div>

            {/* Content Tabs */}
            <Tabs
                items={[
                    {
                        label: 'Visão Geral',
                        icon: <TableCellsIcon />,
                        content: (
                            <Card noPadding title="Itens Recentes" description="Lista de últimos itens cadastrados no sistema.">
                                <div className="overflow-x-auto">
                                    <table className="w-full border-collapse">
                                        <thead>
                                            <tr className="bg-zinc-50/50 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-800 text-left">
                                                <th className="px-6 py-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Item</th>
                                                <th className="px-6 py-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Cliente</th>
                                                <th className="px-6 py-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Data</th>
                                                <th className="px-6 py-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Valor</th>
                                                <th className="px-6 py-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider text-right">Ações</th>
                                            </tr>
                                        </thead>
                                        <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
                                            {items.map((item) => (
                                                <tr key={item.id} className="hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors group">
                                                    <td className="px-6 py-4">
                                                        <div className="font-medium text-zinc-900 dark:text-white">{item.name}</div>
                                                        <div className="text-xs text-zinc-500">ID: #{item.id}</div>
                                                    </td>
                                                    <td className="px-6 py-4 text-sm text-zinc-600 dark:text-zinc-300">{item.client}</td>
                                                    <td className="px-6 py-4 text-sm text-zinc-600 dark:text-zinc-300">
                                                        <div className="flex items-center gap-2">
                                                            <CalendarIcon className="w-4 h-4 text-zinc-400" />
                                                            {new Date(item.date).toLocaleDateString('pt-BR')}
                                                        </div>
                                                    </td>
                                                    <td className="px-6 py-4 text-sm font-semibold text-zinc-900 dark:text-white">{item.amount}</td>
                                                    <td className="px-6 py-4 text-right">
                                                        <button className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-400 hover:text-zinc-600 transition-colors">
                                                            <EllipsisVerticalIcon className="w-5 h-5" />
                                                        </button>
                                                    </td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>

                                <div className="p-4 bg-zinc-50/30 dark:bg-zinc-900/30 border-t border-zinc-200 dark:border-zinc-800 flex items-center justify-between">
                                    <span className="text-xs text-zinc-500 italic">Exibindo {items.length} resultados encontrados.</span>
                                    <div className="flex gap-2">
                                        <Button variant="outline" size="sm">Anterior</Button>
                                        <Button variant="outline" size="sm">Próximo</Button>
                                    </div>
                                </div>
                            </Card>
                        )
                    },
                    {
                        label: 'Relatórios',
                        icon: <ChartPieIcon />,
                        content: (
                            <Card title="Analytics" description="Visualize o desempenho dos seus itens em tempo real.">
                                <div className="flex items-center justify-center h-48 border-2 border-dashed border-zinc-200 dark:border-zinc-800 rounded-xl">
                                    <p className="text-zinc-400 text-sm font-medium">Gráficos e métricas detalhadas serão exibidos aqui.</p>
                                </div>
                            </Card>
                        )
                    },
                    {
                        label: 'Configurações',
                        icon: <CogIcon />,
                        content: (
                            <Card title="Preferências" description="Ajuste as configurações deste módulo de teste.">
                                <div className="space-y-4">
                                    <div className="flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-xl">
                                        <div>
                                            <p className="text-sm font-bold text-zinc-900 dark:text-white">Notificações por E-mail</p>
                                            <p className="text-xs text-zinc-500">Receba alertas automáticos sobre novos itens.</p>
                                        </div>
                                        <div className="w-10 h-6 bg-brand-500 rounded-full relative">
                                            <div className="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                        )
                    }
                ]}
            />
        </div>
    );
}