/* ============================================================
   Prêmios / Produtos — cadastro, estoque, status, foto
   ============================================================ */

function ProdutoForm({ inicial, onClose }) {
  const [nome,     setNome]     = useState(inicial ? inicial.nome               : "");
  const [descricao,setDescricao]= useState(inicial ? inicial.descricao          : "");
  const [custo,    setCusto]    = useState(inicial ? String(inicial.custoPontos) : "");
  const [estoque,  setEstoque]  = useState(inicial ? String(inicial.estoque)    : "");
  const [ativo,    setAtivo]    = useState(inicial ? inicial.ativo               : true);
  const [imagem,   setImagem]   = useState(inicial ? (inicial.imagem || "")      : "");
  const [saving,   setSaving]   = useState(false);
  const fileRef = React.useRef(null);
  const editar = !!inicial;

  function handleImagem(e) {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > 8 * 1024 * 1024) { toast("Imagem muito grande. Máximo 8 MB.", "err"); return; }
    const reader = new FileReader();
    reader.onload = (ev) => {
      const img = new Image();
      img.onload = () => {
        // Redimensiona para no máximo 600px mantendo proporção
        const MAX = 600;
        const scale = Math.min(1, MAX / Math.max(img.width, img.height));
        const canvas = document.createElement("canvas");
        canvas.width  = Math.round(img.width  * scale);
        canvas.height = Math.round(img.height * scale);
        canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);
        setImagem(canvas.toDataURL("image/jpeg", 0.82));
      };
      img.src = ev.target.result;
    };
    reader.readAsDataURL(file);
    e.target.value = ""; // permite re-selecionar o mesmo arquivo
  }

  async function salvar() {
    if (!nome.trim())         { toast("Informe o nome do prêmio.", "err"); return; }
    if (!(Number(custo) > 0)) { toast("Informe o custo em pontos.", "err"); return; }
    const payload = { nome, descricao, custoPontos: Number(custo),
      estoque: Number(estoque) || 0, ativo, imagem: imagem || null };
    setSaving(true);
    try {
      if (editar) { await DB.updateProduto(inicial.id, payload); toast("Prêmio atualizado."); }
      else        { await DB.addProduto(payload);                toast("Prêmio cadastrado."); }
      onClose();
    } catch (e) { toast(e.message, "err"); }
    finally { setSaving(false); }
  }

  return (
    <Modal title={editar ? "Editar prêmio" : "Novo prêmio"} onClose={onClose}
      footer={<>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button icon="check" onClick={salvar} disabled={saving}>{editar ? "Salvar" : "Cadastrar"}</Button>
      </>}>

      <Field label="Foto do prêmio">
        <div className="img-pick">
          {imagem ? (
            <div className="img-pick-preview">
              <img src={imagem} alt="Preview" />
              <button type="button" className="img-pick-remove" title="Remover foto"
                onClick={() => setImagem("")}>×</button>
            </div>
          ) : null}
          <button type="button" className="img-pick-zone" onClick={() => fileRef.current?.click()}
            style={imagem ? { flex: "0 0 auto", width: "auto", padding: "10px 14px", flexDirection: "row", gap: 6 } : {}}>
            <Icon name="camera" size={imagem ? 16 : 24} />
            <span>{imagem ? "Trocar foto" : "Clique para adicionar foto"}</span>
            {!imagem && <em style={{ fontSize: 11, fontStyle: "normal" }}>JPG, PNG, WEBP · máx. 8 MB</em>}
          </button>
          <input ref={fileRef} type="file" accept="image/*" onChange={handleImagem} style={{ display: "none" }} />
        </div>
      </Field>

      <Field label="Nome do prêmio" required>
        <Input value={nome} onChange={(e) => setNome(e.target.value)} placeholder="Ex.: Voucher R$ 50" autoFocus />
      </Field>
      <Field label="Descrição">
        <Textarea value={descricao} onChange={(e) => setDescricao(e.target.value)} rows={2} placeholder="Detalhes do prêmio para o cliente" />
      </Field>
      <div className="form-row">
        <Field label="Custo em pontos" required>
          <Input value={custo} onChange={(e) => setCusto(e.target.value)} inputMode="numeric" placeholder="0" />
        </Field>
        <Field label="Estoque">
          <Input value={estoque} onChange={(e) => setEstoque(e.target.value)} inputMode="numeric" placeholder="0" />
        </Field>
      </div>
      <label className="switch-row">
        <span>
          <strong>Prêmio ativo</strong>
          <em>Inativos não aparecem para resgate.</em>
        </span>
        <button type="button" className={"switch" + (ativo ? " on" : "")} onClick={() => setAtivo(!ativo)}><span /></button>
      </label>
    </Modal>
  );
}

function Premios() {
  const s = useStore();
  const [q, setQ]           = useState("");
  const [filtro, setFiltro] = useState("todos");
  const [form, setForm]     = useState(null);
  const [del,  setDel]      = useState(null);
  const [deleting, setDeleting] = useState(false);

  let lista = s.produtos.slice();
  if (q.trim()) { const t = q.toLowerCase(); lista = lista.filter((p) => p.nome.toLowerCase().includes(t)); }
  if (filtro === "ativos")   lista = lista.filter((p) =>  p.ativo);
  if (filtro === "inativos") lista = lista.filter((p) => !p.ativo);

  async function confirmarDelete() {
    setDeleting(true);
    try { await DB.removeProduto(del.id); toast("Prêmio excluído."); setDel(null); }
    catch (e) { toast(e.message, "err"); }
    finally { setDeleting(false); }
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Prêmios</h1>
          <p className="page-sub">{DB.formatNum(s.produtos.filter((p) => p.ativo).length)} ativos de {DB.formatNum(s.produtos.length)}</p>
        </div>
        <Button icon="plus" onClick={() => setForm({})}>Novo prêmio</Button>
      </div>

      <div className="toolbar">
        <SearchBox value={q} onChange={setQ} placeholder="Buscar prêmio" />
        <div className="seg">
          {[["todos", "Todos"], ["ativos", "Ativos"], ["inativos", "Inativos"]].map(([k, l]) => (
            <button key={k} className={"seg-btn" + (filtro === k ? " on" : "")} onClick={() => setFiltro(k)}>{l}</button>
          ))}
        </div>
      </div>

      {lista.length === 0 ? (
        <div className="card"><Empty icon="gift" title="Nenhum prêmio encontrado" action={<Button icon="plus" onClick={() => setForm({})}>Novo prêmio</Button>} /></div>
      ) : (
        <div className="prize-grid">
          {lista.map((p) => {
            const semEstoque = p.estoque <= 0;
            return (
              <div key={p.id} className={"prize" + (!p.ativo ? " off" : "")}>
                <div className="prize-thumb" aria-hidden="true">
                  {p.imagem
                    ? <img src={p.imagem} alt={p.nome} />
                    : <Icon name="gift" size={30} />}
                </div>
                <div className="prize-body">
                  <div className="prize-top">
                    <h4>{p.nome}</h4>
                    <StatusPill active={p.ativo} />
                  </div>
                  <p className="prize-desc">{p.descricao || "Sem descrição."}</p>
                  <div className="prize-meta">
                    <span className="prize-cost mono">{DB.formatNum(p.custoPontos)} <em>pts</em></span>
                    <span className={"prize-stock" + (semEstoque ? " out" : "")}>{semEstoque ? "Sem estoque" : DB.formatNum(p.estoque) + " em estoque"}</span>
                  </div>
                </div>
                <div className="prize-acts">
                  <Button variant="ghost" size="sm" icon="edit" onClick={() => setForm({ inicial: p })}>Editar</Button>
                  <button className="link-btn" onClick={() => DB.toggleProduto(p.id).catch((e) => toast(e.message, "err"))}>
                    {p.ativo ? "Desativar" : "Ativar"}
                  </button>
                  <button className="icon-btn danger" title="Excluir" onClick={() => setDel(p)}><Icon name="trash" size={17} /></button>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {form && <ProdutoForm inicial={form.inicial} onClose={() => setForm(null)} />}
      {del && (
        <Modal title="Excluir prêmio" onClose={() => setDel(null)}
          footer={<>
            <Button variant="ghost" onClick={() => setDel(null)}>Cancelar</Button>
            <Button variant="danger" icon="trash" onClick={confirmarDelete} disabled={deleting}>
              {deleting ? "Excluindo…" : "Excluir"}
            </Button>
          </>}>
          <p className="confirm-txt">Excluir o prêmio <strong>{del.nome}</strong>? Resgates já registrados não são afetados.</p>
        </Modal>
      )}
    </div>
  );
}

Object.assign(window, { Premios, ProdutoForm });