import Link from "next/link";
import { redirect } from "next/navigation";
import { format } from "date-fns";
import { Users, Plus, ChevronRight, Upload, Download } from "lucide-react";
import { getDashboardUser } from "@/lib/view-as";
import { getMyCustomers } from "@db/queries/customers";
import { formatPrice } from "@/lib/format";
import { PageHeader, LinkButton, EmptyState, TableShell } from "@/components/ui";

export const metadata = { title: "Customers · Dashboard" };

export default async function CustomersPage() {
  const { user } = await getDashboardUser();
  if (!user) redirect("/login");

  const customers = await getMyCustomers(user.id);

  return (
    <div className="space-y-6">
      <PageHeader
        icon={Users}
        title="Customers"
        description="Every buyer, every event, one list. Import your existing customers to start."
        actions={
          <>
            <LinkButton href="/dashboard/customers/export" variant="secondary" icon={Download}>
              Export
            </LinkButton>
            <LinkButton href="/dashboard/customers/import" variant="secondary" icon={Upload}>
              Import
            </LinkButton>
            <LinkButton href="/dashboard/customers/new" icon={Plus}>
              Add customer
            </LinkButton>
          </>
        }
      />

      {customers.length === 0 ? (
        <EmptyState
          icon={Users}
          title="No customers yet"
          body="Customers are added automatically the first time someone pays for a ticket, or you can add one by hand."
          action={
            <LinkButton href="/dashboard/customers/new" icon={Plus}>
              Add customer
            </LinkButton>
          }
        />
      ) : (
        <TableShell>
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th className="text-right">Orders</th>
              <th className="text-right">Total spent</th>
              <th>Since</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {customers.map((c) => (
              <tr key={c.id}>
                <td className="font-medium text-be-text">{c.full_name || "—"}</td>
                <td className="text-be-muted">{c.email}</td>
                <td className="text-right tabular-nums text-be-text">{c.total_orders}</td>
                <td className="text-right tabular-nums text-be-text">
                  {formatPrice(c.total_spent_cents, "kes")}
                </td>
                <td className="whitespace-nowrap text-be-muted">
                  {format(new Date(c.created_at), "PP")}
                </td>
                <td className="text-right">
                  <Link
                    href={`/dashboard/customers/${c.id}`}
                    className="inline-flex items-center gap-1 text-sm font-medium text-brand-green-h hover:underline"
                  >
                    View <ChevronRight className="h-3.5 w-3.5" />
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </TableShell>
      )}
    </div>
  );
}