/* global React, Icon, MemberFilter, portalApi */

const BILLING_STATUS = {
  paid:    { label: "Paid",    chipClass: "chip-success", dotColor: "var(--success-500)" },
  partial: { label: "Partial", chipClass: "chip-warning", dotColor: "var(--warning-500)" },
  unpaid:  { label: "Unpaid",  chipClass: "chip-info",    dotColor: "var(--info-500)" },
};

function fmt(n) {
  return "AED " + Number(n).toLocaleString("en-AE");
}

function PayNowModal({ invoice, onClose }) {
  const [method, setMethod] = React.useState("card");
  const [paying, setPaying] = React.useState(false);
  const [done, setDone]     = React.useState(false);

  const handlePay = () => {
    setPaying(true);
    setTimeout(() => { setPaying(false); setDone(true); }, 1600);
  };

  if (done) {
    return (
      <>
        <div className="scrim" onClick={onClose} />
        <div className="modal" role="dialog" aria-modal="true">
          <div style={{ padding: "48px 32px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
            <div style={{ width: 56, height: 56, borderRadius: 999, background: "var(--success-50)", color: "var(--success-700)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="check" size={28} />
            </div>
            <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>Payment successful</h2>
            <p style={{ margin: 0, color: "var(--fg-3)", fontSize: 14, maxWidth: 320 }}>
              {fmt(invoice.outstanding)} received for <b style={{ color: "var(--fg-1)" }}>{invoice.service}</b>. A receipt has been sent to your email.
            </p>
            <button className="btn btn-primary" style={{ marginTop: 8 }} onClick={onClose}>Done</button>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <div className="scrim" onClick={onClose} />
      <div className="modal" role="dialog" aria-modal="true">
        <div className="modal-head">
          <div>
            <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.16em", fontWeight: 600, color: "var(--brand-burgundy)", marginBottom: 4 }}>
              {invoice.id}
            </div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Pay now</h2>
          </div>
          <button className="icon-btn" onClick={onClose} style={{ border: "1px solid var(--border-subtle)", borderRadius: 6 }}>
            <Icon name="x" size={18} />
          </button>
        </div>

        <div className="modal-body">
          {/* Amount summary */}
          <div style={{ background: "var(--plum-50)", border: "1px solid var(--plum-200)", borderRadius: 10, padding: "16px 20px" }}>
            <div style={{ fontSize: 13, color: "var(--fg-3)", marginBottom: 4 }}>{invoice.service}</div>
            <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--brand-burgundy)" }}>
              {fmt(invoice.outstanding)}
            </div>
            {invoice.status === "partial" && (
              <div style={{ fontSize: 12.5, color: "var(--fg-3)", marginTop: 4 }}>
                Outstanding balance · {fmt(invoice.paid)} already paid of {fmt(invoice.total)}
              </div>
            )}
          </div>

          {/* Invoice breakdown */}
          <div>
            <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600, color: "var(--fg-3)", marginBottom: 10 }}>Invoice breakdown</div>
            <div style={{ border: "1px solid var(--border-subtle)", borderRadius: 8, overflow: "hidden" }}>
              {invoice.items.map((item, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: i < invoice.items.length - 1 ? "1px solid var(--border-subtle)" : 0, fontSize: 13.5 }}>
                  <span style={{ color: "var(--fg-2)" }}>{item.desc}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontWeight: 500 }}>{fmt(item.amount)}</span>
                </div>
              ))}
              <div style={{ display: "flex", justifyContent: "space-between", padding: "12px 14px", background: "var(--ink-50)", fontSize: 14, fontWeight: 600, borderTop: "2px solid var(--border-subtle)" }}>
                <span>Total due</span>
                <span style={{ fontFamily: "var(--font-mono)", color: "var(--brand-burgundy)" }}>{fmt(invoice.outstanding)}</span>
              </div>
            </div>
          </div>

          {/* Payment method */}
          <div>
            <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600, color: "var(--fg-3)", marginBottom: 10 }}>Payment method</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                { id: "card",     label: "Credit or debit card",  icon: "credit-card",     sub: "Visa, Mastercard, Amex" },
                { id: "transfer", label: "Bank transfer",          icon: "landmark",         sub: "UAE local transfer, 1–2 days" },
              ].map(m => (
                <div key={m.id} onClick={() => setMethod(m.id)} style={{
                  display: "flex", alignItems: "center", gap: 12, padding: "12px 14px",
                  border: "1px solid", borderRadius: 8, cursor: "pointer",
                  borderColor: method === m.id ? "var(--brand-burgundy)" : "var(--border-subtle)",
                  background: method === m.id ? "var(--plum-50)" : "#fff",
                }}>
                  <div style={{ width: 36, height: 36, borderRadius: 8, background: method === m.id ? "var(--brand-burgundy)" : "var(--ink-100)", color: method === m.id ? "#fff" : "var(--fg-3)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name={m.icon} size={17} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 500 }}>{m.label}</div>
                    <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{m.sub}</div>
                  </div>
                  <div style={{ width: 18, height: 18, borderRadius: 999, border: "2px solid", borderColor: method === m.id ? "var(--brand-burgundy)" : "var(--border-strong)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    {method === m.id && <div style={{ width: 8, height: 8, borderRadius: 999, background: "var(--brand-burgundy)" }} />}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {method === "card" && (
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="field">
                <label>Card number</label>
                <input placeholder="1234 5678 9012 3456" style={{ fontFamily: "var(--font-mono)", letterSpacing: "0.06em" }} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div className="field"><label>Expiry</label><input placeholder="MM / YY" /></div>
                <div className="field"><label>CVV</label><input placeholder="···" /></div>
              </div>
              <div className="field"><label>Name on card</label><input placeholder="Mohammed Al-Rashid" /></div>
            </div>
          )}

          {method === "transfer" && (
            <div style={{ background: "var(--ink-50)", border: "1px solid var(--border-subtle)", borderRadius: 8, padding: "14px 16px" }}>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600, color: "var(--fg-3)", marginBottom: 10 }}>Bank details</div>
              {[
                ["Bank",        "Emirates NBD"],
                ["Account name","Smash Companies House LLC"],
                ["IBAN",        "AE07 0260 0010 0234 5678 901"],
                ["Reference",   invoice.id],
              ].map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", fontSize: 13, padding: "5px 0", borderBottom: "1px solid var(--border-subtle)" }}>
                  <span style={{ color: "var(--fg-3)" }}>{k}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontWeight: 500 }}>{v}</span>
                </div>
              ))}
              <div style={{ fontSize: 12.5, color: "var(--fg-3)", marginTop: 10 }}>
                Please use the reference above. We'll confirm receipt within 1–2 working days.
              </div>
            </div>
          )}

          <div className="modal-footer">
            <button className="btn btn-secondary" onClick={onClose} disabled={paying}>Cancel</button>
            <button className="btn btn-primary" onClick={handlePay} disabled={paying} style={{ opacity: paying ? 0.75 : 1 }}>
              {paying
                ? <><Icon name="loader" size={14} />Processing…</>
                : <><Icon name="lock" size={14} />{method === "transfer" ? "I have transferred" : `Pay ${fmt(invoice.outstanding)}`}</>
              }
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

function BillingPage({ user = {} }) {
  const [filter, setFilter]           = React.useState("all");
  const [memberFilter, setMemberFilter] = React.useState("all");
  const [payInvoice, setPayInvoice]   = React.useState(null);
  const [invoices, setInvoices]       = React.useState([]);
  const [loading, setLoading]         = React.useState(true);
  const isOrg = user.type === "organisation";

  React.useEffect(() => {
    portalApi.get("/payments")
      .then(res => setInvoices((res.data || []).map(portalApi.map.payment)))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const orgMembers      = isOrg ? [...new Set(invoices.map(i => i.member).filter(Boolean))] : [];
  const memberFiltered  = isOrg && memberFilter !== "all"
    ? invoices.filter(i => i.member === memberFilter)
    : invoices;
  const filtered        = filter === "all" ? memberFiltered : memberFiltered.filter(i => i.status === filter);

  const totalPaid        = memberFiltered.reduce((s, i) => s + i.paid, 0);
  const totalOutstanding = memberFiltered.reduce((s, i) => s + i.outstanding, 0);
  const unpaidCount      = memberFiltered.filter(i => i.status !== "paid").length;

  return (
    <>
    <div className="container" style={{ paddingTop: 32, paddingBottom: 64 }}>

      {/* Header */}
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 24 }}>
        <div>
          <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.18em", fontWeight: 600, color: "var(--brand-burgundy)", marginBottom: 4 }}>
            Finance
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 34, fontWeight: 600, letterSpacing: "-0.02em", margin: 0 }}>
            Billing
          </h1>
          <div style={{ fontSize: 14, color: "var(--fg-3)", marginTop: 4 }}>
            Your invoices and payment history.
          </div>
        </div>
        <button className="btn btn-secondary" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <Icon name="download" size={14} />Download all
        </button>
      </div>

      {/* Summary cards */}
      <div className="resp-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 28 }}>
        {[
          { label: "Total paid",       value: fmt(totalPaid),        icon: "check-circle",  color: "var(--success-700)" },
          { label: "Outstanding",      value: fmt(totalOutstanding),  icon: "clock",         color: totalOutstanding > 0 ? "var(--warning-700)" : "var(--fg-3)" },
          { label: "Open invoices",    value: unpaidCount,            icon: "file-text",     color: unpaidCount > 0 ? "var(--info-700)" : "var(--fg-3)" },
        ].map((k, i) => (
          <div key={i} className="pcard pcard-pad" style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--plum-50)", color: k.color, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name={k.icon} size={20} />
            </div>
            <div>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em" }}>{k.value}</div>
              <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{k.label}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Outstanding alert */}
      {totalOutstanding > 0 && (
        <div style={{ background: "var(--warning-50)", border: "1px solid var(--warning-500)", borderRadius: 10, padding: "14px 20px", marginBottom: 24, display: "flex", alignItems: "center", gap: 12 }}>
          <Icon name="alert-triangle" size={18} />
          <div style={{ flex: 1, fontSize: 13.5, color: "var(--warning-700)", fontWeight: 500 }}>
            You have {fmt(totalOutstanding)} outstanding across {unpaidCount} invoice{unpaidCount !== 1 ? "s" : ""}.
          </div>
          <button className="btn btn-primary" style={{ fontSize: 13, padding: "7px 14px" }}
            onClick={() => setPayInvoice(invoices.find(i => i.status !== "paid"))}>
            Pay now
          </button>
        </div>
      )}

      {isOrg && <MemberFilter members={orgMembers} value={memberFilter} onChange={(m) => { setMemberFilter(m); setFilter("all"); }} />}

      {/* Filter tabs */}
      <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--border-subtle)", marginBottom: 16 }}>
        {[["all","All invoices",memberFiltered.length], ["partial","Partial",memberFiltered.filter(i=>i.status==="partial").length], ["unpaid","Unpaid",memberFiltered.filter(i=>i.status==="unpaid").length], ["paid","Paid",memberFiltered.filter(i=>i.status==="paid").length]].map(([id, label, count]) => (
          <button key={id} onClick={() => setFilter(id)} style={{
            background: "transparent", border: 0, padding: "10px 16px", cursor: "pointer",
            fontSize: 13.5, fontFamily: "inherit", fontWeight: filter === id ? 600 : 500,
            color: filter === id ? "var(--brand-burgundy)" : "var(--fg-2)",
            borderBottom: filter === id ? "2px solid var(--brand-burgundy)" : "2px solid transparent",
            marginBottom: -1,
          }}>
            {label} <span style={{ marginLeft: 4, fontSize: 12, color: "var(--fg-3)" }}>{count}</span>
          </button>
        ))}
      </div>

      {/* Invoice cards */}
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {filtered.map(inv => {
          const sm = BILLING_STATUS[inv.status];
          const canPay = inv.status !== "paid";
          return (
            <div key={inv.id} className="pcard" style={{ padding: 0, overflow: "hidden" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 20px" }}>
                {/* Service icon */}
                <div style={{ width: 44, height: 44, borderRadius: 10, background: "var(--plum-50)", color: "var(--brand-burgundy)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name={inv.icon} size={22} />
                </div>

                {/* Info */}
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 2 }}>
                    <div style={{ fontWeight: 600, fontSize: 14.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{inv.service}</div>
                    <span className={"chip " + sm.chipClass} style={{ flexShrink: 0 }}>
                      <span className="dot" style={{ background: sm.dotColor }} />{sm.label}
                    </span>
                  </div>
                  <div style={{ fontSize: 12, color: "var(--fg-3)", display: "flex", gap: 10, fontFamily: "var(--font-mono)", flexWrap: "wrap" }}>
                    <span>{inv.id}</span>
                    <span>·</span>
                    <span>Issued {inv.issued}</span>
                    <span>·</span>
                    <span style={{ color: canPay ? "var(--warning-700)" : "var(--fg-3)" }}>Due {inv.due}</span>
                    {isOrg && inv.member && <><span>·</span><span style={{ fontFamily: "var(--font-sans)", color: "var(--brand-burgundy)", fontWeight: 600 }}>{inv.member}</span></>}
                  </div>
                </div>

                {/* Amounts */}
                <div style={{ textAlign: "right", flexShrink: 0 }}>
                  <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em", fontFamily: "var(--font-mono)", color: canPay ? "var(--warning-700)" : "var(--success-700)" }}>
                    {canPay ? fmt(inv.outstanding) : fmt(inv.total)}
                  </div>
                  <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 2 }}>
                    {canPay ? `of ${fmt(inv.total)} total` : "Paid in full"}
                  </div>
                </div>

                {/* Actions */}
                <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
                  <button className="btn btn-secondary" style={{ fontSize: 13, padding: "7px 12px" }}>
                    <Icon name="download" size={13} />PDF
                  </button>
                  {canPay && (
                    <button className="btn btn-primary" style={{ fontSize: 13, padding: "7px 14px" }}
                      onClick={() => setPayInvoice(inv)}>
                      <Icon name="credit-card" size={13} />Pay now
                    </button>
                  )}
                </div>
              </div>

              {/* Line items */}
              <div style={{ borderTop: "1px solid var(--border-subtle)", background: "var(--ink-50)" }}>
                {inv.items.map((item, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "8px 20px", borderBottom: i < inv.items.length - 1 ? "1px solid var(--border-subtle)" : 0, fontSize: 13 }}>
                    <span style={{ color: "var(--fg-3)" }}>{item.desc}</span>
                    <span style={{ fontFamily: "var(--font-mono)", color: "var(--fg-2)" }}>{fmt(item.amount)}</span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>

    {payInvoice && <PayNowModal invoice={payInvoice} onClose={() => setPayInvoice(null)} />}
    </>
  );
}

Object.assign(window, { BillingPage });