/* ============================================================
   Bizia — Billing & plans  (/app/billing)
   ============================================================ */
(function () {
  const { useState } = React;
  const { Card, Badge, Button, Icon, PageHeader, Segmented, ProgressBar } = window;

  function PricingCard({ p, period, current, onSelect }) {
    const price = period === 'yearly' ? Math.round(p.price * 10) : p.price;
    return React.createElement('div', { style: { position: 'relative', display: 'flex', flexDirection: 'column', padding: 22, borderRadius: 'var(--r-lg)', background: 'var(--surface)', border: '1.5px solid ' + (p.highlight ? 'var(--primary)' : 'var(--border)'), boxShadow: p.highlight ? 'var(--sh-lg)' : 'var(--sh-xs)' } },
      p.highlight ? React.createElement('div', { style: { position: 'absolute', top: -11, left: 22, padding: '3px 10px', borderRadius: 999, background: 'var(--primary)', color: '#fff', fontSize: 11, fontWeight: 700 } }, 'Most popular') : null,
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
        React.createElement('h3', { style: { fontSize: 16.5, fontWeight: 700 } }, p.name),
        current ? React.createElement(Badge, { tone: 'secondary', size: 'sm', icon: 'check' }, 'Current') : null),
      React.createElement('p', { style: { fontSize: 12.5, color: 'var(--muted)', marginTop: 4, minHeight: 32 } }, p.tagline),
      React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 3, marginTop: 8 } },
        React.createElement('span', { style: { fontSize: 30, fontWeight: 750, letterSpacing: '-0.03em' } }, '$' + price),
        React.createElement('span', { style: { fontSize: 13, color: 'var(--muted)' } }, '/' + (period === 'yearly' ? 'yr' : 'mo'))),
      React.createElement(Button, { variant: current ? 'outline' : p.highlight ? 'primary' : 'outline', full: true, style: { marginTop: 14 }, onClick: () => current ? null : onSelect(p.id, period) }, current ? 'Current plan' : p.cta),
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 9, marginTop: 18 } },
        p.features.map((f, i) => React.createElement('div', { key: i, style: { display: 'flex', gap: 8, fontSize: 12.5, color: 'var(--text-2)' } }, React.createElement(Icon, { name: 'check', size: 15, style: { color: 'var(--secondary)', flexShrink: 0, marginTop: 1 } }), f))),
    );
  }

  const { useEffect } = React;

  function BillingPage() {
    const data = window.DATA;
    const [period, setPeriod] = useState('monthly');
    const [plans, setPlans] = useState(data.plans);

    useEffect(() => {
      window.API.billing.plans().then(list => { if (list && list.length) setPlans(list); }).catch(() => {});
    }, []);

    async function handleSelectPlan(planId, billingPeriod) {
      const result = await window.API.billing.checkout({ planId, period: billingPeriod, successUrl: window.location.href, cancelUrl: window.location.href });
      if (result?.url) { window.location.href = result.url; return; }
      window.toast({ title: 'Plan selected', desc: planId, tone: 'success' });
    }

    async function handleManage() {
      const result = await window.API.billing.portal({ returnUrl: window.location.href });
      if (result?.url) { window.location.href = result.url; return; }
      window.toast({ title: 'Manage subscription', tone: 'info' });
    }

    return React.createElement('div', { className: 'bz-anim-up' },
      React.createElement(PageHeader, {
        icon: 'card', title: 'Billing & plans',
        sub: 'Simple, transparent pricing. Domains and infrastructure are billed separately, at cost — never marked up.',
        actions: React.createElement(Segmented, { value: period, onChange: setPeriod, options: [{ value: 'monthly', label: 'Monthly' }, { value: 'yearly', label: 'Yearly · save 17%' }] }),
      }),
      // current usage
      React.createElement(Card, { pad: 0, style: { overflow: 'hidden', marginBottom: 22 } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 14, padding: '18px 22px', borderBottom: '1px solid var(--border-soft)', background: 'var(--surface-2)', flexWrap: 'wrap' } },
          React.createElement('div', { style: { width: 44, height: 44, borderRadius: 11, background: 'var(--primary-soft)', color: 'var(--primary-700)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: 'sparkles', size: 22 })),
          React.createElement('div', { style: { flex: 1, minWidth: 160 } },
            React.createElement('div', { style: { fontSize: 16, fontWeight: 700 } }, 'Growth plan'),
            React.createElement('div', { style: { fontSize: 13, color: 'var(--muted)' } }, '$49/mo · renews 12 Jun 2026')),
          React.createElement(Button, { variant: 'outline', size: 'sm', onClick: handleManage }, 'Manage')),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))' } },
          [['Websites', 2, 3], ['Leads this month', 236, 1000], ['Team seats', 3, 5]].map((u, i) =>
            React.createElement('div', { key: i, style: { padding: '16px 22px', borderRight: i < 2 ? '1px solid var(--border-soft)' : 'none' } },
              React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 8 } }, React.createElement('span', { style: { color: 'var(--muted)' } }, u[0]), React.createElement('span', { style: { fontWeight: 650 } }, u[1] + ' / ' + u[2])),
              React.createElement(ProgressBar, { value: (u[1] / u[2]) * 100, height: 7 }))),
        ),
      ),
      // plans
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(210px,1fr))', gap: 16 } },
        plans.map(p => React.createElement(PricingCard, { key: p.id, p, period, current: p.id === 'growth', onSelect: handleSelectPlan })),
      ),
      // separate billing + addons
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 22 }, className: 'bz-bill-bottom' },
        React.createElement(Card, { pad: 22 },
          React.createElement('h3', { style: { fontSize: 15.5, fontWeight: 650, marginBottom: 4 } }, 'Billed separately'),
          React.createElement('p', { style: { fontSize: 13, color: 'var(--muted)', marginBottom: 16 } }, 'Domains and infrastructure are passed through at cost — full transparency.'),
          [['globe', 'Domain', 'amazebites.cafe', '$22/yr'], ['cloud', 'Hosting (Cloudflare)', 'Free tier', '$0/mo'], ['database', 'Database (Supabase)', 'Free tier', '$0/mo'], ['mail', 'Email (Resend)', 'Free tier', '$0/mo']].map((r, i) =>
            React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 11, padding: '11px 0', borderBottom: i < 3 ? '1px solid var(--border-soft)' : 'none' } },
              React.createElement('div', { style: { width: 30, height: 30, borderRadius: 8, background: 'var(--surface-3)', color: 'var(--muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: r[0], size: 15 })),
              React.createElement('div', { style: { flex: 1 } }, React.createElement('div', { style: { fontSize: 13.5, fontWeight: 600 } }, r[1]), React.createElement('div', { style: { fontSize: 12, color: 'var(--muted)' } }, r[2])),
              React.createElement('span', { style: { fontSize: 13.5, fontWeight: 650 } }, r[3]))),
          React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border)', fontSize: 14 } },
            React.createElement('span', { style: { fontWeight: 600 } }, 'Est. infrastructure / mo'), React.createElement('span', { style: { fontWeight: 750, color: 'var(--secondary)' } }, '$0')),
        ),
        React.createElement(Card, { pad: 22 },
          React.createElement('h3', { style: { fontSize: 15.5, fontWeight: 650, marginBottom: 4 } }, 'Add-ons'),
          React.createElement('p', { style: { fontSize: 13, color: 'var(--muted)', marginBottom: 16 } }, 'Extend any plan with optional features.'),
          data.addons.map((ad, i) => React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 0', borderBottom: i < data.addons.length - 1 ? '1px solid var(--border-soft)' : 'none' } },
            React.createElement('span', { style: { fontSize: 13.5, fontWeight: 550 } }, ad.name),
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } }, React.createElement('span', { style: { fontSize: 13, color: 'var(--muted)' } }, ad.price), React.createElement(Button, { variant: 'ghost', size: 'sm', icon: 'plus', onClick: () => window.toast({ title: 'Add-on enabled', desc: ad.name, tone: 'success' }) }, 'Add')))),
        ),
      ),
      React.createElement('style', null, '@media(max-width:760px){.bz-bill-bottom{grid-template-columns:1fr !important}}'),
    );
  }

  window.BillingPage = BillingPage;
})();