"use client";

import useSWR from "swr";
import { Activity, Database, Download, FileText, Mail, Server, Users } from "lucide-react";
import { fetcher } from "@/lib/api";
import { PageHeader, StatCard } from "@/components/page-header";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { formatNumber } from "@/lib/utils";

interface InfoSistem {
  aplikasi: string;
  versi: string;
  desa: { nama: string; kecamatan: string; kabupaten: string } | null;
  penduduk: number;
  keluarga: number;
  surat: number;
  artikel: number;
  pengguna: number;
  node: string;
  platform: string;
  uptimeDetik: number;
  database: { nama: string; tabel: number; ukuranByte: number };
}

function formatBytes(bytes: number) {
  if (!bytes) return "0 B";
  const units = ["B", "KB", "MB", "GB"];
  const index = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)));
  return `${(bytes / 1024 ** index).toLocaleString("id-ID", { maximumFractionDigits: 1 })} ${units[index]}`;
}

export default function InfoSistemPage() {
  const { data } = useSWR<InfoSistem>("/info-sistem", fetcher);

  function unduh() {
    if (!data) return;
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const tautan = document.createElement("a");
    tautan.href = url;
    tautan.download = "info-sistem.json";
    tautan.click();
    URL.revokeObjectURL(url);
  }

  const kebutuhan = [
    { nama: "Node.js", nilai: data?.node ?? "-" },
    { nama: "Platform Server", nilai: data?.platform ?? "-" },
    { nama: "Basis Data", nilai: `MySQL 8 · ${data?.database.nama ?? "-"}` },
    { nama: "Aplikasi", nilai: `${data?.aplikasi ?? "-"} ${data?.versi ?? ""}`.trim() },
    { nama: "Ukuran Basis Data", nilai: formatBytes(data?.database.ukuranByte ?? 0) },
  ];

  return (
    <div className="space-y-5">
      <PageHeader
        title="Info Sistem"
        description="Ringkasan aplikasi, data, dan lingkungan server."
        action={
          <Button variant="outline" onClick={unduh} disabled={!data}>
            <Download className="h-4 w-4" /> Unduh
          </Button>
        }
      />
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <StatCard title="Penduduk" value={formatNumber(data?.penduduk ?? 0)} icon={Users} />
        <StatCard title="Keluarga" value={formatNumber(data?.keluarga ?? 0)} icon={Users} tone="sky" />
        <StatCard title="Surat" value={formatNumber(data?.surat ?? 0)} icon={Mail} tone="violet" />
        <StatCard title="Artikel" value={formatNumber(data?.artikel ?? 0)} icon={FileText} tone="amber" />
        <StatCard title="Pengguna" value={formatNumber(data?.pengguna ?? 0)} icon={Activity} tone="sky" />
        <StatCard title="Tabel Database" value={formatNumber(data?.database.tabel ?? 0)} icon={Database} tone="violet" />
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Kebutuhan Sistem</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Kebutuhan Sistem</TableHead>
                <TableHead>Nilai Saat Ini</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {kebutuhan.map((row) => (
                <TableRow key={row.nama}>
                  <TableCell className="font-medium">{row.nama}</TableCell>
                  <TableCell className="font-mono text-xs">{row.nilai}</TableCell>
                  <TableCell>
                    <Badge variant="success">Tersedia</Badge>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Kunci / Nilai</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Kunci</TableHead>
                <TableHead>Nilai</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {(
                [
                  ["Aplikasi", data?.aplikasi ?? "-"],
                  ["Versi", data?.versi ?? "-"],
                  ["Desa", data?.desa?.nama ?? "-"],
                  ["Kecamatan", data?.desa?.kecamatan ?? "-"],
                  ["Kabupaten", data?.desa?.kabupaten ?? "-"],
                  ["Database", data?.database.nama ?? "-"],
                  ["Node.js", data?.node ?? "-"],
                  ["Platform", data?.platform ?? "-"],
                  ["Uptime", data ? `${Math.floor(data.uptimeDetik / 60)} menit` : "-"],
                ] as const
              ).map(([kunci, nilai]) => (
                <TableRow key={kunci}>
                  <TableCell className="font-medium">{kunci}</TableCell>
                  <TableCell className="font-mono text-xs">{nilai}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          <div className="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
            <Server className="h-4 w-4" /> MySQL 8 · Prisma · NestJS
          </div>
        </CardContent>
      </Card>
    </div>
  );
}