/* global React, lecygne */
// Catalogue & tarifs — articles, services et grille de prix (article × service).

function TarifModal({ ctx, articles, services, tarif, onClose, onSaved }) {
  const [f, setF] = React.useState(tarif
    ? { ref_article: tarif.ref_article, code_service: tarif.code_service, prix_unitaire: tarif.prix_unitaire }
    : { ref_article: "", code_service: "", prix_unitaire: "" });
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });

  async function save() {
    if (!f.ref_article || !f.code_service) { setErr("Choisir un article et un service."); return; }
    if (!(Number(f.prix_unitaire) >= 0)) { setErr("Prix invalide."); return; }
    setBusy(true); setErr("");
    const res = await lecygne.tarifs.upsert({
      ref_article: Number(f.ref_article), code_service: Number(f.code_service),
      prix_unitaire: Number(f.prix_unitaire),
      date_effet: new Date().toISOString().slice(0, 10),
    }, ctx.company.id);
    setBusy(false);
    if (res.error) setErr(res.error.message);
    else { window.lcToast("Tarif enregistré", "success"); onSaved(); onClose(); }
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2>{tarif ? "Modifier le tarif" : "Nouveau tarif"}</h2>
        <div className="grid2">
          <div><label>Article</label>
            <select className="field" value={f.ref_article} onChange={set("ref_article")} disabled={!!tarif}>
              <option value="">— Sélectionner —</option>
              {articles.map((a) => <option key={a.ref_article} value={a.ref_article}>{a.nom_article}</option>)}
            </select></div>
          <div><label>Service</label>
            <select className="field" value={f.code_service} onChange={set("code_service")} disabled={!!tarif}>
              <option value="">— Sélectionner —</option>
              {services.map((s) => <option key={s.code_service} value={s.code_service}>{s.nom_service}</option>)}
            </select></div>
        </div>
        <label>Prix unitaire ({(ctx.company && ctx.company.currency) || "XOF"})</label>
        <input className="field num" type="number" value={f.prix_unitaire} onChange={set("prix_unitaire")} />
        <p className="hint" style={{ marginTop: 6 }}>Pré-rempli automatiquement à la saisie d'une commande.</p>
        {err && <div className="auth-err">{err}</div>}
        <div className="actions">
          <button className="btn" onClick={onClose}>Annuler</button>
          <button className="btn primary" onClick={save} disabled={busy}>{busy ? "…" : "Enregistrer"}</button>
        </div>
      </div>
    </div>
  );
}

function ScreenCatalogue({ ctx }) {
  const [tab, setTab] = React.useState("articles");
  const articles = lecygne.useArticles();
  const services = lecygne.useServices();
  const tarifs = lecygne.useTarifs();
  const cur = (ctx.company && ctx.company.currency) || "XOF";
  const canManage = ctx.profile && ["gestion", "admin"].includes(ctx.profile.role);

  const artName = (ref) => { const a = (articles.data || []).find((x) => x.ref_article === ref); return a ? a.nom_article : `#${ref}`; };
  const svcName = (code) => { const s = (services.data || []).find((x) => x.code_service === code); return s ? s.nom_service : `#${code}`; };

  const [newName, setNewName] = React.useState("");
  const [tarifModal, setTarifModal] = React.useState(undefined); // undefined=fermé, null=nouveau, objet=édition
  async function removeTarif(id) {
    if (!window.confirm("Supprimer ce tarif ?")) return;
    const res = await lecygne.tarifs.remove(id);
    if (res.error) window.lcToast(res.error.message, "error");
    else { window.lcToast("Tarif supprimé", "success"); tarifs.reload(); }
  }
  async function addArticle() {
    if (!newName.trim()) return;
    const max = Math.max(0, ...(articles.data || []).map((a) => a.ref_article));
    await lecygne.articles.upsert({ ref_article: max + 1, nom_article: newName.trim() }, ctx.company.id);
    setNewName(""); articles.reload();
  }
  async function addService() {
    if (!newName.trim()) return;
    const max = Math.max(0, ...(services.data || []).map((s) => s.code_service));
    await lecygne.services.upsert({ code_service: max + 1, nom_service: newName.trim() }, ctx.company.id);
    setNewName(""); services.reload();
  }

  return (
    <div>
      <div className="topbar"><h1>Catalogue & tarifs</h1></div>
      <div className="card">
        <div className="toolbar">
          {["articles", "services", "tarifs"].map((t) => (
            <button key={t} className={"btn sm" + (tab === t ? " primary" : "")} onClick={() => setTab(t)}>
              {t === "articles" ? "Articles" : t === "services" ? "Services" : "Grille tarifaire"}
            </button>
          ))}
        </div>

        {tab === "articles" && (<>
          {canManage && (
            <div className="toolbar">
              <input className="field grow" placeholder="Nom du nouvel article…"
                value={newName} onChange={(e) => setNewName(e.target.value)} />
              <button className="btn primary" onClick={addArticle}>＋ Ajouter</button>
            </div>
          )}
          <div className="tbl-wrap"><table>
            <thead><tr><th>Réf.</th><th>Article</th><th>Actif</th></tr></thead>
            <tbody>
              {(articles.data || []).map((a) => (
                <tr key={a.ref_article}><td>{a.ref_article}</td><td>{a.nom_article}</td>
                  <td><span className={"pill " + (a.actif ? "green" : "gray")}>{a.actif ? "Oui" : "Non"}</span></td></tr>
              ))}
            </tbody>
          </table></div>
        </>)}

        {tab === "services" && (<>
          {canManage && (
            <div className="toolbar">
              <input className="field grow" placeholder="Nom du nouveau service…"
                value={newName} onChange={(e) => setNewName(e.target.value)} />
              <button className="btn primary" onClick={addService}>＋ Ajouter</button>
            </div>
          )}
          <div className="tbl-wrap"><table>
            <thead><tr><th>Code</th><th>Service</th><th>Actif</th></tr></thead>
            <tbody>
              {(services.data || []).map((s) => (
                <tr key={s.code_service}><td>{s.code_service}</td><td>{s.nom_service}</td>
                  <td><span className={"pill " + (s.actif ? "green" : "gray")}>{s.actif ? "Oui" : "Non"}</span></td></tr>
              ))}
            </tbody>
          </table></div>
        </>)}

        {tab === "tarifs" && (<>
          {canManage && (
            <div className="toolbar">
              <div className="grow" />
              <button className="btn primary" onClick={() => setTarifModal(null)}>＋ Nouveau tarif</button>
            </div>
          )}
          <div className="tbl-wrap"><table>
            <thead><tr><th>Article</th><th>Service</th><th className="right">Prix unitaire</th><th>Effet</th>{canManage && <th></th>}</tr></thead>
            <tbody>
              {(tarifs.data || []).map((t) => (
                <tr key={t.id}><td>{artName(t.ref_article)}</td><td>{svcName(t.code_service)}</td>
                  <td className="num">{lecygne.fmtAmount(t.prix_unitaire, t.devise || cur)}</td>
                  <td>{lecygne.fmtDate(t.date_effet)}</td>
                  {canManage && <td><div className="row-flex" style={{ gap: 6 }}>
                    <button className="btn sm" onClick={() => setTarifModal(t)}>Modifier</button>
                    <button className="btn sm danger" onClick={() => removeTarif(t.id)}>Supprimer</button>
                  </div></td>}</tr>
              ))}
              {!(tarifs.data || []).length &&
                <tr><td colSpan={canManage ? 5 : 4} className="empty">Aucun tarif défini. Les prix peuvent être saisis directement à la commande.</td></tr>}
            </tbody>
          </table></div>
        </>)}
      </div>

      {tarifModal !== undefined && (
        <TarifModal ctx={ctx} articles={articles.data || []} services={services.data || []}
          tarif={tarifModal} onClose={() => setTarifModal(undefined)} onSaved={() => tarifs.reload()} />
      )}
    </div>
  );
}