"use client";

import { memo } from "react";
import Button from "../../buttons/Button";
import { useMessages } from "../../../contexts/MessagesContext";
import { WORKSHOP_SIGNUP_ANCHOR_ID } from "../../../../lib/workshopSignup";

const CARD_CLASS: Record<string, string> = {
  lavender:
    "bg-[var(--color-surface-invert-brand-lavender)] text-[var(--color-content-invert-brand-lavender)]",
  teal: "bg-[var(--color-surface-invert-brand-teal)] text-[var(--color-content-invert-brand-teal)]",
  yellow:
    "bg-[var(--color-surface-invert-brand-secondary)] text-[var(--color-content-invert-brand-secondary)]",
  red: "bg-[var(--color-surface-invert-brand-red)] text-[var(--color-content-invert-brand-red)]",
};

function TableIllustration({
  cards,
  deck,
  prompt,
}: {
  cards: ReadonlyArray<{ id: string; label: string; color: string }>;
  deck: readonly string[];
  prompt: string;
}) {
  return (
    <div
      className="relative flex aspect-square w-full max-w-[560px] flex-col items-center justify-center overflow-hidden rounded-full border border-[var(--color-border-default-secondary)] bg-[var(--color-surface-default-secondary)] px-8 pb-6 pt-10"
      aria-hidden
    >
      <div className="flex w-full max-w-[360px] justify-center gap-2">
        {cards.map((card) => (
          <div
            key={card.id}
            className={`flex h-[110px] w-[22%] items-end rounded-[8px] p-2 text-[12px] font-medium leading-[14px] ${CARD_CLASS[card.color] ?? ""}`}
          >
            {card.label}
          </div>
        ))}
      </div>
      <div className="mt-4 flex w-[140%] justify-center">
        {deck.map((label, index) => (
          <div
            key={label}
            className="flex h-[120px] w-[92px] -mx-3 flex-col items-center justify-end rounded-[6px] border border-[var(--color-border-invert-secondary,#e4e4e4)] bg-white px-2 pb-3 text-center text-[11px] leading-4 text-[var(--color-content-invert-primary)]"
            style={{ transform: `rotate(${(index - 1) * 18}deg)` }}
          >
            <span className="mb-auto mt-2 grid grid-cols-4 gap-1" aria-hidden>
              {Array.from({ length: 8 }).map((_, dot) => (
                <span key={dot} className="size-[3px] rounded-full bg-neutral-300" />
              ))}
            </span>
            {label}
          </div>
        ))}
      </div>
      <p className="mt-4 max-w-[240px] rounded-[12px] border border-[var(--color-border-default-secondary)] bg-black px-4 py-3 text-center text-[14px] leading-5 text-white">
        {prompt}
      </p>
    </div>
  );
}

function WorkshopCircleView({ className = "" }: { className?: string }) {
  const copy = useMessages().pages.workshops.circle;

  return (
    <section
      data-figma-node="24264-49598"
      className={`bg-[var(--color-surface-default-primary)] px-[var(--space-400)] py-[var(--space-1800)] md:px-[var(--space-1200)] lg:p-[var(--space-2400)] ${className}`}
    >
      <div className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-12 lg:flex-row lg:items-center">
        <div className="flex w-full max-w-[768px] flex-1 flex-col items-start gap-8">
          <h2 className="x-large-heading text-[var(--color-content-default-primary)]">
            {copy.title}
          </h2>
          <div className="flex flex-col gap-4">
            {copy.paragraphs.map((paragraph) => (
              <p
                key={paragraph.slice(0, 24)}
                className="medium-paragraph text-[var(--color-content-default-tertiary)]"
              >
                {paragraph}
              </p>
            ))}
          </div>
          <Button href={`#${WORKSHOP_SIGNUP_ANCHOR_ID}`} size="small">
            {copy.button}
          </Button>
        </div>
        <div className="flex w-full flex-1 justify-center">
          <TableIllustration cards={copy.cards} deck={copy.deck} prompt={copy.prompt} />
        </div>
      </div>
    </section>
  );
}

export default memo(WorkshopCircleView);