import Link from "next/link";
import { ArrowRight, Check, KeyRound, ShieldCheck } from "lucide-react";
import { PLAN_LIMITS, isUnlimited, normalizePlan } from "@fetcha/core";
import { getWorkspace } from "@/lib/session";
import { monthlyUsage } from "@/lib/queries/account";
import { formatBytes, formatNumber, formatUsd, formatDateOnly } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Alert } from "@/components/ui/alert";

export const dynamic = "force-dynamic";

export const metadata = { title: "Plan & access · Fetcha" };

function seconds(ms: number) {
  return `${ms / 1000} s`;
}

export default async function BillingPage() {
  const ws = await getWorkspace();
  const limits = PLAN_LIMITS[normalizePlan(ws.organization.plan)];
  const unlimited = isUnlimited(limits);
  const now = new Date();
  const monthStart = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1));
  const nextMonth = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 1));
  const usage = await monthlyUsage(ws.organization.id);

  const included: Array<{ label: string; detail?: string }> = [
    { label: unlimited ? "Unlimited requests" : `${formatNumber(limits.monthly_requests)} requests / month`, detail: "no monthly quota, no overage" },
    { label: `${formatNumber(limits.concurrency)} concurrent requests`, detail: "per organization, all projects together" },
    { label: `${seconds(limits.max_timeout_ms)} maximum timeout`, detail: `up to ${limits.max_retries} automatic retries per request` },
    { label: "All network classes", detail: limits.networks.map((n) => n[0]!.toUpperCase() + n.slice(1)).join(", ") },
    { label: "Managed browser rendering", detail: `${limits.browser_concurrency} concurrent renders, routed through the same networks` },
    { label: `Crawl jobs up to ${formatNumber(limits.crawl_max_pages)} pages`, detail: `${limits.crawl_concurrent_jobs} jobs in parallel, sitemap discovery and Markdown output` },
    { label: "Sticky sessions and geo targeting", detail: "country, region and city on every request" },
    { label: `${limits.retention_days}-day request logs`, detail: "full metadata, attempts and timings" },
  ];

  return (
    <div className="grid gap-8">
      <PageHeader
        title="Plan & access"
        description="Fetcha is a private platform. There is a single plan, nothing to upgrade and nothing to pay: no invoices, no payment method, no meters. Usage below is informational."
      />

      <div className="grid gap-6 lg:grid-cols-[1fr_360px]">
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between gap-3">
              <CardTitle>Unlimited — private platform</CardTitle>
              <Badge variant="solid" dot>
                {limits.label}
              </Badge>
            </div>
            <CardDescription>Every organization on this platform gets the same limits. They are enforced by the API and shown here from the same configuration the API uses.</CardDescription>
          </CardHeader>
          <CardContent>
            <ul className="grid gap-3 text-[13.5px] sm:grid-cols-2">
              {included.map((line) => (
                <li key={line.label} className="flex items-start gap-2">
                  <Check className="mt-0.5 size-4 shrink-0 text-success" aria-hidden />
                  <span>
                    <span className="font-medium tabular">{line.label}</span>
                    {line.detail ? <span className="block text-[12.5px] text-fg-muted">{line.detail}</span> : null}
                  </span>
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Usage this month</CardTitle>
            <CardDescription>
              Across all projects of {ws.organization.name}, since {formatDateOnly(monthStart)}. Resets {formatDateOnly(nextMonth)}.
            </CardDescription>
          </CardHeader>
          <CardContent className="grid gap-3 text-[13px]">
            <div className="flex items-baseline justify-between">
              <span className="text-fg-muted">Requests</span>
              <span className="font-mono tabular">
                {formatNumber(usage.requests)} <span className="text-fg-subtle">/ ∞</span>
              </span>
            </div>
            <div className="flex items-baseline justify-between">
              <span className="text-fg-muted">Successful</span>
              <span className="font-mono tabular">{formatNumber(usage.successful)}</span>
            </div>
            <div className="flex items-baseline justify-between">
              <span className="text-fg-muted">Bandwidth</span>
              <span className="font-mono tabular">{formatBytes(usage.bytes)}</span>
            </div>
            <div className="flex items-baseline justify-between border-t border-border pt-3">
              <span className="text-fg-muted">Metered spend</span>
              <span className="font-mono tabular">{formatUsd(usage.spendUsd)}</span>
            </div>
            <p className="text-[11.5px] leading-snug text-fg-subtle">Spend is an internal cost estimate used only for your optional spending limits. Nothing is invoiced.</p>
            <Link href="/dashboard/usage" className="inline-flex items-center gap-1 text-[12.5px] text-fg-muted underline-offset-4 hover:text-fg hover:underline">
              Detailed usage <ArrowRight className="size-3.5" />
            </Link>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        <Alert
          variant="info"
          title="Spending limits"
          action={
            <Button asChild variant="outline" size="xs">
              <Link href="/dashboard/settings">Settings</Link>
            </Button>
          }
        >
          Optional guard-rails, not billing: cap the estimated monthly spend for the whole organization{ws.organization.hardLimitUsd ? ` (currently ${formatUsd(ws.organization.hardLimitUsd)} hard limit)` : ""} or per project. Soft limits email you; hard limits stop requests with USAGE_LIMIT_REACHED.
        </Alert>
        <Alert
          variant="success"
          title="Invitation-only access"
          action={
            ws.isAdmin ? (
              <Button asChild variant="outline" size="xs">
                <Link href="/admin/access">
                  <KeyRound className="size-3.5" /> Manage access
                </Link>
              </Button>
            ) : (
              <Button asChild variant="outline" size="xs">
                <a href="mailto:hello@fetcha.co?subject=Fetcha%20access">
                  <ShieldCheck className="size-3.5" /> Contact
                </a>
              </Button>
            )
          }
        >
          Accounts are created by invitation. To bring a teammate in, ask your Fetcha administrator to add their email to the access list; they will receive an invitation to sign up.
        </Alert>
      </div>
    </div>
  );
}