(function registerFreeSeoContentBriefView(global) {
  const React = global.React;
  if (!React) return;

  function readiness(brief) {
    const score = brief && brief.analysis && brief.analysis.readinessScore;
    return Math.round(Number(score || 0) * 100);
  }

  function listItems(response) {
    if (!response) return [];
    if (Array.isArray(response.data)) return response.data;
    if (response.data && Array.isArray(response.data.items)) return response.data.items;
    if (Array.isArray(response.items)) return response.items;
    return [];
  }

  function ContentBriefView() {
    const api = global.JS_API && global.JS_API.freeSeo && global.JS_API.freeSeo.contentBriefs;
    const [briefs, setBriefs] = React.useState([]);
    const [activeBrief, setActiveBrief] = React.useState(null);
    const [loading, setLoading] = React.useState(false);
    const [error, setError] = React.useState('');
    const [assetMessage, setAssetMessage] = React.useState('');

    React.useEffect(() => { refreshBriefs(); }, []);

    async function refreshBriefs() {
      if (!api) return;
      try {
        const response = await api.listBriefs({ limit: 10 });
        const items = listItems(response);
        setBriefs(items);
        if (!activeBrief && items[0]) setActiveBrief(items[0]);
      } catch (err) { setError(err.message); }
    }

    async function createBrief(payload) {
      setLoading(true);
      setError('');
      setAssetMessage('');
      try {
        const response = await api.createBrief(payload);
        const brief = response.data;
        setActiveBrief(brief);
        await refreshBriefs();
      } catch (err) { setError(err.message); }
      finally { setLoading(false); }
    }

    async function openBrief(brief) {
      setLoading(true);
      setError('');
      try {
        const response = await api.getBrief(brief.id || brief.briefId);
        setActiveBrief(response.data);
      } catch (err) { setError(err.message); }
      finally { setLoading(false); }
    }

    async function createAssets() {
      if (!activeBrief || !api) return;
      setLoading(true);
      setError('');
      setAssetMessage('');
      try {
        const response = await api.createImplementationAssets(activeBrief.id, { includeChecklist: true, includeSchema: true, includeOutlineSections: false });
        const total = response.data && response.data.total || 0;
        setAssetMessage(`${total} implementation assets created.`);
      } catch (err) { setError(err.message); }
      finally { setLoading(false); }
    }

    if (!api) return <div className="free-seo-card"><h2>Content Briefs</h2><p>Content brief client is not loaded.</p></div>;

    const summary = activeBrief && activeBrief.summary || {};
    const analysis = activeBrief && activeBrief.analysis || {};

    return <div className="free-seo-lab-page content-brief-page">
      <header className="free-seo-page-header">
        <div>
          <p className="eyebrow">Free SEO Lab · Patch 04</p>
          <h2>Content Brief Generator</h2>
          <p>Create implementation-ready SEO/GEO briefs from local crawl, prompt, audit, and pasted evidence without paid keyword or LLM APIs.</p>
        </div>
        {activeBrief && <div className="free-seo-actions">
          <button type="button" className="secondary" onClick={() => api.exportBrief(activeBrief.id, 'md')}>Export MD</button>
          <button type="button" className="secondary" onClick={() => api.exportBrief(activeBrief.id, 'zip')}>Export ZIP</button>
          <button type="button" onClick={createAssets} disabled={loading}>Create assets</button>
        </div>}
      </header>

      {error && <div className="free-seo-error">{error}</div>}
      {assetMessage && <div className="free-seo-success">{assetMessage}</div>}

      <div className="free-seo-grid-2 wide-left">
        <global.FreeSeoBriefCreateForm onSubmit={createBrief} loading={loading} />
        <aside className="free-seo-card compact">
          <h3>Recent briefs</h3>
          {briefs.length ? briefs.map((brief) => <button key={brief.id} type="button" className="free-seo-run-pill" onClick={() => openBrief(brief)}>
            <strong>{brief.targetQuery || brief.id}</strong>
            <span>{brief.status} · {readiness(brief)} readiness</span>
          </button>) : <p>No briefs yet.</p>}
        </aside>
      </div>

      {activeBrief && <section className="free-seo-card">
        <div className="free-seo-card-header"><div><p className="eyebrow">{activeBrief.intent} · {analysis.readinessLabel || 'draft'}</p><h3>{activeBrief.targetQuery}</h3><p>{activeBrief.targetPageUrl || activeBrief.websiteUrl || activeBrief.id}</p></div></div>
        <div className="free-seo-metric-grid">
          <div><strong>{readiness(activeBrief)}</strong><span>Readiness</span></div>
          <div><strong>{summary.outlineSectionCount || 0}</strong><span>Sections</span></div>
          <div><strong>{summary.faqCount || 0}</strong><span>FAQs</span></div>
          <div><strong>{summary.highGapCount || 0}</strong><span>High gaps</span></div>
        </div>
      </section>}

      {activeBrief && <section className="free-seo-card"><h3>Content gaps</h3><global.FreeSeoBriefGapPanel gaps={analysis.gaps || []} /></section>}

      {activeBrief && <section className="free-seo-card"><h3>Title options</h3><div className="free-seo-option-list">{(activeBrief.titleOptions || []).map((option) => <article key={option.id}><strong>{option.title}</strong><small>{option.length} chars</small><p>{option.rationale}</p></article>)}</div></section>}

      {activeBrief && <section className="free-seo-card"><h3>Meta descriptions</h3><div className="free-seo-option-list">{(activeBrief.metaDescriptionOptions || []).map((option) => <article key={option.id}><strong>{option.description}</strong><small>{option.length} chars</small><p>{option.rationale}</p></article>)}</div></section>}

      {activeBrief && <section className="free-seo-card"><h3>Suggested outline</h3><global.FreeSeoBriefOutlineEditor outline={activeBrief.outline} /></section>}
      {activeBrief && <section className="free-seo-card"><h3>FAQs</h3><div className="free-seo-option-list">{(activeBrief.faqItems || []).map((faq) => <article key={faq.id}><strong>{faq.question}</strong><small>{faq.priority} · {faq.source}</small><p>{faq.answerGuidance}</p></article>)}</div></section>}
      {activeBrief && <section className="free-seo-card"><h3>Internal links</h3><global.FreeSeoInternalLinkSuggestions links={activeBrief.internalLinkSuggestions || []} /></section>}
      {activeBrief && <section className="free-seo-card"><h3>Schema suggestions</h3><div className="free-seo-option-list">{(activeBrief.schemaSuggestions || []).map((schema) => <article key={schema.id}><strong>{schema.type}</strong><small>{schema.priority}{schema.alreadyDetected ? ' · already detected' : ''}</small><p>{schema.rationale}</p></article>)}</div></section>}
      {activeBrief && <section className="free-seo-card"><h3>Implementation checklist</h3><global.FreeSeoBriefChecklist items={activeBrief.implementationChecklist || []} /></section>}
    </div>;
  }

  global.FreeSeoContentBriefView = ContentBriefView;
})(window);