/* Retours — Analyse des retours par produit (taux, raison, coût) */

const RETURN_REASONS = [
  { id: "defect",    label: "Défaut produit",     tone: "red"   },
  { id: "wrong",     label: "Mauvais article",    tone: "amber" },
  { id: "unwanted",  label: "Plus voulu",          tone: "muted" },
  { id: "damaged",   label: "Endommagé transit",  tone: "red"   },
  { id: "size",      label: "Taille incorrecte",  tone: "amber" },
];

// Derive synthetic return data from PRODUCTS
function buildReturns() {
  return PRODUCTS.filter(p => p.vel > 0).map((p, i) => {
    const baseRate = 2 + ((p.id.charCodeAt(p.id.length - 1) % 7));
    const ordersM = p.vel * 30;
    const returnsM = Math.round(ordersM * baseRate / 100);
    const reason = RETURN_REASONS[i % RETURN_REASONS.length];
    const refundCost = returnsM * (p.price * 0.6); // cost = ~60% of price (logistics + restock)
    return {
      id: p.id,
      asin: p.asin,
      name: p.name,
      cat: p.cat,
      owner: p.owner,
      ordersM,
      returnsM,
      rate: baseRate,
      reason,
      refundCost: Math.round(refundCost),
    };
  });
}

// User-created/edited returns (in addition to the synthetic ones derived from PRODUCTS)
const EXTRA_RETURNS = [];
// Deleted return IDs (kept out of the rendered list)
const RETURN_DELETIONS = new Set();

const RETURN_NOTES_KEY = "kcc_return_notes_v1";
function loadReturnNotes() {
  try { return JSON.parse(localStorage.getItem(RETURN_NOTES_KEY) || "{}"); } catch (_) { return {}; }
}
function saveReturnNote(id, patch) {
  const all = loadReturnNotes();
  all[id] = { ...(all[id] || {}), ...patch };
  localStorage.setItem(RETURN_NOTES_KEY, JSON.stringify(all));
  return all;
}

const Returns = () => {
  const [, force] = useState(0);
  const toast = (window.useToast || (() => () => {}))();
  const trashHook = (window.useKCCTrash || (() => ({ items: [], send: async () => {} })))();

  const data = [...buildReturns(), ...EXTRA_RETURNS].filter(r => !RETURN_DELETIONS.has(r.id));
  const [reasonFilter, setReasonFilter] = useState("all");
  const [sortBy, setSortBy] = useState("rate");
  const [notes, setNotes] = useState(loadReturnNotes);
  const [newOpen, setNewOpen] = useState(false);
  const [draft, setDraft] = useState({ product: "", reason: "defect", asin: "", amount: 0, status: "open" });

  const updateNote = (id, patch) => setNotes(saveReturnNote(id, patch));

  const create = async () => {
    if (!draft.product?.trim()) return;
    const id = "ret-" + Date.now().toString(36);
    const reasonMeta = RETURN_REASONS.find(r => r.id === draft.reason) || RETURN_REASONS[0];
    const amt = Number(draft.amount) || 0;
    const fresh = {
      id,
      name: draft.product.trim(),
      product: draft.product.trim(),
      asin: draft.asin.trim() || "—",
      cat: "—",
      owner: "clarens",
      ordersM: 0,
      returnsM: 1,
      rate: 0,
      reason: reasonMeta,
      refundCost: amt,
      amount: amt,
      status: draft.status,
    };
    EXTRA_RETURNS.push(fresh);
    setNewOpen(false);
    setDraft({ product: "", reason: "defect", asin: "", amount: 0, status: "open" });
    force(x => x + 1);
    try {
      await fetch("/api/sync", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ col: "returns", items: [fresh] }),
      });
    } catch (_) {}
    toast?.({ message: "Retour ajouté", tone: "green" });
  };

  const deleteReturn = async (target) => {
    if (!target) return;
    if (!window.confirm(`Mettre le retour "${target.name || target.product}" à la corbeille ?`)) return;
    RETURN_DELETIONS.add(target.id);
    const idx = EXTRA_RETURNS.findIndex(r => r.id === target.id);
    if (idx >= 0) EXTRA_RETURNS.splice(idx, 1);
    await trashHook.send("returns", target);
    force(x => x + 1);
    toast?.({ message: "Retour → corbeille", tone: "muted" });
  };

  const filtered = data
    .filter(r => reasonFilter === "all" || r.reason.id === reasonFilter)
    .sort((a, b) => b[sortBy] - a[sortBy]);

  const totalReturns = data.reduce((a, b) => a + b.returnsM, 0);
  const totalOrders = data.reduce((a, b) => a + b.ordersM, 0);
  const avgRate = totalOrders ? (totalReturns / totalOrders * 100) : 0;
  const totalCost = data.reduce((a, b) => a + b.refundCost, 0);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Retours</div>
          <div className="page-sub">
            {totalReturns} retours / {totalOrders.toLocaleString()} commandes (30j) ·
            {" "}taux global {avgRate.toFixed(1)}% · coût total ${totalCost.toLocaleString()}
          </div>
        </div>
        <button className="btn" data-variant="primary" onClick={() => setNewOpen(true)}>
          <Icon name="plus" size={13}/> Nouveau retour
        </button>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 14 }}>
        <div className="card" style={{ padding: 14 }}>
          <div style={{ fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Taux retour 30j</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4, color: avgRate > 5 ? "var(--red)" : avgRate > 3 ? "var(--amber)" : "var(--green)" }}>
            {avgRate.toFixed(1)}%
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--text-faint)", marginTop: 2 }}>Cible: &lt; 3%</div>
        </div>
        <div className="card" style={{ padding: 14 }}>
          <div style={{ fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Retours totaux</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>{totalReturns}</div>
        </div>
        <div className="card" style={{ padding: 14 }}>
          <div style={{ fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Coût total</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4, color: "var(--red)" }}>
            ${totalCost.toLocaleString()}
          </div>
        </div>
        <div className="card" style={{ padding: 14 }}>
          <div style={{ fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Pire produit</div>
          <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {[...data].sort((a, b) => b.rate - a.rate)[0]?.name.slice(0, 30) + "…"}
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--red)", marginTop: 2 }}>
            {[...data].sort((a, b) => b.rate - a.rate)[0]?.rate}% retours
          </div>
        </div>
      </div>

      <div className="row" style={{ gap: 6, marginBottom: 12, flexWrap: "wrap" }}>
        <button className="btn" data-variant={reasonFilter === "all" ? "primary" : "ghost"} onClick={() => setReasonFilter("all")}>
          Toutes raisons · {data.length}
        </button>
        {RETURN_REASONS.map(r => (
          <button
            key={r.id}
            className="btn"
            data-variant={reasonFilter === r.id ? "primary" : "ghost"}
            onClick={() => setReasonFilter(r.id)}
          >
            <Badge tone={r.tone} dot />
            {r.label} · {data.filter(d => d.reason.id === r.id).length}
          </button>
        ))}
      </div>

      <div className="card" style={{ padding: 0, overflow: "auto" }}>
        <table className="table">
          <thead>
            <tr>
              <th>Produit</th>
              <th>ASIN</th>
              <th>Catégorie</th>
              <th style={{ textAlign: "right", cursor: "pointer" }} onClick={() => setSortBy("ordersM")}>Commandes 30j</th>
              <th style={{ textAlign: "right", cursor: "pointer" }} onClick={() => setSortBy("returnsM")}>Retours 30j</th>
              <th style={{ textAlign: "right", cursor: "pointer" }} onClick={() => setSortBy("rate")}>Taux %</th>
              <th>Raison principale</th>
              <th style={{ textAlign: "right", cursor: "pointer" }} onClick={() => setSortBy("refundCost")}>Coût total</th>
              <th>Notes</th>
              <th>Owner</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(r => {
              const override = notes[r.id]?.reasonOverride;
              const reason = override
                ? (RETURN_REASONS.find(x => x.id === override) || r.reason)
                : r.reason;
              return (
              <tr key={r.id}>
                <td style={{ maxWidth: 240, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.name}</td>
                <td><Asin value={r.asin} /></td>
                <td className="muted" style={{ fontSize: 11.5 }}>{r.cat}</td>
                <td className="mono" style={{ textAlign: "right" }}>{r.ordersM.toLocaleString()}</td>
                <td className="mono" style={{ textAlign: "right" }}>{r.returnsM}</td>
                <td className="mono" style={{ textAlign: "right", fontWeight: 600, color: r.rate > 5 ? "var(--red)" : r.rate > 3 ? "var(--amber)" : "var(--green)" }}>
                  {r.rate}%
                </td>
                <td>
                  <EditableField
                    value={reason.id}
                    onSave={(v) => updateNote(r.id, { reasonOverride: v })}
                    options={RETURN_REASONS.map(x => ({ value: x.id, label: x.label }))}
                    format={(v) => {
                      const rx = RETURN_REASONS.find(x => x.id === v) || reason;
                      return <Badge tone={rx.tone} dot>{rx.label}</Badge>;
                    }}
                    width={150}
                  />
                </td>
                <td className="mono" style={{ textAlign: "right", color: "var(--red)" }}>${r.refundCost.toLocaleString()}</td>
                <td>
                  <EditableArea
                    value={notes[r.id]?.note || ""}
                    onSave={(v) => updateNote(r.id, { note: v })}
                    placeholder="Notes investigation…"
                    rows={2}
                  />
                </td>
                <td><span className="row" style={{ gap: 6 }}><Avatar user={r.owner} size="sm" /><span style={{ textTransform: "capitalize", fontSize: 12 }}>{r.owner}</span></span></td>
                <td>
                  <button
                    className="btn" data-variant="ghost" data-size="sm"
                    title="Mettre à la corbeille"
                    onClick={() => deleteReturn(r)}
                    style={{ color: "var(--red)" }}
                  >
                    <Icon name="x" size={11}/>
                  </button>
                </td>
              </tr>
              );
            })}
            {filtered.length === 0 && (
              <tr><td colSpan={11} style={{ textAlign: "center", padding: 30, color: "var(--text-faint)" }}>
                Aucun retour — clique « + Nouveau retour » pour en créer un.
              </td></tr>
            )}
          </tbody>
        </table>
      </div>

      {newOpen && (
        <div onClick={() => setNewOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", zIndex: 9999, display: "grid", placeItems: "center" }}>
          <div className="card" onClick={(e) => e.stopPropagation()} style={{ width: 480, padding: 20 }}>
            <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>Nouveau retour</div>
            <div className="stack" style={{ gap: 10 }}>
              <div>
                <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 4 }}>Produit *</div>
                <div className="input" style={{ height: 32, padding: "0 10px" }}>
                  <input autoFocus value={draft.product} onChange={(e) => setDraft(d => ({ ...d, product: e.target.value }))} placeholder="Nom du produit" style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 12.5 }}/>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 4 }}>ASIN</div>
                <div className="input" style={{ height: 32, padding: "0 10px" }}>
                  <input value={draft.asin} onChange={(e) => setDraft(d => ({ ...d, asin: e.target.value }))} placeholder="B0XXXXX" style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 12.5 }}/>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 4 }}>Raison</div>
                <select value={draft.reason} onChange={(e) => setDraft(d => ({ ...d, reason: e.target.value }))} className="input" style={{ height: 32, width: "100%" }}>
                  {RETURN_REASONS.map(r => <option key={r.id} value={r.id}>{r.label}</option>)}
                </select>
              </div>
              <div className="row" style={{ gap: 8 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 4 }}>Montant $</div>
                  <div className="input" style={{ height: 32, padding: "0 10px" }}>
                    <input type="number" value={draft.amount} onChange={(e) => setDraft(d => ({ ...d, amount: e.target.value }))} style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 12.5 }}/>
                  </div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 4 }}>Statut</div>
                  <select value={draft.status} onChange={(e) => setDraft(d => ({ ...d, status: e.target.value }))} className="input" style={{ height: 32, width: "100%" }}>
                    <option value="open">Ouvert</option>
                    <option value="processing">En traitement</option>
                    <option value="resolved">Résolu</option>
                  </select>
                </div>
              </div>
            </div>
            <div className="row" style={{ marginTop: 16, justifyContent: "flex-end", gap: 8 }}>
              <button className="btn" onClick={() => setNewOpen(false)}>Annuler</button>
              <button className="btn" data-variant="primary" onClick={create} disabled={!draft.product.trim()}>Créer</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.Returns = Returns;