"use client";

import { useState } from "react";
import useSWR from "swr";
import {
  ArrowLeftRight,
  Baby,
  FileText,
  HeartPulse,
  Printer,
  UserPlus,
  Users,
} from "lucide-react";
import type { Desa, LaporanBulanan } from "@/lib/types";
import { fetcher } from "@/lib/api";
import { PageHeader, StatCard } from "@/components/page-header";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Select } from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { formatDate, formatNumber } from "@/lib/utils";

function strip(value: string | null | undefined, prefix: string) {
  if (!value) return "-";
  return value.replace(new RegExp(`^${prefix}\\s+`, "i"), "");
}

export default function LaporanBulananPage() {
  const currentYear = new Date().getFullYear();
  const [tahun, setTahun] = useState(currentYear);
  const { data, isLoading } = useSWR<LaporanBulanan>(
    `/laporan/bulanan?tahun=${tahun}`,
    fetcher,
  );
  const { data: desa } = useSWR<Desa>("/desa", fetcher);

  const namaDesa = strip(desa?.nama, "Desa");
  const kecamatan = strip(desa?.kecamatan, "Kecamatan");
  const kabupaten = strip(desa?.kabupaten, "Kabupaten");
  const years = Array.from({ length: 22 }, (_, index) => currentYear + 1 - index);

  return (
    <div className="animate-fade-in space-y-6">
      <div className="no-print">
        <PageHeader
          title="Laporan Bulanan"
          description="Rekapitulasi peristiwa kependudukan dan pelayanan desa per bulan."
          action={
            <div className="flex flex-wrap items-center gap-2">
              <Select
                value={tahun}
                onChange={(event) => setTahun(Number(event.target.value))}
                className="w-32"
                aria-label="Pilih tahun laporan"
              >
                {years.map((year) => (
                  <option key={year} value={year}>
                    {year}
                  </option>
                ))}
              </Select>
              <Button onClick={() => window.print()}>
                <Printer className="h-4 w-4" />
                Cetak Laporan
              </Button>
            </div>
          }
        />
      </div>

      <div className="hidden print:block">
        <div className="border-b-2 border-black pb-2 text-center">
          <p className="text-sm font-semibold uppercase">
            Pemerintah Kabupaten {kabupaten} · Kecamatan {kecamatan}
          </p>
          <p className="text-xl font-bold uppercase">Desa {namaDesa}</p>
          <p className="mt-1 text-sm font-semibold">Laporan Bulanan Tahun {tahun}</p>
          <p className="text-xs">Dicetak {formatDate(new Date())}</p>
        </div>
      </div>

      {isLoading || !data ? (
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          {Array.from({ length: 4 }).map((_, index) => (
            <div key={index} className="h-28 animate-pulse rounded-xl bg-muted" />
          ))}
        </div>
      ) : (
        <>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <StatCard
              title="Kelahiran"
              value={formatNumber(data.total.kelahiran)}
              hint={`Tahun ${data.tahun}`}
              icon={Baby}
            />
            <StatCard
              title="Kematian"
              value={formatNumber(data.total.kematian)}
              hint="Perubahan status menjadi meninggal"
              icon={HeartPulse}
              tone="amber"
            />
            <StatCard
              title="Perpindahan"
              value={formatNumber(data.total.pindah)}
              hint="Penduduk pindah keluar"
              icon={ArrowLeftRight}
              tone="sky"
            />
            <StatCard
              title="Penduduk baru"
              value={formatNumber(data.total.pendudukBaru)}
              hint="Data penduduk yang dibuat"
              icon={UserPlus}
              tone="violet"
            />
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <Card>
              <CardHeader className="flex-row items-center justify-between space-y-0">
                <CardTitle>Pelayanan Surat</CardTitle>
                <FileText className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent className="flex items-end justify-between gap-4">
                <div>
                  <p className="text-2xl font-bold tabular-nums">
                    {formatNumber(data.total.suratMasuk)}
                  </p>
                  <p className="text-xs text-muted-foreground">permohonan masuk</p>
                </div>
                <div className="text-right">
                  <p className="text-2xl font-bold tabular-nums text-primary">
                    {formatNumber(data.total.suratSelesai)}
                  </p>
                  <p className="text-xs text-muted-foreground">selesai diproses</p>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex-row items-center justify-between space-y-0">
                <CardTitle>Buku Tamu</CardTitle>
                <Users className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent className="flex items-end justify-between gap-4">
                <div>
                  <p className="text-2xl font-bold tabular-nums">
                    {formatNumber(data.total.tamu)}
                  </p>
                  <p className="text-xs text-muted-foreground">kunjungan tercatat</p>
                </div>
                <div className="text-right">
                  <p className="text-2xl font-bold tabular-nums text-primary">
                    {formatNumber(data.total.orangTamu)}
                  </p>
                  <p className="text-xs text-muted-foreground">orang</p>
                </div>
              </CardContent>
            </Card>
          </div>

          <Card>
            <CardHeader>
              <CardTitle>Rekapitulasi Bulanan {data.tahun}</CardTitle>
            </CardHeader>
            <CardContent className="p-0 pb-2">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Bulan</TableHead>
                    <TableHead className="text-right">Lahir</TableHead>
                    <TableHead className="text-right">Mati</TableHead>
                    <TableHead className="text-right">Pindah</TableHead>
                    <TableHead className="text-right">Penduduk baru</TableHead>
                    <TableHead className="text-right">Surat masuk</TableHead>
                    <TableHead className="text-right">Surat selesai</TableHead>
                    <TableHead className="text-right">Tamu</TableHead>
                    <TableHead className="text-right">Orang</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.bulan.map((row) => {
                    const isCurrent =
                      data.tahun === currentYear && row.bulan === new Date().getMonth() + 1;
                    return (
                      <TableRow key={row.bulan} className={isCurrent ? "bg-secondary/40" : ""}>
                        <TableCell className="font-medium">{row.nama}</TableCell>
                        <TableCell className="text-right tabular-nums">
                          {formatNumber(row.kelahiran)}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {formatNumber(row.kematian)}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {formatNumber(row.pindah)}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {formatNumber(row.pendudukBaru)}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {formatNumber(row.suratMasuk)}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {formatNumber(row.suratSelesai)}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {formatNumber(row.tamu)}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {formatNumber(row.orangTamu)}
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
                <TableFooter>
                  <TableRow>
                    <TableCell className="font-semibold">Total</TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {formatNumber(data.total.kelahiran)}
                    </TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {formatNumber(data.total.kematian)}
                    </TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {formatNumber(data.total.pindah)}
                    </TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {formatNumber(data.total.pendudukBaru)}
                    </TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {formatNumber(data.total.suratMasuk)}
                    </TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {formatNumber(data.total.suratSelesai)}
                    </TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {formatNumber(data.total.tamu)}
                    </TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {formatNumber(data.total.orangTamu)}
                    </TableCell>
                  </TableRow>
                </TableFooter>
              </Table>
            </CardContent>
          </Card>

          <p className="text-xs text-muted-foreground">{data.catatan}</p>
        </>
      )}
    </div>
  );
}