// Shared relance sequence detail — facture, séquence (timeline), message prêt
// (éditable) au niveau suggéré, envoi. Works in phone frame + web dialog.
// window.OryzeShared.RelanceDetail
(function () {
  const { Card, Amount, Tag, Button, Avatar, StatusTimeline, SegmentedControl, MessageTemplate } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;
  const LEVELS = window.OryzeRelanceLevels;

  function RelanceDetail({ rel, onBack, onClose }) {
    const inv = (window.OryzeInvoices || []).find((i) => i.id === rel.invoiceId) || {};
    const calc = window.OryzeInvoiceCalc(inv);
    const [level, setLevel] = React.useState(rel.next || "r1");
    const msg0 = window.OryzeRelanceMessage(rel, level);
    const [subject, setSubject] = React.useState(msg0.subject);
    const [body, setBody] = React.useState(msg0.body);
    const [phase, setPhase] = React.useState("idle"); // idle | sending | sent
    const [sentAt, setSentAt] = React.useState(null);
    function todayFR() { const d = new Date(); return String(d.getDate()).padStart(2, "0") + "/" + String(d.getMonth() + 1).padStart(2, "0"); }
    // Envoi explicite = pattern commande (canal e-mail MOCK en v1). Jamais d'envoi silencieux ni automatique.
    function send() { setPhase("sending"); setTimeout(() => { setPhase("sent"); setSentAt(todayFR()); }, 900); }

    // re-seed message when level changes
    React.useEffect(() => {
      const m = window.OryzeRelanceMessage(rel, level);
      setSubject(m.subject); setBody(m.body); setPhase("idle"); setSentAt(null);
    }, [level]);

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

    // niveaux disponibles : jusqu'au suivant max
    const order = LEVELS.map((l) => l.key);
    const maxIdx = order.indexOf(rel.next || "r1");
    const choices = LEVELS.slice(0, maxIdx + 1).map((l) => ({ value: l.key, label: l.label }));

    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>
          )}
          <Avatar initials={inv.init} tone={inv.tone} size={42} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{inv.id}</div>
            <div style={{ fontWeight: 700, fontSize: 19, letterSpacing: "-0.02em" }}>{inv.who}</div>
          </div>
          {rel.priority === "late"
            ? <Tag tone="overdue" dot>Retard {rel.overdueDays} j</Tag>
            : <Tag tone="due" dot>Échéance {(inv.due || "").slice(0, 5)}</Tag>}
        </div>

        {/* Montant dû */}
        <Card variant="flat" padding="16px" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={lbl}>Montant dû</span>
          <Amount value={calc.ht} size="lg" />
        </Card>

        {/* Séquence */}
        <Card variant="flat" padding="16px">
          <div style={{ ...lbl, marginBottom: 12 }}>Séquence de relance</div>
          <StatusTimeline steps={rel.sequence.map((s) => ({ label: s.label, date: s.date, state: s.state }))} />
        </Card>

        {/* Message prêt */}
        <div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 10 }}>
            <span style={lbl}>Message préparé</span>
            {choices.length > 1 && (
              <SegmentedControl size="sm" value={level} onChange={setLevel} options={choices} />
            )}
          </div>
          <MessageTemplate
            templateName={"Modèle · " + (msg.levelLabel || "Relance")}
            tone={msg.tone}
            subject={subject} body={body}
            onSubjectChange={setSubject} onBodyChange={setBody}
          />
          <div style={{ fontSize: 12, color: "var(--text-subtle)", marginTop: 8 }}>
            On a préparé ce message à partir de la facture. Modifiez-le, puis envoyez quand vous voulez.
          </div>
        </div>

        {/* Actions — l'envoi est une action explicite de l'utilisateur ; canal e-mail MOCK en v1 */}
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ display: "flex", gap: 10 }}>
            {phase === "sent" ? (
              <Button variant="secondary" size="md" iconLeft={<Ic.check size={16} />} disabled style={{ flex: 1 }}>Envoyée le {sentAt}</Button>
            ) : (
              <Button size="md" loading={phase === "sending"} iconLeft={<Ic.send size={16} />} onClick={send} style={{ flex: 1 }}>
                {phase === "sending" ? "Envoi…" : "Envoyer la relance"}
              </Button>
            )}
            <Button variant="ghost" size="md" iconLeft={<Ic.clock size={16} />} disabled={phase === "sent"}>Programmer</Button>
          </div>
          {phase === "sent" && (
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-subtle)", display: "flex", alignItems: "center", gap: 6 }}>
              <Ic.check size={13} /> Tracée · {sentAt} · {inv.who} · {msg.levelLabel}
            </div>
          )}
        </div>
      </div>
    );
  }

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