// Billing tab — read-only summary + invoices. All mutations push to Wix.

function BillingTab({ pal }) {
  const t = useTweaks();
  const jm = window.JOY_MOVE;
  const plan = jm.plans[t.tier];
  const filler = t.demo !== 'clean';
  const invoices = filler ? jm.invoices : [];
  const nextBillDate = jm.cycle.renews;

  return (
    <Page pal={pal}
      kicker="Billing"
      title="Plan & invoices"
      sub="Manage your subscription, payment method, and plan changes on the State of Motion site."
      actions={<BtnPrimary pal={pal} onClick={() => window.open('https://thestateofmotion.com/care-plans', '_blank')}>Manage on State of Motion ↗</BtnPrimary>}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
        {/* Current plan */}
        <Card pal={pal} padding={28}>
          <Kicker pal={pal}>Current plan</Kicker>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 18 }}>
            <Display pal={pal} size={34}>{plan.tier}</Display>
            <TierBadge pal={pal} tier={plan.tier} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <KV pal={pal} label="Monthly" v={`$${plan.monthly}`} />
            <KV pal={pal} label="Hours included" v={`${plan.hoursIncluded} hrs`} />
            <KV pal={pal} label="Response SLA" v={plan.responseSLA} />
            <KV pal={pal} label="Overage rate" v={`$${plan.overage}/hr`} />
            <KV pal={pal} label="Next bill" v={nextBillDate} />
            <KV pal={pal} label="Client since" v={jm.brand.since.replace('Launched ', '')} />
          </div>
          <div style={{ marginTop: 20, paddingTop: 16, borderTop: `1px solid ${pal.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 12, color: pal.muted }}>Change plan, pause, or cancel</div>
            <BtnText pal={pal} onClick={() => window.open('https://thestateofmotion.com/care-plans', '_blank')}>Manage on site ↗</BtnText>
          </div>
        </Card>

        {/* Payment method */}
        <Card pal={pal} padding={28}>
          <Kicker pal={pal}>Payment method</Kicker>
          {filler ? (
            <>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '18px 0' }}>
                <div style={{
                  width: 56, height: 40, borderRadius: 6,
                  background: pal.warm, border: `1px solid ${pal.border}`,
                  display: 'grid', placeItems: 'center',
                  fontFamily: "'Playfair Display', serif", fontSize: 11, fontWeight: 700,
                  color: pal.textStrong, letterSpacing: '0.05em',
                }}>VISA</div>
                <div>
                  <div style={{ fontSize: 15, color: pal.textStrong, fontWeight: 600, fontFamily: "'JetBrains Mono', monospace" }}>•••• •••• •••• 4412</div>
                  <div style={{ fontSize: 12, color: pal.muted, marginTop: 2 }}>Expires 09/28 · Alex Reyes</div>
                </div>
              </div>
              <div style={{ paddingTop: 16, borderTop: `1px solid ${pal.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ fontSize: 12, color: pal.muted }}>On file via Wix · auto-charged on the 1st</div>
                <BtnText pal={pal} onClick={() => window.open('https://thestateofmotion.com/account/billing', '_blank')}>Update ↗</BtnText>
              </div>
            </>
          ) : (
            <div style={{ paddingTop: 14 }}>
              <div style={{ fontSize: 13, color: pal.muted, marginBottom: 16, lineHeight: 1.6 }}>
                No payment method on file yet. Add one to activate your plan.
              </div>
              <BtnPrimary pal={pal} onClick={() => window.open('https://thestateofmotion.com/account/billing', '_blank')}>Add payment method ↗</BtnPrimary>
            </div>
          )}
        </Card>
      </div>

      {/* Invoices */}
      <Card pal={pal}>
        <CardHead pal={pal} label="Invoice history" />
        <div style={{ borderTop: `1px solid ${pal.border}` }} />
        {invoices.length === 0 ? (
          <EmptyState pal={pal} icon="$"
            title="No invoices yet"
            body="Your first invoice appears here on the 1st of next month."
          />
        ) : (
          <>
            <div style={{
              display: 'grid', gridTemplateColumns: '130px 130px 1fr 110px 110px 80px',
              padding: '14px 24px', borderBottom: `1px solid ${pal.border}`,
              fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
              textTransform: 'uppercase', color: pal.muted,
            }}>
              <div>Invoice</div>
              <div>Date</div>
              <div>Period</div>
              <div style={{ textAlign: 'right' }}>Amount</div>
              <div>Status</div>
              <div></div>
            </div>
            {invoices.map((inv, i) => (
              <div key={inv.id} style={{
                display: 'grid', gridTemplateColumns: '130px 130px 1fr 110px 110px 80px',
                padding: '16px 24px', alignItems: 'center',
                borderTop: i === 0 ? 'none' : `1px solid ${pal.border}`,
              }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: pal.textStrong, fontWeight: 600 }}>{inv.id}</div>
                <div style={{ fontSize: 13, color: pal.muted }}>{inv.date}</div>
                <div style={{ fontSize: 13, color: pal.textStrong }}>{inv.period}</div>
                <div style={{ textAlign: 'right', fontSize: 13, color: pal.textStrong, fontWeight: 600, fontFamily: "'JetBrains Mono', monospace" }}>${inv.amount}.00</div>
                <div><StatusChip pal={pal} s={inv.status === 'Paid' ? 'Done' : 'Queued'} /></div>
                <div style={{ textAlign: 'right' }}><BtnText pal={pal}>PDF</BtnText></div>
              </div>
            ))}
          </>
        )}
      </Card>

      <div style={{ marginTop: 24, padding: '20px 24px', background: pal.warm, border: `1px solid ${pal.border}`, borderRadius: 12, display: 'flex', gap: 14, alignItems: 'center' }}>
        <span style={{ fontSize: 22, color: pal.accent }}>↗</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: pal.textStrong, marginBottom: 4 }}>Changing plans or cancelling?</div>
          <div style={{ fontSize: 12, color: pal.muted, lineHeight: 1.5 }}>Plan changes, cancellations, and refund requests are handled on our main site through your Wix account.</div>
        </div>
        <BtnGhost pal={pal} onClick={() => window.open('https://thestateofmotion.com/care-plans', '_blank')}>Manage ↗</BtnGhost>
      </div>
    </Page>
  );
}

window.BillingTab = BillingTab;