/* App window mockup — the heroic visual */

const { useState } = React;

// Icons (inline SVG, 16px default)
const I = {
  search: (s=16) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="7" cy="7" r="5"/><path d="m11 11 3 3"/></svg>,
  folder: (s=16) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M1.5 4.5a1 1 0 0 1 1-1h3l1.5 1.5h6a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-10.5a1 1 0 0 1-1-1v-7Z"/></svg>,
  img: (s=16) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><circle cx="6" cy="6.5" r="1.2"/><path d="M2 12l3.5-3.5 3 3L11 8l3 3"/></svg>,
  video: (s=16) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="1.5" y="3" width="11" height="10" rx="1.5"/><path d="m12.5 6.5 3-1.5v6l-3-1.5z"/></svg>,
  doc: (s=16) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M3 1.5h6l4 4v9a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-13Z"/><path d="M9 1.5v4h4"/></svg>,
  code: (s=16) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="m6 5-3.5 3L6 11M10 5l3.5 3L10 11"/></svg>,
  upload: (s=14) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M8 11V2.5M4.5 6 8 2.5 11.5 6M2 13.5h12"/></svg>,
  plus: (s=14) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M8 3v10M3 8h10"/></svg>,
  chev: (s=12) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="m4 6 4 4 4-4"/></svg>,
  chevRight: (s=12) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="m6 4 4 4-4 4"/></svg>,
  more: (s=14) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="3.5" cy="8" r="1"/><circle cx="8" cy="8" r="1"/><circle cx="12.5" cy="8" r="1"/></svg>,
  sidebar: (s=14) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><path d="M6 2.5v11"/></svg>,
  transfer: (s=14) => <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 5h10l-2.5-2.5M13 11H3l2.5 2.5"/></svg>,
};

const fileIcon = (t) => {
  if (t === 'folder') return <span style={{color:'#e8590c'}}>{I.folder()}</span>;
  if (t === 'img') return <span style={{color:'#16a34a'}}>{I.img()}</span>;
  if (t === 'video') return <span style={{color:'#8b5cf6'}}>{I.video()}</span>;
  if (t === 'code') return <span style={{color:'#2563eb'}}>{I.code()}</span>;
  return <span style={{color:'var(--w-muted)'}}>{I.doc()}</span>;
};

const accounts = [
  { name: 'production', provider: 'R2', buckets: 4, active: true, color: '#ff6b1a' },
  { name: 'staging-aws', provider: 'AWS', buckets: 3, color: '#ff9900' },
  { name: 'minio-lan', provider: 'MinIO', buckets: 2, color: '#c72e29' },
  { name: 'backup-rustfs', provider: 'RustFS', buckets: 1, color: '#ff7a2a' },
];

const files = [
  { name: 'assets', type: 'folder', size: '—', items: '128 items', mod: '2 days ago' },
  { name: 'releases', type: 'folder', size: '—', items: '24 items', mod: '6h ago' },
  { name: 'hero-background.webp', type: 'img', size: '1.8 MB', mod: 'Apr 19, 2026' },
  { name: 'launch-trailer.mp4', type: 'video', size: '48.2 MB', mod: 'Apr 18, 2026', selected: true },
  { name: 'promo-poster.png', type: 'img', size: '3.1 MB', mod: 'Apr 17, 2026', selected: true },
  { name: 'press-kit.pdf', type: 'doc', size: '12.4 MB', mod: 'Apr 15, 2026' },
  { name: 'build-config.yaml', type: 'code', size: '2.1 KB', mod: 'Apr 14, 2026' },
  { name: 'migration-plan.md', type: 'doc', size: '6.8 KB', mod: 'Apr 12, 2026' },
];

function AppWindow() {
  return (
    <div className="aw">
      {/* Title bar */}
      <div className="aw-titlebar">
        <div className="aw-traffic">
          <span className="tl tl-r"/><span className="tl tl-y"/><span className="tl tl-g"/>
        </div>
        <div className="aw-title">R2 Client — production · assets-prod</div>
        <div className="aw-title-actions">
          <button className="aw-icon" aria-label="sidebar">{I.sidebar()}</button>
        </div>
      </div>

      {/* Body */}
      <div className="aw-body">
        {/* Sidebar */}
        <div className="aw-sidebar">
          <div className="aw-sb-header">
            <span className="aw-sb-label">Accounts</span>
            <button className="aw-icon aw-icon-sm">{I.plus()}</button>
          </div>
          <div className="aw-accounts">
            {accounts.map((a, i) => (
              <div key={i} className={`aw-account ${a.active ? 'active' : ''}`}>
                <span className="aw-acct-dot" style={{background: a.color}}/>
                <div className="aw-acct-body">
                  <div className="aw-acct-name">{a.name}</div>
                  <div className="aw-acct-meta">{a.provider} · {a.buckets} bucket{a.buckets>1?'s':''}</div>
                </div>
                {a.active && <span className="aw-chev">{I.chev()}</span>}
              </div>
            ))}
          </div>

          <div className="aw-sb-section">
            <span className="aw-sb-label">Buckets · production</span>
          </div>
          <div className="aw-bucket-list">
            {['assets-prod', 'user-uploads', 'logs-archive', 'backups'].map((b, i) => (
              <div key={i} className={`aw-bucket ${i===0?'active':''}`}>
                <span className="aw-bk-icon">{I.folder(14)}</span>
                <span>{b}</span>
              </div>
            ))}
          </div>

          <div className="aw-sb-footer">
            <div className="aw-storage">
              <div className="aw-storage-row">
                <span>Storage used</span>
                <span className="aw-storage-val">42.8 GB</span>
              </div>
              <div className="aw-storage-bar"><div style={{width: '34%'}}/></div>
            </div>
          </div>
        </div>

        {/* Main */}
        <div className="aw-main">
          {/* Path + toolbar */}
          <div className="aw-toolbar">
            <div className="aw-breadcrumbs">
              <span className="aw-crumb">assets-prod</span>
              <span className="aw-crumb-sep">{I.chevRight(10)}</span>
              <span className="aw-crumb">2026</span>
              <span className="aw-crumb-sep">{I.chevRight(10)}</span>
              <span className="aw-crumb current">launch</span>
            </div>
            <div className="aw-tb-actions">
              <div className="aw-search">
                <span>{I.search(13)}</span>
                <input placeholder="Filter files…" defaultValue=""/>
                <span className="aw-kbd">⌘F</span>
              </div>
              <button className="aw-btn">
                {I.upload()} Upload
              </button>
              <button className="aw-btn aw-btn-primary">
                {I.transfer()} Transfer
              </button>
            </div>
          </div>

          {/* Selection bar */}
          <div className="aw-selbar">
            <span className="aw-selcount">2 selected</span>
            <span className="aw-sel-sep">·</span>
            <span className="aw-sel-size">51.3 MB</span>
            <div className="aw-sel-actions">
              <button className="aw-chip">Download</button>
              <button className="aw-chip">Move</button>
              <button className="aw-chip">Copy URL</button>
              <button className="aw-chip aw-chip-danger">Delete</button>
            </div>
          </div>

          {/* File table */}
          <div className="aw-table">
            <div className="aw-th">
              <span className="aw-th-cell name">Name</span>
              <span className="aw-th-cell">Size</span>
              <span className="aw-th-cell">Modified</span>
              <span className="aw-th-cell end">&nbsp;</span>
            </div>
            <div className="aw-tbody">
              {files.map((f, i) => (
                <div key={i} className={`aw-tr ${f.selected ? 'selected' : ''}`}>
                  <span className="aw-td name">
                    <span className="aw-check">
                      <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="m2 5 2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </span>
                    {fileIcon(f.type)}
                    <span className="aw-fname">{f.name}</span>
                    {f.items && <span className="aw-fmeta">{f.items}</span>}
                  </span>
                  <span className="aw-td mono">{f.size}</span>
                  <span className="aw-td">{f.mod}</span>
                  <span className="aw-td end"><button className="aw-icon aw-icon-sm">{I.more()}</button></span>
                </div>
              ))}
            </div>
          </div>

          {/* Transfer toast */}
          <div className="aw-toast">
            <div className="aw-toast-head">
              <div>
                <div className="aw-toast-title">Transferring to minio-lan · backups</div>
                <div className="aw-toast-sub">3 of 5 files · 124 MB/s</div>
              </div>
              <span className="aw-toast-badge">server-side copy</span>
            </div>
            <div className="aw-toast-rows">
              <div className="aw-toast-row">
                <span className="aw-toast-name">launch-trailer.mp4</span>
                <span className="aw-toast-pct">92%</span>
                <div className="aw-toast-bar"><div style={{width: '92%'}}/></div>
              </div>
              <div className="aw-toast-row">
                <span className="aw-toast-name">promo-poster.png</span>
                <span className="aw-toast-pct">47%</span>
                <div className="aw-toast-bar"><div style={{width: '47%'}}/></div>
              </div>
              <div className="aw-toast-row done">
                <span className="aw-toast-name">press-kit.pdf</span>
                <span className="aw-toast-pct">done</span>
                <div className="aw-toast-bar"><div style={{width: '100%'}}/></div>
              </div>
            </div>
          </div>

          {/* Status bar */}
          <div className="aw-statusbar">
            <span>8 items · 72.1 MB</span>
            <span className="aw-sb-sep">·</span>
            <span className="aw-status-dot"/>
            <span>Connected to R2</span>
            <span className="aw-sb-sep">·</span>
            <span>us-east-1</span>
            <span style={{marginLeft: 'auto'}} className="mono">v0.1.74</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.AppWindow = AppWindow;