import { createFileRoute } from "@tanstack/react-router";
import { AlertTriangle, CalendarCheck, TrendingUp, Users, Wallet } from "lucide-react";
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Legend,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { fmt, useDB } from "@/lib/store";

export const Route = createFileRoute("/app/")({
  component: Dashboard,
});

const COLORS = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"];

function Dashboard() {
  const { db } = useDB();
  if (!db) return null;

  const totalBasic = db.employees.reduce((s, e) => s + e.basicSalary, 0);
  const totalNet = db.payrolls.reduce((s, p) => s + p.netSalary, 0);
  const today = new Date().toISOString().slice(0, 10);
  const presentToday = db.attendance.filter((a) => a.date === today && a.status !== "absent").length;

  const byDept = Object.entries(
    db.employees.reduce<Record<string, number>>((acc, e) => {
      acc[e.department] = (acc[e.department] ?? 0) + e.basicSalary;
      return acc;
    }, {}),
  ).map(([name, value]) => ({ name, value }));

  const last7 = [...Array(7)].map((_, i) => {
    const d = new Date();
    d.setDate(d.getDate() - (6 - i));
    const key = d.toISOString().slice(0, 10);
    const rows = db.attendance.filter((a) => a.date === key);
    return {
      day: d.toLocaleDateString("sw-TZ", { weekday: "short" }),
      wapo: rows.filter((r) => r.status === "present").length,
      chelewa: rows.filter((r) => r.status === "late").length,
      overtime: rows.reduce((s, r) => s + r.overtimeHours, 0),
    };
  });

  const payrollTrend = db.payrolls.length
    ? Object.entries(
        db.payrolls.reduce<Record<string, number>>((acc, p) => {
          acc[p.month] = (acc[p.month] ?? 0) + p.netSalary;
          return acc;
        }, {}),
      ).map(([month, total]) => ({ month, total }))
    : [{ month: new Date().toISOString().slice(0, 7), total: 0 }];

  const stats = [
    { label: "Wafanyakazi", value: String(db.employees.length), icon: Users, hint: "Waliopo kazini" },
    { label: "Jumla ya Basic Salary", value: fmt(totalBasic, db.settings.currency), icon: Wallet, hint: "Kwa mwezi" },
    { label: "Mahudhurio Leo", value: `${presentToday}/${db.employees.length}`, icon: CalendarCheck, hint: today },
    { label: "Makosa Yaliyorekodiwa", value: String(db.misconducts.length), icon: AlertTriangle, hint: "Misconduct" },
  ];

  return (
    <div className="space-y-6">
      <div className="rounded-3xl brand-gradient p-6 text-primary-foreground float-shadow">
        <p className="text-sm opacity-85">Karibu tena, Admin</p>
        <h1 className="text-2xl font-extrabold sm:text-3xl">SmartHR Payroll Manager</h1>
        <p className="mt-1 text-sm opacity-90">
          Muhtasari wa wafanyakazi, mahudhurio na mishahara ya WAMAKINDA MICROFINANCE LTD.
        </p>
        <div className="mt-4 flex flex-wrap gap-2">
          <Badge className="bg-primary-foreground/20">Total Payroll: {fmt(totalNet, db.settings.currency)}</Badge>
          <Badge className="bg-primary-foreground/20">Overtime Rate: {fmt(db.settings.overtimeRate)}/hr</Badge>
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {stats.map((s) => (
          <Card key={s.label} className="card-shadow">
            <CardContent className="flex items-center gap-4 p-5">
              <span className="flex size-12 items-center justify-center rounded-2xl bg-accent text-primary">
                <s.icon className="size-6" />
              </span>
              <div className="min-w-0">
                <p className="text-xs text-muted-foreground">{s.label}</p>
                <p className="truncate text-lg font-extrabold">{s.value}</p>
                <p className="text-[11px] text-muted-foreground">{s.hint}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Card className="card-shadow">
          <CardHeader>
            <CardTitle className="text-base">Mahudhurio ya Siku 7</CardTitle>
          </CardHeader>
          <CardContent className="h-72">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={last7}>
                <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
                <XAxis dataKey="day" stroke="var(--muted-foreground)" fontSize={12} />
                <YAxis stroke="var(--muted-foreground)" fontSize={12} />
                <Tooltip />
                <Legend />
                <Bar dataKey="wapo" name="Wapo" fill="var(--chart-1)" radius={[6, 6, 0, 0]} />
                <Bar dataKey="chelewa" name="Wamechelewa" fill="var(--chart-4)" radius={[6, 6, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        <Card className="card-shadow">
          <CardHeader>
            <CardTitle className="text-base">Mishahara kwa Kitengo</CardTitle>
          </CardHeader>
          <CardContent className="h-72">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie data={byDept} dataKey="value" nameKey="name" innerRadius={55} outerRadius={95} paddingAngle={3}>
                  {byDept.map((_, i) => (
                    <Cell key={i} fill={COLORS[i % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip formatter={(v: number) => fmt(v, db.settings.currency)} />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

      <Card className="card-shadow">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <TrendingUp className="size-4 text-primary" /> Mwenendo wa Payroll
          </CardTitle>
        </CardHeader>
        <CardContent className="h-72">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={payrollTrend}>
              <defs>
                <linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="var(--chart-1)" stopOpacity={0.7} />
                  <stop offset="95%" stopColor="var(--chart-1)" stopOpacity={0.05} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
              <XAxis dataKey="month" stroke="var(--muted-foreground)" fontSize={12} />
              <YAxis stroke="var(--muted-foreground)" fontSize={12} />
              <Tooltip formatter={(v: number) => fmt(v, db.settings.currency)} />
              <Area type="monotone" dataKey="total" stroke="var(--chart-1)" fill="url(#g1)" strokeWidth={3} />
            </AreaChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  );
}