"use client";

import { useCallback, useEffect, useState } from "react";
import { PageHeader } from "@/components/layout/PageHeader";
import { ErrorState } from "@/components/layout/ErrorState";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { apiFetch } from "@/lib/api";
import {
  ADDIN_PRODUCT_CODE,
  addinEnabledLabel,
  describeAccessUnavailable,
  type EntitlementProduct,
  type EntitlementSummary,
} from "@/lib/entitlements";
import {
  accessStateBadgeVariant,
  formatAccessState,
  formatBillingInterval,
  formatSubscriptionSource,
  formatSubscriptionStatus,
  subscriptionSourceBadgeVariant,
  subscriptionStatusBadgeVariant,
} from "@/lib/status";

type Product = { id: string; code: string; name: string };

type Plan = {
  id: string;
  name: string;
  code: string;
  description?: string | null;
  vehicleLimit?: number | null;
  priceCents: number;
  currency: string;
  billingInterval: string;
  stripeEnabled?: boolean;
  products?: Product[];
  stripe?: { stripeSyncStatus: string; stripeEnabled: boolean };
};

type Sub = {
  id: string;
  status: string;
  source: string;
  currentPeriodEnd?: string | null;
  cancelAtPeriodEnd?: boolean;
  plan: Plan & {
    planProducts?: Array<{ product: Product }>;
  };
};

function isPurchasable(plan: Plan): boolean {
  return Boolean(
    plan.stripeEnabled ||
      plan.stripe?.stripeEnabled ||
      plan.stripe?.stripeSyncStatus === "SYNCED",
  );
}

function productBadgeVariant(
  product: EntitlementProduct,
): "default" | "secondary" | "destructive" | "outline" {
  if (product.entitled) return "default";
  return accessStateBadgeVariant(product.accessState);
}

export default function SubscriptionPage() {
  const [subs, setSubs] = useState<Sub[]>([]);
  const [plans, setPlans] = useState<Plan[]>([]);
  const [entitlements, setEntitlements] = useState<EntitlementSummary | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState<string | null>(null);
  const [actionMsg, setActionMsg] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [s, p, e] = await Promise.all([
        apiFetch<Sub[]>("/subscriptions"),
        apiFetch<Plan[]>("/plans"),
        apiFetch<EntitlementSummary>("/entitlements"),
      ]);
      setSubs(s);
      setPlans(p);
      setEntitlements(e);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void load();
  }, [load]);

  useEffect(() => {
    if (typeof window === "undefined") return;
    const checkout = new URLSearchParams(window.location.search).get("checkout");
    if (checkout === "success") {
      setActionMsg("Checkout completed. Subscription status updates via Stripe webhooks.");
    } else if (checkout === "canceled") {
      setActionMsg("Checkout was canceled.");
    }
  }, []);

  const activeSub = entitlements?.subscription
    ? {
        ...subs.find((s) => s.id === entitlements.subscription?.id),
        status: entitlements.subscription.status,
        source: entitlements.subscription.source,
        currentPeriodEnd: entitlements.subscription.currentPeriodEnd,
        plan: {
          ...(subs.find((s) => s.id === entitlements.subscription?.id)?.plan || {}),
          name: entitlements.subscription.plan.name,
          code: entitlements.subscription.plan.code,
          priceCents:
            subs.find((s) => s.id === entitlements.subscription?.id)?.plan.priceCents ?? 0,
          currency:
            subs.find((s) => s.id === entitlements.subscription?.id)?.plan.currency ?? "USD",
          billingInterval:
            subs.find((s) => s.id === entitlements.subscription?.id)?.plan.billingInterval ??
            "MONTHLY",
          vehicleLimit: subs.find((s) => s.id === entitlements.subscription?.id)?.plan
            .vehicleLimit,
        },
      }
    : subs.find((s) => s.status === "ACTIVE" || s.status === "TRIALING") || subs[0];

  const hasActive =
    Boolean(entitlements?.subscription) &&
    (entitlements!.subscription!.status === "ACTIVE" ||
      entitlements!.subscription!.status === "TRIALING");

  const purchasable = plans.filter(isPurchasable);
  const addinProduct =
    entitlements?.products.find((p) => p.productCode === ADDIN_PRODUCT_CODE) || null;
  const activeProducts = entitlements?.products.filter((p) => p.entitled) || [];
  const unavailableHint = describeAccessUnavailable(addinProduct?.accessState);

  async function startCheckout(planId: string) {
    setBusy(`checkout-${planId}`);
    setError(null);
    try {
      const session = await apiFetch<{ url: string }>("/billing/checkout-session", {
        method: "POST",
        body: JSON.stringify({ planId }),
      });
      window.location.assign(session.url);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Checkout failed");
      setBusy(null);
    }
  }

  async function openPortal() {
    setBusy("portal");
    setError(null);
    try {
      const session = await apiFetch<{ url: string }>("/billing/portal-session", {
        method: "POST",
        body: JSON.stringify({}),
      });
      window.location.assign(session.url);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Billing portal failed");
      setBusy(null);
    }
  }

  return (
    <>
      <PageHeader
        title="Subscription"
        description="Current plan, subscription status, and Add-in entitlements."
      />

      {error ? <ErrorState message={error} /> : null}
      {actionMsg ? (
        <Alert className="mb-4">
          <AlertTitle>Billing notice</AlertTitle>
          <AlertDescription>{actionMsg}</AlertDescription>
        </Alert>
      ) : null}

      {loading ? (
        <Skeleton className="h-48 w-full max-w-2xl" />
      ) : activeSub && hasActive ? (
        <div className="grid max-w-3xl gap-4">
          <Card>
            <CardHeader>
              <div className="flex flex-wrap items-center gap-2">
                <CardTitle>{activeSub.plan.name}</CardTitle>
                <Badge variant={subscriptionStatusBadgeVariant(activeSub.status)}>
                  {formatSubscriptionStatus(activeSub.status)}
                </Badge>
                <Badge variant={subscriptionSourceBadgeVariant(activeSub.source)}>
                  {formatSubscriptionSource(activeSub.source)}
                </Badge>
              </div>
              <CardDescription>Plan code: {activeSub.plan.code}</CardDescription>
            </CardHeader>
            <CardContent className="grid gap-3 text-sm sm:grid-cols-2">
              <div>
                <p className="text-muted-foreground">Billing cycle</p>
                <p className="font-medium">
                  {activeSub.plan.priceCents
                    ? `${(activeSub.plan.priceCents / 100).toFixed(2)} ${activeSub.plan.currency} / ${
                        formatBillingInterval(activeSub.plan.billingInterval) === "Yearly"
                          ? "year"
                          : "month"
                      }`
                    : "—"}
                </p>
              </div>
              <div>
                <p className="text-muted-foreground">Next billing date</p>
                <p className="font-medium">
                  {activeSub.currentPeriodEnd
                    ? new Date(activeSub.currentPeriodEnd).toLocaleDateString()
                    : "—"}
                </p>
              </div>
              <div>
                <p className="text-muted-foreground">Vehicle limit</p>
                <p className="font-medium">{activeSub.plan.vehicleLimit ?? "—"}</p>
              </div>
              <div>
                <p className="text-muted-foreground">CLERAL Add-in</p>
                <p className="font-medium">{addinEnabledLabel(addinProduct)}</p>
              </div>
              <div className="sm:col-span-2">
                <p className="text-muted-foreground">Active products / features</p>
                {activeProducts.length ? (
                  <ul className="mt-1 space-y-1">
                    {activeProducts.map((p) => (
                      <li key={p.productCode} className="flex flex-wrap items-center gap-2">
                        <span className="font-medium">{p.productName}</span>
                        <Badge variant={productBadgeVariant(p)}>
                          {formatAccessState(p.accessState)}
                        </Badge>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="font-medium">None currently entitled</p>
                )}
              </div>
              {entitlements?.products?.length ? (
                <div className="sm:col-span-2">
                  <p className="text-muted-foreground">All catalog products</p>
                  <ul className="mt-1 space-y-1">
                    {entitlements.products.map((p) => (
                      <li key={p.productCode} className="flex flex-wrap items-center gap-2 text-sm">
                        <span>{p.productName}</span>
                        <Badge variant={productBadgeVariant(p)}>
                          {p.entitled ? "Enabled" : "Not entitled"}
                        </Badge>
                      </li>
                    ))}
                  </ul>
                </div>
              ) : null}
            </CardContent>
          </Card>

          {!addinProduct?.entitled && unavailableHint ? (
            <Alert>
              <AlertTitle>Add-in access unavailable</AlertTitle>
              <AlertDescription>{unavailableHint}</AlertDescription>
            </Alert>
          ) : null}

          <div className="flex flex-wrap gap-2">
            {activeSub.source === "STRIPE" ? (
              <Button disabled={busy !== null} onClick={() => void openPortal()}>
                {busy === "portal" ? "Opening…" : "Manage Billing"}
              </Button>
            ) : (
              <Alert>
                <AlertTitle>Manual subscription</AlertTitle>
                <AlertDescription>
                  This subscription was assigned by CLERAL admin (not Stripe). Contact support to
                  change plans, or subscribe via Stripe when a purchasable plan is available.
                </AlertDescription>
              </Alert>
            )}
          </div>
        </div>
      ) : (
        <div className="grid max-w-3xl gap-4">
          <Alert>
            <AlertTitle>No active subscription</AlertTitle>
            <AlertDescription>
              Subscribe to a plan that includes the CLERAL Weight Monitoring product. The Add-in
              stays locked until the server confirms entitlement.
              {unavailableHint ? ` ${unavailableHint}` : ""}
            </AlertDescription>
          </Alert>

          {addinProduct ? (
            <Card>
              <CardHeader>
                <CardTitle>CLERAL Add-in status</CardTitle>
                <CardDescription>{addinEnabledLabel(addinProduct)}</CardDescription>
              </CardHeader>
            </Card>
          ) : null}

          {purchasable.length ? (
            purchasable.map((plan) => (
              <Card key={plan.id}>
                <CardHeader>
                  <CardTitle>{plan.name}</CardTitle>
                  <CardDescription>{plan.description || plan.code}</CardDescription>
                </CardHeader>
                <CardContent className="flex flex-wrap items-center justify-between gap-3">
                  <p className="text-sm font-medium">
                    ${(plan.priceCents / 100).toFixed(2)} /{" "}
                    {plan.billingInterval === "YEARLY" ? "year" : "month"}
                  </p>
                  <Button disabled={busy !== null} onClick={() => void startCheckout(plan.id)}>
                    {busy === `checkout-${plan.id}` ? "Redirecting…" : "Subscribe"}
                  </Button>
                </CardContent>
              </Card>
            ))
          ) : (
            <p className="text-sm text-muted-foreground">
              No Stripe-synced plans are available for purchase yet.
            </p>
          )}
        </div>
      )}
    </>
  );
}