import type { Metadata } from "next";
import Link from "next/link";
import { CheckoutButton } from "@/components/account/CheckoutButton";
import { premiumPlans } from "@/lib/billing";

export const metadata: Metadata = {
  title: "Toolaro Premium - Preise, Funktionen und kostenloser Tarif",
  description:
    "Toolaro bleibt kostenlos nutzbar. Premium ergänzt werbefreie Nutzung, Favoriten, Verlauf, gespeicherte Einstellungen, Exporte, Batch-Funktionen und Synchronisierung.",
  alternates: { canonical: "/pricing" },
};

const rows = [
  ["Tools ohne Account nutzen", true, true],
  ["Viele Tools lokal im Browser", true, true],
  ["Werbung sichtbar", true, false],
  ["Serverseitige Favoriten", false, true],
  ["Synchronisierter Verlauf", false, true],
  ["Gespeicherte Tool-Einstellungen", false, true],
  ["Höhere Limits", false, true],
  ["Batch-Funktionen", false, true],
  ["Exportfunktionen CSV, JSON, TXT, PDF, PNG oder SVG", false, true],
  ["Geräteübergreifende Nutzung", false, true],
];

export default function PricingPage() {
  return (
    <div className="mx-auto max-w-6xl px-4 py-14">
      {/* Hero */}
      <section className="mx-auto max-w-3xl">
        <p
          className="mb-3 text-[0.7rem] font-bold uppercase tracking-[0.2em] text-brand-500"
          style={{ fontFamily: '"Courier New", monospace' }}
        >
          Freemium · Ohne künstliche Hürden
        </p>
        <h1 className="font-display text-4xl font-bold uppercase leading-tight tracking-tight text-ink-primary">
          Kostenlos nutzen, Premium für mehr Komfort
        </h1>
        <p className="mt-4 text-base leading-8 text-ink-secondary">
          Die Basisversion bleibt ohne Account nutzbar. Premium lohnt sich für werbefreies Arbeiten,
          Synchronisierung, Favoriten, Verlauf, gespeicherte Einstellungen, Batch-Verarbeitung und Exporte.
        </p>
      </section>

      {/* Plan cards */}
      <div className="mt-10 grid gap-6 lg:grid-cols-3">
        <Plan title="Kostenlos" price="0 €" text="Für schnelle Einzelaufgaben direkt im Browser." highlight={false}>
          <PlanItem>Tools ohne Anmeldung</PlanItem>
          <PlanItem>Basisfunktionen der wichtigsten Tools</PlanItem>
          <PlanItem muted>Werbung sichtbar</PlanItem>
          <PlanItem muted>Lokale Favoriten optional im Browser</PlanItem>
          <PlanItem muted>Keine serverseitige Synchronisierung</PlanItem>
          <Link
            href="/tools"
            className="mt-6 block border-2 border-ink-primary bg-surface-raised px-5 py-3 text-center text-[0.8rem] font-bold uppercase tracking-[0.06em] text-ink-primary shadow-[4px_4px_0_rgb(var(--ink-primary))] transition-[transform,box-shadow] duration-[120ms] [transition-timing-function:steps(2)] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-[0_0_0_rgb(var(--ink-primary))]"
          >
            Kostenlos starten
          </Link>
        </Plan>

        <Plan title="Premium monatlich" price={premiumPlans.monthly.price} text="Flexibel kündbar, ideal zum Testen." highlight>
          <PlanItem>Werbefreie Nutzung nach Login</PlanItem>
          <PlanItem>Favoriten und Verlauf synchronisieren</PlanItem>
          <PlanItem>Gespeicherte Einstellungen</PlanItem>
          <PlanItem>Premium-Exporte und Batch-Funktionen</PlanItem>
          <PlanItem>Kündigung zum Periodenende</PlanItem>
          <CheckoutButton plan="monthly" />
        </Plan>

        <Plan title="Premium jährlich" price={premiumPlans.yearly.price} text="Besserer Preis für regelmäßige Nutzung." highlight={false}>
          <PlanItem>Alle monatlichen Premium-Funktionen</PlanItem>
          <PlanItem>Jährliche Laufzeit</PlanItem>
          <PlanItem>Zugang bleibt bis Periodenende aktiv</PlanItem>
          <PlanItem>Billing über Stripe, sobald Keys gesetzt sind</PlanItem>
          <PlanItem>Account-Verwaltung inklusive</PlanItem>
          <CheckoutButton plan="yearly" />
        </Plan>
      </div>

      {/* Comparison table */}
      <section className="mt-12 border-2 border-ink-primary bg-surface-base shadow-[6px_6px_0_rgb(var(--ink-primary))]">
        <div className="grid grid-cols-[1.4fr_.8fr_.8fr] border-b-2 border-ink-primary bg-surface-sunken px-4 py-3">
          <span className="text-[0.7rem] font-bold uppercase tracking-[0.14em] text-ink-primary" style={{ fontFamily: '"Courier New", monospace' }}>Funktion</span>
          <span className="text-[0.7rem] font-bold uppercase tracking-[0.14em] text-ink-primary" style={{ fontFamily: '"Courier New", monospace' }}>Kostenlos</span>
          <span className="text-[0.7rem] font-bold uppercase tracking-[0.14em] text-brand-500" style={{ fontFamily: '"Courier New", monospace' }}>Premium</span>
        </div>
        {rows.map(([name, free, premium]) => (
          <div key={String(name)} className="grid grid-cols-[1.4fr_.8fr_.8fr] border-b border-ink-primary/20 px-4 py-3 text-sm last:border-b-0">
            <span className="text-ink-secondary">{name}</span>
            <span>{free
              ? <span className="font-mono font-bold text-brand-500">✓</span>
              : <span className="font-mono text-ink-tertiary/50">–</span>}
            </span>
            <span>{premium
              ? <span className="font-mono font-bold text-brand-500">✓</span>
              : <span className="font-mono text-ink-tertiary/50">–</span>}
            </span>
          </div>
        ))}
      </section>

      {/* Info blocks */}
      <section className="mt-12 grid gap-4 lg:grid-cols-2">
        <Info title="Zahlung und Kündigung">
          Monats- und Jahresabo werden über Stripe vorbereitet. Nach erfolgreicher Zahlung wird der
          Premium-Status automatisch am Account gespeichert. Bei Kündigung bleibt Premium bis zum Ende
          des bezahlten Zeitraums aktiv. Zahlungsereignisse werden über Webhooks verarbeitet.
        </Info>
        <Info title="Datenschutz bei Premium">
          Für Accounts werden E-Mail, Passwort-Hash, E-Mail-Verifizierung, 2FA-Codes, Sessions,
          Favoriten, Verlauf, Einstellungen, Newsletter-Status sowie Abo-/Billing-Ereignisse gespeichert.
          Tool-Eingaben lokaler Tools werden weiterhin nicht unnötig serverseitig gespeichert.
        </Info>
        <Info title="Testphase und Verfügbarkeit">
          Eine kostenlose Basisversion ist immer verfügbar. Eine Premium-Testphase kann über Stripe-Preise
          oder Coupons ergänzt werden. Wenn Stripe-Keys fehlen, zeigt der Checkout eine klare Konfigurationsmeldung.
        </Info>
        <Info title="Warum Premium?">
          Premium macht die kostenlose Version nicht schlechter. Es entfernt Reibung: keine Anzeigen,
          bessere Produktivität, mehr Komfort, höhere Limits, Exporte und Synchronisierung über Geräte hinweg.
        </Info>
      </section>

      {/* Disclaimer */}
      <div className="mt-10 border-2 border-ink-primary/40 bg-surface-sunken p-5 text-sm leading-7 text-ink-secondary">
        <span
          className="mb-2 block text-[0.65rem] font-bold uppercase tracking-[0.18em] text-ink-tertiary"
          style={{ fontFamily: '"Courier New", monospace' }}
        >
          Rechtlicher Hinweis
        </span>
        Keine Aussage auf dieser Seite ist als Garantie für absolute Verfügbarkeit, Sicherheit oder
        Ergebnisrichtigkeit zu verstehen. Ergebnisse bitte vor wichtiger Nutzung prüfen.
      </div>
    </div>
  );
}

function Plan({
  title,
  price,
  text,
  highlight,
  children,
}: {
  title: string;
  price: string;
  text: string;
  highlight: boolean;
  children: React.ReactNode;
}) {
  return (
    <section
      className={`border-2 border-ink-primary p-6 ${
        highlight
          ? "bg-ink-primary text-surface-base shadow-[6px_6px_0_rgb(var(--brand-500))]"
          : "bg-surface-raised shadow-[6px_6px_0_rgb(var(--ink-primary))]"
      }`}
    >
      <p
        className={`mb-1 text-[0.65rem] font-bold uppercase tracking-[0.18em] ${highlight ? "text-brand-400" : "text-ink-tertiary"}`}
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        {title}
      </p>
      <div className={`font-display text-4xl font-bold leading-none ${highlight ? "text-surface-base" : "text-ink-primary"}`}>
        {price}
      </div>
      <p className={`mt-3 text-sm leading-6 ${highlight ? "text-surface-base/70" : "text-ink-secondary"}`}>{text}</p>
      <ul className="mt-6 space-y-3 text-sm">{children}</ul>
    </section>
  );
}

function PlanItem({ children, muted = false }: { children: React.ReactNode; muted?: boolean }) {
  return (
    <li className={`flex items-start gap-2 ${muted ? "opacity-50" : ""}`}>
      <span className="mt-0.5 font-mono font-bold text-brand-500">{muted ? "·" : "✓"}</span>
      <span>{children}</span>
    </li>
  );
}

function Info({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="border-2 border-ink-primary bg-surface-sunken p-5">
      <h2
        className="mb-1 text-[0.7rem] font-bold uppercase tracking-[0.16em] text-ink-secondary"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        {title}
      </h2>
      <p className="mt-2 text-sm leading-7 text-ink-secondary">{children}</p>
    </section>
  );
}