/* ============================================================
   EDUCARE — Estúdio de Flashcards
   ============================================================ */
(function () {
  const { useState, useRef } = React;
  const Icon = window.Icon;

  function Flashcards() {
    const [tipo, setTipo] = useState("Imagem + Texto");
    const [perSheet, setPerSheet] = useState("8 por folha");
    const [cards, setCards] = useState([{ id: 1, word: "" }, { id: 2, word: "" }, { id: 3, word: "" }, { id: 4, word: "" }]);
    const nextId = useRef(5);

    function add() { setCards((c) => [...c, { id: nextId.current++, word: "" }]); }
    function remove(id) { setCards((c) => c.filter((x) => x.id !== id)); }
    function setWord(id, w) { setCards((c) => c.map((x) => x.id === id ? { ...x, word: w } : x)); }

    const showImg = tipo !== "Só texto";
    const showText = tipo !== "Só imagem";

    return (
      <>
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> <span className="cur">Flashcards</span></div>
        <div className="page-head">
          <div>
            <h1><Icon name="layers" size={26} /> Estúdio de Flashcards</h1>
            <p className="sub">Suba suas imagens, monte o material em segundos e gere o PDF pronto para impressão.</p>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <button className="btn btn-ghost btn-sm" onClick={add}><Icon name="plus" size={16} /> Adicionar cartão</button>
            <button className="btn btn-primary btn-sm" onClick={() => window.print()}><Icon name="fileText" size={16} /> Imprimir cartões</button>
          </div>
        </div>

        <p className="fc-tip"><Icon name="help" size={15} /> Dica: na impressão, desmarque "Cabeçalhos e rodapés" para um corte perfeito.</p>

        <div className="fc-controls">
          <div className="fld">
            <label>Tipo</label>
            <select className="ctrl" value={tipo} onChange={(e) => setTipo(e.target.value)}>
              <option>Imagem + Texto</option><option>Só imagem</option><option>Só texto</option>
            </select>
          </div>
          <div className="fld">
            <label>Cartões por folha</label>
            <select className="ctrl" value={perSheet} onChange={(e) => setPerSheet(e.target.value)}>
              <option>4 por folha</option><option>6 por folha</option><option>8 por folha</option><option>9 por folha</option>
            </select>
          </div>
        </div>

        <div className="fc-grid">
          {cards.map((c) => (
            <div className="fc-card" key={c.id}>
              <div className="fc-bar">
                <span><Icon name="layers" size={13} /> Cartão</span>
                <button onClick={() => remove(c.id)}><Icon name="x" size={13} /> Excluir</button>
              </div>
              {showImg && (
                <image-slot id={`fc-${c.id}`} shape="rect" placeholder="Suba uma imagem"></image-slot>
              )}
              {showText && (
                <div className="fc-word">
                  <input value={c.word} onChange={(e) => setWord(c.id, e.target.value)} placeholder="Digite a palavra..." />
                  <Icon name="fileText" size={15} style={{ color: "var(--text-3)" }} />
                </div>
              )}
            </div>
          ))}
          <button className="fc-add" onClick={add}>
            <span className="fa-ic"><Icon name="plus" size={20} /></span>
            Adicionar cartão
          </button>
        </div>
      </>
    );
  }

  window.Flashcards = Flashcards;
})();