"use client";

import { Fragment, useState } from "react";
import Image from "next/image";
import { FeatureIcon } from "@/components/ui/FeatureIcon";
import { cn } from "@/lib/cn";
import { membershipTabs, type MembershipTab } from "@/data/home";

/**
 * Per-tab, per-state padding. The original stylesheet tuned these by hand at
 * each breakpoint, so they are spelled out rather than derived.
 */
const tabPadding: Record<MembershipTab["id"], { active: string; inactive: string }> = {
  uhnwis: {
    active:
      "py-10 px-[59px] max-[1381px]:px-10 max-[1201px]:px-[49.5px] max-[769px]:px-[49px] compact:px-[45px]! compact:py-[30px]!",
    inactive:
      "py-[22px] px-4 max-[1381px]:px-3 max-[1201px]:py-[14px] max-[1201px]:pr-[10px] max-[769px]:py-[14px] max-[769px]:pr-3 compact:py-[30px]! compact:pl-[14px]! compact:pr-0!",
  },
  "family-offices": {
    active:
      "py-10 px-[26px] max-[1381px]:px-[22px] max-[1201px]:px-5 max-[769px]:px-6 compact:px-[22px]! compact:py-[30px]!",
    inactive:
      "py-10 pl-0 pr-4 max-[1381px]:pl-1 max-[1381px]:pr-3 max-[1201px]:pl-0 max-[1201px]:pr-2 max-[769px]:px-3 compact:py-[30px]! compact:pl-0! compact:pr-[14px]!",
  },
};

function TabButton({
  tab,
  active,
  onSelect,
}: {
  tab: MembershipTab;
  active: boolean;
  onSelect: () => void;
}) {
  return (
    <button
      type="button"
      role="tab"
      id={`tab-${tab.id}`}
      aria-selected={active}
      aria-controls={`content-${tab.id}`}
      onClick={onSelect}
      className={cn(
        "relative cursor-pointer text-[clamp(0.75rem,1.2vw,0.88rem)] font-semibold tracking-[1.5px] whitespace-nowrap uppercase select-none",
        "transition-all duration-[400ms] ease-sterling",
        "max-[1201px]:text-[clamp(0.7rem,1.2vw,0.8rem)] max-[769px]:text-[clamp(0.7rem,3vw,0.8rem)] compact:text-[0.7rem]",
        active ? "font-bold text-snow" : "text-white/60 hover:text-snow",
        tabPadding[tab.id][active ? "active" : "inactive"],
        active &&
          // Decorative frame behind the selected tab.
          "before:pointer-events-none before:absolute before:inset-[-4px_6px] before:-z-10 before:bg-[url('/images/home/tab-frame.png')] before:bg-[length:100%_100%] before:bg-no-repeat before:content-[''] max-[1381px]:before:inset-[-3px_4px] max-[769px]:before:inset-[-2px_2px]",
      )}
    >
      {tab.label}
      <span className="text-[0.85em] font-light">s</span>
    </button>
  );
}

function FeatureDivider() {
  return (
    <div role="presentation" className="flex w-full items-center justify-center">
      <Image
        src="/images/home/feature-separator.svg"
        alt=""
        width={550}
        height={16}
        unoptimized
        className="block h-3 w-full object-fill opacity-[0.55] max-[1381px]:h-2 compact:h-[9px]!"
      />
    </div>
  );
}

function FeatureList({ tab }: { tab: MembershipTab }) {
  return (
    <div className="flex h-full flex-col justify-evenly">
      {tab.features.map((feature, i) => (
        <Fragment key={feature.title}>
          {i > 0 && <FeatureDivider />}
          <div
            className={cn(
              "mx-auto flex w-60 items-center justify-start gap-5 py-[6px]",
              "max-[1381px]:py-[3px] max-[1201px]:w-[220px] max-[1201px]:gap-3 max-[1201px]:py-[2px]",
              "compact:gap-3! compact:py-[2px]!",
              // The first Family Office row is nudged up on short screens.
              tab.id === "family-offices" && i === 0 && "short-wide:mt-[-10px]! compact:mt-0!",
            )}
          >
            <div className="flex size-11 shrink-0 items-center justify-center text-snow max-[1201px]:size-9 compact:size-9!">
              <FeatureIcon name={feature.icon} className="size-[46px] max-[1201px]:size-[38px]" />
            </div>
            <span className="text-[clamp(0.95rem,1.25vw,1.1rem)] font-light tracking-[0.8px] whitespace-nowrap text-snow compact:text-base!">
              {feature.title}
            </span>
          </div>
        </Fragment>
      ))}
    </div>
  );
}

/** Right-hand "UHNWIs / Family Offices" tabbed benefits list. */
export function MembershipPanel() {
  const [activeId, setActiveId] = useState<MembershipTab["id"]>("uhnwis");

  return (
    <div
      className={cn(
        "relative box-border flex h-full w-full flex-col items-start border border-white/15 bg-transparent",
        "pt-[70px] pr-10 pb-[50px] pl-[165px]",
        "max-[1601px]:pt-10 max-[1601px]:pr-[45px] max-[1601px]:pb-[60px] max-[1601px]:pl-[160px]",
        "max-[1381px]:pt-[70px] max-[1381px]:pr-8 max-[1381px]:pb-10 max-[1381px]:pl-[129px]",
        "max-[1201px]:pt-[70px] max-[1201px]:pr-[34px] max-[1201px]:pb-[30px] max-[1201px]:pl-[112px]",
        "laptop:pt-[50px]! laptop:pr-10! laptop:pb-[50px]! laptop:pl-[140px]!",
        "short-wide:pb-0! min-[1601px]:short-wide:pt-[25px] compact:pt-[60px]!",
        "max-[769px]:h-auto max-[769px]:max-h-none max-[769px]:items-center max-[769px]:rounded-lg max-[769px]:px-6 max-[769px]:py-10",
      )}
    >
      <div
        role="tablist"
        className="mb-5 flex w-full items-center justify-start gap-[15px] max-[769px]:justify-center max-[769px]:gap-5 short-wide:mb-[10px] compact:mb-4!"
      >
        {membershipTabs.map((tab) => (
          <TabButton
            key={tab.id}
            tab={tab}
            active={tab.id === activeId}
            onSelect={() => setActiveId(tab.id)}
          />
        ))}
      </div>

      <div
        className={cn(
          "relative z-[4] min-h-[400px] w-full max-w-[330px] bg-[#ffffff14]",
          "max-[1381px]:min-h-[360px] max-[1201px]:min-h-[350px] short-wide:min-h-[350px] compact:min-h-[290px]!",
        )}
      >
        {membershipTabs.map((tab) => {
          const active = tab.id === activeId;
          return (
            <div
              key={tab.id}
              id={`content-${tab.id}`}
              role="tabpanel"
              aria-labelledby={`tab-${tab.id}`}
              aria-hidden={!active}
              className={cn(
                "absolute inset-x-[10px] top-[25px] bottom-[25px]",
                "transition-[opacity,transform,visibility] duration-[400ms] ease-[ease]",
                "max-[1381px]:top-[15px] max-[1381px]:bottom-[15px]",
                "max-[1201px]:inset-x-2 max-[1201px]:top-[10px] max-[1201px]:bottom-[10px]",
                "compact:top-2! compact:bottom-2!",
                active
                  ? "visible translate-y-0 opacity-100"
                  : "invisible translate-y-[10px] opacity-0",
              )}
            >
              <FeatureList tab={tab} />
            </div>
          );
        })}
      </div>
    </div>
  );
}