import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Calculator, CheckCircle2 } 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 { computePayroll, fmt, useDB, type Payroll } from "@/lib/store";

export const Route = createFileRoute("/app/payroll")({
  head: () => ({
    meta: [
      { title: "Payroll | SmartHR Payroll Manager" },
      { name: "description", content: "Tengeneza payroll ya mwezi: basic salary, overtime, bonus, makato na net salary." },
      { property: "og:title", content: "Payroll | SmartHR Payroll Manager" },
      { property: "og:description", content: "Hesabu ya mishahara ya mwezi kwa wafanyakazi wote." },
    ],
  }),
  component: PayrollPage,
});

function PayrollPage() {
  const { db, update, newId } = useDB();
  const [month, setMonth] = useState(new Date().toISOString().slice(0, 7));
  const [bonus, setBonus] = useState(0);

  if (!db) return null;

  const rows = db.payrolls.filter((p) => p.month === month);

  function generate() {
    if (!db) return;
    update((d) => {
      const others = d.payrolls.filter((p) => p.month !== month);
      const generated: Payroll[] = d.employees.map((e) => {
        const ot = d.attendance
          .filter((a) => a.employeeId === e.employeeId && a.date.startsWith(month))
          .reduce((s, a) => s + a.overtimeHours, 0);
        const deduction = d.misconducts
          .filter((m) => m.employeeId === e.employeeId && m.date.startsWith(month))
          .reduce((s, m) => s + m.penalty, 0);
        const c = computePayroll(e, ot, bonus, deduction, d.settings);
        return {
          id: newId(),
          payrollId: `PAY-${month}-${e.employeeId}`,
          employeeId: e.employeeId,
          month,
          basicSalary: e.basicSalary,
          overtimeHours: ot,
          overtimePay: c.overtimePay,
          bonus,
          deduction,
          tax: c.tax,
          netSalary: c.netSalary,
          status: "draft",
          createdAt: new Date().toISOString(),
        };
      });
      return { ...d, payrolls: [...others, ...generated] };
    });
    toast.success("Payroll imetengenezwa kwa mwezi " + month);
  }

  function approveAll() {
    update((d) => ({
      ...d,
      payrolls: d.payrolls.map((p) => (p.month === month ? { ...p, status: "approved" } : p)),
    }));
    toast.success("Payroll imeidhinishwa.");
  }

  const total = rows.reduce((s, p) => s + p.netSalary, 0);

  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-xl font-extrabold">Payroll Processing</h1>
        <p className="text-sm text-muted-foreground">Basic salary, overtime, bonus, makato, kodi na net salary.</p>
      </div>

      <Card className="card-shadow">
        <CardContent className="grid gap-3 p-5 sm:grid-cols-4">
          <div className="space-y-1.5">
            <Label htmlFor="month">Mwezi</Label>
            <Input id="month" type="month" value={month} onChange={(e) => setMonth(e.target.value)} />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="bonus">Bonus (kwa kila mfanyakazi)</Label>
            <Input id="bonus" type="number" value={bonus} onChange={(e) => setBonus(Number(e.target.value))} />
          </div>
          <div className="flex items-end">
            <Button className="brand-gradient w-full text-primary-foreground" onClick={generate}>
              <Calculator className="size-4" /> Tengeneza Payroll
            </Button>
          </div>
          <div className="flex items-end">
            <Button variant="outline" className="w-full" onClick={approveAll} disabled={!rows.length}>
              <CheckCircle2 className="size-4" /> Idhinisha
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card className="card-shadow">
        <CardHeader className="flex-row items-center justify-between">
          <CardTitle className="text-base">Payroll ya {month}</CardTitle>
          <Badge variant="secondary">Jumla: {fmt(total, db.settings.currency)}</Badge>
        </CardHeader>
        <CardContent className="overflow-x-auto">
          <table className="w-full min-w-[820px] text-sm">
            <thead>
              <tr className="border-b border-border text-left text-xs text-muted-foreground">
                <th className="py-2">Payroll ID</th>
                <th>Mfanyakazi</th>
                <th>Basic</th>
                <th>OT (hrs)</th>
                <th>Overtime</th>
                <th>Bonus</th>
                <th>Makato</th>
                <th>Kodi</th>
                <th>Net</th>
                <th>Hali</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((p) => {
                const emp = db.employees.find((e) => e.employeeId === p.employeeId);
                return (
                  <tr key={p.id} className="border-b border-border/60">
                    <td className="py-2 text-xs">{p.payrollId}</td>
                    <td>{emp?.fullName ?? p.employeeId}</td>
                    <td>{fmt(p.basicSalary, db.settings.currency)}</td>
                    <td>{p.overtimeHours}</td>
                    <td>{fmt(p.overtimePay, db.settings.currency)}</td>
                    <td>{fmt(p.bonus, db.settings.currency)}</td>
                    <td>{fmt(p.deduction, db.settings.currency)}</td>
                    <td>{fmt(p.tax, db.settings.currency)}</td>
                    <td className="font-bold text-primary">{fmt(p.netSalary, db.settings.currency)}</td>
                    <td>
                      <Badge variant={p.status === "paid" ? "default" : "secondary"}>{p.status}</Badge>
                    </td>
                  </tr>
                );
              })}
              {!rows.length && (
                <tr>
                  <td colSpan={10} className="py-6 text-center text-muted-foreground">
                    Hakuna payroll kwa mwezi huu bado.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </CardContent>
      </Card>
    </div>
  );
}