'use client';

import { getLocalTimeZone, today } from '@internationalized/date';
import { DollarSign, Eye, Percent, Users } from 'lucide-react';
import { I18nProvider } from 'react-aria-components';
import { DataTable } from '@/components/data-table';
import { StatCard } from '@/components/stat-card';
import { DateRangePicker } from '@/components/ui/date-picker';

export default function DashboardDemo() {
  const now = today(getLocalTimeZone());

  return (
    <I18nProvider locale="pt-BR">
      <div className="flex w-full flex-col gap-6 p-4 sm:p-6">
        <header className="flex flex-wrap items-end justify-between gap-4">
          <div className="flex flex-col gap-1">
            <h1 className="font-heading text-2xl font-semibold tracking-tight">Visão geral</h1>
            <p className="text-sm text-muted-foreground">Desempenho do site e dos contatos da Clínica Sorriso.</p>
          </div>
          <DateRangePicker
            aria-label="Período"
            className="w-full sm:w-72"
            defaultValue={{ start: now.subtract({ days: 29 }), end: now }}
            maxValue={now}
          />
        </header>

        <section aria-label="Indicadores" className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <StatCard
            label="Visitas ao site"
            value="12.847"
            delta={38}
            deltaLabel="vs. mês anterior"
            icon={<Eye />}
            sparkline={[320, 380, 360, 420, 410, 480, 530, 510, 590, 640, 620, 710]}
            sparklineColor={1}
          />
          <StatCard
            label="Leads no mês"
            value="184"
            delta={22.4}
            deltaLabel="vs. mês anterior"
            icon={<Users />}
            sparkline={[8, 12, 10, 14, 13, 17, 16, 21, 19, 24]}
            sparklineColor={2}
          />
          <StatCard
            label="Taxa de conversão"
            value="3,8%"
            delta={-0.4}
            deltaLabel="vs. mês anterior"
            icon={<Percent />}
            sparkline={[4.1, 4.3, 4.0, 4.2, 3.9, 3.7, 3.9, 3.8]}
            sparklineColor={3}
          />
          <StatCard
            label="Faturamento"
            value="R$ 48.320,00"
            delta={15}
            deltaLabel="vs. mês anterior"
            icon={<DollarSign />}
            sparkline={[31, 34, 33, 38, 36, 41, 44, 48]}
            sparklineColor={4}
          />
        </section>

        <section
          aria-labelledby="contatos-recentes"
          className="flex flex-col gap-4 rounded-xl border bg-card p-5 text-card-foreground shadow-xs"
        >
          <div className="flex flex-col gap-1">
            <h2 id="contatos-recentes" className="font-heading text-lg font-semibold">
              Contatos recentes
            </h2>
            <p className="text-sm text-muted-foreground">Leads recebidos pelo site, WhatsApp e anúncios.</p>
          </div>
          <DataTable aria-label="Contatos recentes" pageSize={5} />
        </section>
      </div>
    </I18nProvider>
  );
}