/* global React, ReactDOM, SiteHeader, CopyToBucketButton, Icon, INITIAL_BUCKETS, DEFAULTS,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakText */
const { useState, useEffect } = React;

function PageHeader({ tweaks, buckets, setBuckets, inIds, setInIds, pushToast }) {
  const copyBtn = (
    <CopyToBucketButton
      tweaks={tweaks}
      buckets={buckets} setBuckets={setBuckets}
      inIds={inIds} setInIds={setInIds}
      pushToast={pushToast}
    />
  );

  return (
    <header className="page-header">
      <div className="container" style={{ position: 'relative' }}>
        <h1 className="title-row">
          <a href="#" style={{ display: 'flex', alignItems: 'center' }}>
            <img className="org-ico" src="https://cdn-avatars.huggingface.co/v1/production/uploads/620760a26e3b7210c2ff1943/-s1gyJfvbE1RgO5iBeNOi.png" alt="" />
          </a>
          <a href="#" className="title-author">Qwen</a>
          <span className="title-slash">/</span>
          <a href="#" className="title-name">Qwen3.6-27B</a>
          <button className="title-copy" title="Copy model name"><Icon.Copy /></button>

          <div className="pill-group">
            <button><Icon.Heart className="heart" /> like</button>
            <div className="divider" />
            <button className="count">622</button>
          </div>

          <div className="pill-group">
            <button>Following <img className="avatar-s" src="https://cdn-avatars.huggingface.co/v1/production/uploads/620760a26e3b7210c2ff1943/-s1gyJfvbE1RgO5iBeNOi.png" alt="" /> Qwen</button>
            <div className="divider" />
            <button className="count">81.1k</button>
          </div>
        </h1>

        <div className="tag-row">
          <span className="tag"><span style={{ color: 'var(--color-orange-400)', marginRight: -2 }}>⚙</span> Image-Text-to-Text</span>
          <span className="tag"><Icon.HfLogo style={{ fontSize: 14 }} /> Transformers</span>
          <span className="tag">Safetensors</span>
          <span className="tag">qwen3_5</span>
          <span className="tag">conversational</span>
          <span className="tag"><span style={{ color: 'var(--color-orange-400)' }}>▮</span> Eval Results</span>
          <span className="tag tag-license"><span className="tag-muted">License:</span> apache-2.0</span>
        </div>

        <div className="tabs-row">
          <nav className="tabs">
            <a className="tab active" href="#"><Icon.Model className="tab-ico" /> Model card</a>
            <a className="tab" href="#"><Icon.File className="tab-ico" /> Files and versions <span style={{ background: '#fce7f3', color: '#be185d', fontSize: 10, fontWeight: 700, padding: '0 6px', borderRadius: 4, marginLeft: 4 }}>xet</span></a>
            <a className="tab" href="#"><Icon.Chat className="tab-ico" /> Community<span className="tab-count">11</span></a>
          </nav>

          <div className="actions">
            <button className="btn btn-icon" title="More"><Icon.Dots /></button>

            {tweaks.placement === 'before-deploy' && copyBtn}

            <button className="btn">
              <Icon.Deploy /> Deploy <Icon.ChevDown className="chev" />
            </button>

            {tweaks.placement === 'between' && copyBtn}

            <button className="btn btn-primary">
              <Icon.Model /> Use this model <Icon.ChevDown className="chev" />
            </button>

            {tweaks.placement === 'actions-end' && copyBtn}
          </div>
        </div>
      </div>
    </header>
  );
}

function Toasts({ toasts, onDismiss }) {
  useEffect(() => {
    const timers = toasts.map(t => setTimeout(() => onDismiss(t.id), 4500));
    return () => timers.forEach(clearTimeout);
  }, [toasts, onDismiss]);
  return (
    <div className="toast-wrap">
      {toasts.map(t => (
        <div className="toast" key={t.id}>
          <div className="t-ico"><Icon.Check style={{ fontSize: 12 }} /></div>
          <div className="t-body">{t.msg}</div>
          {t.action && <a className="t-action" href="#">{t.action}</a>}
          <button className="t-close" onClick={() => onDismiss(t.id)}><Icon.X /></button>
        </div>
      ))}
    </div>
  );
}

function App() {
  const [tweaks, setTweaks] = useTweaks(DEFAULTS);
  const [buckets, setBuckets] = useState(INITIAL_BUCKETS);
  const [inIds, setInIds] = useState([]);
  const [toasts, setToasts] = useState([]);
  const pushToast = (t) => setToasts(prev => [...prev, t]);
  const dismiss = (id) => setToasts(prev => prev.filter(t => t.id !== id));

  return (
    <>
      <SiteHeader />
      <PageHeader
        tweaks={tweaks}
        buckets={buckets} setBuckets={setBuckets}
        inIds={inIds} setInIds={setInIds}
        pushToast={pushToast}
      />
      <main className="container">
        <div className="demo-note">
          <Icon.Bucket style={{ color: 'var(--color-gray-500)' }} />
          Try the new <b>Copy to Bucket</b> button in the action row above. Open Tweaks to explore placement and style variants.
        </div>
        <div className="body-wrap">
          <div>
            <div className="placeholder tall">model card / README rendering</div>
          </div>
          <div>
            <div className="placeholder short" style={{ marginBottom: 16 }}>downloads & stats sidebar</div>
            <div className="placeholder short">dataset used to train</div>
          </div>
        </div>
      </main>
      <Toasts toasts={toasts} onDismiss={dismiss} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Placement" />
        <TweakRadio
          label="Button position"
          value={tweaks.placement}
          onChange={(v) => setTweaks('placement', v)}
          options={[
            { value: 'actions-end',   label: 'End' },
            { value: 'between',       label: 'Middle' },
            { value: 'before-deploy', label: 'Start' },
          ]}
        />
        <TweakSection label="Visual style" />
        <TweakRadio
          label="Treatment"
          value={tweaks.style}
          onChange={(v) => setTweaks('style', v)}
          options={[
            { value: 'white', label: 'White' },
            { value: 'blue',  label: 'Blue' },
            { value: 'black', label: 'Black' },
          ]}
        />
        <TweakSection label="Label & options" />
        <TweakText label="Label" value={tweaks.label} onChange={(v) => setTweaks('label', v)} />
        <TweakToggle
          label="Show → arrow"
          value={!!tweaks.showArrow}
          onChange={(v) => setTweaks('showArrow', v)}
        />
        <TweakToggle
          label="Show NEW badge"
          value={tweaks.showNewBadge}
          onChange={(v) => setTweaks('showNewBadge', v)}
        />
        <TweakToggle
          label="Multi-bucket copy"
          value={tweaks.multiBucket}
          onChange={(v) => setTweaks('multiBucket', v)}
        />
      </TweaksPanel>
    </>
  );
}

window.App = App;
ReactDOM.createRoot(document.getElementById('root')).render(<App />);