import AdminLayout from '@/Layouts/AdminLayout';
import { Head } from '@inertiajs/react';

export default function Dashboard() {
    return (
        <AdminLayout
            activeSidebarKey="dashboard"
            breadcrumbs={[{ label: 'Admin' }, { label: 'Dashboard', current: true }]}
        >
            <Head title="Dashboard" />

            <div className="space-y-8">
                <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                    <div>
                        <h2 className="text-3xl font-black tracking-tight text-slate-900 dark:text-white">
                            Visão Geral
                        </h2>
                        <p className="mt-1 text-slate-500 dark:text-slate-400">
                            Acompanhe a saúde do funil e conversão em tempo real.
                        </p>
                    </div>

                    <div className="flex items-center gap-2 rounded-xl bg-slate-100 p-1 dark:bg-slate-800">
                        <button
                            type="button"
                            className="rounded-lg bg-white px-4 py-1.5 text-xs font-semibold shadow-sm dark:bg-slate-700"
                        >
                            Hoje
                        </button>
                        <button
                            type="button"
                            className="px-4 py-1.5 text-xs font-semibold text-slate-500 hover:text-slate-700 dark:hover:text-slate-200"
                        >
                            7 Dias
                        </button>
                        <button
                            type="button"
                            className="px-4 py-1.5 text-xs font-semibold text-slate-500 hover:text-slate-700 dark:hover:text-slate-200"
                        >
                            30 Dias
                        </button>
                        <button
                            type="button"
                            className="flex items-center gap-1 px-4 py-1.5 text-xs font-semibold text-slate-500 hover:text-slate-700 dark:hover:text-slate-200"
                        >
                            Personalizado
                            <span className="material-symbols-outlined text-xs">
                                calendar_today
                            </span>
                        </button>
                    </div>
                </div>

                <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
                    <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                        <div className="mb-4 flex items-start justify-between">
                            <div className="rounded-lg bg-slate-100 p-2 text-slate-600 dark:bg-slate-800 dark:text-slate-400">
                                <span className="material-symbols-outlined">
                                    play_circle
                                </span>
                            </div>
                            <span className="flex items-center gap-0.5 text-xs font-bold text-emerald-500">
                                +12.5%
                                <span className="material-symbols-outlined text-xs">
                                    trending_up
                                </span>
                            </span>
                        </div>
                        <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
                            Inícios
                        </p>
                        <h3 className="mt-1 text-2xl font-bold">12,482</h3>
                    </div>

                    <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                        <div className="mb-4 flex items-start justify-between">
                            <div className="rounded-lg bg-slate-100 p-2 text-slate-600 dark:bg-slate-800 dark:text-slate-400">
                                <span className="material-symbols-outlined">
                                    task_alt
                                </span>
                            </div>
                            <span className="flex items-center gap-0.5 text-xs font-bold text-emerald-500">
                                +8.2%
                                <span className="material-symbols-outlined text-xs">
                                    trending_up
                                </span>
                            </span>
                        </div>
                        <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
                            Conclusões
                        </p>
                        <h3 className="mt-1 text-2xl font-bold">8,103</h3>
                    </div>

                    <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                        <div className="mb-4 flex items-start justify-between">
                            <div className="rounded-lg bg-slate-100 p-2 text-slate-600 dark:bg-slate-800 dark:text-slate-400">
                                <span className="material-symbols-outlined">
                                    analytics
                                </span>
                            </div>
                            <span className="flex items-center gap-0.5 text-xs font-bold text-amber-500">
                                -2.1%
                                <span className="material-symbols-outlined text-xs">
                                    trending_down
                                </span>
                            </span>
                        </div>
                        <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
                            Taxa de Conclusão
                        </p>
                        <h3 className="mt-1 text-2xl font-bold">64.9%</h3>
                    </div>

                    <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                        <div className="mb-4 flex items-start justify-between">
                            <div className="rounded-lg bg-primary/10 p-2 text-primary">
                                <span className="material-symbols-outlined">
                                    chat
                                </span>
                            </div>
                            <span className="flex items-center gap-0.5 text-xs font-bold text-emerald-500">
                                +24.0%
                                <span className="material-symbols-outlined text-xs">
                                    trending_up
                                </span>
                            </span>
                        </div>
                        <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
                            Leads WhatsApp
                        </p>
                        <h3 className="mt-1 text-2xl font-bold">2,341</h3>
                    </div>
                </div>

                <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
                    <div className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:col-span-2">
                        <h4 className="mb-6 text-lg font-bold">
                            Funil de Conversão
                        </h4>

                        <div className="relative flex h-[300px] items-end justify-between gap-4 px-4">
                            <div className="group flex flex-1 flex-col items-center gap-2">
                                <div className="relative flex h-full w-full items-center justify-center rounded-t-lg bg-primary/20 transition-colors hover:bg-primary/30">
                                    <span className="text-xs font-bold text-primary">
                                        100%
                                    </span>
                                </div>
                                <span className="text-[10px] font-bold uppercase text-slate-400">
                                    Visitantes
                                </span>
                            </div>

                            <div className="group flex flex-1 flex-col items-center gap-2">
                                <div className="relative flex h-[80%] w-full items-center justify-center rounded-t-lg bg-primary/40 transition-colors hover:bg-primary/50">
                                    <span className="text-xs font-bold text-primary">
                                        80%
                                    </span>
                                </div>
                                <span className="text-[10px] font-bold uppercase text-slate-400">
                                    Inícios
                                </span>
                            </div>

                            <div className="group flex flex-1 flex-col items-center gap-2">
                                <div className="relative flex h-[65%] w-full items-center justify-center rounded-t-lg bg-primary/60 transition-colors hover:bg-primary/70">
                                    <span className="text-xs font-bold text-white">
                                        65%
                                    </span>
                                </div>
                                <span className="text-[10px] font-bold uppercase text-slate-400">
                                    Quiz
                                </span>
                            </div>

                            <div className="group flex flex-1 flex-col items-center gap-2">
                                <div className="relative flex h-[45%] w-full items-center justify-center rounded-t-lg bg-primary/80 transition-colors hover:bg-primary/90">
                                    <span className="text-xs font-bold text-white">
                                        45%
                                    </span>
                                </div>
                                <span className="text-[10px] font-bold uppercase text-slate-400">
                                    Finalizaram
                                </span>
                            </div>

                            <div className="group flex flex-1 flex-col items-center gap-2">
                                <div className="relative flex h-[22%] w-full items-center justify-center rounded-t-lg bg-primary">
                                    <span className="text-xs font-bold text-white">
                                        22%
                                    </span>
                                </div>
                                <span className="text-[10px] font-bold uppercase text-slate-400">
                                    WhatsApp
                                </span>
                            </div>
                        </div>
                    </div>

                    <div className="flex flex-col rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                        <h4 className="mb-6 text-lg font-bold">
                            Distribuição de Risco
                        </h4>

                        <div className="flex flex-1 flex-col items-center justify-center gap-8">
                            <div className="relative flex h-48 w-48 items-center justify-center rounded-full bg-[conic-gradient(#10b981_0%_65%,#f59e0b_65%_85%,#f43f5e_85%_100%)]">
                                <div className="absolute inset-4 flex flex-col items-center justify-center rounded-full bg-white shadow-inner dark:bg-slate-900">
                                    <span className="text-3xl font-black">
                                        2,3k
                                    </span>
                                    <span className="text-[10px] font-bold uppercase tracking-widest text-slate-500">
                                        Total Analisado
                                    </span>
                                </div>
                            </div>

                            <div className="grid w-full grid-cols-1 gap-3">
                                <div className="flex items-center justify-between">
                                    <div className="flex items-center gap-2">
                                        <div className="h-3 w-3 rounded-full bg-emerald-500" />
                                        <span className="text-sm font-medium">
                                            Baixo Risco
                                        </span>
                                    </div>
                                    <span className="text-sm font-bold">65%</span>
                                </div>

                                <div className="flex items-center justify-between">
                                    <div className="flex items-center gap-2">
                                        <div className="h-3 w-3 rounded-full bg-amber-500" />
                                        <span className="text-sm font-medium">
                                            Moderado
                                        </span>
                                    </div>
                                    <span className="text-sm font-bold">20%</span>
                                </div>

                                <div className="flex items-center justify-between">
                                    <div className="flex items-center gap-2">
                                        <div className="h-3 w-3 rounded-full bg-rose-500" />
                                        <span className="text-sm font-medium">
                                            Alto Risco
                                        </span>
                                    </div>
                                    <span className="text-sm font-bold">15%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <div className="flex items-center justify-between border-b border-slate-100 p-6 dark:border-slate-800">
                        <h4 className="text-lg font-bold">Desempenho por Estado</h4>
                        <button
                            type="button"
                            className="text-sm font-semibold text-primary hover:underline"
                        >
                            Ver todos os estados
                        </button>
                    </div>

                    <div className="overflow-x-auto">
                        <table className="w-full text-left">
                            <thead>
                                <tr className="bg-slate-50 text-xs font-bold uppercase tracking-wider text-slate-500 dark:bg-slate-800/50 dark:text-slate-400">
                                    <th className="px-6 py-4">Estado</th>
                                    <th className="px-6 py-4">Inícios</th>
                                    <th className="px-6 py-4">Conversão Lead</th>
                                    <th className="px-6 py-4">Tendência</th>
                                    <th className="px-6 py-4 text-right">Status</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
                                <tr className="transition-colors hover:bg-slate-50/50 dark:hover:bg-slate-800/30">
                                    <td className="px-6 py-4 font-semibold">
                                        São Paulo
                                    </td>
                                    <td className="px-6 py-4">4,502</td>
                                    <td className="px-6 py-4">
                                        <div className="flex items-center gap-3">
                                            <div className="h-2 w-24 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                                                <div
                                                    className="h-full rounded-full bg-emerald-500"
                                                    style={{ width: '78%' }}
                                                />
                                            </div>
                                            <span className="text-xs font-bold">
                                                78%
                                            </span>
                                        </div>
                                    </td>
                                    <td className="px-6 py-4 text-emerald-500">
                                        <span className="material-symbols-outlined">
                                            trending_up
                                        </span>
                                    </td>
                                    <td className="px-6 py-4 text-right">
                                        <span className="rounded-full bg-emerald-100 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
                                            Estável
                                        </span>
                                    </td>
                                </tr>

                                <tr className="transition-colors hover:bg-slate-50/50 dark:hover:bg-slate-800/30">
                                    <td className="px-6 py-4 font-semibold">
                                        Rio de Janeiro
                                    </td>
                                    <td className="px-6 py-4">3,120</td>
                                    <td className="px-6 py-4">
                                        <div className="flex items-center gap-3">
                                            <div className="h-2 w-24 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                                                <div
                                                    className="h-full rounded-full bg-amber-500"
                                                    style={{ width: '54%' }}
                                                />
                                            </div>
                                            <span className="text-xs font-bold">
                                                54%
                                            </span>
                                        </div>
                                    </td>
                                    <td className="px-6 py-4 text-slate-400">
                                        <span className="material-symbols-outlined">
                                            trending_flat
                                        </span>
                                    </td>
                                    <td className="px-6 py-4 text-right">
                                        <span className="rounded-full bg-amber-100 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-amber-600 dark:bg-amber-900/30 dark:text-amber-400">
                                            Atenção
                                        </span>
                                    </td>
                                </tr>

                                <tr className="transition-colors hover:bg-slate-50/50 dark:hover:bg-slate-800/30">
                                    <td className="px-6 py-4 font-semibold">
                                        Minas Gerais
                                    </td>
                                    <td className="px-6 py-4">2,890</td>
                                    <td className="px-6 py-4">
                                        <div className="flex items-center gap-3">
                                            <div className="h-2 w-24 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                                                <div
                                                    className="h-full rounded-full bg-emerald-500"
                                                    style={{ width: '62%' }}
                                                />
                                            </div>
                                            <span className="text-xs font-bold">
                                                62%
                                            </span>
                                        </div>
                                    </td>
                                    <td className="px-6 py-4 text-emerald-500">
                                        <span className="material-symbols-outlined">
                                            trending_up
                                        </span>
                                    </td>
                                    <td className="px-6 py-4 text-right">
                                        <span className="rounded-full bg-emerald-100 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
                                            Crescendo
                                        </span>
                                    </td>
                                </tr>

                                <tr className="transition-colors hover:bg-slate-50/50 dark:hover:bg-slate-800/30">
                                    <td className="px-6 py-4 font-semibold">
                                        Bahia
                                    </td>
                                    <td className="px-6 py-4">1,405</td>
                                    <td className="px-6 py-4">
                                        <div className="flex items-center gap-3">
                                            <div className="h-2 w-24 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                                                <div
                                                    className="h-full rounded-full bg-rose-500"
                                                    style={{ width: '29%' }}
                                                />
                                            </div>
                                            <span className="text-xs font-bold">
                                                29%
                                            </span>
                                        </div>
                                    </td>
                                    <td className="px-6 py-4 text-rose-500">
                                        <span className="material-symbols-outlined">
                                            trending_down
                                        </span>
                                    </td>
                                    <td className="px-6 py-4 text-right">
                                        <span className="rounded-full bg-rose-100 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-rose-600 dark:bg-rose-900/30 dark:text-rose-400">
                                            Crítico
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </AdminLayout>
    );
}
