'use client';

import Image from 'next/image';
import type { CSSProperties } from 'react';
import { useState } from 'react';

type Panel = {
  crop: [number, number, number, number];
  title?: string;
  narration?: string;
  bubble?: string;
  tone?: 'danger' | 'quiet';
};
type MangaPage = {
  layout: 'quad' | 'lead' | 'cinema' | 'impact';
  panels: Panel[];
};

const crop1: Panel[] = [
  {
    crop: [0, 0, 25, 25],
    title: '01 · O INÍCIO',
    narration: 'O prédio comercial deixou de ser um lugar de trabalho.',
    bubble: 'Corre!',
  },
  {
    crop: [25, 0, 25, 25],
    title: '02 · A GARAGEM',
    narration: 'Dois desconhecidos. Uma passagem fechando.',
  },
  {
    crop: [50, 0, 25, 25],
    title: '03 · JUNTOS',
    narration: 'Uma escolha suja comprou alguns segundos.',
    bubble: 'Entra no carro!',
  },
  {
    crop: [75, 0, 25, 25],
    title: '04 · A FAZENDA',
    narration: 'Naquela noite, eles fingiram ser irmãos.',
  },
  {
    crop: [0, 25, 18, 25],
    title: '05 · O COMPARTIMENTO',
    narration: 'Lucas jurava que não tinha sido mordido.',
    bubble: 'Não conta pra eles.',
  },
  {
    crop: [18, 25, 18, 25],
    title: '06 · A CHAVE',
    narration: 'Clara escolheu o próprio irmão.',
  },
  {
    crop: [36, 25, 22, 25],
    title: '07 · NOVOS ALIADOS',
    narration: 'Renato e Diego conheciam outra versão da história.',
  },
  {
    crop: [58, 25, 42, 25],
    title: '08 · HELENA',
    narration: 'Ela conhecia Bia. E carregava nomes capazes de derrubar Raul.',
  },
  {
    crop: [0, 50, 21, 25],
    title: '09 · RAUL',
    narration: 'Carros, armas, rádios. Uma organização inteira atrás dela.',
    bubble: 'Onde está Helena?',
    tone: 'danger',
  },
  {
    crop: [21, 50, 17, 25],
    title: '10 · O AVISO',
    narration: 'A mentira funcionou. Até Raul voltar sem ser visto.',
    bubble: 'Quatro dias não apagam rastros.',
  },
  {
    crop: [38, 50, 20, 25],
    title: '11 · O ATAQUE',
    narration: 'Lucas ficou para trás. Os outros correram.',
  },
  {
    crop: [58, 50, 42, 25],
    title: '12 · O PANO VERMELHO',
    narration: 'Um ponto ativo da rede de Raul.',
  },
  {
    crop: [0, 75, 15.5, 25],
    title: '13 · A NOVA FAZENDA',
    narration: 'Sangue na caminhonete. Seis balas no tambor.',
  },
  {
    crop: [15.5, 75, 16.5, 25],
    title: '14 · PEDRO',
    narration: 'Um pai pediu tempo para a filha.',
  },
  {
    crop: [32, 75, 18, 25],
    title: '15 · O CELEIRO',
    narration: 'Uma rachadura. Um grito. Dois disparos.',
    tone: 'danger',
  },
  {
    crop: [50, 75, 14, 25],
    title: '16 · O ADEUS',
    narration: 'Não havia certeza para enterrar com os corpos.',
  },
  {
    crop: [64, 75, 36, 25],
    title: '17 · NÓS DOIS',
    narration: 'Ana ficou quando Gabriel não conseguiu ficar de pé.',
    bubble: 'Nós dois.',
    tone: 'quiet',
  },
];

const crop2: Panel[] = [
  {
    crop: [0, 0, 25, 25],
    title: '01 · O PLANO',
    narration: 'Ana copiaria nomes, rotas e mapas.',
    bubble: 'O original volta. A informação fica.',
  },
  {
    crop: [25, 0, 25, 25],
    title: '02 · O CERCO',
    narration: 'As luzes chegaram antes que o plano terminasse.',
  },
  {
    crop: [50, 0, 25, 25],
    title: '03 · A NEGOCIAÇÃO',
    narration: 'O caderno foi entregue. Helena ainda era exigida.',
    tone: 'danger',
  },
  {
    crop: [75, 0, 25, 25],
    title: '04 · ROGÉRIO',
    narration: 'O nome do pai de Gabriel comprou alguns segundos.',
    bubble: 'Meu pai também se chamava Rogério.',
  },
  {
    crop: [0, 25, 13.5, 25],
    title: '05 · A FUGA',
    narration: 'Enquanto Gabriel falava, todos escapavam.',
  },
  {
    crop: [13.5, 25, 14.5, 25],
    title: '06 · POR ÚLTIMO',
    narration: 'Ele correu quando já não restava ninguém na casa.',
  },
  {
    crop: [28, 25, 16, 25],
    title: '07 · A DISTRAÇÃO',
    narration: 'Pedras deram passos a pessoas que não existiam.',
  },
  {
    crop: [44, 25, 14.5, 25],
    title: '08 · PELO CÓRREGO',
    narration: 'A água apagava os rastros.',
  },
  {
    crop: [58.5, 25, 41.5, 25],
    title: '09 · A CABANA',
    narration: 'Por alguns minutos, o mundo foi apenas a respiração de Ana.',
    bubble: 'Dorme. Eu fico acordado.',
    tone: 'quiet',
  },
  {
    crop: [0, 50, 17, 25],
    title: '10 · PATRULHAS',
    narration: 'A mata não estava vazia.',
  },
  {
    crop: [17, 50, 17, 25],
    title: '11 · O POSTO',
    narration:
      'A tentativa de imitar uma coruja só confirmou a presença deles.',
  },
  {
    crop: [34, 50, 27, 25],
    title: '12 · O CONFRONTO',
    narration: 'Desta vez, eram homens de Raul.',
    bubble: 'Augusto! Atira!',
    tone: 'danger',
  },
  {
    crop: [61, 50, 20, 25],
    title: '13 · OS RECURSOS',
    narration: 'Água, comida, gaze, munição e uma chave.',
  },
  {
    crop: [81, 50, 19, 25],
    title: '14 · O PASSADO',
    narration: 'A verdade sobre a família de Gabriel finalmente apareceu.',
  },
  {
    crop: [0, 75, 23, 25],
    title: '15 · A CHÁCARA',
    narration:
      'Quarenta quilômetros. Um portão que ainda reconhecia seu rosto.',
  },
  {
    crop: [23, 75, 22, 25],
    title: '16 · A EXPLORAÇÃO',
    narration: 'Câmeras sabotadas. Um visitante cinco semanas antes.',
  },
  {
    crop: [45, 75, 14, 25],
    title: '17 · A SUÍTE',
    narration: 'O quarto dos pais ainda não sabia que o mundo havia acabado.',
    tone: 'quiet',
  },
  {
    crop: [59, 75, 20, 25],
    title: '18 · FINALMENTE',
    narration: 'Água quente. Roupas limpas. O primeiro beijo sem fuga.',
    bubble: 'Ana Ferreira... o nome da minha sorte.',
  },
  {
    crop: [79, 75, 21, 25],
    title: '19 · O FUTURO',
    narration: 'Pela primeira vez, fugir amanhã não era obrigatório.',
    bubble: 'O que vamos construir aqui?',
  },
];

const makePages = (panels: Panel[]): MangaPage[] => [
  { layout: 'lead', panels: panels.slice(0, 4) },
  { layout: 'quad', panels: panels.slice(4, 8) },
  { layout: 'cinema', panels: panels.slice(8, 12) },
  { layout: 'quad', panels: panels.slice(12, 16) },
  { layout: 'impact', panels: panels.slice(16) },
];

const chapters = {
  '01': {
    title: 'Quatro dias não apagam rastros',
    board: '/art/source/sessao-01.jpg',
    cover: '/art/manga/chapter-01.png',
    panels: crop1,
  },
  '02': {
    title: 'O nome da sorte',
    board: '/art/source/sessao-02.jpg',
    cover: '/art/manga/chapter-02.png',
    panels: crop2,
  },
} as const;

const characters = [
  [
    'Gabriel Firmino',
    '20 anos · protagonista',
    'Programador antes do colapso. Improvisa, blefa e manipula para sobreviver. O grupo começa a tratá-lo como líder, enquanto a culpa por Pedro e sua filha continua aberta.',
    'VIVO',
  ],
  [
    'Ana Ferreira',
    '22 anos · artista',
    'Perceptiva, cautelosa e firme. Sua memória visual preservou parte do caderno de Helena. É a pessoa mais próxima de Gabriel e a única a quem ele prometeu tentar não mentir.',
    'VIVA',
  ],
  [
    'Augusto',
    '44 anos · protetor',
    'Pragmático e experiente. Protege Clara, Bia e as crianças acolhidas. Respeita a utilidade de Gabriel, mas confronta seus limites morais.',
    'VIVO',
  ],
  [
    'Helena',
    'ex-enfermeira · alvo de Raul',
    'Conhecia Clara antes da infecção. Roubou o caderno com nomes, contatos e rotas que ameaçam a organização de Raul.',
    'VIVA · FERIDA',
  ],
  [
    'Diego',
    'vigia · sobrevivente',
    'Jovem, direto e sarcástico. Luta ao lado do grupo, mas não esconde quando discorda de Gabriel. Foi ferido de raspão no posto.',
    'VIVO',
  ],
  [
    'Raul',
    'cerca de 50 anos · antagonista',
    'Comanda armas, rádios, veículos e pontos de apoio. Recuperou o caderno original, mas não sabe que Ana copiou parte das informações.',
    'AMEAÇA ALTA',
  ],
  [
    'Clara',
    'mãe · irmã de Lucas',
    'Ajudava pessoas secretamente no começo do surto. Libertou Lucas do celeiro e mantém as crianças como prioridade.',
    'VIVA',
  ],
  [
    'Lucas',
    'prisioneiro',
    'Irmão de Clara. Ficou para trás durante o ataque e foi capturado. Raul pretende trocá-lo por Helena.',
    'CAPTURADO',
  ],
  [
    'Bia',
    'filha de Augusto e Clara',
    'Seu nome revelou a ligação anterior entre Helena e Clara. É parte do núcleo que orienta todas as decisões de Augusto.',
    'VIVA',
  ],
  [
    'Chico',
    'cachorro de Ana',
    'Desapareceu durante o início do caos. Continua sendo uma esperança sem resposta ligada ao mundo anterior.',
    'DESAPARECIDO',
  ],
];

function cropStyle([x, y, w, h]: Panel['crop'], board: string): CSSProperties {
  const px = x >= 100 - w ? 100 : (x / (100 - w)) * 100;
  const py = y >= 100 - h ? 100 : (y / (100 - h)) * 100;
  return {
    backgroundImage: `url(${board})`,
    backgroundSize: `${10000 / w}% ${10000 / h}%`,
    backgroundPosition: `${px}% ${py}%`,
  };
}

function PanelView({ panel, board }: { panel: Panel; board: string }) {
  return (
    <div
      className={`panel ${panel.tone ?? ''}`}
      style={cropStyle(panel.crop, board)}
    >
      {panel.title && <span className="panel-title">{panel.title}</span>}
      {panel.bubble && <blockquote>{panel.bubble}</blockquote>}
      {panel.narration && <p>{panel.narration}</p>}
    </div>
  );
}

export default function Home() {
  const [chapter, setChapter] = useState<'01' | '02'>('01');
  const [screen, setScreen] = useState<'reader' | 'characters'>('reader');
  const [mode, setMode] = useState<'vertical' | 'horizontal'>('vertical');
  const [zoom, setZoom] = useState(84);
  const active = chapters[chapter];
  const pages = makePages(active.panels);
  const totalPages = pages.length + 2;
  const changeChapter = (next: '01' | '02') => {
    setChapter(next);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <main className="app-shell">
      <header className="topbar">
        <a className="logo" href="#top" onClick={() => setScreen('reader')}>
          <b>R</b>
          <span>RASTROS</span>
        </a>
        <div className="chapter-id">
          <small>RPG PÓS-APOCALÍPTICO</small>
          <strong>
            {screen === 'reader'
              ? `Capítulo ${chapter} · ${active.title}`
              : 'Arquivo de personagens'}
          </strong>
        </div>
        <nav>
          <button
            className={screen === 'reader' ? 'active' : ''}
            onClick={() => setScreen('reader')}
          >
            Leitor
          </button>
          <button
            className={screen === 'characters' ? 'active' : ''}
            onClick={() => setScreen('characters')}
          >
            Personagens
          </button>
        </nav>
      </header>

      {screen === 'reader' ? (
        <>
          <section className="reader-tools" id="top">
            <div className="chapter-nav">
              <button
                disabled={chapter === '01'}
                onClick={() => changeChapter('01')}
              >
                ← Cap−
              </button>
              <label>
                <span>CAPÍTULO</span>
                <select
                  value={chapter}
                  onChange={(e) => changeChapter(e.target.value as '01' | '02')}
                >
                  <option value="01">
                    01 · Quatro dias não apagam rastros
                  </option>
                  <option value="02">02 · O nome da sorte</option>
                </select>
              </label>
              <button
                disabled={chapter === '02'}
                onClick={() => changeChapter('02')}
              >
                Cap+ →
              </button>
            </div>
            <div className="view-tools">
              <button
                className={mode === 'vertical' ? 'active' : ''}
                onClick={() => setMode('vertical')}
              >
                Vertical
              </button>
              <button
                className={mode === 'horizontal' ? 'active' : ''}
                onClick={() => setMode('horizontal')}
              >
                Horizontal
              </button>
              <span className="tool-sep" />
              <button
                aria-label="Diminuir zoom"
                onClick={() => setZoom(Math.max(58, zoom - 8))}
              >
                −
              </button>
              <span>{zoom}%</span>
              <button
                aria-label="Aumentar zoom"
                onClick={() => setZoom(Math.min(116, zoom + 8))}
              >
                +
              </button>
            </div>
          </section>

          <section className="chapter-intro">
            <span>SESSÃO {chapter}</span>
            <h1>{active.title}</h1>
            <p>
              {chapter === '01'
                ? 'O começo do colapso, a chegada de Raul e uma decisão que não pode ser desfeita.'
                : 'A negociação, a fuga pela mata e uma casa antiga que oferece a primeira chance de futuro.'}
            </p>
            <small>
              {active.panels.length} CENAS · {totalPages} PÁGINAS
            </small>
          </section>

          <div
            className={`manga-stream ${mode}`}
            style={{ '--page-width': `${zoom}%` } as CSSProperties}
          >
            <figure className="manga-page cover-page">
              <Image
                src={active.cover}
                alt={`Capa do Capítulo ${chapter}`}
                width={1792}
                height={1024}
                priority
                sizes="(max-width:900px) 100vw, 84vw"
              />
              <figcaption>
                <span>01</span>
                <b>CAPA</b>
                <em>1 / {totalPages}</em>
              </figcaption>
            </figure>
            {pages.map((page, i) => (
              <figure
                className={`manga-page panel-page layout-${page.layout}`}
                key={`${chapter}-${i}`}
              >
                <div className="paper-shadow" />
                {page.panels.map((panel, j) => (
                  <PanelView
                    key={`${panel.title}-${j}`}
                    panel={panel}
                    board={active.board}
                  />
                ))}
                <figcaption>
                  <span>{String(i + 2).padStart(2, '0')}</span>
                  <b>RASTROS</b>
                  <em>
                    {i + 2} / {totalPages}
                  </em>
                </figcaption>
              </figure>
            ))}
            <figure className="manga-page end-page">
              <Image
                src={
                  chapter === '01'
                    ? '/art/source/gabriel-02.jpg'
                    : '/art/source/gabriel-01.jpg'
                }
                alt={
                  chapter === '01'
                    ? 'Arquivo visual de Ana Ferreira'
                    : 'Arquivo visual de Gabriel Firmino'
                }
                width={2048}
                height={1365}
                sizes="(max-width:900px) 100vw, 84vw"
              />
              <div>
                <span>FIM DO CAPÍTULO {chapter}</span>
                <h2>
                  {chapter === '01'
                    ? '“Nós dois.”'
                    : '“O que vamos construir aqui?”'}
                </h2>
                <button
                  onClick={() => changeChapter(chapter === '01' ? '02' : '01')}
                >
                  {chapter === '01'
                    ? 'Continuar no Capítulo 02 →'
                    : '← Voltar ao Capítulo 01'}
                </button>
              </div>
              <figcaption>
                <span>{String(totalPages).padStart(2, '0')}</span>
                <b>FIM</b>
                <em>
                  {totalPages} / {totalPages}
                </em>
              </figcaption>
            </figure>
          </div>
        </>
      ) : (
        <section className="characters-screen">
          <header>
            <span>ARQUIVO DE SOBREVIVENTES</span>
            <h1>Quem ainda está de pé</h1>
            <p>
              Histórias, lealdades e ameaças atualizadas até o fim da Sessão 02.
            </p>
          </header>
          <figure className="cast-image">
            <Image
              src="/art/manga/characters.png"
              alt="Elenco principal de Rastros"
              width={1792}
              height={1024}
              priority
              sizes="100vw"
            />
          </figure>
          <div className="characters-grid">
            {characters.map((c, i) => (
              <article key={c[0]}>
                <small>
                  {String(i + 1).padStart(2, '0')} · {c[1]}
                </small>
                <h2>{c[0]}</h2>
                <p>{c[2]}</p>
                <strong>{c[3]}</strong>
              </article>
            ))}
          </div>
        </section>
      )}

      <footer>
        <span>RASTROS · CAMPANHA EM ANDAMENTO</span>
        <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
          Voltar ao topo ↑
        </button>
      </footer>
    </main>
  );
}