import { Alert } from "@/components/ui/Icons";
import { revealProps } from "@/components/ui/reveal";
import { specialization } from "@/content/home";
import type { BusinessModel } from "@/content/types";
import { cn } from "@/lib/cn";

type FlowData = (typeof specialization)["saas"];

const mono = { className: "fill-muted font-mono", fontSize: 10.5, letterSpacing: "0.08em" } as const;

/** SaaS: stages drift further apart as the cycle stretches from days into months. */
function SaasFlowSvg({ steps }: { steps: string[] }) {
  const xs = [24, 108, 196, 304, 422, 536];
  return (
    <svg viewBox="0 0 560 150" className="h-auto w-full" aria-hidden="true">
      <path d="M24 60 H536" className="draw-path stroke-ink/30" pathLength={1000} />
      <path d="M422 60 H536" className="draw-path stroke-signal" strokeWidth="1.75" pathLength={1000} />
      {steps.map((step, i) => {
        const last = i === steps.length - 1;
        const above = i % 2 === 1;
        return (
          <g key={step}>
            <circle cx={xs[i]} cy="60" r={last ? 8 : 6} className={last ? "fill-signal" : "fill-surface stroke-ink"} strokeWidth="1.5" />
            <text x={xs[i]} y={above ? 36 : 92} textAnchor={i === 0 ? "start" : last ? "end" : "middle"} className="fill-ink" fontSize="13" fontWeight="500">
              {step}
            </text>
          </g>
        );
      })}
      <path d="M24 128 H528" className="stroke-ink/40" strokeDasharray="2 4" />
      <path d="M522 124 l8 4 l-8 4" className="fill-none stroke-ink/40" />
      <text x="24" y="146" {...mono}>
        DAY ONE
      </text>
      <text x="536" y="146" textAnchor="end" {...mono}>
        WEEKS → MONTHS
      </text>
    </svg>
  );
}

/** E-commerce: a short path, then a loop back from purchase. */
function EcommerceFlowSvg({ steps }: { steps: string[] }) {
  const xs = [24, 150, 262, 370];
  const path = steps.slice(0, 4);
  return (
    <svg viewBox="0 0 560 150" className="h-auto w-full" aria-hidden="true">
      <path d="M24 84 H370" className="draw-path stroke-ink/30" pathLength={1000} />
      <path d="M370 84 C470 84 470 16 262 16 C200 16 160 40 150 76" className="draw-path fill-none stroke-signal" strokeWidth="1.75" strokeDasharray="4 4" pathLength={1000} />
      <path d="M146 68 l4 9 l6 -8" className="fill-none stroke-signal" strokeWidth="1.5" />
      {path.map((step, i) => {
        const purchase = i === 3;
        return (
          <g key={step}>
            <circle cx={xs[i]} cy="84" r={purchase ? 8 : 6} className={purchase ? "fill-signal" : "fill-surface stroke-ink"} strokeWidth="1.5" />
            <text x={xs[i]} y="114" textAnchor={i === 0 ? "start" : "middle"} className="fill-ink" fontSize="13" fontWeight="500">
              {step}
            </text>
          </g>
        );
      })}
      <text x="430" y="40" className="fill-signal" fontSize="13" fontWeight="500">
        {steps[4]}
      </text>
      <path d="M24 136 H244" className="stroke-ink/40" strokeDasharray="2 4" />
      <path d="M238 132 l8 4 l-8 4" className="fill-none stroke-ink/40" />
      <text x="536" y="140" textAnchor="end" {...mono}>
        MINUTES → DAYS
      </text>
    </svg>
  );
}

function FlowPanel({ model, data, delay }: { model: BusinessModel; data: FlowData; delay: number }) {
  return (
    <article
      aria-labelledby={`flow-${model}-title`}
      className={cn("flex flex-col rounded-lg p-7 sm:p-9", model === "saas" ? "bg-mist" : "bg-sand")}
      {...revealProps(delay)}
    >
      <div className="flex flex-wrap items-baseline justify-between gap-3">
        <h3 id={`flow-${model}-title`} className="text-title">
          {data.title}
        </h3>
        <p className="font-mono text-data uppercase tracking-[0.08em] text-muted">{data.timescale}</p>
      </div>

      <div className="mt-8 hidden sm:block">
        {model === "saas" ? <SaasFlowSvg steps={data.steps} /> : <EcommerceFlowSvg steps={data.steps} />}
      </div>

      <ol className="mt-6 sm:hidden" aria-label={`${data.title} steps`}>
        {data.steps.map((step, index) => {
          const last = index === data.steps.length - 1;
          return (
            <li key={step} className="relative flex items-center gap-4 pb-5 last:pb-0">
              {last ? null : <span aria-hidden="true" className="absolute left-[5.5px] top-4 h-full w-px bg-ink/20" />}
              <span
                aria-hidden="true"
                className={cn("relative size-3 shrink-0 rounded-full border", last ? "border-signal bg-signal" : "border-ink bg-surface")}
              />
              <span className={cn("font-medium", last && "text-signal")}>{step}</span>
              {model === "ecommerce" && last ? <span className="text-sm text-muted">loops back to the start</span> : null}
            </li>
          );
        })}
      </ol>

      <dl className="mt-8 grid gap-6 border-t border-ink/10 pt-6 sm:grid-cols-2">
        <div>
          <dt className="text-label uppercase text-muted">Measure</dt>
          <dd className="mt-2 text-[0.9375rem]">{data.measure}</dd>
        </div>
        <div>
          <dt className="flex items-center gap-2 text-label uppercase text-muted">
            <Alert size={13} />
            Where it breaks
          </dt>
          <dd className="mt-2 text-[0.9375rem]">{data.breaks}</dd>
        </div>
      </dl>
    </article>
  );
}

export function SpecializationFlows() {
  return (
    <>
      <div className="mt-14 grid gap-4 lg:mt-20 lg:grid-cols-2 lg:gap-6">
        <FlowPanel model="saas" data={specialization.saas} delay={0} />
        <FlowPanel model="ecommerce" data={specialization.ecommerce} delay={100} />
      </div>

      <div className="mt-16" {...revealProps()}>
        <table className="hidden w-full border-collapse text-left md:table">
          <caption className="mb-5 text-left text-label uppercase text-muted">{specialization.tableCaption}</caption>
          <thead>
            <tr className="border-b border-ink">
              <th scope="col" className="w-1/4 py-3 pr-6 text-sm font-medium text-muted">
                <span className="sr-only">Dimension</span>
              </th>
              <th scope="col" className="w-[37.5%] py-3 pr-6 text-sm font-semibold">
                SaaS
              </th>
              <th scope="col" className="w-[37.5%] py-3 text-sm font-semibold">
                E-commerce
              </th>
            </tr>
          </thead>
          <tbody>
            {specialization.rows.map((row) => (
              <tr key={row.label} className="border-b border-line align-top">
                <th scope="row" className="py-4 pr-6 font-medium">
                  {row.label}
                </th>
                <td className="py-4 pr-6 text-ink-soft">{row.saas}</td>
                <td className="py-4 text-ink-soft">{row.ecommerce}</td>
              </tr>
            ))}
          </tbody>
        </table>

        <div className="md:hidden">
          <p className="mb-4 text-label uppercase text-muted">{specialization.tableCaption}</p>
          <dl className="border-t border-ink">
            {specialization.rows.map((row) => (
              <div key={row.label} className="border-b border-line py-4">
                <dt className="font-medium">{row.label}</dt>
                <dd className="mt-2 grid grid-cols-[6.5rem_1fr] gap-x-3 gap-y-1 text-[0.9375rem] text-ink-soft">
                  <span className="text-muted">SaaS</span>
                  <span>{row.saas}</span>
                  <span className="text-muted">E-commerce</span>
                  <span>{row.ecommerce}</span>
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </>
  );
}