/* Configurações — Funcionários, Praias, Empresa, Parâmetros */

function Configuracoes({ ctx }) {
  const [sub, setSub] = useState("funcionarios");
  return (
    <>
      <div className="page-head">
        <div>
          <h1>Configurações</h1>
          <p>Equipe, praias, dados da empresa e parâmetros do sistema</p>
        </div>
      </div>

      <Tabs
        items={[
          { value:"funcionarios", label:"Funcionários" },
          { value:"produtos",     label:"Produtos / Caixas" },
          { value:"armazens",     label:"Armazéns" },
          { value:"praias",       label:"Praias" },
          { value:"empresa",      label:"Dados da empresa" },
          { value:"parametros",   label:"Parâmetros" },
        ]}
        value={sub}
        onChange={setSub}
      />

      {sub === "funcionarios" && <FuncionariosTab ctx={ctx} />}
      {sub === "produtos"     && <ProdutosTab ctx={ctx} />}
      {sub === "armazens"     && <ArmazensTab ctx={ctx} />}
      {sub === "praias"       && <PraiasTab ctx={ctx} />}
      {sub === "empresa"      && <EmpresaTab ctx={ctx} />}
      {sub === "parametros"   && <ParametrosTab ctx={ctx} />}
    </>
  );
}

const ROLE_COLORS = {
  "Admin Super": { bg:"#FDECE6", fg:"#B3270A" },
  "Admin":       { bg:"#FEF3E2", fg:"#B45309" },
  "Gestor":      { bg:"#E6EEFB", fg:"#1E40AF" },
  "Operador":    { bg:"#E8F5EC", fg:"#15803D" },
  "Visualizador":{ bg:"#F4F4F5", fg:"#6B6B70" },
};

/* ====== FUNCIONÁRIOS ====== */
function FuncionariosTab({ ctx }) {
  const [editing, setEditing] = useState(null); // null | "new" | {item}
  const staff = ctx.state.staff;

  const onDelete = (s) => ctx.askConfirm({
    title: "Excluir usuário?",
    message: `Tem certeza que deseja excluir ${s.name}?`,
    detail: "Este usuário perderá acesso ao sistema imediatamente.",
    danger: true,
    onConfirm: () => ctx.actions.deleteStaff(s.id),
  });

  return (
    <>
      <div className="grid-3" style={{ marginBottom:14 }}>
        <KPI tone="brand" medal={<Icons.Users size={18} strokeWidth={2}/>} label="Total de usuários" value={staff.length+""} sub="Cadastrados no sistema" />
        <KPI tone="success" medal={<Icons.Check size={18} strokeWidth={2}/>} label="Conectados hoje" value="3" sub="Última hora: 2" />
        <KPI tone="info" medal={<Icons.Settings size={18} strokeWidth={2}/>} label="Pendentes de senha" value="0" sub="Todas configuradas" />
      </div>

      <Card title="Equipe" subtitle={`${staff.length} colaboradores`} flush
        action={<Button variant="primary" size="sm" icon={<Icons.Plus size={12}/>} onClick={() => setEditing("new")}>Novo usuário</Button>}
      >
        {staff.length === 0 ? (
          <div className="empty">
            <Icons.Users size={26} color="var(--ink-300)" />
            <h4>Nenhum usuário cadastrado</h4>
            <p>Crie o primeiro usuário para começar.</p>
          </div>
        ) : (
        <table className="tbl">
          <thead>
            <tr>
              <th>Nome</th>
              <th>E-mail</th>
              <th>WhatsApp</th>
              <th>Perfil</th>
              <th>Último acesso</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {staff.map(s => {
              const rc = ROLE_COLORS[s.role] || ROLE_COLORS["Operador"];
              return (
                <tr key={s.id}>
                  <td>
                    <div style={{ display:"flex", gap:10, alignItems:"center" }}>
                      <div className="avatar" style={{ width:28, height:28, fontSize:10, background:"linear-gradient(135deg, var(--brand-500), var(--brand-700))" }}>{s.name.split(" ").map(w => w[0]).slice(0,2).join("")}</div>
                      <span className="strong">{s.name}</span>
                    </div>
                  </td>
                  <td className="muted">{s.email}</td>
                  <td className="muted">{s.phone}</td>
                  <td>
                    <span style={{ display:"inline-flex", padding:"3px 9px", borderRadius:100, fontSize:11, fontWeight:600, background:rc.bg, color:rc.fg }}>{s.role}</span>
                  </td>
                  <td className="muted">{s.lastLogin ? fmtDate(s.lastLogin) : "—"}</td>
                  <td><Chip tone="success" dot>ativo</Chip></td>
                  <td>
                    <div style={{ display:"flex", gap:2 }}>
                      <button className="icon-btn" title="Editar" onClick={() => setEditing(s)}><Icons.Edit /></button>
                      <button className="icon-btn" title="Excluir" onClick={() => onDelete(s)}><Icons.Trash /></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        )}
      </Card>

      <div style={{ height:14 }} />

      <Card title="Perfis de acesso" subtitle="Permissões por aba — defina o que cada perfil pode ver e fazer">
        <table className="tbl" style={{ marginInline:"-20px", marginBlock:"-20px", width:"calc(100% + 40px)" }}>
          <thead>
            <tr>
              <th>Aba</th>
              <th className="text-center">Admin Super</th>
              <th className="text-center">Admin</th>
              <th className="text-center">Gestor</th>
              <th className="text-center">Operador</th>
              <th className="text-center">Visualizador</th>
            </tr>
          </thead>
          <tbody>
            {[
              { name:"Dashboard",         perms:[1,1,1,1,1] },
              { name:"Fabricação",        perms:[1,1,1,1,2] },
              { name:"PDV Distribuidores",perms:[1,1,1,1,2] },
              { name:"PDV Picolezeiros",  perms:[1,1,1,1,2] },
              { name:"Clientes",          perms:[1,1,1,1,2] },
              { name:"Estoque",           perms:[1,1,1,1,2] },
              { name:"Movimentações",     perms:[1,1,1,2,2] },
              { name:"Relatórios",        perms:[1,1,1,2,2] },
              { name:"Configurações",     perms:[1,1,0,0,0] },
              { name:"Criar/editar Admin",perms:[1,0,0,0,0] },
            ].map((r, i) => (
              <tr key={i}>
                <td className="strong">{r.name}</td>
                {r.perms.map((v, j) => (
                  <td key={j} className="text-center">
                    {v === 1 && <Icons.Check size={15} color="var(--success)" strokeWidth={2.4} />}
                    {v === 2 && <Chip>ler</Chip>}
                    {v === 0 && <Icons.X size={13} color="var(--ink-300)" />}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      {editing && (
        <StaffModal
          initial={editing === "new" ? null : editing}
          onClose={() => setEditing(null)}
          onSave={(values) => {
            if (editing === "new") ctx.actions.addStaff(values);
            else ctx.actions.updateStaff(editing.id, values);
            setEditing(null);
          }}
        />
      )}
    </>
  );
}

function StaffModal({ initial, onClose, onSave }) {
  const [name, setName] = useState(initial?.name || "");
  const [email, setEmail] = useState(initial?.email || "");
  const [phone, setPhone] = useState(initial?.phone || "");
  const [role, setRole] = useState(initial?.role || "Operador");
  const [password, setPassword] = useState(initial?.password || "");
  const [showPwd, setShowPwd] = useState(false);
  const [permissions, setPermissions] = useState(initial?.permissions || DEFAULT_PERMS_BY_ROLE[initial?.role || "Operador"] || ["dashboard"]);
  const [err, setErr] = useState({});

  const isSuperAdmin = role === "Admin Super" || (Array.isArray(permissions) && permissions.includes("*"));
  const togglePerm = (id) => {
    if (isSuperAdmin) return;
    setPermissions(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };
  const setAll = (all) => setPermissions(all ? TAB_PERMS.map(t => t.id) : []);

  /* quando o perfil muda, sugere as permissões padrão do perfil */
  const onRoleChange = (newRole) => {
    setRole(newRole);
    if (newRole === "Admin Super") setPermissions(["*"]);
    else if (DEFAULT_PERMS_BY_ROLE[newRole]) {
      const defs = DEFAULT_PERMS_BY_ROLE[newRole];
      setPermissions(defs.includes("*") ? TAB_PERMS.map(t => t.id) : defs);
    }
  };

  const genPassword = () => {
    const chars = "abcdefghijkmnpqrstuvwxyz23456789";
    let p = "";
    for (let i = 0; i < 8; i++) p += chars[Math.floor(Math.random()*chars.length)];
    setPassword(p); setShowPwd(true);
  };

  const submit = () => {
    const e = {};
    if (!name.trim()) e.name = "Informe o nome";
    if (!email.trim()) e.email = "Informe o e-mail";
    if (!role) e.role = "Selecione um perfil";
    if (!initial && (!password || password.length < 4)) e.password = "Mínimo de 4 caracteres";
    if (initial && password && password.length < 4) e.password = "Mínimo de 4 caracteres";
    if (!isSuperAdmin && permissions.length === 0) e.perms = "Selecione ao menos uma aba";
    setErr(e);
    if (Object.keys(e).length) return;
    const payload = {
      name: name.trim(), email: email.trim(), phone, role,
      permissions: isSuperAdmin ? ["*"] : permissions,
      lastLogin: initial?.lastLogin || new Date().toISOString().slice(0,10)
    };
    if (password) payload.password = password;
    onSave(payload);
  };

  return (
    <Modal title={initial ? "Editar usuário" : "Novo usuário"} subtitle={initial?.name} onClose={onClose} size="lg"
      footer={<><Button variant="ghost" onClick={onClose}>Cancelar</Button><Button variant="primary" onClick={submit}>{initial ? "Salvar alterações" : "Criar usuário"}</Button></>}>
      <div className="grid-2" style={{ gap:14 }}>
        <Field label="Nome completo" required error={err.name} style={{ gridColumn:"span 2" }}>
          <input className="input" value={name} onChange={e => setName(e.target.value)} placeholder="Ex.: João Silva" autoFocus />
        </Field>
        <Field label="E-mail (login)" required error={err.email}>
          <input className="input" value={email} onChange={e => setEmail(e.target.value)} placeholder="usuario@otalpicole.com.br" />
        </Field>
        <Field label="WhatsApp">
          <input className="input" value={phone} onChange={e => setPhone(maskPhone(e.target.value))} placeholder="(00) 00000-0000" />
        </Field>
        <Field label="Perfil de acesso" required error={err.role}>
          <select className="select" value={role} onChange={e => onRoleChange(e.target.value)}>
            <option>Admin Super</option><option>Admin</option><option>Gestor</option><option>Operador</option><option>Visualizador</option>
          </select>
        </Field>
        <Field label={initial ? "Nova senha (opcional)" : "Senha"} required={!initial} error={err.password} hint={initial ? "Deixe em branco para manter a senha atual" : "Mínimo de 4 caracteres"}>
          <div style={{ display:"flex", gap:6 }}>
            <input className="input" type={showPwd ? "text" : "password"} value={password} onChange={e => setPassword(e.target.value)} placeholder="••••••" />
            <button type="button" className="icon-btn" onClick={() => setShowPwd(s => !s)} title={showPwd?"Ocultar":"Mostrar"} style={{ border:"1px solid var(--line-strong)" }}><Icons.Eye size={14}/></button>
            <button type="button" className="btn btn--secondary btn--sm" onClick={genPassword} title="Gerar senha">Gerar</button>
          </div>
        </Field>
      </div>

      <hr className="divider" />

      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:8 }}>
        <div>
          <div style={{ fontSize:13, fontWeight:700, color:"var(--ink-900)" }}>Permissões de acesso</div>
          <div className="subtle">Marque as abas que este usuário pode acessar</div>
        </div>
        {!isSuperAdmin && (
          <div style={{ display:"flex", gap:6 }}>
            <button type="button" className="btn btn--ghost btn--sm" onClick={() => setAll(true)}>Marcar todas</button>
            <button type="button" className="btn btn--ghost btn--sm" onClick={() => setAll(false)}>Desmarcar</button>
          </div>
        )}
      </div>

      {isSuperAdmin ? (
        <div style={{ padding:"12px 14px", background:"linear-gradient(180deg,#FFF1EA,#FDE6DC)", border:"1px solid var(--brand-100)", borderRadius:10, display:"flex", gap:10, alignItems:"center" }}>
          <div style={{ width:32, height:32, borderRadius:8, background:"var(--brand-600)", color:"white", display:"flex", alignItems:"center", justifyContent:"center" }}><Icons.Star size={16}/></div>
          <div>
            <div style={{ fontWeight:700, color:"var(--brand-700)" }}>Admin Super tem acesso total</div>
            <div className="subtle">Todas as abas, inclusive criação de outros administradores.</div>
          </div>
        </div>
      ) : (
        <>
          <div className="grid-3" style={{ gap:8 }}>
            {TAB_PERMS.map(tab => {
              const on = permissions.includes(tab.id);
              return (
                <button key={tab.id} type="button" onClick={() => togglePerm(tab.id)}
                  style={{
                    padding:"9px 12px", borderRadius:8, cursor:"pointer",
                    display:"flex", alignItems:"center", gap:8, textAlign:"left",
                    border:"1px solid " + (on ? "var(--brand-600)" : "var(--line)"),
                    background: on ? "var(--brand-50)" : "white",
                    color: on ? "var(--brand-700)" : "var(--ink-700)",
                    fontSize:12.5, fontWeight:600,
                  }}>
                  <span style={{ width:16, height:16, borderRadius:4, border:"1.5px solid " + (on?"var(--brand-600)":"var(--line-strong)"), background: on?"var(--brand-600)":"white", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0 }}>
                    {on && <Icons.Check size={11} color="white" strokeWidth={3}/>}
                  </span>
                  {tab.label}
                </button>
              );
            })}
          </div>
          {err.perms && <div className="err" style={{ marginTop:8 }}>{err.perms}</div>}
        </>
      )}
    </Modal>
  );
}

/* ====== PRODUTOS / TAMANHO DE CAIXA ====== */
function ProdutosTab({ ctx }) {
  const [drafts, setDrafts] = useState({});
  const products = ctx.state.products;

  // agrupa por linha
  const lines = {};
  products.forEach(p => {
    if (!lines[p.line]) lines[p.line] = [];
    lines[p.line].push(p);
  });

  const set = (id, patch) => setDrafts(d => ({ ...d, [id]: { ...(d[id] || {}), ...patch } }));

  const current = (p, field) => {
    const d = drafts[p.id];
    if (d && d[field] != null) return d[field];
    return p[field];
  };

  const dirty = (p) => {
    const d = drafts[p.id];
    if (!d) return false;
    return Object.keys(d).some(k => d[k] !== p[k]);
  };

  const save = (p) => {
    const d = drafts[p.id];
    if (!d) return;
    const patch = {};
    if (d.boxSize != null) patch.boxSize = parseInt(d.boxSize, 10) || 1;
    if (d.price != null) patch.price = parseFloat(String(d.price).replace(",", ".")) || 0;
    ctx.actions.updateProduct(p.id, patch);
    setDrafts(prev => { const { [p.id]: _, ...rest } = prev; return rest; });
  };

  const saveAll = () => {
    Object.entries(drafts).forEach(([id, d]) => {
      const p = products.find(x => x.id === id);
      if (!p) return;
      if (!dirty(p)) return;
      save(p);
    });
  };

  const applyLineBoxSize = (line, size) => {
    const sz = parseInt(size, 10) || 60;
    products.filter(p => p.line === line).forEach(p => {
      set(p.id, { boxSize: sz });
    });
    ctx.pushToast(`${line}: ${sz} un/caixa aplicado a ${products.filter(p => p.line === line).length} produto(s)`);
  };

  const dirtyCount = Object.keys(drafts).filter(id => {
    const p = products.find(x => x.id === id);
    return p && dirty(p);
  }).length;

  return (
    <>
      <div style={{ display:"flex", gap:14, marginBottom:14, alignItems:"flex-start" }}>
        <Card title="Quantidade de unidades por caixa" subtitle="Cada produto pode ter um tamanho de caixa próprio. Distribuidores podem comprar por caixa fechada ou por unidades avulsas." style={{ flex:1 }}>
          <div style={{ display:"flex", flexDirection:"column", gap:18 }}>
            {Object.entries(lines).map(([line, list]) => {
              const sizes = [...new Set(list.map(p => current(p, "boxSize")))];
              const sharedSize = sizes.length === 1 ? sizes[0] : null;
              return (
                <div key={line}>
                  <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:10, padding:"8px 12px", background:"linear-gradient(180deg, var(--brand-50) 0%, #FFFFFF 100%)", borderRadius:8, border:"1px solid var(--brand-100)" }}>
                    <div>
                      <div style={{ fontFamily:"var(--font-display)", fontWeight:700, color:"var(--ink-900)", fontSize:14 }}>{line}</div>
                      <div className="subtle">{list.length} sabor(es){sharedSize ? " · atual: " + sharedSize + " un/cx" : " · tamanhos mistos"}</div>
                    </div>
                    <div style={{ display:"flex", gap:6, alignItems:"center" }}>
                      <span className="subtle" style={{ fontSize:11 }}>Aplicar a toda linha:</span>
                      {[20, 30, 40, 50, 60, 100].map(sz => (
                        <button key={sz} onClick={() => applyLineBoxSize(line, sz)}
                          style={{ padding:"4px 10px", borderRadius:100, fontSize:11.5, fontWeight:700, border:"1px solid var(--line-strong)", background:"white", color:"var(--ink-700)", cursor:"pointer" }}>{sz}</button>
                      ))}
                    </div>
                  </div>
                  <table className="tbl" style={{ fontSize:13 }}>
                    <thead>
                      <tr>
                        <th>Sabor</th>
                        <th className="num">Preço un. (R$)</th>
                        <th className="num">Un. por caixa</th>
                        <th className="num">Valor da caixa</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody>
                      {list.map(p => {
                        const boxSz = parseInt(current(p, "boxSize"), 10) || 1;
                        const price = parseFloat(String(current(p, "price")).replace(",", ".")) || 0;
                        const isDirty = dirty(p);
                        return (
                          <tr key={p.id}>
                            <td>
                              <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                                <span style={{ width:14, height:14, borderRadius:4, background:p.color, flexShrink:0 }} />
                                <strong>{p.flavor}</strong>
                              </div>
                            </td>
                            <td className="num">
                              <input className="input numeric" value={current(p, "price")} onChange={e => set(p.id, { price: e.target.value.replace(/[^\d.,]/g,"") })}
                                style={{ width:90, textAlign:"right", padding:"5px 8px", fontSize:12.5 }} />
                            </td>
                            <td className="num">
                              <div style={{ display:"flex", alignItems:"center", gap:4, justifyContent:"flex-end" }}>
                                <input className="input numeric" value={current(p, "boxSize")} onChange={e => set(p.id, { boxSize: e.target.value.replace(/\D/g, "") })}
                                  style={{ width:60, textAlign:"right", padding:"5px 8px", fontSize:12.5 }} />
                                <span className="muted" style={{ fontSize:11 }}>un</span>
                              </div>
                            </td>
                            <td className="num strong numeric">{fmtBRL(boxSz * price * 0.55)}</td>
                            <td>
                              {isDirty
                                ? <Button size="sm" variant="primary" icon={<Icons.Check size={12} strokeWidth={2.4}/>} onClick={() => save(p)}>Salvar</Button>
                                : <span className="subtle" style={{ fontSize:11 }}>—</span>}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              );
            })}
          </div>
          {dirtyCount > 0 && (
            <div style={{ marginTop:14, display:"flex", justifyContent:"flex-end", gap:8, alignItems:"center", padding:"10px 14px", background:"var(--brand-50)", border:"1px solid var(--brand-100)", borderRadius:8 }}>
              <span style={{ fontSize:12.5, fontWeight:600, color:"var(--brand-700)" }}>{dirtyCount} alteração(ões) pendente(s)</span>
              <Button variant="ghost" size="sm" onClick={() => setDrafts({})}>Descartar</Button>
              <Button variant="primary" size="sm" icon={<Icons.Check size={12} strokeWidth={2.4}/>} onClick={saveAll}>Salvar tudo</Button>
            </div>
          )}
        </Card>
      </div>

      <Card title="Sobre as caixas" subtitle="Como o sistema usa esse valor">
        <ul style={{ margin:0, paddingLeft:20, fontSize:13, lineHeight:1.7, color:"var(--ink-700)" }}>
          <li>O <strong>tamanho da caixa</strong> aparece em todos os comprovantes ("5 cx de 60 un") e no card do produto no PDV.</li>
          <li>No <strong>PDV Distribuidores</strong> o distribuidor pode comprar caixas fechadas (botões +1/+5/+10) <em>e/ou</em> unidades avulsas (botão +un).</li>
          <li>O <strong>estoque</strong> sempre é controlado em unidades — caixa é apenas uma forma de agrupar a venda.</li>
          <li>O preço exibido por caixa é sempre <strong>preço un. × 0,55 × unidades/caixa</strong> (55% do preço de varejo).</li>
        </ul>
      </Card>
    </>
  );
}

/* ====== PRAIAS ====== */
function PraiasTab({ ctx }) {
  const [editing, setEditing] = useState(null);
  const beaches = ctx.state.beaches;

  const onDelete = (b) => ctx.askConfirm({
    title: "Excluir praia?",
    message: `Excluir "${b.name}"?`,
    detail: "Picolezeiros vinculados a essa praia precisarão ser atualizados.",
    danger: true,
    onConfirm: () => ctx.actions.deleteBeach(b.id),
  });

  return (
    <>
      <Card title="Praias atendidas" subtitle="Locais cadastrados para operação de picolezeiros" flush
        action={<Button variant="primary" size="sm" icon={<Icons.Plus size={12}/>} onClick={() => setEditing("new")}>Nova praia</Button>}
      >
        {beaches.length === 0 ? (
          <div className="empty">
            <Icons.MapPin size={26} color="var(--ink-300)"/>
            <h4>Nenhuma praia cadastrada</h4>
            <p>Cadastre praias para que os picolezeiros possam operar.</p>
          </div>
        ) : (
        <table className="tbl">
          <thead>
            <tr>
              <th>Praia</th>
              <th>Município</th>
              <th>Observações</th>
              <th className="num">Picolezeiros</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {beaches.map(b => {
              const pics = ctx.state.picolezeiros.filter(p => p.beaches.includes(b.id)).length;
              return (
                <tr key={b.id}>
                  <td>
                    <div style={{ display:"flex", gap:8, alignItems:"center" }}>
                      <span style={{ width:30, height:30, borderRadius:6, background:"var(--brand-50)", color:"var(--brand-600)", display:"flex", alignItems:"center", justifyContent:"center" }}><Icons.MapPin size={14}/></span>
                      <span className="strong">{b.name}</span>
                    </div>
                  </td>
                  <td className="muted">{b.city}</td>
                  <td className="muted" style={{ maxWidth: 280 }}>{b.note || "—"}</td>
                  <td className="num numeric">{pics}</td>
                  <td>
                    <div style={{ display:"flex", gap:2 }}>
                      <button className="icon-btn" title="Editar" onClick={() => setEditing(b)}><Icons.Edit /></button>
                      <button className="icon-btn" title="Excluir" onClick={() => onDelete(b)}><Icons.Trash /></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        )}
      </Card>

      {editing && (
        <BeachModal initial={editing === "new" ? null : editing}
          onClose={() => setEditing(null)}
          onSave={(v) => {
            if (editing === "new") ctx.actions.addBeach(v);
            else ctx.actions.updateBeach(editing.id, v);
            setEditing(null);
          }}
        />
      )}
    </>
  );
}

function BeachModal({ initial, onClose, onSave }) {
  const [name, setName] = useState(initial?.name || "");
  const [city, setCity] = useState(initial?.city || "");
  const [note, setNote] = useState(initial?.note || "");
  const [err, setErr] = useState({});

  const submit = () => {
    const e = {};
    if (!name.trim()) e.name = "Informe o nome";
    if (!city.trim()) e.city = "Informe o município";
    setErr(e);
    if (Object.keys(e).length) return;
    onSave({ name: name.trim(), city: city.trim(), note: note.trim() });
  };

  return (
    <Modal title={initial ? "Editar praia" : "Nova praia"} subtitle={initial?.name} onClose={onClose}
      footer={<><Button variant="ghost" onClick={onClose}>Cancelar</Button><Button variant="primary" onClick={submit}>{initial ? "Salvar" : "Cadastrar"}</Button></>}>
      <div className="grid-2" style={{ gap:14 }}>
        <Field label="Nome da praia" required error={err.name}>
          <input className="input" value={name} onChange={e => setName(e.target.value)} placeholder="Ex.: Porto da Barra" autoFocus />
        </Field>
        <Field label="Município" required error={err.city}>
          <input className="input" value={city} onChange={e => setCity(e.target.value)} placeholder="Salvador" />
        </Field>
        <Field label="Observações" style={{ gridColumn:"span 2" }}>
          <textarea className="textarea" rows="3" value={note} onChange={e => setNote(e.target.value)} placeholder="Acesso, sazonalidade, observações operacionais..." />
        </Field>
      </div>
    </Modal>
  );
}

/* ====== EMPRESA ====== */
function EmpresaTab({ ctx }) {
  const [v, setV] = useState({ ...ctx.state.company });
  const dirty = JSON.stringify(v) !== JSON.stringify(ctx.state.company);
  return (
    <div className="grid-2" style={{ gap:14 }}>
      <Card title="Dados da empresa" subtitle="Informações para impressão em notas e recibos">
        <div style={{ display:"flex", flexDirection:"column", gap:14 }}>
          <Field label="Razão social"><input className="input" value={v.name} onChange={e => setV({ ...v, name: e.target.value })} /></Field>
          <div className="grid-2" style={{ gap:14 }}>
            <Field label="CNPJ"><input className="input" value={v.cnpj} onChange={e => setV({ ...v, cnpj: maskCNPJ(e.target.value) })} /></Field>
            <Field label="Inscrição estadual"><input className="input" value={v.ie} onChange={e => setV({ ...v, ie: e.target.value })} placeholder="000.000.000.000" /></Field>
          </div>
          <Field label="Endereço"><input className="input" value={v.address} onChange={e => setV({ ...v, address: e.target.value })} /></Field>
          <div className="grid-2" style={{ gap:14 }}>
            <Field label="Telefone"><input className="input" value={v.phone} onChange={e => setV({ ...v, phone: maskPhone(e.target.value) })} /></Field>
            <Field label="E-mail"><input className="input" value={v.email} onChange={e => setV({ ...v, email: e.target.value })} /></Field>
          </div>
          <div style={{ display:"flex", justifyContent:"flex-end", gap:8 }}>
            <Button variant="ghost" onClick={() => setV({ ...ctx.state.company })} disabled={!dirty}>Reverter</Button>
            <Button variant="primary" onClick={() => ctx.actions.updateCompany(v)} disabled={!dirty}>Salvar alterações</Button>
          </div>
        </div>
      </Card>

      <Card title="Identidade visual" subtitle="Logo e cores que aparecem em documentos">
        <LogoUploader v={v} onChange={setV} />

        <div style={{ marginTop:18 }}>
          <SectionHead title="Paleta da marca" />
          <div className="grid-4" style={{ gap: 8 }}>
            {[
              { name:"Brand", hex:"#D4310B", rgb:"212·49·11" },
              { name:"Ink",   hex:"#333333", rgb:"51·51·51" },
              { name:"Gray",  hex:"#A3A3A6", rgb:"163·163·166" },
              { name:"Light", hex:"#F0F0F0", rgb:"240·240·240" },
            ].map(c => (
              <div key={c.hex} style={{ border:"1px solid var(--line)", borderRadius:8, overflow:"hidden" }}>
                <div style={{ height:48, background: c.hex }} />
                <div style={{ padding:"8px 10px" }}>
                  <div style={{ fontSize:11.5, fontWeight:700, color:"var(--ink-900)" }}>{c.name}</div>
                  <div className="mono subtle" style={{ fontSize:10.5 }}>{c.hex}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  );
}

function LogoUploader({ v, onChange }) {
  const [dragOver, setDragOver] = useState(false);
  const isPdf = v.logo && /^data:application\/pdf/i.test(v.logo);

  const handleFile = async (file) => {
    if (!file) return;
    const okType = file.type.startsWith("image/") || file.type === "application/pdf";
    if (!okType) { alert("Selecione uma imagem (PNG, JPG, SVG, WebP) ou PDF."); return; }
    if (file.size > 2 * 1024 * 1024) { alert("Arquivo muito grande. Máximo 2 MB."); return; }
    const dataUrl = await readFileAsDataURL(file);
    onChange({ ...v, logo: dataUrl });
  };
  const pick = async () => {
    const f = await pickFile("image/png,image/jpeg,image/svg+xml,image/webp,application/pdf");
    if (f) handleFile(f);
  };
  const onDrop = (e) => {
    e.preventDefault(); setDragOver(false);
    const f = e.dataTransfer.files && e.dataTransfer.files[0];
    if (f) handleFile(f);
  };

  return (
    <div
      onDragOver={(e)=>{e.preventDefault(); setDragOver(true);}}
      onDragLeave={()=>setDragOver(false)}
      onDrop={onDrop}
      style={{
        background: dragOver ? "var(--brand-50)" : "var(--canvas)",
        border: "2px dashed " + (dragOver ? "var(--brand-600)" : "var(--line-strong)"),
        borderRadius:12, padding:24,
        display:"flex", flexDirection:"column", alignItems:"center", gap: 14,
        transition:"all .15s",
      }}>
      {v.logo ? (
        isPdf ? (
          <div style={{ position:"relative", padding: 6, display:"flex", flexDirection:"column", alignItems:"center", gap:10 }}>
            <iframe src={v.logo} title="Logo PDF"
              style={{ width:160, height:200, border:"1px solid var(--line)", borderRadius:8, background:"white", boxShadow:"var(--sh-2)" }} />
            <div style={{ display:"flex", alignItems:"center", gap:6, fontSize:11.5, color:"var(--ink-500)" }}>
              <Icons.Receipt size={12}/> Arquivo PDF
              <a href={v.logo} target="_blank" rel="noreferrer"
                 style={{ color:"var(--brand-600)", fontWeight:600, textDecoration:"none" }}>Abrir</a>
            </div>
          </div>
        ) : (
          <div style={{ position:"relative", padding: 6 }}>
            <img src={v.logo} alt="Logo" style={{ width:120, height:120, objectFit:"contain", borderRadius:12, background:"white", padding:8, boxShadow:"var(--sh-2)" }} />
          </div>
        )
      ) : (
        <Logo size={92} />
      )}
      <div style={{ textAlign:"center" }}>
        <div style={{ fontFamily:"var(--font-display)", fontSize:22, fontWeight:700, letterSpacing:"-.02em", color:"var(--ink-900)" }}>{v.name}</div>
        <div className="subtle" style={{ marginTop:4, letterSpacing:".14em", textTransform:"uppercase", fontWeight:600 }}>Sorveteria Artesanal</div>
      </div>
      <div style={{ display:"flex", gap:8 }}>
        <Button variant="primary" size="sm" icon={<Icons.Download size={12} style={{ transform:"rotate(180deg)" }}/>} onClick={pick}>
          {v.logo ? "Trocar logo" : "Enviar logo"}
        </Button>
        {v.logo && (
          <Button variant="secondary" size="sm" icon={<Icons.Trash size={12}/>} onClick={() => onChange({ ...v, logo: "" })}>Remover</Button>
        )}
      </div>
      <div className="subtle" style={{ textAlign:"center", maxWidth: 340, fontSize: 11.5 }}>
        Arraste e solte um arquivo aqui, ou clique para escolher. Aceita PNG, JPG, SVG, WebP ou PDF até 2 MB.
        Imagens aparecem em comprovantes e documentos. Arquivos PDF são armazenados como referência de identidade visual.
      </div>
    </div>
  );
}

/* ====== PARÂMETROS ====== */
function ParametrosTab({ ctx }) {
  const [v, setV] = useState({ ...ctx.state.settings });
  const dirty = JSON.stringify(v) !== JSON.stringify(ctx.state.settings);

  const toggleMethod = (m) => {
    const on = v.methods.includes(m);
    setV({ ...v, methods: on ? v.methods.filter(x => x !== m) : [...v.methods, m] });
  };

  return (
    <div className="grid-2" style={{ gap:14 }}>
      <Card title="Comissão de picolezeiros" subtitle="Aplicada como padrão. Pode ser sobrescrita por picolezeiro.">
        <div style={{ display:"flex", alignItems:"baseline", gap:10, marginBottom:14 }}>
          <input className="input numeric" value={v.commission} onChange={e => { const n = parseInt(e.target.value || "0", 10); setV({ ...v, commission: Math.max(0, Math.min(100, isNaN(n)?0:n)) }); }}
            style={{ width:120, fontSize:32, fontWeight:700, padding:"8px 14px", fontFamily:"var(--font-display)" }} />
          <strong style={{ fontSize:22, color:"var(--ink-400)" }}>%</strong>
          <span className="muted" style={{ fontSize:12.5, marginLeft:"auto" }}>sobre valor faturado</span>
        </div>
        <input type="range" min="0" max="100" value={v.commission} onChange={e => setV({ ...v, commission: parseInt(e.target.value, 10) })} style={{ width:"100%", accentColor:"var(--brand-600)" }} />
        <div style={{ display:"flex", justifyContent:"space-between", fontSize:11, color:"var(--ink-400)", marginTop:4 }}>
          <span>0%</span><span>50%</span><span>100%</span>
        </div>
        <div className="subtle" style={{ marginTop:8, fontSize:11.5 }}>
          Esta é a comissão-padrão. Você pode definir um valor específico para cada picolezeiro no cadastro em Clientes → Picolezeiros.
        </div>

        <hr className="divider" />

        <Field label="Política de divergência" hint="Comportamento quando valor entregue diverge do calculado">
          <select className="select" value={v.divergencePolicy} onChange={e => setV({ ...v, divergencePolicy: e.target.value })}>
            <option value="warn">Avisar e exigir justificativa</option>
            <option value="block">Bloquear fechamento</option>
            <option value="ignore">Ignorar e fechar normalmente</option>
          </select>
        </Field>
      </Card>

      <Card title="Formas de pagamento aceitas" subtitle="Disponíveis no PDV de distribuidores">
        <div style={{ display:"flex", flexWrap:"wrap", gap:8 }}>
          {["PIX","Dinheiro","Cartão","Cartão de Débito","Boleto 7d","Boleto 14d","Prazo 30d","Prazo 60d"].map(m => {
            const on = v.methods.includes(m);
            return (
              <button key={m}
                onClick={() => toggleMethod(m)}
                style={{
                  padding:"8px 14px", borderRadius:100, fontSize:12.5, fontWeight:600,
                  border:"1px solid " + (on ? "var(--brand-600)" : "var(--line-strong)"),
                  background: on ? "var(--brand-50)" : "white",
                  color: on ? "var(--brand-700)" : "var(--ink-700)",
                  cursor:"pointer", display:"inline-flex", gap:6, alignItems:"center"
                }}
              >
                {on && <Icons.Check size={12} strokeWidth={2.4}/>}
                {m}
              </button>
            );
          })}
        </div>

        <hr className="divider" />

        <SectionHead title="Outras regras" />
        <div style={{ display:"flex", flexDirection:"column", gap:10 }}>
          <ToggleRow label="Confirmação para exclusões" hint="Pedir confirmação ao excluir registros" value={v.confirmDelete} onChange={x => setV({ ...v, confirmDelete: x })} />
          <ToggleRow label="Alerta de estoque mínimo" hint="Notificar quando insumo ou sabor estiver abaixo do mínimo" value={v.alertLowStock} onChange={x => setV({ ...v, alertLowStock: x })} />
          <ToggleRow label="Alerta de validade próxima" hint="Avisar 60 dias antes da validade do lote" value={v.alertExpiring} onChange={x => setV({ ...v, alertExpiring: x })} />
          <ToggleRow label="Log de auditoria" hint="Registrar todas as ações relevantes para auditoria" value={v.auditLog} onChange={x => setV({ ...v, auditLog: x })} />
        </div>

        <div style={{ display:"flex", justifyContent:"flex-end", gap:8, marginTop:18 }}>
          <Button variant="ghost" onClick={() => setV({ ...ctx.state.settings })} disabled={!dirty}>Reverter</Button>
          <Button variant="primary" onClick={() => ctx.actions.updateSettings(v)} disabled={!dirty}>Salvar parâmetros</Button>
        </div>
      </Card>
    </div>
  );
}

function ToggleRow({ label, hint, value, onChange }) {
  return (
    <div style={{ display:"flex", alignItems:"center", gap:14, padding:"8px 0", borderTop:"1px solid var(--line)" }}>
      <div style={{ flex:1 }}>
        <div style={{ fontSize:13, fontWeight:600, color:"var(--ink-900)" }}>{label}</div>
        <div className="subtle">{hint}</div>
      </div>
      <button onClick={() => onChange(!value)}
        style={{
          width:38, height:22, borderRadius:100, border:"none",
          background: value ? "var(--brand-600)" : "var(--ink-200)",
          position:"relative", cursor:"pointer", transition:"background .15s"
        }}>
        <span style={{ position:"absolute", top:2, left: value ? 18 : 2, width:18, height:18, borderRadius:100, background:"white", boxShadow:"var(--sh-1)", transition:"left .15s" }} />
      </button>
    </div>
  );
}

/* ====== Field masks ====== */
function maskPhone(v) {
  const d = v.replace(/\D/g, "").slice(0, 11);
  if (d.length <= 2) return d;
  if (d.length <= 7) return `(${d.slice(0,2)}) ${d.slice(2)}`;
  if (d.length <= 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`;
  return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;
}
function maskCPF(v) {
  const d = v.replace(/\D/g, "").slice(0, 11);
  return d.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1-$2");
}
function maskCNPJ(v) {
  const d = v.replace(/\D/g, "").slice(0, 14);
  return d.replace(/^(\d{2})(\d)/, "$1.$2").replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3").replace(/\.(\d{3})(\d)/, ".$1/$2").replace(/(\d{4})(\d)/, "$1-$2");
}
function maskCEP(v) {
  const d = v.replace(/\D/g, "").slice(0, 8);
  return d.replace(/^(\d{5})(\d)/, "$1-$2");
}
function maskBRL(v) {
  const d = (v + "").replace(/\D/g, "");
  const n = parseInt(d || "0", 10) / 100;
  return n.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

/* ====== ARMAZÉNS ====== */
function ArmazensTab({ ctx }) {
  const [editing, setEditing] = useState(null); // null | "new" | wh
  const [name, setName] = useState("");
  const [note, setNote] = useState("");

  const openNew = () => { setName(""); setNote(""); setEditing("new"); };
  const openEdit = (w) => { setName(w.name); setNote(w.note || ""); setEditing(w); };

  const submit = () => {
    if (!name.trim()) return;
    if (editing === "new") ctx.actions.createWarehouse({ name, note });
    else ctx.actions.renameWarehouse(editing.id, { name: name.trim(), note });
    setEditing(null);
  };

  const remove = (w) => ctx.askConfirm({
    title: "Excluir armazém?",
    message: `O armazém "${w.name}" será removido. Esta ação não afeta os movimentos históricos já registrados.`,
    danger: true,
    onConfirm: () => ctx.actions.deleteWarehouse(w.id),
  });

  return (
    <>
      <Card title="Armazéns" subtitle="Os armazéns 'Distribuidores' e 'Picolezeiros' são do sistema e abastecem automaticamente seus respectivos PDVs." flush
        action={<Button variant="primary" size="sm" icon={<Icons.Plus size={12}/>} onClick={openNew}>Novo armazém</Button>}
      >
        <table className="tbl">
          <thead>
            <tr>
              <th>Nome</th>
              <th>Tipo</th>
              <th>Observação</th>
              <th className="num">Sabores com estoque</th>
              <th className="num">Unidades</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {ctx.state.warehouses.map(w => {
              const rows = ctx.state.stock.filter(s => s.warehouseId === w.id);
              const units = rows.reduce((sm, r) => sm + r.units, 0);
              const sabors = rows.filter(r => r.units > 0).length;
              return (
                <tr key={w.id}>
                  <td><strong>{w.name}</strong></td>
                  <td>
                    {w.system
                      ? <Chip tone="info" dot>sistema</Chip>
                      : <Chip tone="neutral" dot>customizado</Chip>}
                  </td>
                  <td className="muted">{w.note || "—"}</td>
                  <td className="num numeric muted">{sabors}</td>
                  <td className="num strong numeric">{fmtInt(units)}</td>
                  <td>
                    <div style={{ display:"flex", gap:2 }}>
                      <button className="icon-btn" title="Editar" onClick={() => openEdit(w)}><Icons.Edit /></button>
                      {!w.system && (
                        <button className="icon-btn" title="Excluir" onClick={() => remove(w)}><Icons.Trash /></button>
                      )}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>

      {editing && (
        <Modal title={editing === "new" ? "Novo armazém" : "Editar armazém"} onClose={() => setEditing(null)}
          footer={<><Button variant="ghost" onClick={() => setEditing(null)}>Cancelar</Button><Button variant="primary" onClick={submit}>Salvar</Button></>}
        >
          <div style={{ display:"flex", flexDirection:"column", gap:14 }}>
            <Field label="Nome" required>
              <input className="input" value={name} onChange={e => setName(e.target.value)} autoFocus />
            </Field>
            <Field label="Observação" hint="Para que serve este armazém (opcional)">
              <input className="input" value={note} onChange={e => setNote(e.target.value)} />
            </Field>
          </div>
        </Modal>
      )}
    </>
  );
}

window.Configuracoes = Configuracoes;
window.maskPhone = maskPhone;
window.maskCPF = maskCPF;
window.maskCNPJ = maskCNPJ;
window.maskCEP = maskCEP;
window.maskBRL = maskBRL;