// Shared expense detail — marchand, montant HT/TVA/TTC, catégorie (modifiable),
// justificatif, catégorisation auto. Works in phone frame + web dialog.
// window.OryzeShared.ExpenseDetail
(function () {
  const { Card, Amount, Tag, Button, Select, ReceiptThumb } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;
  const CATS = window.OryzeExpenseCats;

  function ExpenseDetail({ exp, onBack, onClose }) {
    const [cat, setCat] = React.useState(exp.cat);
    const [confirmed, setConfirmed] = React.useState(exp.auto);
    const calc = window.OryzeExpenseCalc(exp);
    const c = CATS[cat] || CATS.fixe;
    const CatIcon = Ic[c.icon] || Ic.receipt;

    const lbl = { fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" };

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {/* Header */}
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          {onBack && (
            <button onClick={onBack} aria-label="Retour" style={{ width: 36, height: 36, flex: "none", display: "inline-flex", alignItems: "center", justifyContent: "center", border: "var(--border-thin) solid var(--line-keyline)", borderRadius: "var(--radius-md)", background: "var(--surface-card)", cursor: "pointer", color: "var(--text-body)" }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6" /></svg>
            </button>
          )}
          <div style={{ width: 44, height: 44, flex: "none", borderRadius: "var(--radius-md)", background: c.color, border: "var(--border-thin) solid var(--line-keyline)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-strong)" }}>
            <CatIcon size={20} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{exp.id}</div>
            <div style={{ fontWeight: 700, fontSize: 19, letterSpacing: "-0.02em" }}>{exp.merchant}</div>
          </div>
          <Amount value={-calc.ttc} size="lg" tone="negative" />
        </div>

        {/* Auto-categorisation banner (à confirmer) */}
        {!confirmed && (
          <Card variant="flat" padding="14px" style={{ border: "var(--border-key) solid var(--line-keyline)", boxShadow: "3px 3px 0 0 var(--oryze-mint)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--oryze-mint)", border: "1px solid var(--line-keyline)" }} />
              <span style={lbl}>Catégorisation</span>
            </div>
            <div style={{ fontSize: 14, color: "var(--text-body)", marginBottom: 12 }}>
              On a proposé <strong>{(CATS[exp.suggestedCat] || c).label}</strong> pour cette dépense. On confirme ?
            </div>
            <div style={{ display: "flex", gap: 10 }}>
              <Button size="sm" iconLeft={<Ic.check size={15} />} onClick={() => { setCat(exp.suggestedCat || cat); setConfirmed(true); }}>Confirmer</Button>
              <Button size="sm" variant="ghost">Changer</Button>
            </div>
          </Card>
        )}

        {/* Montants */}
        <Card variant="flat" padding="16px">
          <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
            <Row k="Date" v={<span style={{ fontFamily: "var(--font-mono)", fontSize: 14 }}>{exp.date}</span>} />
            <div style={{ height: 1, background: "var(--line-divider)" }} />
            <Row k="Montant HT" v={<Amount value={calc.ht} size="sm" weight={500} />} />
            <Row k={`TVA ${Math.round(calc.rate * 100)} %`} v={<Amount value={calc.tva} size="sm" weight={500} tone="muted" />} />
            <div style={{ height: 1, background: "var(--line-keyline)" }} />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span style={{ fontWeight: 700, fontSize: 14, whiteSpace: "nowrap" }}>Total TTC</span>
              <Amount value={calc.ttc} size="lg" />
            </div>
          </div>
        </Card>

        {/* Catégorie modifiable */}
        <Card variant="flat" padding="16px">
          <div style={{ ...lbl, marginBottom: 10 }}>Catégorie</div>
          <Select value={cat} onChange={(e) => setCat(e.target.value)}
            options={Object.keys(CATS).map((k) => ({ value: k, label: CATS[k].label }))} />
        </Card>

        {/* Justificatif */}
        <Card variant="flat" padding="16px" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
          <ReceiptThumb state={exp.receipt} label="Justificatif" />
          {exp.receipt === "attached"
            ? <Button size="sm" variant="ghost" iconLeft={<Ic.download size={15} />}>Voir</Button>
            : <Button size="sm" variant="secondary" iconLeft={<Ic.plus size={15} />}>Ajouter</Button>}
        </Card>
      </div>
    );
  }

  function Row({ k, v }) {
    return (
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span style={{ fontSize: 13, color: "var(--text-muted)", whiteSpace: "nowrap" }}>{k}</span>
        {v}
      </div>
    );
  }

  window.OryzeShared = window.OryzeShared || {};
  window.OryzeShared.ExpenseDetail = ExpenseDetail;
})();