import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Banknote, Send } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { bankLogo, fmt, useDB } from "@/lib/store";

export const Route = createFileRoute("/app/malipo")({
  head: () => ({
    meta: [
      { title: "Malipo | SmartHR Payroll Manager" },
      { name: "description", content: "Lipa mishahara kwa M-Pesa, benki au cash na uone historia ya malipo." },
      { property: "og:title", content: "Malipo | SmartHR Payroll Manager" },
      { property: "og:description", content: "Malipo ya mishahara na historia kamili." },
    ],
  }),
  component: PaymentsPage,
});

const METHODS = ["mpesa", "bank", "cash"] as const;

function PaymentsPage() {
  const { db, update, newId } = useDB();
  const [method, setMethod] = useState<(typeof METHODS)[number]>("mpesa");
  const [month, setMonth] = useState(new Date().toISOString().slice(0, 7));
  const [note, setNote] = useState("");

  if (!db) return null;

  const pending = db.payrolls.filter((p) => p.month === month && p.status !== "paid");
  const history = [...db.payments].sort((a, b) => b.date.localeCompare(a.date));

  function pay(payrollId: string) {
    const emp0 = db!.employees.find(
      (e) => e.employeeId === db!.payrolls.find((p) => p.payrollId === payrollId)?.employeeId,
    );
    if (method === "bank" && !emp0?.bankAccount) {
      toast.error("Mfanyakazi huyu hana namba ya konto ya benki. Iweke kwenye Wafanyakazi kwanza.");
      return;
    }
    if (method === "mpesa" && !emp0?.phone) {
      toast.error("Hakuna namba ya simu ya M-Pesa kwa mfanyakazi huyu.");
      return;
    }
    update((d) => {
      const pr = d.payrolls.find((p) => p.payrollId === payrollId);
      if (!pr) return d;
      const emp = d.employees.find((e) => e.employeeId === pr.employeeId);
      return {
        ...d,
        payrolls: d.payrolls.map((p) => (p.payrollId === payrollId ? { ...p, status: "paid" } : p)),
        payments: [
          ...d.payments,
          {
            id: newId(),
            employeeId: pr.employeeId,
            payrollId: pr.payrollId,
            amount: pr.netSalary,
            method,
            reference: `${method.toUpperCase()}-${Date.now().toString().slice(-8)}`,
            date: new Date().toISOString().slice(0, 10),
            note: note.trim() || undefined,
            bankName: method === "bank" ? emp?.bankName : undefined,
            bankAccount: method === "bank" ? emp?.bankAccount : undefined,
            phone: method === "mpesa" ? emp?.phone : undefined,
          },
        ],
      };
    });
    toast.success(
      method === "bank"
        ? `Malipo yamesajiliwa kwenye konto ${emp0?.bankAccount} (${emp0?.bankName}).`
        : "Malipo yamekamilika.",
    );
  }

  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-xl font-extrabold">Payment Management</h1>
        <p className="text-sm text-muted-foreground">Lipa kwa M-Pesa, benki au cash — kila malipo yanahifadhiwa.</p>
      </div>

      <Card className="card-shadow">
        <CardContent className="grid gap-3 p-5 sm:grid-cols-2">
          <div className="space-y-1.5">
            <Label htmlFor="pmonth">Mwezi</Label>
            <Input id="pmonth" type="month" value={month} onChange={(e) => setMonth(e.target.value)} />
          </div>
          <div className="space-y-1.5">
            <Label>Njia ya malipo</Label>
            <div className="flex gap-2">
              {METHODS.map((m) => (
                <Button
                  key={m}
                  type="button"
                  variant={method === m ? "default" : "outline"}
                  onClick={() => setMethod(m)}
                  className={method === m ? "brand-gradient text-primary-foreground" : ""}
                >
                  {m === "mpesa" ? "M-Pesa" : m === "bank" ? "Benki" : "Cash"}
                </Button>
              ))}
            </div>
          </div>
          <div className="space-y-1.5 sm:col-span-2">
            <Label htmlFor="pnote">Maelezo (hiari)</Label>
            <Input
              id="pnote"
              value={note}
              onChange={(e) => setNote(e.target.value)}
              placeholder="Mf. Mshahara wa mwezi huu"
            />
          </div>
        </CardContent>
      </Card>

      <Card className="card-shadow">
        <CardHeader>
          <CardTitle className="text-base">Yanayosubiri Malipo ({pending.length})</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
          {pending.map((p) => {
            const emp = db.employees.find((e) => e.employeeId === p.employeeId);
            return (
              <div key={p.id} className="rounded-2xl border border-border p-4">
                <div className="flex items-center gap-2">
                  {emp && (
                    <img
                      src={bankLogo(emp.bankName)}
                      alt={`Nembo ya benki ${emp.bankName}`}
                      className="size-8 rounded-md object-contain"
                      loading="lazy"
                    />
                  )}
                  <div className="min-w-0">
                    <p className="truncate text-sm font-bold">{emp?.fullName ?? p.employeeId}</p>
                    <p className="text-xs text-muted-foreground">
                      {method === "mpesa"
                        ? `M-Pesa: ${emp?.phone ?? "hakuna namba"}`
                        : method === "bank"
                          ? `${emp?.bankName ?? ""} · ${emp?.bankAccount ?? "hakuna konto"}`
                          : "Cash mkononi"}
                    </p>
                  </div>
                </div>
                <p className="mt-3 text-lg font-extrabold text-primary">{fmt(p.netSalary, db.settings.currency)}</p>
                <Button size="sm" className="mt-3 w-full brand-gradient text-primary-foreground" onClick={() => pay(p.payrollId)}>
                  <Send className="size-4" /> Lipa sasa
                </Button>
              </div>
            );
          })}
          {!pending.length && <p className="text-sm text-muted-foreground">Hakuna malipo yanayosubiri.</p>}
        </CardContent>
      </Card>

      <Card className="card-shadow">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Banknote className="size-4 text-primary" /> Historia ya Malipo
          </CardTitle>
        </CardHeader>
        <CardContent className="overflow-x-auto">
          <table className="w-full min-w-[640px] text-sm">
            <thead>
              <tr className="border-b border-border text-left text-xs text-muted-foreground">
                <th className="py-2">Tarehe</th>
                <th>Mfanyakazi</th>
                <th>Kiasi</th>
                <th>Njia</th>
                <th>Konto / Simu</th>
                <th>Reference</th>
              </tr>
            </thead>
            <tbody>
              {history.map((p) => (
                <tr key={p.id} className="border-b border-border/60">
                  <td className="py-2">{p.date}</td>
                  <td>{db.employees.find((e) => e.employeeId === p.employeeId)?.fullName ?? p.employeeId}</td>
                  <td className="font-semibold">{fmt(p.amount, db.settings.currency)}</td>
                  <td>
                    <Badge variant="secondary">{p.method}</Badge>
                  </td>
                  <td className="text-xs">
                    {p.method === "bank"
                      ? `${p.bankName ?? ""} ${p.bankAccount ?? ""}`.trim() || "—"
                      : p.method === "mpesa"
                        ? (p.phone ?? "—")
                        : "Cash"}
                  </td>
                  <td className="text-xs">{p.reference}</td>
                </tr>
              ))}
              {!history.length && (
                <tr>
                  <td colSpan={6} className="py-6 text-center text-muted-foreground">
                    Bado hakuna malipo yaliyofanyika.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </CardContent>
      </Card>
    </div>
  );
}