"use client";

import { useState } from "react";
import Link from "next/link";
import { PLANS, type BillingInterval } from "@/lib/billing";
import { Card } from "@/components/ui/Card";
import { Badge } from "@/components/ui/Badge";
import { LinkButton } from "@/components/ui/Button";

function CheckIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className="text-green-400 shrink-0 mt-0.5">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

export default function PricingPage() {
  const [interval, setInterval] = useState<BillingInterval>("monthly");

  return (
    <div className="max-w-screen-xl mx-auto px-4 md:px-6 py-16 md:py-20">
      <div className="text-center max-w-2xl mx-auto">
        <h1 className="text-display-sm md:text-display text-white">Simple, node-based pricing</h1>
        <p className="text-gray-400 mt-4">
          Every plan includes the full incident pipeline — transcription, correlation, mapping, and the Discord relay.
          Plans differ in how many nodes and seats you get, and how far back your history goes.
        </p>
      </div>

      {/* Interval toggle */}
      <div className="flex items-center justify-center gap-1 mt-10 bg-gray-900 border border-gray-800 rounded-lg p-1 w-fit mx-auto">
        {(["monthly", "annual"] as BillingInterval[]).map((i) => (
          <button
            key={i}
            onClick={() => setInterval(i)}
            className={`text-sm font-mono px-4 py-1.5 rounded-md transition-colors capitalize ${
              interval === i ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"
            }`}
          >
            {i}
            {i === "annual" && <span className="ml-1.5 text-green-400 text-xs">save ~17%</span>}
          </button>
        ))}
      </div>

      {/* Plan cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10 items-stretch">
        {PLANS.map((plan) => {
          const price = interval === "annual" ? plan.priceAnnualUsd : plan.priceMonthlyUsd;
          const priceLabel =
            price === null ? "Custom" : price === 0 ? "Free" : `$${interval === "annual" ? Math.round(price / 12) : price}`;

          return (
            <Card key={plan.id} padding="lg" highlighted={plan.highlighted} className="flex flex-col">
              {plan.highlighted && <Badge tone="brand" className="mb-3 w-fit">Most popular</Badge>}
              <h2 className="text-white text-lg font-bold">{plan.name}</h2>
              <p className="text-gray-500 text-sm mt-1.5 leading-relaxed">{plan.tagline}</p>

              <div className="mt-6">
                <span className="text-white text-3xl font-bold font-mono">{priceLabel}</span>
                {price !== null && price > 0 && <span className="text-gray-500 text-sm">/mo</span>}
                {interval === "annual" && price !== null && price > 0 && (
                  <p className="text-gray-600 text-xs mt-1">billed ${plan.priceAnnualUsd}/year</p>
                )}
              </div>

              <div className="mt-6">
                <LinkButton href="/login" variant={plan.highlighted ? "primary" : "secondary"} fullWidth>
                  {plan.priceMonthlyUsd === null ? "Contact sales" : "Get started"}
                </LinkButton>
              </div>

              <ul className="mt-6 space-y-2.5 flex-1">
                {plan.features.map((f) => (
                  <li key={f} className="flex items-start gap-2 text-sm text-gray-300">
                    <CheckIcon />
                    {f}
                  </li>
                ))}
              </ul>
            </Card>
          );
        })}
      </div>

      <p className="text-center text-gray-600 text-xs font-mono mt-8">
        Prices shown are sample figures for this demo build — nothing here is connected to a live payment processor.
      </p>

      <div className="text-center mt-16">
        <p className="text-gray-400">
          Questions about a plan?{" "}
          <Link href="/faq" className="text-indigo-400 hover:text-indigo-300 transition-colors">Check the FAQ</Link>
          {" "}or{" "}
          <Link href="/login" className="text-indigo-400 hover:text-indigo-300 transition-colors">sign in to talk to us</Link>.
        </p>
      </div>
    </div>
  );
}