(function attachFindabilityRecommendationPanel(global) {
  const React = global.React;
  if (!React) return;
  function FindabilityRecommendationPanel({ run, onAssetsCreated }) {
    const [loading, setLoading] = React.useState(false);
    const [message, setMessage] = React.useState('');
    if (!run) return null;
    async function createAssets() {
      setLoading(true); setMessage('');
      try {
        const response = await global.JS_API.freeSeo.aiFindability.createImplementationAssets(run.id, {});
        const data = response.data || response;
        setMessage(`Created ${data.createdCount || 0} implementation assets.`);
        onAssetsCreated && onAssetsCreated(data);
      } catch (err) { setMessage(err.message || 'Unable to create implementation assets.'); }
      finally { setLoading(false); }
    }
    return <section className="free-seo-card">
      <div className="row between"><h2>Recommendations</h2><button className="button" onClick={createAssets} disabled={loading}>{loading ? 'Creating...' : 'Create implementation assets'}</button></div>
      {message ? <p className="muted">{message}</p> : null}
      <ol>{(run.recommendations || []).map((rec) => <li key={rec.id}><strong>{rec.title}</strong><p>{rec.detail}</p><small>{rec.priority} - {rec.type}</small></li>)}</ol>
    </section>;
  }
  global.FindabilityRecommendationPanel = FindabilityRecommendationPanel;
})(window);