// invoice-detail.jsx — Invoice detail / view screen

const InvoiceDetail = ({ t, lang, invoiceId, onBack, onEdit }) => {
  const inv = INVOICES.find(i => i.id === invoiceId);
  if (!inv) return null;
  const client = CLIENTS.find(c => c.id === inv.clientId);
  const totals = calcInvoiceTotal(inv);
  const items = inv.items.map((it, i) => ({ ...it, id: `it-${i}` }));

  const timeline = [
    { type: "created", label: lang === "es" ? "Factura creada" : "Invoice created", date: inv.issued, by: "Andrés Morales" },
    { type: "sent", label: lang === "es" ? "Enviada al cliente" : "Sent to client", date: inv.issued, by: client.email },
    { type: "viewed", label: lang === "es" ? "Cliente vio la factura" : "Client viewed invoice", date: "2026-04-16", by: client.contact },
    ...(inv.status === "paid" ? [{ type: "paid", label: lang === "es" ? "Pago recibido" : "Payment received", date: "2026-04-22", by: lang === "es" ? "Transferencia ACH" : "ACH transfer" }] : []),
    ...(inv.status === "overdue" ? [{ type: "reminder", label: lang === "es" ? "Recordatorio enviado" : "Reminder sent", date: "2026-04-26", by: client.email }] : []),
  ];

  return (
    <div style={{ maxWidth: 1080, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
        <button className="btn ghost icon" onClick={onBack}><Icon name="arrowLeft"/></button>
        <h2 style={{ margin: 0, fontSize: 16, fontWeight: 600, fontFamily: "var(--font-mono)" }}>{inv.number}</h2>
        <StatusPill status={inv.status} t={t}/>
        <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
          <button className="btn"><Icon name="bell" size={13}/> {t("sendReminder")}</button>
          <button className="btn" onClick={onEdit}>{lang === "es" ? "Editar" : "Edit"}</button>
          <button className="btn"><Icon name="download" size={13}/> {t("download")}</button>
          {inv.status !== "paid" && <button className="btn primary"><Icon name="check" size={13}/> {t("markPaid")}</button>}
        </div>
      </div>

      <div className="row cols-2">
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {/* Summary card */}
          <div className="card">
            <div className="card-body">
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18 }}>
                <div>
                  <div style={{ fontSize: 10.5, color: "var(--fg-2)", textTransform: "uppercase", letterSpacing: 0.06, fontWeight: 600 }}>{t("amount")}</div>
                  <div style={{ fontSize: 24, fontWeight: 600, marginTop: 4, fontVariantNumeric: "tabular-nums" }}>{fmtMoney(totals.total)}</div>
                </div>
                <div>
                  <div style={{ fontSize: 10.5, color: "var(--fg-2)", textTransform: "uppercase", letterSpacing: 0.06, fontWeight: 600 }}>{t("issued")}</div>
                  <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4, fontFamily: "var(--font-mono)" }}>{inv.issued}</div>
                </div>
                <div>
                  <div style={{ fontSize: 10.5, color: "var(--fg-2)", textTransform: "uppercase", letterSpacing: 0.06, fontWeight: 600 }}>{t("due")}</div>
                  <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4, fontFamily: "var(--font-mono)", color: inv.status === "overdue" ? "var(--red)" : "var(--fg-0)" }}>{inv.due}</div>
                </div>
              </div>
            </div>
          </div>

          {/* Items table */}
          <div className="card">
            <div className="card-hd">
              <h3>{lang === "es" ? "Líneas" : "Line items"}</h3>
              <span className="subtitle">{inv.project}</span>
            </div>
            <div className="card-body flush">
              <table className="tbl">
                <thead>
                  <tr>
                    <th>{t("description")}</th>
                    <th className="right">{t("qty")}</th>
                    <th className="right">{t("rate")}</th>
                    <th className="right">{t("total")}</th>
                  </tr>
                </thead>
                <tbody>
                  {items.map(it => (
                    <tr key={it.id} style={{ cursor: "default" }}>
                      <td>{it.desc}</td>
                      <td className="num right">{it.qty}{it.type === "hr" ? " hr" : ""}</td>
                      <td className="num right">{fmtMoney(it.rate)}</td>
                      <td className="num right" style={{ fontWeight: 600 }}>{fmtMoney(it.qty * it.rate)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <div style={{ padding: "12px 16px", borderTop: "1px solid var(--line-soft)", display: "flex", justifyContent: "flex-end" }}>
                <div style={{ width: 280 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0", fontSize: 12.5 }}>
                    <span style={{ color: "var(--fg-2)" }}>{t("subtotal")}</span>
                    <span className="num">{fmtMoney(totals.sub)}</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0", fontSize: 12.5 }}>
                    <span style={{ color: "var(--fg-2)" }}>{t("tax")}</span>
                    <span className="num">{fmtMoney(totals.tax)}</span>
                  </div>
                  <div style={{ borderTop: "1px solid var(--line)", marginTop: 6, paddingTop: 8, display: "flex", justifyContent: "space-between" }}>
                    <span style={{ fontWeight: 600 }}>{t("total")}</span>
                    <span className="num" style={{ fontSize: 15, fontWeight: 600 }}>{fmtMoney(totals.total)}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Right column */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="card">
            <div className="card-hd"><h3>{t("client")}</h3></div>
            <div className="card-body">
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: client.color, display: "grid", placeItems: "center", color: "oklch(0.18 0 0)", fontWeight: 700, fontSize: 13 }}>
                  {client.name.split(" ").slice(0, 2).map(w => w[0]).join("")}
                </div>
                <div>
                  <div style={{ fontWeight: 600 }}>{client.name}</div>
                  <div style={{ fontSize: 11, color: "var(--fg-2)" }}>{client.city}</div>
                </div>
              </div>
              <div style={{ fontSize: 12, lineHeight: 1.7, color: "var(--fg-1)" }}>
                <div>{client.contact}</div>
                <div style={{ color: "var(--fg-2)" }}>{client.email}</div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-hd"><h3>{t("timeline")}</h3></div>
            <div className="card-body">
              {timeline.map((e, i) => (
                <div key={i} style={{ display: "flex", gap: 12, padding: "6px 0" }}>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                    <div style={{ width: 22, height: 22, borderRadius: 6, background: "var(--bg-2)", display: "grid", placeItems: "center", color: "var(--accent)", border: "1px solid var(--line)" }}>
                      <Icon name={{ created: "plus", sent: "send", viewed: "eye", paid: "check", reminder: "bell" }[e.type]} size={11}/>
                    </div>
                    {i < timeline.length - 1 && <div style={{ flex: 1, width: 1, background: "var(--line)", margin: "2px 0" }}/>}
                  </div>
                  <div style={{ flex: 1, paddingBottom: 10 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 500 }}>{e.label}</div>
                    <div style={{ fontSize: 11, color: "var(--fg-2)" }}>{e.by}</div>
                  </div>
                  <div style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>{e.date}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-hd"><h3>{t("notes")}</h3></div>
            <div className="card-body" style={{ fontSize: 12, color: "var(--fg-1)" }}>
              {inv.notes || <span style={{ color: "var(--fg-3)" }}>—</span>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.InvoiceDetail = InvoiceDetail;