'use client';

import dynamic from 'next/dynamic';
import { motion } from 'framer-motion';
import { useLocale } from '@/lib/i18n/locale-context';
import { SectionHeader } from '@/components/ui/SectionHeader';
import type { StackNode } from './StackCanvas';

// Category accent palette (index-aligned). Hex feeds the WebGL sprites; the
// literal Tailwind maps below keep the JIT scanner happy for the legend.
const ACCENTS = ['electric', 'violet', 'magenta', 'cyan'] as const;
type Accent = (typeof ACCENTS)[number];

const ACCENT_HEX: Record<Accent, string> = {
  electric: '#38bdf8',
  violet: '#818cf8',
  magenta: '#e879f9',
  cyan: '#22d3ee',
};
const ACCENT_TEXT: Record<Accent, string> = {
  electric: 'text-electric',
  violet: 'text-violet',
  magenta: 'text-magenta',
  cyan: 'text-cyan',
};
const ACCENT_BORDER: Record<Accent, string> = {
  electric: 'border-electric/30',
  violet: 'border-violet/30',
  magenta: 'border-magenta/30',
  cyan: 'border-cyan/30',
};

// The globe is client-only WebGL: never SSR it. While the chunk loads we show
// a calm placeholder so layout doesn't jump.
const StackCanvas = dynamic(
  () => import('./StackCanvas').then((m) => m.StackCanvas),
  {
    ssr: false,
    loading: () => (
      <div className="flex h-[400px] w-full items-center justify-center sm:h-[460px] lg:h-[520px]">
        <span className="h-24 w-24 animate-pulse rounded-full bg-gradient-to-br from-electric/20 to-violet/20 blur-xl" />
      </div>
    ),
  },
);

export function Stack() {
  const { t, locale } = useLocale();

  // Flatten every tool into a colored node for the constellation.
  const nodes: StackNode[] = t.stack.categories.flatMap((cat, i) => {
    const hex = ACCENT_HEX[ACCENTS[i % ACCENTS.length]];
    return cat.items.map((label) => ({ label, color: hex }));
  });

  return (
    <section id="stack" className="relative overflow-hidden px-5 py-28 sm:px-8">
      <div className="mx-auto max-w-7xl">
        <SectionHeader
          eyebrow={t.stack.eyebrow}
          title={t.stack.title}
          sub={t.stack.sub}
        />

        <div className="mt-10 grid grid-cols-1 items-center gap-8 lg:grid-cols-2">
          {/* 3D constellation */}
          <motion.div
            initial={{ opacity: 0, scale: 0.94 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true, margin: '-60px' }}
            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
            className="relative order-1 lg:order-none"
          >
            <StackCanvas nodes={nodes} />
            <p className="pointer-events-none mt-2 text-center font-mono text-[0.66rem] uppercase tracking-[0.18em] text-slate-600">
              {locale === 'fa' ? 'بکشید برای چرخش · نشانگر برای نام' : 'Drag to spin · hover for name'}
            </p>
          </motion.div>

          {/* Category legend */}
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            {t.stack.categories.map((cat, i) => {
              const accent = ACCENTS[i % ACCENTS.length];
              return (
                <motion.div
                  key={cat.id}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true, margin: '-60px' }}
                  transition={{
                    duration: 0.5,
                    ease: [0.22, 1, 0.36, 1],
                    delay: 0.06 * i,
                  }}
                  className={`glass relative border ${ACCENT_BORDER[accent]} p-5`}
                >
                  <div className="flex items-center gap-2">
                    <span
                      className="h-2.5 w-2.5 rounded-full"
                      style={{ backgroundColor: ACCENT_HEX[accent] }}
                    />
                    <span className={`label-mono ${ACCENT_TEXT[accent]}`}>
                      {cat.label}
                    </span>
                  </div>
                  <ul className="mt-4 flex flex-wrap gap-2">
                    {cat.items.map((item) => (
                      <li
                        key={item}
                        className="rounded-full border border-white/10 px-2.5 py-1 font-mono text-[0.7rem] tracking-wide text-slate-300"
                      >
                        {item}
                      </li>
                    ))}
                  </ul>
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}