// CaixaPrompt: a caixa de pedido do produto. Branca, cantos 28 px, sombra macia. Placeholder cinza, botão "+"
// embaixo à esquerda (afunda no quadro `apertarMais`), botão de enviar coral à direita, atalhos em pílula embaixo.
// `digitar` + `digitarEm`: o texto entra letra a letra (1,4 quadro por letra) e troca o placeholder.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE_U, SOMBRA, TELA, e4, eb, seg} from '../base';

export type CaixaPromptProps = {
  placeholder: string; digitar?: string; digitarEm?: number; atalhos?: string[];
  x?: number; y?: number; largura?: number; inicio?: number; apertarMais?: number;
};

export const CaixaPrompt: React.FC<CaixaPromptProps> = ({placeholder, digitar, digitarEm = 0, atalhos = [], x = TELA.cx, y = 470, largura = 880, inicio = 0, apertarMais}) => {
  const f = useCurrentFrame();
  const p = e4(seg(f, inicio, inicio + 18));
  const n = digitar ? Math.floor(Math.max(0, f - digitarEm) / 1.4) : 0;
  const texto = digitar && n > 0 ? digitar.slice(0, n) : '';
  const aperto = apertarMais !== undefined ? 1 - 0.12 * Math.sin(Math.PI * seg(f, apertarMais, apertarMais + 8)) : 1;
  const realce = apertarMais !== undefined ? seg(f, apertarMais, apertarMais + 4) : 0;
  return <div style={{position: 'absolute', left: x - largura / 2, top: y, width: largura, opacity: p, transform: `translateY(${(1 - p) * 30}px)`, fontFamily: FONTE_U}}>
    <div style={{background: COR.cartao, borderRadius: 28, boxShadow: SOMBRA.cartao, border: `1.5px solid ${COR.linha}`, padding: '30px 34px 24px', height: 190, position: 'relative'}}>
      <div style={{fontSize: 30, color: texto ? COR.tinta : COR.mute, letterSpacing: '-0.005em'}}>
        {texto || placeholder}{texto && texto.length < (digitar?.length ?? 0) && <span style={{display: 'inline-block', width: 2, height: 32, background: COR.tinta, marginLeft: 3, verticalAlign: -5}} />}
      </div>
      <div style={{position: 'absolute', left: 26, bottom: 22, width: 52, height: 52, borderRadius: 14, border: `1.5px solid ${COR.linha}`,
        background: realce ? `rgba(41,38,31,${0.06 * realce})` : COR.cartao, display: 'flex', alignItems: 'center', justifyContent: 'center',
        transform: `scale(${aperto})`, fontSize: 34, color: COR.tinta, lineHeight: 1}}>+</div>
      <div style={{position: 'absolute', right: 26, bottom: 22, width: 52, height: 52, borderRadius: 14, background: COR.acento,
        opacity: 0.35 + 0.65 * (texto ? 1 : 0), display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
        <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7" stroke="#fff" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </div>
    </div>
    {atalhos.length > 0 && <div style={{display: 'flex', gap: 14, justifyContent: 'center', marginTop: 26}}>
      {atalhos.map((a, i) => {
        const q = eb(seg(f, inicio + 12 + i * 3, inicio + 26 + i * 3));
        return <div key={i} style={{fontSize: 22, color: COR.mute, padding: '10px 20px', borderRadius: 999, border: `1.5px solid ${COR.linha}`,
          background: 'rgba(255,255,255,0.6)', opacity: seg(f, inicio + 12 + i * 3, inicio + 18 + i * 3), transform: `scale(${0.9 + 0.1 * q})`}}>{a}</div>;
      })}
    </div>}
  </div>;
};