import * as React from "react";
import { cn } from "@/lib/utils";

/** Dashed, animated connector. Vertical on small screens, horizontal from lg. Decorative only. */
function Flow({ className }: { className?: string }) {
  return (
    <div className={cn("flex shrink-0 items-center justify-center", className)} aria-hidden>
      {/* vertical (mobile) */}
      <svg className="h-9 w-4 lg:hidden" viewBox="0 0 16 36" fill="none">
        <line x1="8" y1="0" x2="8" y2="30" strokeWidth="1.5" strokeDasharray="4 4" className="stroke-accent animate-flow motion-reduce:animate-none" />
        <path d="M4 28l4 5 4-5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="stroke-accent" />
      </svg>
      {/* horizontal (desktop) */}
      <svg className="hidden h-4 w-12 lg:block" viewBox="0 0 48 16" fill="none">
        <line x1="0" y1="8" x2="42" y2="8" strokeWidth="1.5" strokeDasharray="4 4" className="stroke-accent animate-flow motion-reduce:animate-none" />
        <path d="M40 4l5 4-5 4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="stroke-accent" />
      </svg>
    </div>
  );
}

function Node({ step, title, subtitle, children, className, highlight }: { step: string; title: string; subtitle: string; children?: React.ReactNode; className?: string; highlight?: boolean }) {
  return (
    <div className={cn("relative flex w-full flex-col rounded-lg border bg-bg-elevated p-4 shadow-xs", highlight ? "border-accent/50 ring-1 ring-accent/20" : "border-border", className)}>
      <div className="flex items-center justify-between gap-2">
        <span className="font-mono text-[11px] font-medium uppercase tracking-wide text-fg-subtle">{step}</span>
        {highlight ? <span className="size-1.5 rounded-full bg-accent" aria-hidden /> : null}
      </div>
      <div className="mt-1.5 text-[15px] font-semibold tracking-tight text-fg">{title}</div>
      <div className="mt-0.5 text-[12.5px] leading-snug text-fg-muted">{subtitle}</div>
      {children ? <div className="mt-3">{children}</div> : null}
    </div>
  );
}

const NETWORKS: Array<{ label: string; live: boolean }> = [
  { label: "Datacenter", live: false },
  { label: "Residential", live: true },
  { label: "ISP", live: false },
  { label: "Mobile", live: false },
  { label: "Browser", live: true },
];

export function ArchitectureDiagram() {
  return (
    <figure className="relative">
      <div className="absolute inset-0 -z-10 grid-bg opacity-70" aria-hidden />
      <div className="flex flex-col items-stretch lg:flex-row lg:items-center">
        <Node step="01 · Client" title="Your app" subtitle="Any language, any runtime. One HTTPS call.">
          <div className="rounded-md border border-border bg-bg-subtle px-2.5 py-1.5 font-mono text-[11.5px] text-fg-muted">
            <span className="text-accent">POST</span> /v1/fetch
            <br />
            <span className="text-fg-subtle">{"{"}</span> url, country <span className="text-fg-subtle">{"}"}</span>
          </div>
        </Node>
        <Flow />
        <Node step="02 · Edge" title="Fetcha API" subtitle="Auth, validation, rate limits, SSRF protection.">
          <ul className="space-y-1 text-[12px] text-fg-muted">
            <li className="flex items-center gap-2"><span className="size-1 rounded-full bg-fg-subtle" aria-hidden />Bearer key · scopes</li>
            <li className="flex items-center gap-2"><span className="size-1 rounded-full bg-fg-subtle" aria-hidden />Request ID on every call</li>
            <li className="flex items-center gap-2"><span className="size-1 rounded-full bg-fg-subtle" aria-hidden />Redacted logging</li>
          </ul>
        </Node>
        <Flow />
        <Node step="03 · Core" title="Smart routing" subtitle="Scores every route per domain, escalates on blocks, retries with a fresh IP." highlight className="lg:flex-[1.35]">
          <ul className="flex flex-wrap gap-1.5" aria-label="Network classes">
            {NETWORKS.map((n) => (
              <li key={n.label} className={cn("inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-[11.5px] font-medium", n.live ? "border-accent/40 bg-accent-soft text-accent" : "border-border bg-bg-subtle text-fg-subtle")}>
                <span className={cn("size-1.5 rounded-full", n.live ? "bg-accent" : "bg-border-strong")} aria-hidden />
                {n.label}
                {!n.live ? <span className="sr-only"> (coming soon)</span> : null}
              </li>
            ))}
          </ul>
          <p className="mt-2 text-[11px] text-fg-subtle">Residential and the managed browser are live today. Other classes are coming soon; <span className="font-mono">auto</span> resolves to the best available and escalates to the browser on JavaScript challenges.</p>
        </Node>
        <Flow />
        <Node step="04 · Target" title="Global web" subtitle="The page you asked for, from the geography you asked for.">
          <div className="rounded-md border border-border bg-bg-subtle px-2.5 py-1.5 font-mono text-[11.5px] text-fg-muted">
            <span className="text-success">200</span> example.com
            <br />
            <span className="text-fg-subtle">residential · CA · 842 ms</span>
          </div>
        </Node>
      </div>
      <figcaption className="mt-4 text-center text-[12.5px] text-fg-subtle">
        Your app → Fetcha API → Smart routing → Global web. You never manage proxies, IP pools or retries yourself.
      </figcaption>
    </figure>
  );
}