import { Container } from '@/components/ui/Container';
import { SectionHeading } from '@/components/ui/SectionHeading';
import { ChakraBars, ChakraFigure, type ChakraPoint } from '@/components/insights/ChakraFigure';
import { ElementBars, FourPillarsGrid, type PillarGlyphs } from '@/components/insights/BaziVisuals';
import { CoreNumbers, type CoreNumber } from '@/components/insights/CoreNumbers';
import type { PathId } from './ThreePathsSection';
import { useMessages } from '@/i18n/client';

// Illustrative sample data shown on the landing page.
const CHAKRAS: Omit<ChakraPoint, 'name'>[] = [
  { key: 'crown', value: 67, color: '#A855F7' },
  { key: 'third_eye', value: 91, color: '#6366F1' },
  { key: 'throat', value: 78, color: '#0EA5E9' },
  { key: 'heart', value: 48, color: '#10B981' },
  { key: 'solar_plexus', value: 84, color: '#EAB308' },
  { key: 'sacral', value: 61, color: '#F97316' },
  { key: 'root', value: 72, color: '#EF4444' },
];

const PILLARS: (Omit<PillarGlyphs, 'label'> & { key: 'year' | 'month' | 'day' | 'hour' })[] = [
  { key: 'year', stem: { chinese: '甲', element: 'Wood' }, branch: { chinese: '辰', element: 'Earth' } },
  { key: 'month', stem: { chinese: '丙', element: 'Fire' }, branch: { chinese: '午', element: 'Fire' } },
  { key: 'day', stem: { chinese: '壬', element: 'Water' }, branch: { chinese: '子', element: 'Water' } },
  { key: 'hour', stem: { chinese: '庚', element: 'Metal' }, branch: { chinese: '申', element: 'Metal' } },
];

const ELEMENTS = { Wood: 72, Fire: 41, Earth: 63, Metal: 28, Water: 86 };

const NUMBERS: CoreNumber[] = [
  { label: 'Destiny', value: 3, title: 'The Creator', tone: 'blue' },
  { label: 'Soul Urge', value: 9, title: 'The Humanist', tone: 'violet' },
  { label: 'Personality', value: 5, title: 'The Explorer', tone: 'amber' },
];

const CARD_IDS: PathId[] = ['aura', 'bazi', 'numerology'];

export function SampleResultsSection({ onExploreSample }: { onExploreSample: (type: PathId) => void }) {
  const m = useMessages().home;
  const t = m.samples;
  const chakras: ChakraPoint[] = CHAKRAS.map((c) => ({ ...c, name: t.chakras[c.key as keyof typeof t.chakras] }));
  const pillars: PillarGlyphs[] = PILLARS.map(({ key, ...p }) => ({ ...p, label: t.pillars[key] }));
  const title = (id: PathId) => (id === 'aura' ? 'Aura + Chakra' : id === 'bazi' ? 'BaZi' : m.paths.numerologyTitle);
  const panels: Record<PathId, React.ReactNode> = {
    aura: (
      <div className="flex h-full items-center gap-4 rounded-card bg-[radial-gradient(120%_90%_at_25%_40%,#1A2350,#0A1024_60%,#070B19)] p-5 ring-1 ring-white/5">
        <ChakraFigure points={chakras} className="h-full max-h-[260px] w-[46%] shrink-0" />
        <ChakraBars points={chakras} className="flex-1" />
      </div>
    ),
    bazi: (
      <div className="h-full rounded-card bg-surface p-5 shadow-card ring-1 ring-line/70">
        <p className="text-[13px] font-semibold text-ink">{t.fourPillars}</p>
        <FourPillarsGrid pillars={pillars} className="mt-4" />
        <p className="mt-6 text-[13px] font-semibold text-ink">{t.fiveElements}</p>
        <ElementBars elements={ELEMENTS} className="mt-3" />
      </div>
    ),
    numerology: (
      <div className="h-full rounded-card bg-surface p-5 shadow-card ring-1 ring-line/70">
        <p className="text-[13px] font-semibold text-ink">{t.coreNumbers}</p>
        <CoreNumbers lifePath={7} lifePathTitle="The Seeker" numbers={NUMBERS} className="mt-5" />
      </div>
    ),
  };

  return (
    <section className="py-24 sm:py-28">
      <Container>
        <SectionHeading
          layout="split"
          eyebrow={t.eyebrow}
          title={
            <>
              {t.title[0]}
              <br />
              {t.title[1]}
            </>
          }
          description={t.description}
        />

        <div className="mt-14 grid gap-x-6 gap-y-10 md:grid-cols-3 lg:mt-16">
          {CARD_IDS.map((id) => (
            <button
              key={id}
              type="button"
              onClick={() => onExploreSample(id)}
              aria-label={m.paths.start(title(id))}
              className="group flex flex-col text-left"
            >
              <div className="h-[340px] transition-transform duration-300 ease-out-expo group-hover:-translate-y-1">
                {panels[id]}
              </div>
              <h3 className="mt-5 text-[15px] font-semibold text-ink">{title(id)}</h3>
              <p className="mt-1.5 max-w-[260px] text-[13px] leading-relaxed text-muted">{t.cards[id]}</p>
            </button>
          ))}
        </div>
      </Container>
    </section>
  );
}