import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import { PageHeader } from "@/components/common/PageHeader";
import { AdminDataTable, type Column } from "@/components/common/AdminDataTable";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { subscriptionsService } from "@/services/api/subscriptions";
import type { Subscription, SubscriptionStatus } from "@/types";
import { SubscriptionStatusPill } from "@/features/subscription/components";
import { SUBSCRIPTION_PLANS } from "@/config/subscription";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/subscriptions")({
  head: () => ({ meta: [{ title: "Subscriptions — Admin" }] }),
  component: AdminSubscriptionsPage,
});

const STATUSES: SubscriptionStatus[] = ["active", "expiring_soon", "expired", "cancelled", "payment_failed", "gifted", "paused"];

function AdminSubscriptionsPage() {
  const [rows, setRows] = useState<Subscription[]>([]);
  const [q, setQ] = useState("");
  const [status, setStatus] = useState<string>("all");
  useEffect(() => { subscriptionsService.listSubscribers().then(setRows); }, []);

  const filtered = useMemo(() => rows.filter((s) =>
    (status === "all" || s.status === status) &&
    (q === "" || s.userId.includes(q) || s.id.includes(q))
  ), [rows, status, q]);

  async function setSt(id: string, s: SubscriptionStatus) {
    const next = await subscriptionsService.setStatus(id, s);
    setRows((rs) => rs.map((r) => r.id === next.id ? next : r));
    toast.success("Status updated");
  }

  const cols: Column<Subscription>[] = [
    { key: "id", header: "ID", cell: (s) => <span className="font-mono text-xs">{s.id}</span> },
    { key: "user", header: "User", cell: (s) => s.userId },
    { key: "plan", header: "Plan", cell: (s) => SUBSCRIPTION_PLANS.find((p) => p.id === s.planId)?.label ?? s.planId },
    { key: "status", header: "Status", cell: (s) => <SubscriptionStatusPill status={s.status} /> },
    { key: "renew", header: "Auto-renew", cell: (s) => s.autoRenew ? "Yes" : "No" },
    { key: "exp", header: "Expires", cell: (s) => <span className="text-muted-foreground">{s.expiresAt}</span> },
  ];

  return (
    <div>
      <PageHeader title="Subscriptions" description="Manage subscribers, statuses and gifts." />
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        filters={
          <Select value={status} onValueChange={setStatus}>
            <SelectTrigger className="w-[180px]"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All statuses</SelectItem>
              {STATUSES.map((s) => <SelectItem key={s} value={s} className="capitalize">{s.replace("_", " ")}</SelectItem>)}
            </SelectContent>
          </Select>
        }
        rowActions={(s) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline" onClick={() => setSt(s.id, "active")}>Activate</Button>
            <Button size="sm" variant="ghost" onClick={() => setSt(s.id, "paused")}>Pause</Button>
            <Button size="sm" variant="ghost" onClick={() => setSt(s.id, "cancelled")}>Cancel</Button>
          </div>
        )}
      />
    </div>
  );
}