/* Tool Brief — hydrates [data-tb-widget] placeholders with real design-system
   components (Button/Card/Tag/Badge/VerdictBadge/SpecTable/ProsCons/Input).
   Load after React, ReactDOM, Babel and the _ds_bundle.js on every page. */

function TBArticleCard({ href, kicker, kickerTone = 'outline', title, excerpt, meta, verdict, image, imageAlt }) {
  const { Card, Tag } = window.ToolBriefDesignSystem_0d3840;
  return (
    <Card onClick={() => { window.location.href = href; }} style={{ padding: 0, overflow: 'hidden', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div className="tb-card-media">
        {image
          ? <img src={image} alt={imageAlt || ''} loading="lazy" />
          : <div className="placeholder" style={{ height: 140 }}>Photo placeholder</div>}
      </div>
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div className="tb-card-kicker">
          {verdict && <window.ToolBriefDesignSystem_0d3840.VerdictBadge verdict={verdict} />}
          {kicker && <Tag tone={kickerTone}>{kicker}</Tag>}
        </div>
        <div className="tb-card-title">{title}</div>
        {excerpt && <p className="tb-card-excerpt">{excerpt}</p>}
        <div style={{ flex: 1 }} />
        {meta && <div className="tb-card-meta"><span>{meta}</span></div>}
      </div>
    </Card>
  );
}

function TBCardGrid({ items, cols = 3 }) {
  return (
    <div className={`grid grid--${cols}`}>
      {items.map((it, i) => <TBArticleCard key={i} {...it} />)}
    </div>
  );
}

function TBNewsletter({ ctaLabel = 'Sign up' }) {
  const { Input, Button } = window.ToolBriefDesignSystem_0d3840;
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  return (
    <div className="newsletter-form">
      <div>
        <Input placeholder="you@yourtrade.co.uk" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </div>
      <Button variant="primary" onClick={() => setSent(true)} disabled={sent}>{sent ? 'Signed up' : ctaLabel}</Button>
    </div>
  );
}

function TBNav({ href, children, variant = 'primary', size = 'md' }) {
  const { Button } = window.ToolBriefDesignSystem_0d3840;
  return <Button variant={variant} size={size} onClick={() => { window.location.href = href; }}>{children}</Button>;
}

function mountWidget(node) {
  const type = node.getAttribute('data-tb-widget');
  const props = JSON.parse(node.getAttribute('data-props') || '{}');
  const DS = window.ToolBriefDesignSystem_0d3840;
  const root = ReactDOM.createRoot(node);
  switch (type) {
    case 'tag':
      root.render(<DS.Tag tone={props.tone}>{props.children}</DS.Tag>);
      break;
    case 'tags':
      root.render(<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{props.items.map((t, i) => <DS.Tag key={i} tone={t.tone}>{t.label}</DS.Tag>)}</div>);
      break;
    case 'badge':
      root.render(<DS.Badge tone={props.tone} dot={props.dot}>{props.children}</DS.Badge>);
      break;
    case 'verdict':
      root.render(<DS.VerdictBadge verdict={props.verdict} />);
      break;
    case 'spec-table':
      root.render(<DS.SpecTable specs={props.specs} />);
      break;
    case 'pros-cons':
      root.render(<DS.ProsCons pros={props.pros} cons={props.cons} />);
      break;
    case 'card-grid':
      root.render(<TBCardGrid items={props.items} cols={props.cols} />);
      break;
    case 'nav-button':
      root.render(<TBNav href={props.href} variant={props.variant} size={props.size}>{props.children}</TBNav>);
      break;
    case 'newsletter':
      root.render(<TBNewsletter ctaLabel={props.ctaLabel} />);
      break;
    default:
      break;
  }
}

function mountAll() {
  document.querySelectorAll('[data-tb-widget]').forEach(mountWidget);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountAll);
} else {
  mountAll();
}