---
import type { Locale } from '@i18n/locales';
import ArchDiagram from '@components/case-study/ArchDiagram.astro';
import DecisionList from '@components/case-study/DecisionList.astro';
import Gallery from '@components/case-study/Gallery.astro';

interface Block {
  type: 'p' | 'ul';
  text?: string;
  items?: string[];
}
interface Section {
  kind: string;
  heading: string;
  anchorId: string;
  blocks?: Block[];
  decisions?: { n: number; choice: string; alternative: string; rationale: string }[];
}
interface Media {
  src: string;
  width: number;
  height: number;
  alt: string;
  caption: string;
}
interface DiagramNode {
  id: string;
  x: number;
  y: number;
  w: number;
  h: number;
  kind: 'internal' | 'primary' | 'external';
  label: string;
  sub?: string;
}
interface DiagramEdge {
  d: string;
  kind: 'flow' | 'external';
  label?: string;
  labelX?: number;
  labelY?: number;
}
interface Diagram {
  viewBox: string;
  title: string;
  desc: string;
  nodes: DiagramNode[];
  edges: DiagramEdge[];
}
interface Props {
  locale: Locale;
  section: Section;
  diagram?: Diagram;
  media?: Media[];
}
const { section, diagram, media = [] } = Astro.props;
const galleryMedia = media.slice(1); // media[0] is the hero shown above the article
---

<section id={section.anchorId} data-spy class="pt-14 first:pt-0">
  <h2 class="text-h3">{section.heading}</h2>

  {
    section.blocks && (
      <div class="prose-measure mt-4 flex flex-col gap-4">
        {section.blocks.map((b) =>
          b.type === 'p' ? (
            <p class="text-body text-ink-muted leading-relaxed">{b.text}</p>
          ) : (
            <ul class="flex flex-col gap-2">
              {b.items?.map((it) => (
                <li class="text-body text-ink-muted flex gap-3">
                  <span class="bg-accent mt-2.5 h-1 w-1 shrink-0 rounded-full" aria-hidden="true" />
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          ),
        )}
      </div>
    )
  }

  {section.kind === 'architecture' && diagram && <ArchDiagram diagram={diagram} class="mt-6" />}

  {
    section.kind === 'decisions' && section.decisions && (
      <div class="mt-6">
        <DecisionList decisions={section.decisions} />
      </div>
    )
  }

  {
    section.kind === 'screenshots' &&
      (galleryMedia.length > 0 ? (
        <div class="mt-6">
          <Gallery media={galleryMedia} startIndex={1} />
        </div>
      ) : null)
  }
</section>
