"use client";

import { useEffect, useState } from "react";
import { ArrowDownRight, ArrowUpRight, CalendarClock, CircleDollarSign, PackageCheck, Users } from "lucide-react";
import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { currency } from "@/lib/utils";
import { DashboardSummary, fetchDashboardSummary } from "@/services/dashboard-service";

type KpiItem = {
  label: string;
  value: number | string;
  subtext: string;
  Icon: React.ComponentType<{ className?: string }>;
  tone?: "positive" | "negative" | "neutral";
};

export default function DashboardPage() {
  const [data, setData] = useState<DashboardSummary | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadData() {
      const summary = await fetchDashboardSummary();
      if (summary) {
        setData(summary);
      }
      setLoading(false);
    }
    loadData();
  }, []);

  const kpis: KpiItem[] = [
    {
      label: "Receita do mês",
      value: data ? currency(data.revenueMonth) : currency(0),
      subtext: "Faturamento no mês atual",
      Icon: CircleDollarSign,
      tone: "positive",
    },
    {
      label: "Receita acumulada (Ano)",
      value: data ? currency(data.revenueYear) : currency(0),
      subtext: "Total acumulado no ano",
      Icon: ArrowUpRight,
      tone: "positive",
    },
    {
      label: "Locações ativas",
      value: data ? data.activeRentals : 0,
      subtext: "Contratos em andamento",
      Icon: CalendarClock,
      tone: "neutral",
    },
    {
      label: "Equipamentos disponíveis",
      value: data ? data.availableEquipment : 0,
      subtext: `De ${data ? data.totalEquipment : 0} equipamentos da frota`,
      Icon: PackageCheck,
      tone: "positive",
    },
    {
      label: "Clientes ativos",
      value: data ? data.activeCustomers : 0,
      subtext: "Clientes cadastrados no sistema",
      Icon: Users,
      tone: "neutral",
    },
    {
      label: "Clientes inadimplentes",
      value: data ? data.delinquentCustomers : 0,
      subtext: "Clientes com pendências financeiras",
      Icon: ArrowDownRight,
      tone: "negative",
    },
  ];

  const revenueData = data?.revenueChart ?? [
    { month: "Jan", value: 0 },
    { month: "Fev", value: 0 },
    { month: "Mar", value: 0 },
    { month: "Abr", value: 0 },
    { month: "Mai", value: 0 },
    { month: "Jun", value: 0 },
    { month: "Jul", value: 0 },
  ];

  const statusData = data?.statusChart ?? [
    { name: "Disponível", value: 0, color: "#16a34a" },
    { name: "Locado", value: 0, color: "#2563eb" },
    { name: "Manutenção", value: 0, color: "#dc2626" },
    { name: "Reservado", value: 0, color: "#f59e0b" },
  ];

  const occupancyRate = data ? data.occupancyRate : 0;
  const averageTicket = data ? currency(data.averageTicket) : currency(0);
  const cashFlow = data ? currency(data.cashFlow) : currency(0);

  return (
    <div className="space-y-6">
      <div>
        <p className="text-sm text-muted-foreground">Dashboard / Visão geral</p>
        <h1 className="mt-1 text-2xl font-semibold">Painel executivo</h1>
      </div>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        {kpis.map(({ label, value, subtext, Icon, tone }) => (
          <Card key={label} className="p-5">
            <div className="flex items-start justify-between">
              <div>
                <p className="text-sm text-muted-foreground">{label}</p>
                <p className="mt-2 text-2xl font-semibold">{value}</p>
              </div>
              <div className="rounded-md border bg-muted p-2">
                <Icon className="h-4 w-4" />
              </div>
            </div>
            <p
              className={`mt-4 text-sm ${
                tone === "positive"
                  ? "text-emerald-600 font-medium"
                  : tone === "negative"
                    ? "text-rose-600 font-medium"
                    : "text-muted-foreground"
              }`}
            >
              {subtext}
            </p>
          </Card>
        ))}
      </section>

      <section className="grid gap-4 xl:grid-cols-[1.4fr_0.8fr]">
        <Card className="p-5">
          <div className="mb-5 flex items-center justify-between">
            <h2 className="font-semibold">Receita mensal</h2>
            <Badge tone="blue">Faturamento Real</Badge>
          </div>
          <div className="h-72">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={revenueData}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="month" />
                <Tooltip formatter={(value) => currency(Number(value))} />
                <Bar dataKey="value" radius={[6, 6, 0, 0]} fill="#2563eb" />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </Card>
        <Card className="p-5">
          <h2 className="mb-5 font-semibold">Status dos equipamentos</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie data={statusData} dataKey="value" nameKey="name" innerRadius={58} outerRadius={88}>
                  {statusData.map((entry) => (
                    <Cell key={entry.name} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
          <div className="grid grid-cols-2 gap-2 text-sm">
            {statusData.map((item) => (
              <span key={item.name} className="text-muted-foreground">
                {item.name}: <b className="text-foreground">{item.value}</b>
              </span>
            ))}
          </div>
        </Card>
      </section>

      <section className="grid gap-4 xl:grid-cols-3">
        <Card className="p-5">
          <h2 className="font-semibold">Taxa de ocupação</h2>
          <p className="mt-4 text-4xl font-semibold">{occupancyRate}%</p>
          <p className="mt-2 text-sm text-muted-foreground">Proporção de equipamentos locados</p>
        </Card>
        <Card className="p-5">
          <h2 className="font-semibold">Ticket médio</h2>
          <p className="mt-4 text-4xl font-semibold">{averageTicket}</p>
          <p className="mt-2 text-sm text-muted-foreground">Baseado na receita das locações</p>
        </Card>
        <Card className="p-5">
          <h2 className="font-semibold">Fluxo de caixa</h2>
          <p className="mt-4 text-4xl font-semibold">{cashFlow}</p>
          <p className="mt-2 text-sm text-muted-foreground">Entradas menos saídas no mês</p>
        </Card>
      </section>
    </div>
  );
}