"use client";

import { useState } from "react";
import { BarChart3, Download, Printer, RefreshCw } from "lucide-react";
import { api, useApi } from "@/lib/client";
import { Button, Card, CardHeader, DataTable, PageHeader, Select, StatCard, Input, useToast, type Column } from "@/components/ui";
import { currentPeriod, downloadCsv, formatDate, humanLabel, money, qs, toCsv } from "@/lib/utils";

const REPORTS = [
  { value: "daily-collection", label: "Daily collection" },
  { value: "monthly-collection", label: "Monthly collection" },
  { value: "customer", label: "Customer report" },
  { value: "due", label: "Due report" },
  { value: "paid", label: "Paid report" },
  { value: "unpaid", label: "Unpaid report" },
  { value: "expired", label: "Expired report" },
  { value: "new-customer", label: "New customer report" },
  { value: "package", label: "Package report" },
  { value: "router", label: "Router report" },
  { value: "employee-collection", label: "Employee collection" },
  { value: "payment", label: "Payment report" },
  { value: "sms", label: "SMS report" },
  { value: "login", label: "Login report" },
  { value: "activity", label: "Activity log report" },
];

export default function ReportsPage() {
  const toast = useToast();
  const [type, setType] = useState("daily-collection");
  const [filters, setFilters] = useState({ from: `${currentPeriod()}-01`, to: new Date().toISOString().slice(0, 10), employeeId: "", packageId: "", routerId: "", method: "", status: "" });
  const { data: packages } = useApi<{ items: { id: number; name: string }[] }>("/api/packages?all=true");
  const { data: routers } = useApi<{ items: { id: number; name: string }[] }>("/api/routers");
  const { data: employees } = useApi<{ items: { id: number; name: string }[] }>("/api/employees");
  const { data, loading, reload } = useApi<{ rows: Record<string, unknown>[]; summary: Record<string, unknown> }>(`/api/reports/${type}${qs(filters)}`, [type, filters]);

  const columns: Column<Record<string, unknown>>[] = Object.keys(data?.rows?.[0] ?? {}).map((key) => ({
    key,
    label: humanLabel(key),
    hideOnMobile: Object.keys(data?.rows?.[0] ?? {}).length > 6,
    render: (row) => {
      const value = row[key];
      if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}$/.test(value)) return formatDate(value);
      if (typeof value === "string" && /^\d+\.\d{2}$/.test(value)) return money(value);
      if (typeof value === "number" && /amount|total|collected|due|price|mrr|salary|target/i.test(key)) return money(value);
      return String(value ?? "—");
    },
  }));

  return (
    <>
      <PageHeader
        title="Reports & analytics"
        subtitle="Operational, financial and audit reporting with export"
        icon={<BarChart3 className="h-5 w-5" />}
        actions={
          <>
            <Button variant="secondary" size="sm" icon={<RefreshCw className="h-4 w-4" />} onClick={() => void reload()}>
              Refresh
            </Button>
            <Button variant="secondary" size="sm" icon={<Printer className="h-4 w-4" />} onClick={() => window.print()}>
              Print
            </Button>
            <Button
              size="sm"
              icon={<Download className="h-4 w-4" />}
              onClick={async () => {
                const res = await api<{ rows: Record<string, unknown>[] }>(`/api/reports/${type}${qs(filters)}`);
                downloadCsv(`${type}-${Date.now()}.csv`, toCsv(res.rows));
                toast.push("Report exported (Excel compatible)", "success");
              }}
            >
              Export CSV / Excel
            </Button>
          </>
        }
      />

      <Card className="mb-4 p-3">
        <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
          <Select value={type} onChange={(e) => setType(e.target.value)}>
            {REPORTS.map((r) => (
              <option key={r.value} value={r.value}>
                {r.label}
              </option>
            ))}
          </Select>
          <div className="flex gap-2">
            <Input type="date" value={filters.from} onChange={(e) => setFilters((f) => ({ ...f, from: e.target.value }))} />
            <Input type="date" value={filters.to} onChange={(e) => setFilters((f) => ({ ...f, to: e.target.value }))} />
          </div>
          <Select value={filters.employeeId} onChange={(e) => setFilters((f) => ({ ...f, employeeId: e.target.value }))}>
            <option value="">All employees</option>
            {(employees?.items ?? []).map((e) => (
              <option key={e.id} value={e.id}>
                {e.name}
              </option>
            ))}
          </Select>
          <Select value={filters.packageId} onChange={(e) => setFilters((f) => ({ ...f, packageId: e.target.value }))}>
            <option value="">All packages</option>
            {(packages?.items ?? []).map((p) => (
              <option key={p.id} value={p.id}>
                {p.name}
              </option>
            ))}
          </Select>
          <Select value={filters.routerId} onChange={(e) => setFilters((f) => ({ ...f, routerId: e.target.value }))}>
            <option value="">All routers</option>
            {(routers?.items ?? []).map((r) => (
              <option key={r.id} value={r.id}>
                {r.name}
              </option>
            ))}
          </Select>
          <Select value={filters.method} onChange={(e) => setFilters((f) => ({ ...f, method: e.target.value }))}>
            <option value="">All methods</option>
            {["Cash", "bKash", "Nagad", "Rocket", "Bank Transfer", "Online Payment"].map((m) => (
              <option key={m} value={m}>
                {m}
              </option>
            ))}
          </Select>
          <Select value={filters.status} onChange={(e) => setFilters((f) => ({ ...f, status: e.target.value }))}>
            <option value="">All statuses</option>
            {["paid", "unpaid", "partial", "expired", "cancelled"].map((s) => (
              <option key={s} value={s}>
                {s}
              </option>
            ))}
          </Select>
        </div>
      </Card>

      <div className="mb-4 grid grid-cols-2 gap-3 lg:grid-cols-4">
        {Object.entries(data?.summary ?? {}).slice(0, 4).map(([key, value]) => (
          <StatCard
            key={key}
            label={humanLabel(key)}
            value={typeof value === "number" && !/count|days|total$/.test(key) ? money(value) : String(value)}
            icon={<BarChart3 className="h-5 w-5" />}
            tone="brand"
          />
        ))}
      </div>

      <Card className="p-2">
        <CardHeader title={REPORTS.find((r) => r.value === type)?.label ?? type} subtitle={`${data?.rows.length ?? 0} row(s)`} />
        {columns.length ? (
          <DataTable columns={columns} rows={(data?.rows ?? []).map((r, i) => ({ ...r, __key: i }))} loading={loading} rowKey={(r) => String(r.__key)} empty="No data for the selected filters" />
        ) : (
          <p className="p-8 text-center text-sm text-slate-500">Run a report to see results.</p>
        )}
      </Card>
    </>
  );
}