"use client";

import type { ReactNode } from "react";
import HeaderLockup from "../../type/HeaderLockup";
import type { HeaderLockupSizeValue } from "../../type/HeaderLockup/HeaderLockup.types";
import Selection from "../Selection";
import type { CardStackItem, CardStackViewProps } from "./CardStack.types";

/** Figma Card / CardSelection on Compact + Expanded Card Stack (`281×142`). */
const FIGMA_CARD_SELECTION_TILE_CLASS =
  "h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0";

function CardStackHeaderLockup({
  title,
  description,
  justification,
  size,
  wrapperClassName,
}: {
  title: string;
  description: ReactNode;
  justification: "center" | "left";
  size: HeaderLockupSizeValue;
  wrapperClassName?: string;
}) {
  if (!title && !description) {
    return null;
  }
  return (
    <div className={wrapperClassName ?? "min-w-0"}>
      <HeaderLockup
        title={title}
        description={description}
        justification={justification}
        size={size}
      />
    </div>
  );
}

function matchesSearch(item: CardStackItem, query: string): boolean {
  if (!query) return true;
  const haystack = `${item.label} ${item.supportText ?? ""}`.toLowerCase();
  return haystack.includes(query.toLowerCase());
}

function SearchGlyph() {
  return (
    <svg
      aria-hidden
      viewBox="0 0 24 24"
      className="pointer-events-none absolute right-3 top-1/2 size-6 -translate-y-1/2 text-[var(--color-content-default-tertiary)]"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.5" />
      <path
        d="M20 20l-3.5-3.5"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

function StackCard({
  item,
  expanded,
  selected,
  size,
  className,
  onSelect,
  onAlternativeSelect,
  alternativePrefix,
}: {
  item: CardStackItem;
  expanded: boolean;
  selected: boolean;
  size: "m" | "l";
  className?: string;
  onSelect: (id: string) => void;
  onAlternativeSelect?: (id: string) => void;
  alternativePrefix: string;
}) {
  const supportText =
    !expanded && item.compactSupportText
      ? item.compactSupportText
      : item.supportText;
  const recommended = Boolean(expanded && item.recommended);
  const alternative =
    !expanded && item.alternative && onAlternativeSelect ? (
      <p className="w-full text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
        {alternativePrefix}{" "}
        <button
          type="button"
          className="underline text-[var(--color-content-invert-primary)]"
          onClick={() => onAlternativeSelect(item.alternative!.id)}
        >
          {item.alternative.label}
        </button>
      </p>
    ) : null;
  return (
    <div className="flex w-full flex-col gap-1">
      <Selection
        id={item.id}
        label={item.label}
        supportText={supportText}
        recommended={recommended}
        selected={selected}
        size={size}
        showInfoIcon={false}
        className={className}
        onClick={() => onSelect(item.id)}
      />
      {alternative}
    </div>
  );
}

function CardStackAddCardButton({
  label,
  ariaLabel,
  onClick,
}: {
  label: string;
  ariaLabel: string;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={ariaLabel}
      className="flex min-h-[88px] w-full shrink-0 items-center justify-center rounded-[var(--radius-400)] bg-[var(--color-surface-default-secondary)] text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)]"
    >
      <span className="flex items-center gap-2">
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden
        >
          <path
            d="M12 5v14M5 12h14"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
          />
        </svg>
        {label}
      </span>
    </button>
  );
}

export function CardStackView({
  cards,
  selectedIds,
  onCardSelect,
  expanded,
  onToggleExpand,
  hasMore,
  toggleLabel,
  showLessLabel,
  title,
  description,
  layout,
  compactRecommendedLimit,
  compactCardIds,
  compactDesktopLayout,
  headerLockupSize,
  toggleAlignment,
  className,
  showAddCard,
  addCardLabel,
  addCardAriaLabel,
  onAddCard,
  deckLine,
  searchPlaceholder,
  searchQuery,
  onSearchQueryChange,
  alternativePrefix,
  onAlternativeSelect,
}: CardStackViewProps) {
  const addTile =
    showAddCard && onAddCard && addCardLabel.length > 0 ? (
      <CardStackAddCardButton
        label={addCardLabel}
        ariaLabel={addCardAriaLabel || addCardLabel}
        onClick={onAddCard}
      />
    ) : null;
  const lockupSize = headerLockupSize ?? "L";
  const isSelected = (id: string) => selectedIds.includes(id);
  // Compact: explicit `compactCardIds` (caller-driven, used by create-flow
  // facet ranker) takes precedence over the legacy `recommended`-filter so
  // the screen can show un-tagged cards in the compact slot when there is
  // no facet signal yet (CR-88 §10).
  const compactCards = (() => {
    if (compactCardIds && compactCardIds.length > 0) {
      const byId = new Map(cards.map((c) => [c.id, c]));
      return compactCardIds
        .map((id) => byId.get(id))
        .filter((c): c is (typeof cards)[number] => c !== undefined)
        .slice(0, compactRecommendedLimit);
    }
    return cards
      .filter((c) => c.recommended ?? false)
      .slice(0, compactRecommendedLimit);
  })();

  // Single stack: always one column; expand reveals more in the same stack.
  // At lg+ the cards scroll inside this column and the See all / Show less
  // control stays pinned below (Figma Flow — Right Rail).
  if (layout === "singleStack") {
    const displayedCards = (expanded ? cards : compactCards).filter((item) =>
      expanded ? matchesSearch(item, searchQuery) : true,
    );
    return (
      <div
        className={`flex w-full min-w-0 flex-col gap-6 lg:h-full lg:max-h-full lg:min-h-0 lg:flex-1 lg:overflow-hidden ${className}`}
      >
        <CardStackHeaderLockup
          title={title}
          description={description}
          justification="center"
          size={lockupSize}
          wrapperClassName="min-w-0 shrink-0"
        />
        {!expanded && deckLine ? (
          <p className="shrink-0 text-x-small-paragraph text-[var(--color-content-default-tertiary)]">
            {deckLine}
          </p>
        ) : null}
        {expanded && searchPlaceholder ? (
          <div className="relative w-full shrink-0">
            <input
              type="search"
              value={searchQuery}
              onChange={(event) => onSearchQueryChange(event.target.value)}
              placeholder={searchPlaceholder}
              aria-label={searchPlaceholder}
              className="h-10 w-full rounded-[var(--radius-200)] border border-[var(--color-border-default-control)] bg-[var(--color-surface-default-secondary)] px-3 py-2.5 pr-11 text-medium-paragraph text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)]"
            />
            <SearchGlyph />
          </div>
        ) : null}
        <div className="flex w-full min-w-0 flex-col gap-2 lg:min-h-0 lg:flex-1 lg:overflow-y-auto scrollbar-design">
          {displayedCards.map((item) => (
            <StackCard
              key={item.id}
              item={item}
              expanded={expanded}
              selected={isSelected(item.id)}
              size="l"
              onSelect={onCardSelect}
              onAlternativeSelect={onAlternativeSelect}
              alternativePrefix={alternativePrefix}
            />
          ))}
          {addTile}
        </div>
        {hasMore ? (
          <button
            type="button"
            onClick={onToggleExpand}
            className={`shrink-0 text-medium-paragraph text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none cursor-pointer ${
              toggleAlignment === "end" ? "self-end" : "self-center"
            }`}
          >
            {expanded ? showLessLabel : toggleLabel}
          </button>
        ) : null}
      </div>
    );
  }

  return (
    <div className={`flex w-full flex-col gap-6 min-w-0 ${className}`}>
      <CardStackHeaderLockup
        title={title}
        description={description}
        justification="center"
        size={lockupSize}
      />

      {expanded ? (
        <>
          <div className="flex w-full flex-col gap-2 md:hidden">
            {cards.map((item) => (
              <Selection
                key={item.id}
                id={item.id}
                label={item.label}
                supportText={item.supportText}
                recommended={item.recommended ?? false}
                selected={isSelected(item.id)}
                size="m"
                showInfoIcon={false}
                className="min-h-[142px]"
                onClick={() => onCardSelect(item.id)}
              />
            ))}
            {addTile}
          </div>
          <div className="mx-auto hidden w-full max-w-[min(100%,570px)] flex-wrap justify-center gap-2 md:flex">
            {cards.map((item) => (
              <Selection
                key={item.id}
                id={item.id}
                label={item.label}
                supportText={item.supportText}
                recommended={item.recommended ?? false}
                selected={isSelected(item.id)}
                size="m"
                showInfoIcon={false}
                className={FIGMA_CARD_SELECTION_TILE_CLASS}
                onClick={() => onCardSelect(item.id)}
              />
            ))}
            {addTile ? (
              <div className="flex w-full min-w-0 shrink-0 justify-center md:flex-[1_1_100%]">
                {addTile}
              </div>
            ) : null}
          </div>
        </>
      ) : compactDesktopLayout === "pyramidFive" ? (
        <>
          <div className="flex w-full flex-col gap-2 md:hidden">
            {compactCards.map((item) => (
              <Selection
                key={item.id}
                id={item.id}
                label={item.label}
                supportText={item.supportText}
                recommended={item.recommended ?? false}
                selected={isSelected(item.id)}
                size="m"
                showInfoIcon={false}
                className="min-h-[142px]"
                onClick={() => onCardSelect(item.id)}
              />
            ))}
            {addTile}
          </div>
          <div className="mx-auto hidden w-full max-w-[min(100%,860px)] md:block">
            {/*
              lg+: fixed 3 + 2 rows (no flex-wrap on the top row — avoids 2+1+2 when the first row wraps).
              md–lg: same shell as the 3-card step — each row is `flex justify-center gap-2` so cards
              stay a tight cluster with gap-2 until lg expands to the 3+2 pyramid.
            */}
            <div className="hidden flex-col gap-2 lg:flex">
              <div className="flex justify-center gap-2">
                {compactCards.slice(0, 3).map((item) => (
                  <Selection
                    key={item.id}
                    id={item.id}
                    label={item.label}
                    supportText={item.supportText}
                    recommended={item.recommended ?? false}
                    selected={isSelected(item.id)}
                    size="m"
                    showInfoIcon={false}
                    className={FIGMA_CARD_SELECTION_TILE_CLASS}
                    onClick={() => onCardSelect(item.id)}
                  />
                ))}
              </div>
              {compactCards.length > 3 ? (
                <div className="flex justify-center gap-2">
                  {compactCards
                    .slice(3, compactRecommendedLimit)
                    .map((item) => (
                      <Selection
                        key={item.id}
                        id={item.id}
                        label={item.label}
                        supportText={item.supportText}
                        recommended={item.recommended ?? false}
                        selected={isSelected(item.id)}
                        size="m"
                        showInfoIcon={false}
                        className={FIGMA_CARD_SELECTION_TILE_CLASS}
                        onClick={() => onCardSelect(item.id)}
                      />
                    ))}
                </div>
              ) : null}
            </div>
            <div className="hidden flex-col gap-2 md:flex lg:hidden">
              <div className="flex justify-center gap-2">
                {compactCards.slice(0, 2).map((item) => (
                  <Selection
                    key={item.id}
                    id={item.id}
                    label={item.label}
                    supportText={item.supportText}
                    recommended={item.recommended ?? false}
                    selected={isSelected(item.id)}
                    size="m"
                    showInfoIcon={false}
                    className={FIGMA_CARD_SELECTION_TILE_CLASS}
                    onClick={() => onCardSelect(item.id)}
                  />
                ))}
              </div>
              <div className="flex justify-center gap-2">
                {compactCards.slice(2, 4).map((item) => (
                  <Selection
                    key={item.id}
                    id={item.id}
                    label={item.label}
                    supportText={item.supportText}
                    recommended={item.recommended ?? false}
                    selected={isSelected(item.id)}
                    size="m"
                    showInfoIcon={false}
                    className={FIGMA_CARD_SELECTION_TILE_CLASS}
                    onClick={() => onCardSelect(item.id)}
                  />
                ))}
              </div>
              {compactCards[4] ? (
                <div className="flex justify-center gap-2">
                  <Selection
                    id={compactCards[4].id}
                    label={compactCards[4].label}
                    supportText={compactCards[4].supportText}
                    recommended={compactCards[4].recommended ?? false}
                    selected={isSelected(compactCards[4].id)}
                    size="m"
                    showInfoIcon={false}
                    className={FIGMA_CARD_SELECTION_TILE_CLASS}
                    onClick={() => onCardSelect(compactCards[4].id)}
                  />
                </div>
              ) : null}
            </div>
          </div>
          {addTile ? (
            <div className="mx-auto hidden w-full max-w-[min(100%,860px)] md:block">
              {addTile}
            </div>
          ) : null}
        </>
      ) : compactDesktopLayout === "flexWrap" ? (
        <>
          <div className="flex w-full flex-col gap-2 md:hidden">
            {compactCards.map((item) => (
              <Selection
                key={item.id}
                id={item.id}
                label={item.label}
                supportText={item.supportText}
                recommended={item.recommended ?? false}
                selected={isSelected(item.id)}
                size="m"
                showInfoIcon={false}
                className="min-h-[142px]"
                onClick={() => onCardSelect(item.id)}
              />
            ))}
            {addTile}
          </div>
          {/* md–lg: pyramid (2 + 1), each row centered; lg+: one centered row (not edge-to-edge in a 2-col grid) */}
          {compactCards.length === 3 ? (
            <>
              <div className="mx-auto hidden w-full max-w-[min(100%,860px)] flex-col gap-2 md:flex lg:hidden">
                <div className="flex justify-center gap-2">
                  {compactCards.slice(0, 2).map((item) => (
                    <Selection
                      key={item.id}
                      id={item.id}
                      label={item.label}
                      supportText={item.supportText}
                      recommended={item.recommended ?? false}
                      selected={isSelected(item.id)}
                      size="m"
                      showInfoIcon={false}
                      className={FIGMA_CARD_SELECTION_TILE_CLASS}
                      onClick={() => onCardSelect(item.id)}
                    />
                  ))}
                </div>
                <div className="flex justify-center">
                  <Selection
                    id={compactCards[2].id}
                    label={compactCards[2].label}
                    supportText={compactCards[2].supportText}
                    recommended={compactCards[2].recommended ?? false}
                    selected={isSelected(compactCards[2].id)}
                    size="m"
                    showInfoIcon={false}
                    className={FIGMA_CARD_SELECTION_TILE_CLASS}
                    onClick={() => onCardSelect(compactCards[2].id)}
                  />
                </div>
                {addTile ? (
                  <div className="flex w-full justify-center px-2">{addTile}</div>
                ) : null}
              </div>
              <div className="mx-auto hidden w-full max-w-[min(100%,860px)] flex-wrap justify-center gap-2 lg:flex">
                {compactCards.map((item) => (
                  <Selection
                    key={item.id}
                    id={item.id}
                    label={item.label}
                    supportText={item.supportText}
                    recommended={item.recommended ?? false}
                    selected={isSelected(item.id)}
                    size="m"
                    showInfoIcon={false}
                    className={FIGMA_CARD_SELECTION_TILE_CLASS}
                    onClick={() => onCardSelect(item.id)}
                  />
                ))}
              </div>
              {addTile ? (
                <div className="mx-auto hidden w-full max-w-[min(100%,860px)] lg:flex lg:justify-center">
                  <div className="w-full min-w-[281px] max-w-[574px]">{addTile}</div>
                </div>
              ) : null}
            </>
          ) : (
            <div className="mx-auto hidden w-full max-w-[min(100%,860px)] flex-wrap justify-center gap-2 md:flex">
              {compactCards.map((item) => (
                <div
                  key={item.id}
                  className="flex w-full min-w-0 shrink-0 justify-center md:w-[281px] md:max-w-[281px]"
                >
                  <Selection
                    id={item.id}
                    label={item.label}
                    supportText={item.supportText}
                    recommended={item.recommended ?? false}
                    selected={isSelected(item.id)}
                    size="m"
                    showInfoIcon={false}
                    className="h-[142px] min-h-[142px] max-h-[142px] w-full max-w-[281px]"
                    onClick={() => onCardSelect(item.id)}
                  />
                </div>
              ))}
              {addTile ? (
                <div className="flex w-full min-w-0 shrink-0 justify-center md:w-[281px] md:max-w-[574px] md:flex-[1_1_100%]">
                  {addTile}
                </div>
              ) : null}
            </div>
          )}
        </>
      ) : (
        <>
          {/* Compact under 640: single column, up to 5 recommended cards */}
          <div className="flex w-full flex-col gap-2 md:hidden">
            {compactCards.map((item) => (
              <Selection
                key={item.id}
                id={item.id}
                label={item.label}
                supportText={item.supportText}
                recommended={item.recommended ?? false}
                selected={isSelected(item.id)}
                size="l"
                showInfoIcon={false}
                onClick={() => onCardSelect(item.id)}
              />
            ))}
            {addTile}
          </div>
          {/* Compact 640+: 6-col grid so each card spans 2; second row centered (cols 2–3 and 4–5) */}
          <div className="hidden md:grid grid-cols-6 gap-x-4 gap-y-6 w-full">
            {compactCards.map((item, index) => {
              const colClass =
                index <= 2
                  ? "md:col-span-2"
                  : index === 3 && compactCards.length === 4
                    ? "md:col-start-3 md:col-span-2"
                    : index === 3
                      ? "md:col-start-2 md:col-span-2"
                      : "md:col-start-4 md:col-span-2";
              return (
                <div key={item.id} className={colClass}>
                  <Selection
                    id={item.id}
                    label={item.label}
                    supportText={item.supportText}
                    recommended={item.recommended ?? false}
                    selected={isSelected(item.id)}
                    size="m"
                    showInfoIcon={false}
                    onClick={() => onCardSelect(item.id)}
                  />
                </div>
              );
            })}
            {addTile ? (
              <div className="col-span-6 min-w-0">{addTile}</div>
            ) : null}
          </div>
        </>
      )}

      {hasMore ? (
        <button
          type="button"
          onClick={onToggleExpand}
          className="text-medium-paragraph text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none self-center cursor-pointer"
        >
          {expanded ? showLessLabel : toggleLabel}
        </button>
      ) : null}
    </div>
  );
}