// === LLM Analytics Workspace Dashboard ===

const WorkspacePage = ({ onBack }) => {
  const [active, setActive] = React.useState('admiral-uk');
  const workspaces = [
    { id: 'admiral-uk', name: 'Admiral UK', domain: 'admiral.com', plan: 'BYO', queries: 142, used: 84, limit: 100 },
    { id: 'admiral-business', name: 'Admiral Business', domain: 'admiralbusiness.com', plan: 'BYO', queries: 88, used: 41, limit: 100 },
    { id: 'gladiator', name: 'Gladiator', domain: 'gladiator.co.uk', plan: 'shared', queries: 78, used: 38, limit: 50 },
    { id: 'morethan', name: 'MoreThan', domain: 'morethan.com', plan: 'shared', queries: 64, used: 22, limit: 50 },
  ];
  const ws = workspaces.find(w => w.id === active);

  return (
    <div className="body">
      <div className="card" style={{padding: 0}}>
        <div style={{padding: '20px 22px', display: 'flex', alignItems: 'center', gap: 18}}>
          <div className="logo" style={{width: 44, height: 44, background: 'var(--navy)', color: '#fff', borderRadius: 8, display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontSize: 28, fontStyle: 'italic'}}>w</div>
          <div className="stack-4" style={{flex: 1}}>
            <div className="eyebrow">Bloxx LLM Analytics · workspace dashboard</div>
            <h1 className="section-title" style={{fontSize: 24}}>Standalone analytics workspaces</h1>
            <div className="muted" style={{fontSize: 12.5, maxWidth: 720}}>
              External workspaces tracked outside the editor. Password-gated v1; email JWT planned for v2. Each workspace = its own settings, brand names, domain aliases, and API keys.
            </div>
          </div>
          <Btn primary><Icon name="plus" size={11}/> New workspace</Btn>
        </div>
      </div>

      {/* Workspace selector cards */}
      <div className="grid-4">
        {workspaces.map(w => (
          <div
            key={w.id}
            className="brand-card"
            onClick={() => setActive(w.id)}
            style={{borderColor: active === w.id ? 'var(--navy)' : '', boxShadow: active === w.id ? '0 0 0 2px var(--navy-soft)' : ''}}
          >
            <div className="head">
              <Fav init={w.name.split(' ').map(s => s[0]).join('').slice(0,2)} size="lg"/>
              <div style={{flex: 1, minWidth: 0}}>
                <h4>{w.name}</h4>
                <div className="muted mono" style={{fontSize: 10.5}}>{w.domain}</div>
              </div>
              <Pill tone={w.plan === 'BYO' ? 'navy' : ''}>{w.plan}</Pill>
            </div>
            <div className="stat-row">
              <div className="stat">
                <div className="v">{w.queries}</div>
                <div className="l">Queries</div>
              </div>
              <div className="stat">
                <div className="v">{w.used}<span style={{fontSize: 11, color: 'var(--ink-3)'}}>/{w.limit}</span></div>
                <div className="l">Today</div>
              </div>
              <div className="stat">
                <div className="v" style={{color: w.used/w.limit > 0.8 ? 'var(--coral)' : 'var(--ink-1)'}}>{Math.round(w.used/w.limit*100)}%</div>
                <div className="l">Quota</div>
              </div>
            </div>
            <div className="bar" style={{height: 4}}>
              <span style={{width: `${w.used/w.limit*100}%`, background: w.used/w.limit > 0.8 ? 'var(--coral)' : 'var(--navy)'}}/>
            </div>
          </div>
        ))}
      </div>

      {/* Active workspace detail */}
      <div className="grid-2" style={{gridTemplateColumns: '1.5fr 1fr', alignItems: 'flex-start'}}>
        <div className="card">
          <div className="card-head">
            <h3>{ws.name} · cost & usage</h3>
            <span className="sub">last 30 days</span>
            <div className="grow"/>
            <Pill tone={ws.plan === 'BYO' ? 'navy' : ''}>{ws.plan === 'BYO' ? 'BYO key (100/day)' : 'shared (50/day)'}</Pill>
          </div>
          <div className="card-body">
            <div className="kpi-grid" style={{borderRadius: 0, border: 'none', gridTemplateColumns: 'repeat(4, 1fr)'}}>
              <div className="kpi" style={{borderBottom: '1px solid var(--line)'}}>
                <div className="label">Total runs</div>
                <div className="value">2,418</div>
                <div className="delta-row"><Delta d="+312"/> vs last 30d</div>
              </div>
              <div className="kpi" style={{borderBottom: '1px solid var(--line)'}}>
                <div className="label">Est. cost</div>
                <div className="value">£84<span className="unit">.20</span></div>
                <div className="delta-row"><Delta d="+£12"/> vs last 30d</div>
              </div>
              <div className="kpi" style={{borderBottom: '1px solid var(--line)'}}>
                <div className="label">Avg per query</div>
                <div className="value">£0.034</div>
                <div className="delta-row"><span className="muted">Sonnet 3.7</span></div>
              </div>
              <div className="kpi" style={{borderBottom: '1px solid var(--line)', borderRight: 'none'}}>
                <div className="label">Tokens</div>
                <div className="value">4.2M</div>
                <div className="delta-row"><span className="muted">in: 1.1M · out: 3.1M</span></div>
              </div>
            </div>

            <div style={{padding: 14}}>
              <div className="eyebrow" style={{marginBottom: 10}}>Cost breakdown by model · last 30d</div>
              <div className="stack-8">
                {[
                  {m: 'Claude Sonnet 4', pct: 42, cost: 35.36, c: '#d97757'},
                  {m: 'GPT-4o', pct: 28, cost: 23.58, c: '#10a37f'},
                  {m: 'Gemini 2.0', pct: 18, cost: 15.16, c: '#4285f4'},
                  {m: 'Perplexity Sonar', pct: 12, cost: 10.10, c: '#20808d'},
                ].map(r => (
                  <div key={r.m}>
                    <div className="row" style={{justifyContent: 'space-between', fontSize: 12, marginBottom: 4}}>
                      <span style={{fontWeight: 500}}>{r.m}</span>
                      <span className="mono muted">£{r.cost.toFixed(2)} · {r.pct}%</span>
                    </div>
                    <div className="bar" style={{height: 6}}><span style={{width: `${r.pct*2.4}%`, background: r.c}}/></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Workspace settings</h3>
            <span className="sub">{ws.domain}</span>
          </div>
          <div className="card-body" style={{display: 'flex', flexDirection: 'column', gap: 12}}>
            <div className="stack-4">
              <div className="eyebrow">Brand names</div>
              <div className="row" style={{gap: 4, flexWrap: 'wrap'}}>
                <Pill>Admiral</Pill><Pill>Admiral Insurance</Pill><Pill>admiral.com</Pill>
                <Pill>+ add</Pill>
              </div>
            </div>
            <div className="stack-4">
              <div className="eyebrow">Domain aliases</div>
              <div className="row" style={{gap: 4, flexWrap: 'wrap'}}>
                <Pill>admiral.co.uk</Pill><Pill>admiralgroup.co.uk</Pill>
                <Pill>+ add</Pill>
              </div>
            </div>
            <div className="stack-4">
              <div className="eyebrow">API keys</div>
              <div className="stack-4">
                {[
                  {p: 'Anthropic', k: 'sk-ant-***********bc12', ok: true},
                  {p: 'OpenAI', k: 'sk-proj-************4f9a', ok: true},
                  {p: 'Google AI', k: 'AIzaSy*************Q', ok: true},
                  {p: 'Perplexity', k: 'pplx-***********e3', ok: false},
                ].map(k => (
                  <div key={k.p} className="row" style={{gap: 8, padding: 8, background: 'var(--surface-2)', borderRadius: 6, fontSize: 12}}>
                    <span style={{width: 6, height: 6, borderRadius: '50%', background: k.ok ? 'var(--green)' : 'var(--coral)'}}/>
                    <span style={{fontWeight: 500, width: 80}}>{k.p}</span>
                    <span className="mono muted" style={{flex: 1, fontSize: 11}}>{k.k}</span>
                    <Icon name="settings" size={12}/>
                  </div>
                ))}
              </div>
            </div>
            <div className="stack-4">
              <div className="eyebrow">Schedule</div>
              <div className="row" style={{gap: 6}}>
                <Pill active>Daily</Pill><Pill>Hourly</Pill><Pill>Weekly</Pill><Pill>Manual</Pill>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.WorkspacePage = WorkspacePage;