"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { Building2, Plus, Search } from "lucide-react";
import { Button, EmptyState, Input, PageHeader, Panel, Select, Skeleton } from "@/components/ui/kit";
import { useToast } from "@/components/ui/toast";
import { useSession } from "@/components/session";
import { FilterTabs, Pager } from "@/components/admin/common";
import { CustomerTable } from "@/components/admin/customer-table";
import { TenantDialog } from "@/components/admin/tenant-dialog";
import { qs } from "@/lib/api";
import { useApi } from "@/lib/use-api";
import type { CustomerRow, Plan } from "@/lib/types";

export default function AdminCustomersPage() {
  const router = useRouter();
  const toast = useToast();
  const { can } = useSession();
  const [term, setTerm] = useState("");
  const [q, setQ] = useState("");
  const [status, setStatus] = useState<"" | "active" | "suspended">("");
  const [reseller, setReseller] = useState("");
  const [page, setPage] = useState(1);
  const [creating, setCreating] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setQ(term.trim()), 250);
    return () => clearTimeout(t);
  }, [term]);
  const { data, loading } = useApi<{ data: CustomerRow[]; meta: { total: number; last_page: number } }>(`/admin/organizations${qs({ type: "customer", q, status, reseller_id: reseller, page })}`);
  const plans = useApi<{ data: Plan[] }>("/admin/plans");
  const resellers = useApi<{ data: { id: number; name: string }[] }>("/admin/resellers");
  const rows = data?.data ?? [];

  return (
    <>
      <PageHeader
        title="Customers"
        description="Every customer workspace, its plan, wallet and status."
        actions={
          can("platform.organizations.manage") && (
            <Button variant="primary" icon={<Plus className="size-4" />} onClick={() => setCreating(true)} disabled={!plans.data}>
              New customer
            </Button>
          )
        }
      />
      <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center">
        <FilterTabs
          label="Filter by status"
          value={status}
          onChange={(v) => (setStatus(v), setPage(1))}
          options={[
            ["", "All"],
            ["active", "Active"],
            ["suspended", "Suspended"],
          ]}
        />
        <div className="relative md:ml-auto md:w-64">
          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted" />
          <Input aria-label="Search customers" placeholder="Search by name" className="w-full pl-9" value={term} onChange={(e) => (setTerm(e.target.value), setPage(1))} />
        </div>
        <Select aria-label="Filter by reseller" className="md:w-48" value={reseller} onChange={(e) => (setReseller(e.target.value), setPage(1))}>
          <option value="">All resellers</option>
          {(resellers.data?.data ?? []).map((r) => (
            <option key={r.id} value={r.id}>
              {r.name}
            </option>
          ))}
        </Select>
      </div>
      <Panel>
        {!data && loading ? (
          <Skeleton className="m-5 h-40" />
        ) : rows.length === 0 ? (
          <EmptyState icon={<Building2 />} title="No customers found" body={q || status || reseller ? "Try different filters." : "Customers appear here when they sign up or you add them."} />
        ) : (
          <>
            <CustomerTable rows={rows} hrefFor={(c) => `/admin/customers/${c.id}`} showReseller />
            <Pager page={page} last={data!.meta.last_page} total={data!.meta.total} onPage={setPage} />
          </>
        )}
      </Panel>
      {creating && plans.data && (
        <TenantDialog
          kind="customer"
          endpoint="/admin/organizations"
          plans={plans.data.data.filter((p) => p.is_active)}
          resellers={resellers.data?.data ?? []}
          onClose={() => setCreating(false)}
          onCreated={(c) => {
            setCreating(false);
            toast("success", `Created ${c.name}`);
            router.push(`/admin/customers/${c.id}`);
          }}
        />
      )}
    </>
  );
}