"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { useContent } from "@/src/components/ContentProvider";
import { useNarrow } from "./useNarrow";

/**
 * WebPresentation: the drawings of the web presentations section. The main one
 * shows the same presentation as a slide file and as a website on three
 * screens; four small ones stand next to the reasons. Same line language as
 * PathScenes.
 */

const INK = "#f8fafc";
const LINE = "#475569";
const RIM = "#64748b";
const SOFT = "#1e293b";
const MARK = "#fde68a";
const LIVE = "#10b981";
const TINT = "rgba(248, 250, 252, 0.14)";
const FINE = 1.1;
const STEP_MS = 3600;
const MOVE = { duration: 0.7, ease: [0.16, 1, 0.3, 1] as const };

const MONO: React.CSSProperties = {
  fontFamily: "var(--font-jetbrains-mono), ui-monospace, monospace",
  fontSize: "var(--scene-label, 10px)",
  letterSpacing: "0.14em",
  textTransform: "uppercase",
  fill: "#94a3b8",
};

interface Size {
  width: number;
  height: number;
}

interface Rect extends Size {
  x: number;
  y: number;
}

/** Projector, laptop, phone. */
const SCREENS: readonly Size[] = [
  { width: 300, height: 170 },
  { width: 230, height: 150 },
  { width: 96, height: 190 },
];

const SLIDE: Size = { width: 160, height: 90 };
const PAD = 12;
const GAP = 8;

const centred = (size: Size, cx: number, cy: number): Rect => ({
  ...size,
  x: cx - size.width / 2,
  y: cy - size.height / 2,
});

/** The slide keeps its format: it is scaled down until it fits the screen. */
const fitSlide = (screen: Rect) => {
  const scale = Math.min(
    (screen.width - 2 * PAD) / SLIDE.width,
    (screen.height - 2 * PAD) / SLIDE.height,
  );
  return {
    scale,
    x: screen.x + (screen.width - SLIDE.width * scale) / 2,
    y: screen.y + (screen.height - SLIDE.height * scale) / 2,
  };
};

/** The web page rearranges: three columns, two columns and a row, or one column. */
const webLayout = (screen: Rect, index: number) => {
  const left = screen.x + PAD;
  const inner = screen.width - 2 * PAD;
  const header: Rect = { x: left, y: screen.y + PAD, width: inner, height: 12 };
  const top = header.y + header.height + GAP;
  const area = screen.y + screen.height - PAD - top;

  if (index === 0) {
    const width = (inner - 2 * GAP) / 3;
    return {
      header,
      cards: [0, 1, 2].map((i) => ({
        x: left + i * (width + GAP),
        y: top,
        width,
        height: area,
      })),
    };
  }
  if (index === 1) {
    const width = (inner - GAP) / 2;
    const upper = (area - GAP) * 0.56;
    return {
      header,
      cards: [
        { x: left, y: top, width, height: upper },
        { x: left + width + GAP, y: top, width, height: upper },
        {
          x: left,
          y: top + upper + GAP,
          width: inner,
          height: area - upper - GAP,
        },
      ],
    };
  }
  const height = (area - 2 * GAP) / 3;
  return {
    header,
    cards: [0, 1, 2].map((i) => ({
      x: left,
      y: top + i * (height + GAP),
      width: inner,
      height,
    })),
  };
};

const Frame: React.FC<{ rect: Rect }> = ({ rect }) => (
  <motion.rect
    rx={12}
    fill="#0b1220"
    stroke={RIM}
    strokeWidth={FINE}
    initial={false}
    animate={{
      attrX: rect.x,
      attrY: rect.y,
      width: rect.width,
      height: rect.height,
    }}
    transition={MOVE}
  />
);

/** One 16:9 slide, drawn at its own size and scaled as a whole. */
const Slide: React.FC<{ screen: Rect }> = ({ screen }) => {
  const fit = fitSlide(screen);
  return (
    <motion.g
      style={{ originX: 0, originY: 0 }}
      initial={false}
      animate={{ x: fit.x, y: fit.y, scale: fit.scale }}
      transition={MOVE}
    >
      <rect
        width={SLIDE.width}
        height={SLIDE.height}
        rx={4}
        fill={TINT}
        stroke={INK}
        strokeWidth={FINE}
      />
      <line
        x1={12}
        x2={84}
        y1={18}
        y2={18}
        stroke={INK}
        strokeWidth={4}
        strokeLinecap="round"
      />
      {[0, 1, 2].map((bullet) => (
        <g key={bullet}>
          <circle cx={14} cy={38 + bullet * 13} r={1.6} fill={RIM} />
          <line
            x1={20}
            x2={20 + [58, 46, 52][bullet % 3]}
            y1={38 + bullet * 13}
            y2={38 + bullet * 13}
            stroke={RIM}
            strokeWidth={2.5}
            strokeLinecap="round"
          />
        </g>
      ))}
      {[0, 1, 2, 3].map((bar) => {
        const height = [18, 30, 24, 40][bar % 4];
        return (
          <rect
            key={bar}
            x={104 + bar * 11}
            y={74 - height}
            width={7}
            height={height}
            rx={2}
            fill={bar === 3 ? MARK : RIM}
          />
        );
      })}
    </motion.g>
  );
};

const WebPage: React.FC<{ screen: Rect; index: number }> = ({
  screen,
  index,
}) => {
  const { header, cards } = webLayout(screen, index);
  return (
    <g>
      <motion.rect
        rx={4}
        fill={SOFT}
        stroke={LINE}
        strokeWidth={1}
        initial={false}
        animate={{
          attrX: header.x,
          attrY: header.y,
          width: header.width,
          height: header.height,
        }}
        transition={MOVE}
      />
      {cards.map((card, i) => (
        <g key={i}>
          <motion.rect
            rx={6}
            fill={TINT}
            stroke={INK}
            strokeWidth={FINE}
            initial={false}
            animate={{
              attrX: card.x,
              attrY: card.y,
              width: card.width,
              height: card.height,
            }}
            transition={MOVE}
          />
          <motion.line
            stroke={i === 2 ? MARK : INK}
            strokeWidth={3}
            strokeLinecap="round"
            initial={false}
            animate={{
              x1: card.x + 9,
              x2: card.x + Math.min(card.width - 9, 9 + 46),
              y1: card.y + 12,
              y2: card.y + 12,
            }}
            transition={MOVE}
          />
          <motion.line
            stroke={RIM}
            strokeWidth={2.5}
            strokeLinecap="round"
            initial={false}
            animate={{
              x1: card.x + 9,
              x2: card.x + Math.min(card.width - 9, 9 + 62),
              y1: card.y + 23,
              y2: card.y + 23,
            }}
            transition={MOVE}
          />
        </g>
      ))}
    </g>
  );
};

/**
 * PresentationCompare: the same presentation as a slide file and as a website,
 * on a projector, a laptop and a phone. It steps through the screens on its
 * own until the visitor picks one.
 */
export const PresentationCompare: React.FC = () => {
  const { compare } = useContent().presentations;
  const narrow = useNarrow();
  const ref = React.useRef<HTMLDivElement>(null);
  const [index, setIndex] = React.useState(0);
  const [auto, setAuto] = React.useState(true);
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const observer = new IntersectionObserver(
      ([entry]) => setInView(entry?.isIntersecting ?? false),
      { threshold: 0.3 },
    );
    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  React.useEffect(() => {
    if (!auto || !inView) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const timer = window.setInterval(
      () => setIndex((current) => (current + 1) % SCREENS.length),
      STEP_MS,
    );
    return () => window.clearInterval(timer);
  }, [auto, inView]);

  // Side by side on wide screens, one above the other on a phone.
  const view = narrow
    ? { width: 380, height: 600 }
    : { width: 760, height: 300 };
  const stages = narrow
    ? [
        { cx: 190, cy: 150 },
        { cx: 190, cy: 450 },
      ]
    : [
        { cx: 190, cy: 150 },
        { cx: 570, cy: 150 },
      ];
  const size = SCREENS[index] ?? SCREENS[0];
  if (!size) return null;
  const slideScreen = centred(size, stages[0]?.cx ?? 0, stages[0]?.cy ?? 0);
  const webScreen = centred(size, stages[1]?.cx ?? 0, stages[1]?.cy ?? 0);
  const tooSmall = index === SCREENS.length - 1;

  return (
    <div ref={ref}>
      <svg
        viewBox={`0 0 ${view.width} ${view.height}`}
        role="img"
        aria-label={compare.description}
        className="block h-auto w-full [--scene-label:13px] md:[--scene-label:10px]"
      >
        {[
          {
            stage: stages[0],
            name: compare.slides,
            note: compare.slideNotes[index],
            colour: tooSmall ? MARK : "#94a3b8",
          },
          {
            stage: stages[1],
            name: compare.web,
            note: compare.webNotes[index],
            colour: LIVE,
          },
        ].map(
          (column) =>
            column.stage && (
              <g key={column.name}>
                <text
                  x={column.stage.cx}
                  y={column.stage.cy - 118}
                  textAnchor="middle"
                  style={{ ...MONO, fill: INK }}
                >
                  {column.name}
                </text>
                <motion.text
                  key={column.note}
                  x={column.stage.cx}
                  y={column.stage.cy + 128}
                  textAnchor="middle"
                  style={{ ...MONO, fill: column.colour }}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.4, delay: 0.35 }}
                >
                  {column.note}
                </motion.text>
              </g>
            ),
        )}
        <Frame rect={slideScreen} />
        <Slide screen={slideScreen} />
        <Frame rect={webScreen} />
        <WebPage screen={webScreen} index={index} />
      </svg>

      <div className="mt-6 flex flex-wrap items-center justify-center gap-2 md:mt-8">
        <span className="mr-2 font-mono text-[11px] uppercase tracking-[0.2em] text-slate-500">
          {compare.pickScreen}
        </span>
        {compare.screens.map((screen, i) => {
          const selected = i === index;
          return (
            <button
              key={screen}
              type="button"
              aria-pressed={selected}
              onClick={() => {
                setIndex(i);
                setAuto(false);
              }}
              className={`rounded-full border px-4 py-2 font-mono text-[11px] uppercase tracking-[0.15em] transition-colors duration-200 ${
                selected
                  ? "border-white bg-white text-slate-900"
                  : "border-slate-700 text-slate-300 hover:border-slate-400 hover:text-white"
              }`}
            >
              {screen}
            </button>
          );
        })}
      </div>
    </div>
  );
};

const draw = (delay: number) => ({
  initial: { pathLength: 0, opacity: 0 },
  whileInView: { pathLength: 1, opacity: 1 },
  viewport: { once: true, margin: "-10%" },
  transition: { duration: 0.7, delay, ease: "easeOut" as const },
});

/** Every screen: a projector, a laptop and a phone drawn one after another. */
const ScreensDrawing: React.FC = () => (
  <g fill="none" stroke={INK} strokeWidth={FINE} strokeLinejoin="round">
    <motion.rect x={14} y={14} width={86} height={50} rx={5} {...draw(0)} />
    <motion.path d="M 44 74 h 26 M 57 64 v 10" stroke={RIM} {...draw(0.2)} />
    <motion.rect x={112} y={30} width={60} height={38} rx={4} {...draw(0.35)} />
    <motion.path d="M 104 72 h 76" stroke={RIM} {...draw(0.5)} />
    <motion.rect
      x={190}
      y={22}
      width={28}
      height={52}
      rx={6}
      fill={TINT}
      {...draw(0.7)}
    />
  </g>
);

/** One link: several copies of a file on one side, a single address on the other. */
const LinkDrawing: React.FC = () => (
  <g>
    {[0, 1, 2].map((copy) => (
      <rect
        key={copy}
        x={18 + copy * 12}
        y={18 + copy * 8}
        width={38}
        height={48}
        rx={4}
        fill="#0b1220"
        stroke={LINE}
        strokeWidth={1}
        strokeDasharray="3 3"
      />
    ))}
    <motion.path
      d="M 96 46 h 30"
      stroke={INK}
      strokeWidth={FINE}
      markerEnd="url(#reason-arrow)"
      {...draw(0.2)}
    />
    <rect
      x={138}
      y={32}
      width={82}
      height={28}
      rx={14}
      fill={TINT}
      stroke={INK}
      strokeWidth={FINE}
    />
    <motion.circle
      cx={152}
      cy={46}
      r={3.5}
      fill={LIVE}
      animate={{ opacity: [1, 0.35, 1] }}
      transition={{ duration: 1.8, repeat: Infinity }}
    />
    <line
      x1={162}
      x2={208}
      y1={46}
      y2={46}
      stroke={INK}
      strokeWidth={2.5}
      strokeLinecap="round"
    />
  </g>
);

/** The real thing: a chart whose bars keep moving, because the figures are live. */
const LiveDrawing: React.FC = () => (
  <g>
    <rect
      x={24}
      y={12}
      width={186}
      height={66}
      rx={8}
      fill="#0b1220"
      stroke={RIM}
      strokeWidth={FINE}
    />
    <line x1={38} x2={196} y1={66} y2={66} stroke={LINE} strokeWidth={1} />
    {[0, 1, 2, 3, 4, 5].map((bar) => {
      const low = [14, 22, 18, 30, 24, 36][bar % 6] ?? 20;
      const high = [26, 16, 34, 22, 40, 28][bar % 6] ?? 30;
      return (
        <motion.rect
          key={bar}
          x={44 + bar * 25}
          width={14}
          rx={3}
          fill={bar === 5 ? MARK : RIM}
          initial={false}
          animate={{
            height: [low, high, low],
            attrY: [66 - low, 66 - high, 66 - low],
          }}
          transition={{
            duration: 3.6,
            delay: bar * 0.25,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        />
      );
    })}
    <motion.circle
      cx={198}
      cy={24}
      r={3}
      fill={LIVE}
      animate={{ opacity: [1, 0.3, 1] }}
      transition={{ duration: 1.6, repeat: Infinity }}
    />
  </g>
);

/** Afterwards: a page that is read on its own and passed on. */
const AfterDrawing: React.FC = () => (
  <g>
    <rect
      x={30}
      y={10}
      width={74}
      height={70}
      rx={6}
      fill={TINT}
      stroke={INK}
      strokeWidth={FINE}
    />
    {[0, 1, 2, 3].map((row) => (
      <line
        key={row}
        x1={42}
        x2={42 + [48, 40, 46, 30][row % 4]}
        y1={26 + row * 12}
        y2={26 + row * 12}
        stroke={row === 0 ? INK : RIM}
        strokeWidth={row === 0 ? 3 : 2.5}
        strokeLinecap="round"
      />
    ))}
    {[24, 46, 68].map((y, i) => (
      <g key={y}>
        <motion.path
          d={`M 104 45 C 136 45 138 ${y} 168 ${y}`}
          fill="none"
          stroke={INK}
          strokeWidth={FINE}
          {...draw(0.2 + i * 0.2)}
        />
        <circle
          cx={180}
          cy={y}
          r={9}
          fill="#0b1220"
          stroke={RIM}
          strokeWidth={FINE}
        />
        <circle cx={180} cy={y - 2} r={2.6} fill={RIM} />
        <path
          d={`M 174.5 ${y + 5.5} q 5.5 -6 11 0`}
          fill="none"
          stroke={RIM}
          strokeWidth={1.4}
          strokeLinecap="round"
        />
      </g>
    ))}
  </g>
);

const REASON_DRAWINGS: readonly React.FC[] = [
  ScreensDrawing,
  LinkDrawing,
  LiveDrawing,
  AfterDrawing,
];

/** The small drawing next to one of the reasons, by its position in the list. */
export const ReasonDrawing: React.FC<{ index: number }> = ({ index }) => {
  const Drawing = REASON_DRAWINGS[index];
  if (!Drawing) return null;
  return (
    <svg
      viewBox="0 0 234 90"
      aria-hidden="true"
      className="block h-auto w-full"
    >
      <defs>
        <marker
          id="reason-arrow"
          viewBox="0 0 10 10"
          refX="8"
          refY="5"
          markerWidth="5"
          markerHeight="5"
          orient="auto-start-reverse"
        >
          <path d="M 0 0 L 10 5 L 0 10 z" fill={INK} />
        </marker>
      </defs>
      <Drawing />
    </svg>
  );
};