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

  function IssueList({ title, items }) {
    items = items || [];
    return <div><h4>{title}</h4>{items.length ? <ul>{items.map((item, index) => <li key={index}><strong>{item.field || item.code}</strong>: {item.message}</li>)}</ul> : <p className="muted">None.</p>}</div>;
  }

  function SchemaValidationPanel({ schema }) {
    if (!schema) return <div className="free-seo-card"><h3>Validation</h3><p>Select a schema to inspect local validation.</p></div>;
    const validation = schema.validation || {};
    return <div className="free-seo-card"><h3>Validation</h3><p><strong>{validation.valid ? 'Valid' : 'Needs data'}</strong> - score {Math.round((validation.score || 0) * 100)}%</p><IssueList title="Errors" items={validation.errors} /><IssueList title="Warnings" items={validation.warnings} /></div>;
  }

  global.SchemaValidationPanel = SchemaValidationPanel;
})(window);