"use client";

import { ChevronDownIcon } from "@heroicons/react/16/solid";
import { useTranslations } from "next-intl";
import { useState } from "react";

interface PainPoint {
  problem: string;
  solution: string;
}

interface PersonaTab {
  description: string;
  headline: string;
  id: string;
  name: string;
  painPoints: PainPoint[];
}

const personaIds = ["marketing", "technology", "business"] as const;

const painPointKeys: Record<string, string[]> = {
  marketing: [
    "constrainedUx",
    "poorSeo",
    "inflexibleCheckout",
    "limitedPersonalization",
  ],
  technology: [
    "fragileIntegrations",
    "highMaintenance",
    "poorDx",
    "vendorLockin",
  ],
  business: ["peakTraffic", "globalExpansion", "slowDeployments"],
};

export function ShopifyGrowthCeiling() {
  const t = useTranslations("shopifyGrowthCeiling");
  const [activeTab, setActiveTab] = useState("marketing");

  const personaTabs: PersonaTab[] = personaIds.map((id) => ({
    id,
    name: t(`${id}Name`),
    headline: t(`${id}Headline`),
    description: t(`${id}Desc`),
    painPoints: painPointKeys[id].map((key) => ({
      problem: t(`${id}${key.charAt(0).toUpperCase() + key.slice(1)}Problem`),
      solution: t(`${id}${key.charAt(0).toUpperCase() + key.slice(1)}Solution`),
    })),
  }));

  const currentPersona = personaTabs.find((tab) => tab.id === activeTab);

  return (
    <section className="py-12 sm:py-24 md:py-32" id="growth-ceiling">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="mb-8 text-center md:mb-16">
          <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-5xl">
            {t("headingStart")}{" "}
            <span className="text-[#FD105E]">{t("headingHighlight")}</span>
            <br />
            {t("headingEnd")}
          </h2>
          <p className="mx-auto max-w-4xl text-base text-white/70 md:text-lg">
            {t("subtitle")}
          </p>
        </div>

        {/* Tab Navigation */}
        <div className="mb-8 md:mb-12">
          {/* Mobile Dropdown */}
          <div className="grid grid-cols-1 sm:hidden">
            <select
              aria-label={t("selectRole")}
              className="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 py-3 pr-8 pl-4 text-base text-white outline-1 outline-white/10 -outline-offset-1 focus:outline-2 focus:outline-[#FD105E] focus:-outline-offset-2"
              onChange={(e) => setActiveTab(e.target.value)}
              value={activeTab}
            >
              {personaTabs.map((tab) => (
                <option key={tab.id} value={tab.id}>
                  {tab.name}
                </option>
              ))}
            </select>
            <ChevronDownIcon
              aria-hidden="true"
              className="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-white/50"
            />
          </div>

          {/* Desktop Tabs */}
          <div className="hidden sm:block">
            <div className="border-white/10 border-b">
              <nav aria-label="Tabs" className="-mb-px flex">
                {personaTabs.map((tab) => (
                  <button
                    aria-current={activeTab === tab.id ? "page" : undefined}
                    className={`w-1/3 border-b-2 px-4 py-4 text-center font-medium text-sm transition-colors md:text-base ${
                      activeTab === tab.id
                        ? "border-[#FD105E] text-[#FD105E]"
                        : "border-transparent text-white/50 hover:border-white/20 hover:text-white/70"
                    }
                    `}
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    type="button"
                  >
                    {tab.name}
                  </button>
                ))}
              </nav>
            </div>
          </div>
        </div>

        {/* Tab Content */}
        {currentPersona && (
          <div className="mx-auto max-w-5xl">
            {/* Persona Headline & Description */}
            <div className="mb-8 text-center md:mb-12">
              <h3 className="mb-4 font-bold text-2xl text-white md:text-4xl">
                {currentPersona.headline}
              </h3>
              <p className="text-base text-white/70 md:text-lg">
                {currentPersona.description}
              </p>
            </div>

            {/* Pain Points & Solutions */}
            <div className="grid gap-6">
              {currentPersona.painPoints.map((point) => (
                <div
                  className="rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/[0.07] sm:p-6 md:p-8"
                  key={point.problem}
                >
                  <div className="mb-3">
                    <h4 className="mb-2 font-semibold text-base text-white md:text-lg">
                      {t("problemLabel")}{" "}
                      {point.problem.includes("\u2192")
                        ? point.problem.split("\u2192")[0].trim()
                        : point.problem}
                    </h4>
                    {point.problem.includes("\u2192") && (
                      <p className="text-sm text-white/60">
                        {point.problem.split("\u2192")[1].trim()}
                      </p>
                    )}
                  </div>
                  <div className="border-white/10 border-t pt-3">
                    <p className="mb-1 font-medium text-[#FD105E] text-sm">
                      {t("solutionLabel")}
                    </p>
                    <p className="text-white/80">{point.solution}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}