// Shared invoice detail — machine à états visible : brouillon → finalisée (scellée)
// → payée/en retard. Mentions 2026, totaux ventilés par taux, avoir.
// Works in the phone frame (full-width) and the web dashboard dialog.
// window.OryzeShared.InvoiceDetail
(function () {
  const { Card, Amount, Button, Avatar, InvoiceLineRow, StatusTimeline, StatusBadge } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;
  const BADGE = window.OryzeInvoiceBadge;

  const CATEGORY_LABEL = { biens: "Biens", services: "Services", mixte: "Mixte (biens + services)" };
  const lbl = { fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" };

  function InvoiceDetail({ inv, onBack, onClose }) {
    const [relanced, setRelanced] = React.useState(false);
    const calc = window.OryzeInvoiceCalc(inv);
    const b = BADGE[inv.status] || BADGE.due;
    const isDraft = inv.status === "draft";
    const sealed = !isDraft;
    const seller = window.OryzeSeller;
    const client = (window.OryzeClients || []).find((c) => c.label === inv.who) || {};
    const clientAddress = client.address;
    const clientEmail = client.email;
    // Mentions légales (BR-FR-05) — texte standard, surcharge par facture via inv.mentions
    const mentions = ["PMT", "PMD", "AAB"].map((k) => ({ ...window.OryzeMentions[k], text: (inv.mentions && inv.mentions[k]) || window.OryzeMentions[k].text }));

    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={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)", fontStyle: inv.numberPending ? "italic" : "normal" }}>
              {inv.numberPending ? "n° attribué à la finalisation" : inv.id}
            </div>
            <div style={{ fontWeight: 700, fontSize: 19, letterSpacing: "-0.02em" }}>{inv.who}</div>
          </div>
          <StatusBadge status={b.status} label={b.label} />
        </div>

        {/* Document — en-tête façon facture : émetteur (via Oryze), destinataire, mentions 2026 */}
        <Card variant="flat" padding="18px">
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 14 }}>
            {/* Emplacement logo — uploadé par l'utilisateur (réglages > identité de facturation) */}
            <div style={{ width: 116, height: 40, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2, border: "var(--border-thin) dashed var(--oryze-ink-20)", borderRadius: "var(--radius-sm)", background: "var(--surface-sunken)", cursor: "pointer", flex: "none" }} title="Ajouter le logo de votre entreprise">
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-subtle)", fontWeight: 600 }}>Votre logo</span>
              <span style={{ fontSize: 9.5, color: "var(--text-subtle)" }}>PNG · SVG</span>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 700 }}>Facture</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text-muted)", marginTop: 2, fontStyle: inv.numberPending ? "italic" : "normal" }}>{inv.numberPending ? "n° à la finalisation" : inv.id}</div>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 14, paddingTop: 14, borderTop: "var(--border-thin) solid var(--line-keyline)" }}>
            <div style={{ minWidth: 0 }}>
              <div style={lbl}>Émetteur</div>
              <div style={{ fontSize: 13.5, fontWeight: 700, marginTop: 4 }}>{seller.name}</div>
              <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 2, lineHeight: 1.45 }}>{seller.address}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)", marginTop: 3 }}>SIREN {seller.siren}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)" }}>TVA {seller.tvaIntra}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)" }}>{seller.email}</div>
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={lbl}>Facturé à</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4 }}>
                <Avatar initials={inv.init} tone={inv.tone} size={26} />
                <div style={{ fontSize: 13.5, fontWeight: 700 }}>{inv.who}</div>
              </div>
              {clientAddress && <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 3, lineHeight: 1.45 }}>{clientAddress}</div>}
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)", marginTop: 3 }}>SIREN {inv.siren || "—"}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: clientEmail ? "var(--text-muted)" : "var(--text-subtle)", fontStyle: clientEmail ? "normal" : "italic" }}>{clientEmail || "courriel à renseigner — requis"}</div>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 20px", marginTop: 14, paddingTop: 13, borderTop: "1px solid var(--line-divider)" }}>
            <div><div style={lbl}>Émission</div><div style={{ fontFamily: "var(--font-mono)", fontSize: 13, marginTop: 3 }}>{inv.issued}</div></div>
            <div><div style={lbl}>Échéance</div><div style={{ fontFamily: "var(--font-mono)", fontSize: 13, marginTop: 3, color: inv.status === "late" ? "var(--fin-negative)" : "var(--text-strong)" }}>{inv.due}</div></div>
            <div><div style={lbl}>Catégorie d'opération</div><div style={{ fontSize: 13, marginTop: 3 }}>{CATEGORY_LABEL[inv.category] || <span style={{ color: "var(--text-subtle)", fontStyle: "italic" }}>à renseigner</span>}</div></div>
            <div><div style={lbl}>Exigibilité TVA</div><div style={{ fontSize: 13, marginTop: 3 }}>{inv.vatOnDebits ? "D'après les débits" : "Encaissements (défaut)"}</div></div>
            {inv.delivery && <div style={{ gridColumn: "1 / -1" }}><div style={lbl}>Livraison</div><div style={{ fontSize: 13, marginTop: 3 }}>{inv.delivery}</div></div>}
          </div>

          {/* Mentions légales — structurelles (BR-FR-05), jamais optionnelles */}
          <div style={{ marginTop: 14, paddingTop: 12, borderTop: "1px solid var(--line-divider)" }}>
            <div style={{ ...lbl, marginBottom: 8 }}>Mentions légales</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {mentions.map((m) => (
                <div key={m.code} style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.08em", color: "var(--text-subtle)", border: "1px solid var(--line-divider)", borderRadius: 4, padding: "1px 5px", flex: "none" }}>{m.code}</span>
                  <span style={{ fontSize: 11.5, color: "var(--text-muted)", lineHeight: 1.45, minWidth: 0 }}>{m.text}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: "4px 12px", marginTop: 14, paddingTop: 10, borderTop: "1px solid var(--line-divider)", fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--text-subtle)" }}>
            <span>Document préparé avec Oryze · oryze.app</span>
            <span style={{ letterSpacing: "0.06em", whiteSpace: "nowrap" }} title="Structure conforme EN 16931 + référentiel français (BR-FR)">Profil Factur-X FR</span>
          </div>
        </Card>

        {/* Lines — taux par ligne */}
        <Card variant="flat" padding="16px">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 36px 50px 76px 88px", gap: 8, paddingBottom: 8, borderBottom: "var(--border-thin) solid var(--line-keyline)" }}>
            {["Désignation", "Qté", "TVA", "PU HT", "Total HT"].map((h, i) => (
              <div key={i} style={{ ...lbl, minWidth: 0, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "clip", textAlign: i === 0 ? "left" : "right" }}>{h}</div>
            ))}
          </div>
          {inv.lines.map((l, i) => (
            <InvoiceLineRow key={i} designation={l.designation} qty={l.qty} unitPrice={l.unitPrice} tvaRate={l.tvaRate === undefined ? 0.2 : l.tvaRate} />
          ))}

          {/* Totals — ventilés par taux */}
          <div style={{ display: "flex", flexDirection: "column", gap: 7, marginTop: 14, marginLeft: "auto", width: 240 }}>
            <Row k="Total HT" v={<Amount value={calc.ht} size="sm" weight={500} />} />
            {calc.rates.map((r) => (
              <Row key={r.rate} k={`TVA ${(r.rate * 100).toLocaleString("fr-FR")} %`} v={<Amount value={r.tva} size="sm" weight={500} tone="muted" />} />
            ))}
            <div style={{ height: 1, background: "var(--line-keyline)", margin: "3px 0" }} />
            <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>

          {/* Immutabilité — machine à états */}
          {sealed && (
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14, paddingTop: 11, borderTop: "1px solid var(--line-divider)", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-subtle)" }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: "none" }}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              Finalisée le {inv.issued} — document scellé, toute correction passe par un avoir
            </div>
          )}
        </Card>

        {/* Timeline */}
        <Card variant="flat" padding="16px">
          <div style={{ ...lbl, marginBottom: 12 }}>Suivi</div>
          <StatusTimeline steps={inv.timeline} />
        </Card>

        {/* Actions */}
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          {inv.status === "late" && (
            relanced
              ? <Button variant="secondary" size="md" iconLeft={<Ic.check size={16} />} disabled style={{ flex: 1 }}>Relance envoyée</Button>
              : <Button size="md" iconLeft={<Ic.send size={16} />} onClick={() => setRelanced(true)} style={{ flex: 1 }}>Relancer le client</Button>
          )}
          {(inv.status === "late" || inv.status === "due") && (
            <Button variant="secondary" size="md" iconLeft={<Ic.check size={16} />} style={{ flex: 1 }}>Marquer payée</Button>
          )}
          {isDraft && (
            <Button size="md" iconLeft={<Ic.check size={16} />} style={{ flex: 1 }}>Finaliser</Button>
          )}
          {sealed && (
            <Button variant="ghost" size="md" iconLeft={<Ic.file size={16} />}>Créer un avoir</Button>
          )}
          <Button variant="ghost" size="md" iconLeft={<Ic.download size={16} />}>Télécharger</Button>
        </div>
      </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.InvoiceDetail = InvoiceDetail;
})();