"use client";

/**
 * Pricing — feature comparison matrix
 * ───────────────────────────────────
 * Full feature-by-feature cut across all 5 tiers. Grouped by category
 * so users scan the one group that matters to them instead of a flat
 * 40-row list.
 *
 * Cells use three states:
 *   • check   — included
 *   • dash    — not included
 *   • string  — "Unlimited", "10M / mo", etc. (numeric limits)
 */

import { Check, Minus } from "lucide-react";

type Cell = true | false | string;
type Row = { label: string; cells: [Cell, Cell, Cell, Cell, Cell] }; // growth, pro, agency, agency_pro, enterprise
type Group = { heading: string; rows: Row[] };

const COLUMNS: Array<{ id: string; label: string; popular?: boolean }> = [
  { id: "growth", label: "Growth" },
  { id: "professional", label: "Professional", popular: true },
  { id: "agency", label: "Agency" },
  { id: "agency_pro", label: "Agency Pro" },
  { id: "enterprise", label: "Enterprise" },
];

const GROUPS: Group[] = [
  {
    heading: "Tracking & Analytics",
    rows: [
      { label: "Brands", cells: ["3", "10", "25", "50", "Unlimited"] },
      { label: "Team seats", cells: ["2", "5", "10", "25", "Unlimited"] },
      { label: "Site Tag — basic events", cells: [true, true, true, true, true] },
      { label: "Site Tag — heatmaps, calls, attribution", cells: [false, true, true, true, true] },
      { label: "Site Tag events / mo", cells: ["50K", "500K", "2M", "10M", "Unlimited"] },
      { label: "GSC + GA4 integrations", cells: [true, true, true, true, true] },
      { label: "Dashboard", cells: [true, true, true, true, true] },
      { label: "Conversion Intelligence", cells: [true, true, true, true, true] },
      { label: "Page Launch Tracker", cells: [false, true, true, true, true] },
    ],
  },
  {
    heading: "SEO Intelligence",
    rows: [
      { label: "Technical Audit", cells: [true, true, true, true, true] },
      { label: "Core Web Intelligence", cells: [true, true, true, true, true] },
      { label: "Content Intel", cells: [true, true, true, true, true] },
      { label: "Keyword Research", cells: [true, true, true, true, true] },
      { label: "Rank Tracker", cells: [true, true, true, true, true] },
      { label: "Rank tracking keywords", cells: ["50", "500", "2,000", "5,000", "Unlimited"] },
      { label: "Broken Links", cells: [true, true, true, true, true] },
      { label: "Backlinks", cells: [false, true, true, true, true] },
      { label: "Signals Center", cells: [true, true, true, true, true] },
    ],
  },
  {
    heading: "AI & Content",
    rows: [
      { label: "AI Strategist", cells: ["Limited", true, true, true, true] },
      { label: "SEO Content Brief", cells: [true, true, true, true, true] },
      { label: "LLMO Content Brief", cells: [false, false, true, true, true] },
      { label: "Writing Assistant", cells: [false, false, true, true, true] },
      { label: "Schema Generator", cells: [false, true, true, true, true] },
      { label: "Page Studio", cells: [true, true, true, true, true] },
      { label: "Topic Map", cells: [false, false, true, true, true] },
      { label: "AI Visibility (ChatGPT / Perplexity / Gemini)", cells: [false, true, true, true, true] },
      { label: "AI credits / mo", cells: ["235", "1,140", "5,600", "6,300", "Unlimited"] },
      { label: "Content briefs / mo", cells: ["10", "40", "200", "2,000", "Unlimited"] },
    ],
  },
  {
    heading: "Competitive",
    rows: [
      { label: "Competitor Intel", cells: [false, true, true, true, true] },
      { label: "Competitors per brand", cells: ["—", "5", "Unlimited", "15", "Unlimited"] },
      { label: "Industry Intelligence", cells: [false, false, true, true, true] },
      { label: "SERP & keyword lookups / mo", cells: ["50", "1,000", "5,000", "15,000", "Unlimited"] },
    ],
  },
  {
    heading: "Reporting",
    rows: [
      { label: "Report Studio (PDF / PPTX)", cells: [true, true, true, true, true] },
      { label: "DOCX / XLSX / Google Slides export", cells: [false, true, true, true, true] },
      { label: "Automated Email Reports", cells: [false, true, true, true, true] },
      { label: "Scheduled report frequency", cells: ["—", "Weekly", "Daily / Weekly / Monthly", "Daily / Weekly / Monthly", "Custom"] },
    ],
  },
  {
    heading: "Agency",
    rows: [
      { label: "White-Label Client Portal", cells: [false, false, true, true, true] },
      { label: "Bring Your Own URL", cells: [false, false, true, true, true] },
      { label: "Client Management", cells: [false, false, true, true, true] },
      { label: "Team Management", cells: [false, false, true, true, true] },
      { label: "Bulk Operations", cells: [false, false, false, true, true] },
      { label: "API Access", cells: [false, false, false, true, true] },
    ],
  },
  {
    heading: "Support",
    rows: [
      { label: "Email support", cells: [true, true, true, true, true] },
      { label: "Priority support", cells: [false, true, true, true, true] },
      { label: "Dedicated onboarding call", cells: [false, false, true, true, true] },
      { label: "Dedicated account manager", cells: [false, false, false, false, true] },
      { label: "SLA guarantee", cells: [false, false, false, false, true] },
      { label: "SSO / SAML", cells: [false, false, false, false, true] },
    ],
  },
];

function Cell({ value, popular }: { value: Cell; popular?: boolean }) {
  if (value === true) {
    return <Check className={`w-4 h-4 mx-auto ${popular ? "text-brand-600" : "text-emerald-500"}`} />;
  }
  if (value === false) {
    return <Minus className="w-4 h-4 mx-auto text-slate-300" />;
  }
  return <span className={`text-xs ${popular ? "font-semibold text-brand-700" : "text-slate-700"}`}>{value}</span>;
}

export default function PricingComparisonTable() {
  return (
    <div className="w-full">
      <div className="text-center mb-6">
        <h2 className="text-2xl font-bold text-slate-900">Compare plans</h2>
        <p className="text-sm text-slate-500 mt-1">Feature-by-feature across every tier.</p>
      </div>

      {/* Wrapper: overflow-x-auto kicks in on narrow viewports; the
          table has min-w-[960px] so 6 columns each get ~160px before
          horizontal scroll becomes necessary. On lg+ the table fills
          the page container (max-w-7xl ≈ 1280px) so columns are
          ~213px each — comfortable for the longest plan label
          ("Agency Pro") + a popular-plan header chip. */}
      <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white">
        <table className="w-full border-collapse table-fixed min-w-[960px]">
          <colgroup>
            {/* Explicit column widths via colgroup beats per-th width
                classes for stability — every cell in a column inherits
                the width regardless of cell content. */}
            <col className="w-[32%]" />
            <col className="w-[13.6%]" />
            <col className="w-[13.6%]" />
            <col className="w-[13.6%]" />
            <col className="w-[13.6%]" />
            <col className="w-[13.6%]" />
          </colgroup>
          <thead className="sticky top-0 z-10">
            <tr className="bg-slate-50 border-b border-slate-200">
              <th className="text-left px-5 py-3.5 text-[11px] font-bold text-slate-500 uppercase tracking-wider bg-slate-50">
                Feature
              </th>
              {COLUMNS.map((c) => (
                <th
                  key={c.id}
                  className={`px-3 py-3.5 text-[11px] font-bold uppercase tracking-wider text-center align-bottom ${
                    c.popular ? "bg-brand-50 text-brand-700" : "bg-slate-50 text-slate-500"
                  }`}
                >
                  {c.popular && (
                    <div className="text-[8px] font-bold uppercase tracking-widest text-white bg-brand-600 rounded-full px-1.5 py-0.5 inline-block mb-1">
                      Most popular
                    </div>
                  )}
                  <div>{c.label}</div>
                </th>
              ))}
            </tr>
          </thead>
          {GROUPS.map((group) => (
            <tbody key={group.heading}>
              <tr className="bg-slate-50/60">
                <td
                  colSpan={6}
                  className="px-5 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 border-t border-b border-slate-200"
                >
                  {group.heading}
                </td>
              </tr>
              {group.rows.map((row, i) => (
                <tr key={`${group.heading}-${i}`} className="border-b border-slate-100 last:border-b-0">
                  <td className="px-5 py-3 text-xs text-slate-700">{row.label}</td>
                  {row.cells.map((cell, ci) => (
                    <td
                      key={ci}
                      className={`px-3 py-3 text-center ${COLUMNS[ci].popular ? "bg-brand-50/40" : ""}`}
                    >
                      <Cell value={cell} popular={COLUMNS[ci].popular} />
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          ))}
        </table>
      </div>
    </div>
  );
}
