import { createFileRoute } from "@tanstack/react-router";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import { Wallet } from "lucide-react";

import { AppShell } from "@/components/AppShell";
import { DaftarTransaksi } from "@/components/DaftarTransaksi";
import { TransaksiForm } from "@/components/TransaksiForm";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Skeleton } from "@/components/ui/skeleton";
import { useSesi } from "@/lib/auth";
import { ambilTransaksi, formatRupiah, ringkasBulanIni, topupPettyCash } from "@/lib/keuangan";

export const Route = createFileRoute("/_authenticated/admin")({
  head: () => ({
    meta: [
      { title: "Kas Besar Administrator — Catatan Duit" },
      {
        name: "description",
        content:
          "Kelola kas besar perusahaan: pembelian barang, pembayaran project, dan topup petty cash operasional.",
      },
      { property: "og:title", content: "Kas Besar Administrator — Catatan Duit" },
      {
        property: "og:description",
        content: "Catat kas besar dan topup petty cash operasional dalam satu halaman.",
      },
    ],
  }),
  component: Admin,
});

function hariIni() {
  const d = new Date();
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}

function Admin() {
  const { isAdmin, isLoading: memuatSesi } = useSesi();
  const qc = useQueryClient();
  const { data, isLoading } = useQuery({
    queryKey: ["transaksi", "besar"],
    queryFn: () => ambilTransaksi("besar"),
    enabled: isAdmin,
  });
  const [nominal, setNominal] = useState("");
  const [tanggal, setTanggal] = useState(hariIni());

  const topup = useMutation({
    mutationFn: async () => {
      const angka = Number(nominal.replace(/[^\d]/g, ""));
      if (!angka || angka <= 0) throw new Error("Nominal topup harus lebih dari nol");
      await topupPettyCash({ nominal: angka, tanggal });
    },
    onSuccess: () => {
      toast.success("Topup petty cash tersimpan");
      setNominal("");
      qc.invalidateQueries({ queryKey: ["transaksi"] });
    },
    onError: (e: Error) => toast.error(e.message || "Gagal melakukan topup"),
  });

  if (!memuatSesi && !isAdmin) {
    return (
      <AppShell>
        <h1 className="text-lg font-semibold">Kas besar</h1>
        <p className="mt-2 text-sm text-muted-foreground">
          Halaman ini hanya untuk administrator.
        </p>
      </AppShell>
    );
  }

  const items = data ?? [];
  const ringkas = ringkasBulanIni(items);

  return (
    <AppShell>
      <div className="flex items-center justify-between gap-2">
        <h1 className="text-lg font-semibold">Kas besar</h1>
        <TransaksiForm
          kas="besar"
          trigger={
            <Button size="sm" variant="secondary">
              Catat kas besar
            </Button>
          }
        />
      </div>

      <section className="mt-4 rounded-3xl bg-brand-gradient p-5 text-primary-foreground shadow-sm">
        <p className="flex items-center gap-2 text-xs opacity-80">
          <Wallet className="size-4" /> Saldo kas besar
        </p>
        {isLoading ? (
          <Skeleton className="mt-2 h-9 w-48 bg-primary-foreground/20" />
        ) : (
          <p className="mt-1 text-3xl font-semibold tabular-nums">{formatRupiah(ringkas.saldo)}</p>
        )}
        <p className="mt-1 text-xs opacity-80">
          Masuk {formatRupiah(ringkas.masuk)} · Keluar {formatRupiah(ringkas.keluar)} bulan ini
        </p>
      </section>

      <section className="mt-4 rounded-2xl border border-border/70 bg-card p-4">
        <h2 className="text-sm font-semibold">Topup petty cash operasional</h2>
        <form
          className="mt-3 grid gap-3 sm:grid-cols-[1fr_1fr_auto] sm:items-end"
          onSubmit={(e) => {
            e.preventDefault();
            topup.mutate();
          }}
        >
          <div className="space-y-1.5">
            <Label htmlFor="topup-nominal">Nominal</Label>
            <Input
              id="topup-nominal"
              inputMode="numeric"
              placeholder="1.000.000"
              value={nominal}
              onChange={(e) => setNominal(e.target.value)}
            />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="topup-tanggal">Tanggal</Label>
            <Input
              id="topup-tanggal"
              type="date"
              value={tanggal}
              onChange={(e) => setTanggal(e.target.value)}
            />
          </div>
          <Button type="submit" disabled={topup.isPending}>
            {topup.isPending ? "Memproses…" : "Topup"}
          </Button>
        </form>
      </section>

      <section className="mt-6">
        <h2 className="mb-2 text-sm font-semibold">Transaksi kas besar</h2>
        {isLoading ? (
          <div className="space-y-2">
            {[0, 1, 2, 3].map((i) => (
              <Skeleton key={i} className="h-16 w-full rounded-2xl" />
            ))}
          </div>
        ) : (
          <DaftarTransaksi items={items} />
        )}
      </section>
    </AppShell>
  );
}