// Dashbread Pro & Add-ons — plans and Pro Module Add-ons from the catalog bundled with this version of
// Dashbread (Dashbread Pro swaps in live prices from dashbread.com), with this site's current plan from the
// license state Pro supplies. Core never holds a license key and contacts no other site.
import { useEffect, useState } from 'react';
import { __, _x, sprintf } from '@wordpress/i18n';
import { cfg } from '../api.js';
import { Badge, Button, Card, Icon, Notice, Spinner } from '../ui.jsx';

async function call(path, opts = {}) {
  const res = await fetch(cfg.rest + path, { credentials: 'same-origin', headers: { 'X-WP-Nonce': cfg.nonce, 'Content-Type': 'application/json' }, ...opts });
  const data = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(data?.message || sprintf( /* translators: %s: HTTP status code */ __('Request failed (%s)', 'dashbread'), res.status ));
  return data;
}
// dashbread.com sells in US dollars; shown the way the site's language writes dollars ("$299", "299 $").
const money = (c) => {
  if (c == null) return '';
  try { return new Intl.NumberFormat(document.documentElement.lang || undefined, { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(c / 100); } catch (e) { return '$' + Math.round(c / 100); }
};
const term = (t) => (t === 'year' ? __('/year', 'dashbread') : t === 'month' ? __('/month', 'dashbread') : t === 'one_time' ? ' ' + __('one-time', 'dashbread') : '');
const sites = (p) => (/unlimited|lifetime|bundle/.test(p.slug) ? __('Unlimited sites', 'dashbread') : /5-site/.test(p.slug) ? __('5 sites', 'dashbread') : p.tier === 'core' ? __('Free forever', 'dashbread') : __('1 site', 'dashbread'));
const tierOf = (price) => (price >= 12900 ? 'Tier A' : price >= 7900 ? 'Tier B' : 'Tier C');
// Visible labels for the tier keys above (the keys themselves stay untranslated).
const TIER_LABELS = { 'Tier A': __('Tier A', 'dashbread'), 'Tier B': __('Tier B', 'dashbread'), 'Tier C': __('Tier C', 'dashbread') };

function Info({ p, onClose, d }) {
  useEffect(() => { const k = (e) => e.key === 'Escape' && onClose(); document.addEventListener('keydown', k); return () => document.removeEventListener('keydown', k); }, []);
  return (
    <div className="sa-modal" onClick={onClose} role="dialog" aria-modal="true" aria-label={p.name}>
      <div className="sa-modal-box" onClick={(e) => e.stopPropagation()}>
        <div className="sa-modal-head"><h3>{p.name}</h3><button type="button" className="sa-icobtn" onClick={onClose} aria-label={__('Close', 'dashbread')}>×</button></div>
        {p.image && <img className="sa-modal-img" src={p.image} alt="" />}
        {p.tagline && <p className="sa-modal-tag">{p.tagline}</p>}
        <div className="sa-modal-price"><b>{p.price === 0 ? _x('Free', 'price', 'dashbread') : money(p.price)}</b><span className="sa-muted">{p.price ? term(p.term) : ''}</span>{p.requires && <span className="sa-muted sa-small"> · {p.requires}</span>}</div>
        {p.description && <div className="sa-modal-body" dangerouslySetInnerHTML={{ __html: p.description }} />}
        {p.includes.length > 0 && <ul className="sa-checklist">{p.includes.map((i, n) => <li key={n}><Icon name="check" size={14} />{i.label}</li>)}</ul>}
        <div className="sa-actions">
          {p.tier !== 'core' && p.status === 'active' && !p.entitled && <Button variant="primary" href={p.url} target="_blank" icon="external-link">{p.tier === 'addon'
            ? sprintf( /* translators: %s: add-on name */ __('Buy %s', 'dashbread'), p.name )
            : sprintf( /* translators: %s: plan name */ __('Get %s', 'dashbread'), p.name )}</Button>}
          {p.status === 'coming_soon' && <Badge tone="warning">{__('Coming soon', 'dashbread')}</Badge>}
          <Button href={p.url} target="_blank" variant="ghost">{__('Product page', 'dashbread')}</Button>
        </div>
      </div>
    </div>
  );
}

export default function Extend({ data }) {
  const [d, setD] = useState(null);
  const [err, setErr] = useState('');
  const [info, setInfo] = useState(null);
  const [busy, setBusy] = useState(false);
  useEffect(() => { call('admin/store').then(setD).catch((e) => setErr(e.message)); }, []);
  if (!d) return err ? <Notice tone="error">{err}</Notice> : <Spinner />;
  const refresh = async () => { setBusy(true); try { setD(await call('admin/store/refresh', { method: 'POST' })); } catch (e) { setErr(e.message); } setBusy(false); };
  const cur = d.current;
  const allOn = cur.key === '__all';
  const hasPro = allOn || d.entitlements.includes('pro');
  const groups = [];
  const byTier = {};
  d.addons.forEach((a) => { const t = tierOf(a.price || 0); (byTier[t] = byTier[t] || []).push(a); });
  ['Tier A', 'Tier B', 'Tier C'].forEach((t) => byTier[t] && groups.push([t, byTier[t]]));
  const bundle = d.plans.find((p) => p.slug === 'dashbread-pmas-bundle');
  const alaCarte = d.addons.reduce((s, a) => s + (a.price || 0), 0);

  return (
    <div className="sa-stack sa-store">
      {err && <Notice tone="error" onClose={() => setErr('')}>{err}</Notice>}
      {d.bundled && <p className="sa-help sa-small" data-store-bundled="1">{d.bundled_date
        ? sprintf( /* translators: %s: date the bundled price list was made */ __('Prices as of %s.', 'dashbread'), d.bundled_date )
        : __('Prices as of this release.', 'dashbread')} {__('Current prices are on', 'dashbread')} <a href={d.site_url} target="_blank" rel="noopener">dashbread.com</a>.</p>}
      <div className="sa-store-head">
        <div>
          <h2>{__('Add-ons & upgrades', 'dashbread')}</h2>
          <p className="sa-store-plan"><em>{__('Your plan:', 'dashbread')}</em> <b data-current-plan={cur.key}>{cur.label}</b>{d.dev && <Badge tone="warning">{__('dev entitlements', 'dashbread')}</Badge>}</p>
          <p className="sa-help">{d.pro
            ? __('Unlock Pro and the Pro Module Add-ons for this site. Everything is licensed on dashbread.com; buying updates this site automatically.', 'dashbread')
            : __('Unlock Pro and the Pro Module Add-ons for this site. Everything is licensed on dashbread.com; buying updates this site automatically once Dashbread Pro is installed.', 'dashbread')}</p>
        </div>
        <div className="sa-actions">
          {d.license_url ? <Button href={d.license_url} icon="lock" variant="ghost">{__('License', 'dashbread')}</Button> : <Button href={d.site_url + '/products/dashbread-pro'} target="_blank" icon="external-link" variant="primary">{__('Get Dashbread Pro', 'dashbread')}</Button>}
          {d.pro && <Button variant="ghost" icon="refresh-cw" onClick={refresh} disabled={busy}>{__('Refresh prices', 'dashbread')}</Button>}
        </div>
      </div>

      <h3 className="sa-store-h">{__('Plans', 'dashbread')}</h3>
      <div className="sa-plans">
        {d.plans.map((p) => {
          const isCur = cur.key === p.slug || (p.tier === 'core' && cur.key === 'free');
          const rank = d.rank[p.slug] ?? 0;
          const included = !isCur && rank < cur.rank;
          return (
            <div key={p.slug} className={'sa-plan' + (isCur ? ' is-current' : '')} data-plan={p.slug}>
              <div className="sa-plan-top"><b>{p.name}{p.slug === 'dashbread-pro-5-site' ? ' — ' + __('5 sites', 'dashbread') : p.slug === 'dashbread-pro-unlimited' ? ' — ' + __('unlimited sites', 'dashbread') : p.slug === 'dashbread-pro' ? ' — ' + __('1 site', 'dashbread') : ''}</b>{isCur && <Badge tone="success">{_x('Current', 'current plan', 'dashbread')}</Badge>}</div>
              <div className="sa-plan-price"><b>{p.price === 0 ? _x('Free', 'price', 'dashbread') : money(p.price)}</b><span>{p.price ? term(p.term) : ''}</span></div>
              <div className="sa-muted sa-small"><em>{sites(p)}</em></div>
              <div className="sa-plan-foot">
                {isCur ? <span className="sa-muted"><em>{__('Your current plan', 'dashbread')}</em></span>
                  : included ? <span className="sa-muted"><em>{__('Included in your plan', 'dashbread')}</em></span>
                  : p.tier === 'core' ? <span className="sa-muted"><em>{__('Installed', 'dashbread')}</em></span>
                  : <Button size="sm" variant="primary" href={p.url} target="_blank">{hasPro ? __('Upgrade', 'dashbread') : __('Get Pro', 'dashbread')}</Button>}
                <button type="button" className="sa-link" onClick={() => setInfo(p)}>{__('More info', 'dashbread')}</button>
              </div>
            </div>
          );
        })}
      </div>

      <h3 className="sa-store-h">{__('Pro Module Add-ons', 'dashbread')}</h3>
      <p className="sa-help">{bundle
        ? sprintf( /* translators: %s: bundle price per year, e.g. $299 */ __('Buy à la carte, or get them all with the bundle (%s/year).', 'dashbread'), money(bundle.price) )
        : __('Buy à la carte, or get them all with the bundle.', 'dashbread')} {sprintf( /* translators: %s: total yearly price of all add-ons */ __('À la carte total: %s/year.', 'dashbread'), money(alaCarte) )} {__('Add-ons require Pro; nothing to install — they switch on when your license grants them.', 'dashbread')}</p>
      {groups.map(([tier, list]) => (
        <div key={tier} className="sa-tier">
          <div className="sa-tier-label">{TIER_LABELS[tier]}</div>
          <div className="sa-addon-grid">
            {list.map((a) => (
              <div key={a.slug} className={'sa-addon' + (a.entitled ? ' is-active' : '') + (a.status !== 'active' ? ' is-soon' : '')} data-addon={a.slug}>
                <div className="sa-addon-top"><b>{a.name}</b>{a.status !== 'active' ? <Badge tone="neutral">{__('Coming soon', 'dashbread')}</Badge> : a.entitled ? <Badge tone="success">{__('Active', 'dashbread')}</Badge> : null}</div>
                <p className="sa-addon-blurb"><em>{a.tagline}</em></p>
                <div className="sa-addon-foot">
                  <span className="sa-addon-price"><b>{money(a.price)}</b><span className="sa-muted">{__('/year', 'dashbread')}</span></span>
                  <a className="sa-link" href={cfg.adminUrl + '?page=dashbread-help&kb=' + a.guide}>{__('Guide', 'dashbread')}</a>
                  <button type="button" className="sa-link" onClick={() => setInfo(a)}>{__('More info', 'dashbread')}</button>
                  {a.status !== 'active' ? null : a.entitled ? <span className="sa-muted"><em>{__('Included', 'dashbread')}</em></span> : <Button size="sm" href={a.url} target="_blank">{hasPro ? _x('Buy', 'button', 'dashbread') : __('Needs Pro', 'dashbread')}</Button>}
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}

      <Card title={__('Made for Dashbread', 'dashbread')}>
        <p className="sa-help">{__('Full apps that run inside the shell — courses, help desks, work orders — ship as their own plugins and register pages, widgets, flyout tabs and graph sources through Core\'s hooks. Building one? See Help › For developers.', 'dashbread')}</p>
        {data.pages.length > 0 && <ul className="sa-addons">{data.pages.map((p) => <li key={p.id}><Icon name={p.icon} size={18} /><b>{p.title}</b><code>{p.path}</code><Badge tone="success">{__('Active', 'dashbread')}</Badge></li>)}</ul>}
      </Card>
      {info && <Info p={info} d={d} onClose={() => setInfo(null)} />}
    </div>
  );
}