"use client";

import { useEffect, useState } from "react";
import { PageHeader } from "@/components/layout/PageHeader";
import { EmptyState } from "@/components/layout/EmptyState";
import { ErrorState } from "@/components/layout/ErrorState";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { apiFetch, errorMessageForUi } from "@/lib/api";
import {
  formatSubscriptionSource,
  formatSubscriptionStatus,
  subscriptionSourceBadgeVariant,
  subscriptionStatusBadgeVariant,
} from "@/lib/status";

type Sub = {
  id: string;
  status: string;
  source: string;
  stripeSubscriptionId?: string | null;
  currentPeriodStart?: string | null;
  currentPeriodEnd?: string | null;
  cancelAtPeriodEnd?: boolean;
  canceledAt?: string | null;
  plan: { name: string; code: string };
  tenant?: { name: string; slug: string };
};

export default function SubscriptionsPage() {
  const [rows, setRows] = useState<Sub[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    apiFetch<Sub[]>("/subscriptions")
      .then(setRows)
      .catch((err) => setError(errorMessageForUi(err, "Failed")))
      .finally(() => setLoading(false));
  }, []);

  return (
    <>
      <PageHeader
        title="Subscriptions"
        description="Manual and Stripe subscriptions. Stripe Dashboard changes sync via webhooks."
      />
      {error ? <ErrorState message={error} /> : null}
      {loading ? (
        <Skeleton className="h-48 w-full" />
      ) : !rows.length ? (
        <EmptyState title="No subscriptions" description="No subscription records yet." />
      ) : (
        <div className="overflow-hidden rounded-lg border bg-card">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Customer</TableHead>
                <TableHead>Plan</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Source</TableHead>
                <TableHead className="hidden lg:table-cell">Period</TableHead>
                <TableHead className="hidden md:table-cell">Stripe sub</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((s) => (
                <TableRow key={s.id}>
                  <TableCell className="font-medium">{s.tenant?.name || "—"}</TableCell>
                  <TableCell>
                    {s.plan.name}{" "}
                    <span className="text-muted-foreground">({s.plan.code})</span>
                  </TableCell>
                  <TableCell>
                    <Badge variant={subscriptionStatusBadgeVariant(s.status)}>
                      {formatSubscriptionStatus(s.status)}
                    </Badge>
                    {s.cancelAtPeriodEnd ? (
                      <span className="ml-2 text-xs text-muted-foreground">cancels at period end</span>
                    ) : null}
                  </TableCell>
                  <TableCell>
                    <Badge variant={subscriptionSourceBadgeVariant(s.source)}>
                      {formatSubscriptionSource(s.source)}
                    </Badge>
                  </TableCell>
                  <TableCell className="hidden text-sm text-muted-foreground lg:table-cell">
                    {s.currentPeriodEnd
                      ? new Date(s.currentPeriodEnd).toLocaleDateString()
                      : "—"}
                  </TableCell>
                  <TableCell className="hidden font-mono text-xs text-muted-foreground md:table-cell">
                    {s.stripeSubscriptionId || "—"}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </>
  );
}