// Help & Support — the guides bundled with this version of Dashbread (Dashbread Pro swaps in the live
// dashbread.com knowledge base), a developers' hooks reference, and Contact support (a Pro service;
// Core points to the WordPress.org forum). Core itself contacts no other site.
import { useEffect, useMemo, useRef, useState } from 'react';
import { __, _n, _x, sprintf } from '@wordpress/i18n';
import { cfg } from '../api.js';
import { Badge, Button, Card, Field, Icon, Notice, Spinner, toast } 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) { const e = new Error(data?.message || sprintf( /* translators: %s: HTTP status code */ __('Request failed (%s)', 'dashbread'), res.status )); e.data = data?.data; throw e; }
  return data;
}

// One shortcode with one-click copy (and a second button for the closing tag of enclosing tags).
function ShortcodeRow({ s }) {
  const [copied, setCopied] = useState('');
  const copy = async (text, which) => {
    try { await navigator.clipboard.writeText(text); }
    catch { const t = document.createElement('textarea'); t.value = text; document.body.appendChild(t); t.select(); document.execCommand('copy'); t.remove(); }
    setCopied(which); setTimeout(() => setCopied(''), 1400);
  };
  const tag = (text, which) => (
    <span className="sa-sc-tag">
      <code>{text}</code>
      <button type="button" className={'sa-sc-copy' + (copied === which ? ' is-copied' : '')} onClick={() => copy(text, which)} data-sc-copy={text} aria-label={sprintf( /* translators: %s: shortcode tag */ __('Copy %s', 'dashbread'), text )}>{copied === which ? __('Copied ✓', 'dashbread') : _x('Copy', 'button', 'dashbread')}</button>
    </span>
  );
  return (
    <div className={'sa-sc-row' + (s.available ? '' : ' is-locked')} data-sc={s.code}>
      <div className="sa-sc-tags">{tag(s.code, 'open')}{s.close ? tag(s.close, 'close') : null}{!s.available && s.requires ? <Badge tone="warning">{sprintf( /* translators: %s: required product or add-on name */ __('Needs %s', 'dashbread'), s.requires )}</Badge> : null}</div>
      {s.note && <p className="sa-sc-note">{s.note}</p>}
    </div>
  );
}

function ShortcodeSections({ sections }) {
  return (
    <div className="sa-sc-sections" data-sc-reference="1">
      {sections.map((sec) => (
        <div key={sec.key || sec.label} className="sa-sc-section" data-sc-section={sec.key || ''}>
          <div className="sa-sc-label">{sec.label}</div>
          {sec.note && <p className="sa-help sa-small">{sec.note}</p>}
          {sec.items.map((s) => <ShortcodeRow key={s.code} s={s} />)}
        </div>
      ))}
    </div>
  );
}

const scText = (s) => (s.code + ' ' + (s.close || '') + ' ' + (s.note || '')).toLowerCase();

function Article({ a, open, onToggle, onLoaded, codes = [], sections = null }) {
  const [body, setBody] = useState(a.body || '');
  const [busy, setBusy] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (open && !body) { setBusy(true); call('admin/help/kb/' + a.slug).then((r) => { setBody(r.body); onLoaded && onLoaded(a.slug, r.body); }).catch(() => setBody('<p>' + __('This guide is not available. Read it on dashbread.com.', 'dashbread') + '</p>')).finally(() => setBusy(false)); }
    if (open && ref.current) ref.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
  }, [open]);
  return (
    <div className={'sa-kb-item' + (open ? ' is-open' : '')} ref={ref} data-kb={a.slug}>
      <button type="button" className="sa-kb-head" onClick={onToggle} aria-expanded={open}>
        <Icon name="book-open" size={18} />
        <span className="sa-grow"><b>{a.title}</b><span className="sa-muted sa-small">{a.excerpt}</span></span>
        <Icon name="chevron-down" size={16} className="sa-kb-chev" />
      </button>
      {open && <div className="sa-kb-body">
        {sections && sections.length > 0 && <ShortcodeSections sections={sections} />}
        {!sections && codes.length > 0 && <div className="sa-sc-section" data-sc-guide={a.slug}><div className="sa-sc-label">{_n('Shortcode', 'Shortcodes', codes.length, 'dashbread')}</div>{codes.map((s) => <ShortcodeRow key={s.code} s={s} />)}</div>}
        {busy ? <Spinner /> : <div dangerouslySetInnerHTML={{ __html: body }} />}
        <a className="sa-small" href={cfg.helpUrl + '/' + a.slug} target="_blank" rel="noopener">{__('Open on dashbread.com ↗', 'dashbread')}</a>
      </div>}
    </div>
  );
}

export default function Help({ data }) {
  const [kb, setKb] = useState(null);
  const [err, setErr] = useState('');
  const [q, setQ] = useState('');
  const [cat, setCat] = useState('');
  const [open, setOpen] = useState(() => new URLSearchParams(location.search).get('kb') || '');
  const [subject, setSubject] = useState('');
  const [msg, setMsg] = useState('');
  const [sending, setSending] = useState(false);
  const [sent, setSent] = useState(null);
  useEffect(() => { call('admin/help/kb').then((r) => { setKb(r); cfg.helpUrl = r.help_url; }).catch((e) => setErr(e.message)); }, []);
  const route = data.status.route;

  const t = q.trim().toLowerCase();
  // Shortcodes: every item, and the ones each guide owns. A search narrows the rows to what matched.
  const scSections = useMemo(() => (kb?.shortcodes || []).map((sec) => ({ ...sec, items: sec.items.filter((s) => !t || scText(s).includes(t)) })).filter((sec) => sec.items.length), [kb, t]);
  const scByGuide = useMemo(() => {
    const m = {};
    scSections.forEach((sec) => sec.items.forEach((s) => { if (s.guide) (m[s.guide] = m[s.guide] || []).push(s); }));
    return m;
  }, [scSections]);
  const list = useMemo(() => {
    if (!kb) return [];
    return kb.articles.filter((a) => (!cat || a.category === cat) && (!t || (a.title + ' ' + a.excerpt).toLowerCase().includes(t) || (a.slug === 'shortcodes' ? scSections.length > 0 : (scByGuide[a.slug] || []).length > 0)));
  }, [kb, t, cat, scSections, scByGuide]);
  const hasScGuide = !!kb?.articles?.some((a) => a.slug === 'shortcodes');
  const byCat = useMemo(() => {
    const m = {};
    list.forEach((a) => { (m[a.category] = m[a.category] || []).push(a); });
    return (kb?.categories || []).map((c) => [c, m[c.slug] || []]).filter(([, arr]) => arr.length);
  }, [list, kb]);

  const send = async () => {
    setSending(true); setErr('');
    try { const r = await call('admin/help/contact', { method: 'POST', body: JSON.stringify({ subject, message: msg }) }); setSent(r.ticket || true); setSubject(''); setMsg(''); toast.show(__('Message sent', 'dashbread')); }
    catch (e) { setErr(e.message); }
    setSending(false);
  };

  return (
    <div className="sa-stack sa-helpx">
      {err && <Notice tone="error" onClose={() => setErr('')}>{err}</Notice>}
      <div className="sa-cols-2-1">
        <div className="sa-stack">
          <div className="sa-kb-toolbar">
            <h2>{__('Knowledge base', 'dashbread')}</h2>
            <div className="sa-search"><Icon name="search" size={16} /><input className="sa-input" placeholder={__('Search the knowledge base…', 'dashbread')} value={q} onChange={(e) => setQ(e.target.value)} data-kb-search="1" /></div>
          </div>
          {!kb ? <Spinner /> : kb.articles.length === 0 ? (
            <Card title={__('Guides', 'dashbread')}><p className="sa-help">{__('No guides are available here.', 'dashbread')} {/* translators: followed by a link to dashbread.com/help */ __('The full knowledge base is at', 'dashbread')} <a href={kb.help_url} target="_blank" rel="noopener">dashbread.com/help</a>.</p></Card>
          ) : (
            <>
              <div className="sa-seg sa-kb-cats" role="tablist">
                <button type="button" className={cat === '' ? 'on' : ''} onClick={() => setCat('')}>{_x('All', 'knowledge base categories', 'dashbread')}</button>
                {kb.categories.map((c) => <button type="button" key={c.slug} className={cat === c.slug ? 'on' : ''} onClick={() => setCat(c.slug)} data-kb-cat={c.slug}>{c.title}</button>)}
              </div>
              {byCat.length === 0 && <p className="sa-help">{sprintf( /* translators: %s: search terms */ __('Nothing matches “%s”.', 'dashbread'), q )} {/* translators: followed by the link text "search on dashbread.com" */ __('Try another word, or', 'dashbread')} <a href={kb.help_url} target="_blank" rel="noopener">{__('search on dashbread.com', 'dashbread')}</a>.</p>}
              {byCat.map(([c, arr]) => (
                <Card key={c.slug} title={c.title} pad={false}>
                  {c.description && <p className="sa-help sa-pad sa-kb-desc">{c.description}</p>}
                  <div className="sa-kb-list">{arr.map((a) => <Article key={a.slug} a={a} open={open === a.slug || (!!t && a.slug === 'shortcodes' && open === '')} onToggle={() => setOpen(open === a.slug ? '' : a.slug)} codes={scByGuide[a.slug] || []} sections={a.slug === 'shortcodes' ? scSections : null} />)}</div>
                </Card>
              ))}
            </>
          )}
          {kb?.bundled && kb.articles.length > 0 && <p className="sa-help sa-small" data-kb-bundled="1">{__('These guides ship with this version of Dashbread.', 'dashbread')} {/* translators: followed by a link to dashbread.com/help */ __('The latest versions are on', 'dashbread')} <a href={kb.help_url} target="_blank" rel="noopener">dashbread.com/help</a>.</p>}
          {kb && !hasScGuide && scSections.length > 0 && (
            <Card title={__('Shortcode reference', 'dashbread')}>
              <p className="sa-help sa-mb">{__('Paste these into any page or post (or a Shortcode block).', 'dashbread')} {/* translators: followed by the button name "Copy" */ __('Click', 'dashbread')} <b>{_x('Copy', 'button', 'dashbread')}</b> {/* translators: follows "Click Copy" */ __('next to a tag.', 'dashbread')}</p>
              <ShortcodeSections sections={scSections} />
            </Card>
          )}
          <Card title={__('For developers', 'dashbread')}>
            <p className="sa-help sa-mb">{__('Everything below works with Core alone.', 'dashbread')} {/* translators: followed by the guide name "Hooks & filters" */ __('Full reference: the', 'dashbread')} <button type="button" className="sa-link" onClick={() => { setCat('developers'); setOpen('hooks-and-filters'); }}>{__('Hooks & filters', 'dashbread')}</button> {/* translators: follows "Full reference: the Hooks & filters" */ __('guide above.', 'dashbread')} {/* translators: followed by the link text "Shortcode reference" */ __('Page builders: the', 'dashbread')} <button type="button" className="sa-link" onClick={() => { setCat(''); setQ(''); setOpen('shortcodes'); }} data-open-shortcodes="1">{__('Shortcode reference', 'dashbread')}</button>.</p>
            <pre className="sa-code">{`// Register a native page (renders inside the shell at /${route}/reports)
add_action( 'dashbread_register', function ( $r ) {
    $r->register_page( 'reports', [
        'title'    => 'Reports',
        'icon'     => 'chart-line',        // any Lucide icon name
        'position' => 40,
        'render'   => fn() => '<div class="sui-card">Hello</div>',
    ] );
    $r->register_notification_type( 'invoice', [ 'label' => 'Invoices', 'icon' => 'receipt' ] );
    $r->register_header_item( 'jobs', [ 'icon' => 'briefcase', 'label' => 'Jobs', 'toggle' => 'flyout', 'tab' => 'jobs', 'badge' => fn() => 3 ] );
} );

// Notify a member (in-app; Pro adds email)
dashbread_notify( $user_id, 'invoice', [ 'title' => 'Invoice #1042 is ready', 'url' => home_url( '/${route}/invoices/1042' ) ] );

// Add a screen under the Dashbread wp-admin menu, then mount it from your bundle:
add_filter( 'dashbread_admin_screens', fn( $s ) => $s + [ '-jobs' => [ 'Jobs', 'jobs' ] ] );
// window.DashbreadAdmin.registerScreen( 'jobs', JobsComponent );`}</pre>
          </Card>
        </div>
        <div className="sa-stack">
          <Card title={__('Contact support', 'dashbread')}>
            {kb?.contact ? (
              <div className="sa-stack">
                <p className="sa-help"><em>{__('Priority email support — included with your Pro license.', 'dashbread')}</em></p>
                {sent && <Notice tone="success" onClose={() => setSent(null)}>{typeof sent === 'string' && sent
                  ? sprintf( /* translators: %s: support ticket number */ __('Sent — ticket %s.', 'dashbread'), sent )
                  : __('Sent.', 'dashbread')} {/* translators: followed by an email address */ __('We reply to', 'dashbread')} <code>{cfg.email || ''}</code>.</Notice>}
                <Field label={__('Subject', 'dashbread')} htmlFor="sa-support-subject"><input id="sa-support-subject" className="sa-input" value={subject} onChange={(e) => setSubject(e.target.value)} data-support-subject="1" /></Field>
                <Field label={__('How can we help?', 'dashbread')} htmlFor="sa-support-message"><textarea id="sa-support-message" className="sa-input sa-textarea" rows={7} value={msg} onChange={(e) => setMsg(e.target.value)} data-support-message="1" /></Field>
                <p className="sa-help sa-small">{__('Your system status (versions, route, entitlements, active plugins) is attached automatically to help us diagnose faster.', 'dashbread')}</p>
                <div><Button variant="primary" icon="send" onClick={send} disabled={sending || !msg.trim()} data-support-send="1">{__('Send message', 'dashbread')}</Button></div>
              </div>
            ) : (
              <div className="sa-stack">
                <p className="sa-help">{__('Free support for Dashbread is on the WordPress.org forum.', 'dashbread')} {/* translators: followed by the product name "Dashbread Pro" (a link) */ __('Priority email support from this screen is part of', 'dashbread')} <a href="https://dashbread.com/products/dashbread-pro" target="_blank" rel="noopener">Dashbread Pro</a>{/* translators: follows the product name "Dashbread Pro"; keep the leading comma if your language uses one */ __(', sold separately.', 'dashbread')}</p>
                <div className="sa-actions"><Button href={kb?.forum_url || 'https://wordpress.org/support/plugin/dashbread/'} target="_blank" icon="external-link">{__('Open the support forum', 'dashbread')}</Button></div>
              </div>
            )}
          </Card>
          <Card title={__('Getting started', 'dashbread')}>
            <ol className="sa-steps">
              <li><b>{__('Open the app.', 'dashbread')}</b> {/* translators: followed by the app URL path */ __('Visit', 'dashbread')} <a href={data.status.app_url} target="_blank" rel="noopener">/{route}</a> {/* translators: follows "Visit /app" */ __('while logged in.', 'dashbread')}</li>
              <li><b>{__('Put content in it.', 'dashbread')}</b> {__('Tick “Show in Dashbread app” on any page, or use Hosted pages.', 'dashbread')}</li>
              <li><b>{__('Fill the dashboard.', 'dashbread')}</b> {/* translators: admin menu path; followed by the widget area name "Dashbread Dashboard" */ __('Appearance › Widgets ›', 'dashbread')} <em>{__('Dashbread Dashboard', 'dashbread')}</em>.</li>
              <li><b>{__('Shape the sidebar.', 'dashbread')}</b> {__('Appearance › Menus › Dashbread Sidebar.', 'dashbread')}</li>
              <li><b>{__('Brand it.', 'dashbread')}</b> {__('Settings: logo, primary color, preset, light or dark.', 'dashbread')}</li>
            </ol>
          </Card>
          <Card title={__('Status', 'dashbread')}>
            <ul className="sa-bullets"><li>{sprintf( /* translators: %s: Dashbread Core version number */ __('Core %s', 'dashbread'), cfg.version )}</li><li>{__('Pro:', 'dashbread')} {cfg.pro ? __('installed', 'dashbread') : <Badge>{__('not installed', 'dashbread')}</Badge>}</li><li>{__('App route', 'dashbread')} <code>/{route}</code></li></ul>
          </Card>
        </div>
      </div>
    </div>
  );
}