// JanelaApp: a "gravação": um app de lista nítido (janela 1400 × 940 com barra, lateral e lista) que
// MUDA DE ESTADO por quadros, sempre causado pelo clique do cursor: o botão afunda, o modal abre,
// o texto é digitado com cursor de texto, o Salvar afunda, o modal fecha e a linha nova entra no topo
// com fundo de destaque. Pontos úteis pra câmera e cursor: veja ALVOS (coordenadas da janela).
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, JANELA, MONO, e5, lerp, mola, seg} from '../base';

export const ALVOS = {botao: [1230, 124], campo: [850, 440], salvar: [1060, 568], novaLinha: [850, 242]} as const;

export type JanelaAppProps = {
  endereco?: string;
  lateral?: string[];
  titulo: string;
  /** "{n} tarefas": {n} vira o número de itens */
  subtitulo?: string;
  botao: string;
  itens: {texto: string; tag?: string}[];
  modal: {titulo: string; placeholder: string; texto: string; botao: string; tag?: string};
  /** quadros (relativos à gravação): clique no botão, digitação [de, até], clique em salvar */
  tempos: {abre: number; digita: [number, number]; salva: number};
};

const Linha: React.FC<{texto: string; tag?: string; y: number; h?: number; destaque?: number; check?: number}> = ({texto, tag, y, h = 84, destaque = 0, check = 0}) =>
  <div style={{position: 'absolute', left: JANELA.lateral + 40, right: 40, top: y, height: h, overflow: 'hidden', borderRadius: 14, background: destaque > 0 ? `rgba(255,91,20,${0.14 * destaque})` : undefined, boxShadow: destaque > 0 ? `inset 0 0 0 2px rgba(255,91,20,${0.5 * destaque})` : undefined}}>
    <div style={{position: 'absolute', left: 24, top: 26, width: 32, height: 32, borderRadius: 16, border: `3px solid ${check > 0 ? COR.ok : '#C7CCD4'}`, boxSizing: 'border-box', background: check > 0.5 ? COR.ok : undefined, transform: `scale(${check > 0 ? mola(check) : 1})`}} />
    <div style={{position: 'absolute', left: 78, top: 22, fontFamily: FONTE, fontWeight: 600, fontSize: 30, color: COR.tinta}}>{texto}</div>
    {tag && <div style={{position: 'absolute', right: 24, top: 24, padding: '6px 14px', borderRadius: 999, background: '#F0F2F5', fontFamily: MONO, fontSize: 20, color: COR.apagado}}>{tag}</div>}
    <div style={{position: 'absolute', left: 24, right: 24, bottom: 0, height: 1, background: COR.linha}} />
  </div>;

export const JanelaApp: React.FC<JanelaAppProps> = ({endereco = 'pauta.app', lateral = ['Hoje', 'Próximos', 'Projetos', 'Arquivo'], titulo, subtitulo = '{n} tarefas', botao, itens, modal, tempos}) => {
  const f = useCurrentFrame();
  const apertaB = f >= tempos.abre && f < tempos.abre + 4 ? 0.94 : 1;
  const abre = e5(seg(f, tempos.abre + 1, tempos.abre + 9)), fecha = seg(f, tempos.salva + 2, tempos.salva + 8);
  const mod = abre * (1 - fecha);
  const [d0, d1] = tempos.digita;
  const n = Math.round(lerp(0, modal.texto.length, seg(f, d0, d1)));
  const caret = f < d0 + 1 || n < modal.texto.length || Math.floor(f / 8) % 2 === 0;
  const apertaS = f >= tempos.salva && f < tempos.salva + 4 ? 0.92 : 1;
  const entra = e5(seg(f, tempos.salva + 6, tempos.salva + 16));
  const brilho = 1 - seg(f, tempos.salva + 30, tempos.salva + 60);
  const total = itens.length + (entra > 0 ? 1 : 0);
  const Y0 = 210;
  return <div style={{position: 'absolute', inset: 0, width: JANELA.l, height: JANELA.a, borderRadius: 22, overflow: 'hidden', background: COR.tela,
    boxShadow: '0 60px 120px rgba(20,22,26,.22), 0 12px 30px rgba(20,22,26,.12), 0 0 0 1px rgba(20,22,26,.08)'}}>
    {/* barra */}
    <div style={{position: 'absolute', left: 0, right: 0, top: 0, height: JANELA.barra, background: '#FAFAFB', borderBottom: `1px solid ${COR.linha}`}}>
      {['#FF5F57', '#FEBC2E', '#28C840'].map((c, i) => <div key={i} style={{position: 'absolute', left: 24 + i * 26, top: 20, width: 16, height: 16, borderRadius: 8, background: c}} />)}
      <div style={{position: 'absolute', left: 0, right: 0, top: 14, textAlign: 'center', fontFamily: MONO, fontSize: 20, color: COR.apagado}}>{endereco}</div>
    </div>
    {/* lateral */}
    <div style={{position: 'absolute', left: 0, top: JANELA.barra, bottom: 0, width: JANELA.lateral, background: COR.lateral, borderRight: `1px solid ${COR.linha}`}}>
      {lateral.map((l, i) => <div key={i} style={{position: 'absolute', left: 20, right: 20, top: 30 + i * 62, height: 50, borderRadius: 10, background: i === 0 ? '#E9ECF1' : undefined,
        fontFamily: FONTE, fontWeight: i === 0 ? 700 : 500, fontSize: 26, color: i === 0 ? COR.tinta : COR.apagado, lineHeight: '50px', paddingLeft: 18}}>{l}</div>)}
    </div>
    {/* cabeçalho */}
    <div style={{position: 'absolute', left: JANELA.lateral + 60, top: 88, fontFamily: FONTE, fontWeight: 800, fontSize: 54, color: COR.tinta, letterSpacing: '-0.02em'}}>{titulo}</div>
    <div style={{position: 'absolute', left: JANELA.lateral + 62, top: 154, fontFamily: FONTE, fontWeight: 500, fontSize: 22, color: COR.apagado}}>{subtitulo.replace('{n}', String(total))}</div>
    <div style={{position: 'absolute', left: 1120, top: 96, width: 220, height: 56, borderRadius: 14, background: COR.acento, color: '#fff', fontFamily: FONTE, fontWeight: 700, fontSize: 24,
      display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${apertaB})`, boxShadow: '0 6px 16px rgba(255,91,20,.35)'}}>{botao}</div>
    {/* lista */}
    {entra > 0 && <Linha texto={modal.texto} tag={modal.tag} y={Y0} h={84 * entra} destaque={brilho} />}
    {itens.map((it, i) => <Linha key={i} texto={it.texto} tag={it.tag} y={Y0 + (i + entra) * 84} />)}
    {/* modal */}
    {mod > 0.01 && <>
      <div style={{position: 'absolute', inset: 0, background: `rgba(20,22,26,${0.28 * mod})`}} />
      <div style={{position: 'absolute', left: 530, top: 300, width: 640, height: 330, borderRadius: 20, background: COR.tela, opacity: mod, transform: `scale(${0.94 + 0.06 * mod}) translateY(${(1 - mod) * 20}px)`,
        boxShadow: '0 30px 80px rgba(20,22,26,.3)'}}>
        <div style={{position: 'absolute', left: 40, top: 34, fontFamily: FONTE, fontWeight: 800, fontSize: 34, color: COR.tinta}}>{modal.titulo}</div>
        <div style={{position: 'absolute', left: 40, top: 100, width: 560, height: 80, borderRadius: 14, border: `3px solid ${f >= d0 - 4 ? COR.acento : COR.linha}`, boxSizing: 'border-box',
          boxShadow: f >= d0 - 4 ? `0 0 0 6px ${COR.acentoClaro}` : undefined, fontFamily: FONTE, fontWeight: 600, fontSize: 30, lineHeight: '74px', paddingLeft: 22, color: n ? COR.tinta : '#A3A9B3', whiteSpace: 'nowrap'}}>
          {n ? modal.texto.slice(0, n) : f >= d0 - 4 ? '' : modal.placeholder}
          {f >= d0 - 4 && caret && <span style={{display: 'inline-block', width: 3, height: 36, background: COR.acento, verticalAlign: 'middle', marginLeft: 2}} />}
        </div>
        <div style={{position: 'absolute', left: 460, top: 240, width: 140, height: 56, borderRadius: 14, background: COR.acento, color: '#fff', fontFamily: FONTE, fontWeight: 700, fontSize: 24,
          display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${apertaS})`}}>{modal.botao}</div>
      </div>
    </>}
  </div>;
};