// Screen: Billing — subscription, credits, payment, invoice, tax.

const BillingScreen = ({ data, setData, openModal }) => {
  return (
    <div className="hx-screen">
      <ScreenHeader
        icon={<IconCard size={20}/>}
        title="Billing & Credits"
        subtitle={<>View subscription usage, manage payment methods, and download invoices. <a href="#" className="hx-link">Learn more.</a></>}
      />

      <Banner tone="info" icon={<IconInfo size={16}/>}>
        Workspace usage charts and script analytics are available in <a className="hx-link" href="#" onClick={(e)=>{e.preventDefault(); window.__nav && window.__nav("analytics")}}>Analytics</a>.
      </Banner>

      <div className="hx-card-grid hx-3">
        <Card>
          <div className="hx-stat-h">
            <div className="hx-stat-title">Monthly spend</div>
          </div>
          <div className="hx-stat-sub">Subscription charges, script credits, and overages.</div>
          <div className="hx-stat-num">${data.monthlySpend.toFixed(2)}</div>
          <div className="hx-stat-cap">Current monthly spend</div>
          <Btn kind="primary" onClick={() => window.__nav && window.__nav("invoice-usage")}>See current monthly invoice usage</Btn>
        </Card>

        <Card>
          <div className="hx-stat-h">
            <div className="hx-stat-title">Credit balance</div>
          </div>
          <div className="hx-stat-sub">Available run credits in your account <IconInfo size={13} style={{color:"var(--muted-2)", verticalAlign:"-2px"}}/></div>
          <div className="hx-stat-num" style={{color: "var(--good)"}}>{data.credits}</div>
          <div className="hx-stat-cap">Runs remaining</div>
          <Btn kind="primary" icon={<IconPlus size={14}/>} onClick={() => openModal("addCredits")}>Add credits</Btn>
        </Card>

        <Card>
          <div className="hx-stat-h">
            <div className="hx-stat-title">Auto-recharge</div>
            <Toggle checked={data.autoRecharge} onChange={(v) => setData(d => ({...d, autoRecharge: v}))}/>
          </div>
          <div className="hx-stat-sub">Allow automatic credit purchases when balance reaches the threshold.</div>
          <div className="hx-stat-rows">
            <div><span className="hx-k">When balance falls below</span><span className="hx-v">{data.autoRechargeThreshold} credits</span></div>
            <div><span className="hx-k">Recharge by</span><span className="hx-v">{data.autoRechargeAmount} credits</span></div>
          </div>
          <Btn kind="primary" onClick={() => openModal("autoRecharge")}>Set thresholds</Btn>
        </Card>

        <Card>
          <div className="hx-stat-h">
            <div className="hx-stat-title">Payment Method</div>
          </div>
          <div className="hx-stat-sub">Usage pauses automatically at $0.</div>
          <div className="hx-payment-row">
            <span className="hx-pm-card"><IconCard size={16}/> {data.paymentMethod.brand} <span className="hx-pm-dots">•••• •••• •••• {data.paymentMethod.last4}</span></span>
            <button className="hx-icon-btn" onClick={() => openModal("editPayment")} aria-label="Edit payment method"><IconPencil size={14}/></button>
          </div>
          <div className="hx-mini">Expires {data.paymentMethod.exp}</div>
        </Card>

        <Card>
          <div className="hx-stat-h">
            <div className="hx-stat-title">Invoice address</div>
          </div>
          <div className="hx-stat-sub">Used for invoices and tax.</div>
          <div className="hx-payment-row hx-payment-row-tall">
            <div className="hx-addr">
              {data.invoiceAddress.split("\n").map((l, i) => <div key={i}>{l}</div>)}
            </div>
            <button className="hx-icon-btn" onClick={() => openModal("editAddress")} aria-label="Edit address"><IconPencil size={14}/></button>
          </div>
        </Card>

        <Card>
          <div className="hx-stat-h">
            <div className="hx-stat-title">Tax settings</div>
          </div>
          <div className="hx-stat-sub">Set a business tax ID for invoices.</div>
          {data.taxId ? (
            <div className="hx-payment-row">
              <span className="hx-pm-card"><IconFile size={14}/> {data.taxIdType}: {data.taxId}</span>
              <button className="hx-icon-btn" onClick={() => openModal("editTax")} aria-label="Edit tax id"><IconPencil size={14}/></button>
            </div>
          ) : (
            <Btn kind="secondary" icon={<IconPlus size={14}/>} onClick={() => openModal("editTax")}>Add tax ID</Btn>
          )}
        </Card>
      </div>

      <Card title="Invoice history" subtitle="Past invoices and receipts."
            action={<Btn kind="secondary" size="sm" icon={<IconDownload size={14}/>}>Export all</Btn>}>
        <Table
          columns={[
            { key: "date", label: "Date", w: 130 },
            { key: "id", label: "Invoice", w: 140, mono: true },
            { key: "desc", label: "Description" },
            { key: "amount", label: "Amount", w: 110, align: "right" },
            { key: "status", label: "Status", w: 110,
              render: (r) => <Pill tone={r.status === "Paid" ? "good" : r.status === "Open" ? "warn" : "neutral"}>{r.status}</Pill> },
            { key: "action", label: "", w: 60, align: "right",
              render: () => <button className="hx-icon-btn" aria-label="Download"><IconDownload size={14}/></button> },
          ]}
          rows={data.invoices}
        />
      </Card>

      <BillingStyles />
    </div>
  );
};

const BillingStyles = () => (
  <style>{`
    .hx-stat-h { display:flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .hx-stat-title { font-weight: 600; font-size: 15.5px; }
    .hx-stat-sub { color: var(--muted); font-size: 13px; line-height: 1.5; min-height: 38px; }
    .hx-stat-num { font-size: 36px; font-weight: 600; letter-spacing: -.02em; margin-top: 18px; line-height: 1; font-feature-settings: "tnum"; }
    .hx-stat-cap { color: var(--muted); font-size: 13px; margin-top: 6px; margin-bottom: 16px; }
    .hx-stat-rows { display:flex; flex-direction: column; gap: 6px; margin-top: 14px; margin-bottom: 16px; font-size: 13px; }
    .hx-stat-rows > div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line-2); }
    .hx-stat-rows > div:last-child { border-bottom: none; }
    .hx-k { color: var(--muted); }
    .hx-v { font-weight: 500; font-family: var(--mono); font-size: 12.5px; }
    .hx-payment-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-top: 16px; background: var(--panel-2); }
    .hx-payment-row-tall { align-items: flex-start; }
    .hx-pm-card { display: inline-flex; gap: 8px; align-items: center; font-size: 13.5px; }
    .hx-pm-dots { font-family: var(--mono); letter-spacing: .05em; color: var(--ink-2); }
    .hx-icon-btn { background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--accent); display: inline-flex; }
    .hx-icon-btn:hover { background: var(--accent-soft); }
    .hx-mini { color: var(--muted); font-size: 12px; margin-top: 8px; }
    .hx-addr { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
    .hx-link { color: var(--accent); text-decoration: none; }
    .hx-link:hover { text-decoration: underline; }
  `}</style>
);

window.BillingScreen = BillingScreen;