import type { Metadata } from "next";
import Link from "next/link";
import { Check, KeyRound, LogIn, Mail } from "lucide-react";
import { PLAN_LIMITS } from "@fetcha/core";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { formatNumber } from "@/lib/format";

export const metadata: Metadata = {
  title: "Access",
  description: "Fetcha is a private, invitation-only web access platform. One plan, no meters: unlimited requests, 200 concurrent, all network classes, managed browser and crawl jobs.",
  alternates: { canonical: "/pricing" },
};

const REQUEST_ACCESS = "mailto:hello@fetcha.co?subject=Fetcha%20access";

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

export default function AccessPage() {
  const p = PLAN_LIMITS.unlimited;
  const networks = p.networks.map((n) => n[0]!.toUpperCase() + n.slice(1)).join(", ");

  const included: Array<{ label: string; value: string; hint: string }> = [
    { label: "Requests", value: "Unlimited", hint: "No monthly quota, no overage, no request fee." },
    { label: "Concurrency", value: formatNumber(p.concurrency), hint: "Requests in flight at once, per organization." },
    { label: "Timeout", value: `up to ${seconds(p.max_timeout_ms)}`, hint: "One budget for the whole request, retries included." },
    { label: "Retries", value: `up to ${p.max_retries}`, hint: "New exit IP and alternate route on every attempt." },
    { label: "Network classes", value: "All", hint: networks + ", chosen automatically or pinned per request." },
    { label: "Managed browser", value: `${p.browser_concurrency} concurrent`, hint: "Real Chromium, same networks, automatic fallback on JS challenges." },
    { label: "Crawl jobs", value: `${formatNumber(p.crawl_max_pages)} pages / job`, hint: `${p.crawl_concurrent_jobs} jobs in parallel, sitemap discovery, Markdown output.` },
    { label: "Sessions and geo", value: "Included", hint: "Sticky sessions up to 30 minutes; country, region and city targeting." },
    { label: "Request logs", value: `${p.retention_days} days`, hint: "Every attempt, route alias, timing and cost, in the dashboard and the API." },
  ];

  const features = ["POST /v1/fetch with HTML, text, Markdown, JSON or raw output", "Managed headless browser with screenshots and wait conditions", "Crawl and map endpoints for whole sites", "Sticky sessions and geo targeting", "Playground, request explorer and usage analytics", "JavaScript and Python SDKs", "Optional spending limits as guard-rails"];

  return (
    <div className="container-page py-14 sm:py-20">
      <header className="mx-auto max-w-2xl text-center">
        <p className="text-[11.5px] font-semibold uppercase tracking-[0.12em] text-accent">Access</p>
        <h1 className="mt-2 text-[34px] font-semibold leading-[1.1] tracking-tight sm:text-[44px]">Private access. No plans, no meters.</h1>
        <p className="mt-4 text-[15.5px] leading-relaxed text-fg-muted">
          Fetcha is an invitation-only platform. There is a single, unlimited plan for everyone who is let in, and there is nothing to buy: no tiers, no quotas, no invoices. Accounts are created
          from an access list managed by a Fetcha administrator.
        </p>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <Button asChild size="lg">
            <Link href="/login">
              <LogIn /> Log in
            </Link>
          </Button>
          <Button asChild size="lg" variant="outline">
            <a href={REQUEST_ACCESS}>
              <Mail /> Request access
            </a>
          </Button>
        </div>
        <p className="mt-4 text-[12.5px] text-fg-subtle">Already invited? Sign up with the email address your administrator approved.</p>
      </header>

      {/* Single plan */}
      <section aria-labelledby="plan-title" className="mt-16">
        <div className="overflow-hidden rounded-xl border border-border bg-bg">
          <div className="flex flex-col gap-4 border-b border-border bg-bg-subtle/60 px-6 py-6 sm:flex-row sm:items-center sm:justify-between sm:px-8">
            <div>
              <div className="flex items-center gap-2">
                <h2 id="plan-title" className="text-[22px] font-semibold tracking-tight">
                  {p.label}
                </h2>
                <Badge variant="solid">private platform</Badge>
              </div>
              <p className="mt-1 text-[14px] text-fg-muted">The only plan. Same limits for every organization, enforced by the API from the configuration below.</p>
            </div>
            <div className="text-left sm:text-right">
              <div className="font-mono text-[30px] font-semibold tabular tracking-tight">$0</div>
              <div className="text-[12.5px] text-fg-subtle">no billing, by invitation</div>
            </div>
          </div>
          <dl className="grid divide-y divide-border sm:grid-cols-2 sm:divide-y-0 lg:grid-cols-3 [&>div]:border-border sm:[&>div:nth-child(n+3)]:border-t lg:[&>div:nth-child(n+3)]:border-t-0 lg:[&>div:nth-child(n+4)]:border-t sm:[&>div:nth-child(odd)]:border-r lg:[&>div:nth-child(odd)]:border-r-0 lg:[&>div:not(:nth-child(3n))]:border-r">
            {included.map((row) => (
              <div key={row.label} className="px-6 py-5 sm:px-8">
                <dt className="text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">{row.label}</dt>
                <dd className="mt-1 font-mono text-[18px] font-semibold tabular tracking-tight">{row.value}</dd>
                <dd className="mt-1 text-[12.5px] leading-snug text-fg-muted">{row.hint}</dd>
              </div>
            ))}
          </dl>
        </div>
      </section>

      {/* What is included + how to get access */}
      <section className="mt-16 grid gap-8 lg:grid-cols-2 lg:gap-12">
        <div>
          <h2 className="text-[24px] font-semibold tracking-tight">Everything is included</h2>
          <p className="mt-2 text-[14px] text-fg-muted">No feature is gated behind a tier. When a capability ships, every account gets it the same day.</p>
          <ul className="mt-5 grid gap-2.5 text-[14px]">
            {features.map((f) => (
              <li key={f} className="flex items-start gap-2.5">
                <Check className="mt-0.5 size-4 shrink-0 text-success" aria-hidden />
                <span>{f}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className="rounded-xl border border-border bg-bg-subtle/60 p-6 sm:p-8">
          <div className="flex items-center gap-2">
            <KeyRound className="size-4 text-accent" aria-hidden />
            <h2 className="text-[20px] font-semibold tracking-tight">How to get access</h2>
          </div>
          <ol className="mt-4 grid gap-4 text-[14px]">
            {[
              { title: "Ask for an invitation", body: <>Write to <a className="text-accent underline-offset-4 hover:underline" href={REQUEST_ACCESS}>hello@fetcha.co</a> with the email address you want to use and a sentence about what you plan to fetch.</> },
              { title: "Your email is added to the access list", body: <>A Fetcha administrator adds it and sends you an invitation. Only listed addresses can create an account; anyone else is refused at signup.</> },
              { title: "Create your account", body: <>Follow the link in the invitation (or open <Link className="text-accent underline-offset-4 hover:underline" href="/signup">/signup</Link>) using the same address. Your workspace, a default project and the Playground are ready immediately.</> },
            ].map((s, i) => (
              <li key={s.title} className="flex gap-3">
                <span className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-fg font-mono text-[12px] font-semibold text-bg">{i + 1}</span>
                <div>
                  <div className="font-medium">{s.title}</div>
                  <p className="mt-0.5 text-[13.5px] leading-relaxed text-fg-muted">{s.body}</p>
                </div>
              </li>
            ))}
          </ol>
          <div className="mt-6 flex flex-wrap gap-2">
            <Button asChild>
              <Link href="/login">Log in</Link>
            </Button>
            <Button asChild variant="outline">
              <a href={REQUEST_ACCESS}>Request access</a>
            </Button>
          </div>
        </div>
      </section>

      {/* Notes */}
      <section aria-labelledby="notes-title" className="mt-16 grid gap-8 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-16">
        <div>
          <h2 id="notes-title" className="text-[24px] font-semibold tracking-tight">
            Good to know
          </h2>
          <p className="mt-2 text-[14px] text-fg-muted">
            Questions? Write to <a className="text-accent underline-offset-4 hover:underline" href="mailto:support@fetcha.co">support@fetcha.co</a>.
          </p>
        </div>
        <div className="divide-y divide-border rounded-lg border border-border">
          {[
            { q: "Why is there no pricing?", a: "Fetcha runs as a private platform for invited teams. Access is granted by an administrator rather than sold, so there is no checkout, no card on file and no invoice. The dashboard's “Plan & access” page shows your usage for information only." },
            { q: "Are the limits really unlimited?", a: `There is no monthly request quota and no overage. Operational limits still apply to keep the platform healthy: ${formatNumber(p.concurrency)} concurrent requests per organization, a ${seconds(p.max_timeout_ms)} maximum timeout, up to ${p.max_retries} retries, ${p.browser_concurrency} concurrent browser renders and ${formatNumber(p.crawl_max_pages)} pages per crawl job. Burst rate limits protect the API from runaway loops.` },
            { q: "What are spending limits, then?", a: "Optional guard-rails you set yourself, per organization or per project. They are based on an internal cost estimate and stop requests with USAGE_LIMIT_REACHED when a hard limit is reached. Nothing is charged." },
            { q: "Can I invite my teammates?", a: "Ask your Fetcha administrator to add their email addresses to the access list; each of them receives an invitation and creates their own account. Shared organizations and roles are not available yet." },
            { q: "What happens if I sign up with an email that was not invited?", a: "Signup is refused with the message “This email is not on the access list. Ask your Fetcha administrator to invite you.” No account is created." },
          ].map((f) => (
            <details key={f.q} className="group px-5 py-4 open:bg-bg-subtle/40">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 text-[15px] font-medium tracking-tight marker:content-none [&::-webkit-details-marker]:hidden">
                {f.q}
                <span className="shrink-0 font-mono text-fg-subtle transition-transform group-open:rotate-45" aria-hidden>
                  +
                </span>
              </summary>
              <div className="mt-3 max-w-2xl text-[14px] leading-relaxed text-fg-muted">{f.a}</div>
            </details>
          ))}
        </div>
      </section>

      <section className="mt-20 rounded-xl border border-border bg-bg-subtle/60 px-6 py-12 text-center">
        <h2 className="text-[26px] font-semibold tracking-tight">Invited? Your workspace is waiting.</h2>
        <p className="mx-auto mt-3 max-w-lg text-[14.5px] text-fg-muted">Log in with the address your administrator approved, or ask us for access.</p>
        <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
          <Button asChild size="lg">
            <Link href="/login">Log in</Link>
          </Button>
          <Button asChild size="lg" variant="outline">
            <a href={REQUEST_ACCESS}>Request access</a>
          </Button>
        </div>
        <p className="mt-4 text-[12.5px] text-fg-subtle">Private platform. No plans, no meters, no billing.</p>
      </section>
    </div>
  );
}