// STUDIO — Platform wrapper (8 tabs + KPI header + activity feed)
const { useState: useStPl } = React;
const TspPl = window.ArbiterTokens;

// ── Activity Feed ──────────────────────────────────────────────────────────────
function StudioActivity() {
  const st   = window.__st;
  const data = window.STUDIO_DATA;

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 260px', gap: '16px', alignItems: 'start' }}>
      <div style={{ ...st.card, marginBottom: 0 }}>
        <div style={st.cardH}><span>Recent Activity</span><button style={st.btnGhost}>Filter</button></div>
        {data.activity.map((a, i) => (
          <div key={a.id} style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', padding: '12px 16px', borderBottom: i < data.activity.length - 1 ? `1px solid ${TspPl.color.border.light}` : 'none' }}>
            <div style={{ width: '28px', height: '28px', borderRadius: '50%', background: `${a.accent}18`, border: `1px solid ${a.accent}33`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', color: a.accent, flexShrink: 0, marginTop: '1px' }}>{a.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '2px' }}>
                <span style={{ fontSize: '12px', fontWeight: 600, color: TspPl.color.text.primary }}>{a.user}</span>
                <span style={{ fontSize: '11px', color: TspPl.color.text.secondary }}>{a.action}</span>
              </div>
              <div style={{ fontSize: '11px', color: st.gold, fontWeight: 500, marginBottom: '2px' }}>{a.doc}</div>
              <div style={{ fontSize: '10px', color: TspPl.color.text.tertiary }}>{a.time}</div>
            </div>
          </div>
        ))}
      </div>

      <div>
        <div style={st.card}>
          <div style={st.cardH}><span>This Week</span></div>
          <div style={{ padding: '12px 14px' }}>
            {[['Documents saved', 34], ['Reviews completed', 8], ['Templates used', 12], ['Published', 5], ['Collaborators active', 7]].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px', paddingBottom: '10px', borderBottom: `1px solid ${TspPl.color.border.light}` }}>
                <span style={{ fontSize: '11px', color: TspPl.color.text.secondary }}>{k}</span>
                <span style={{ fontSize: '15px', fontWeight: 700, color: TspPl.color.text.primary, fontFamily: TspPl.font.mono }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={st.card}>
          <div style={st.cardH}><span>Top Contributors</span></div>
          <div style={{ padding: '10px 14px' }}>
            {[['M. Kirkland', 14, st.gold], ['S. Chen', 9, st.cobalt], ['R. Torres', 6, st.violet], ['A. Williams', 5, st.emerald]].map(([name, docs, c]) => (
              <div key={name} style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
                <div style={{ width: '24px', height: '24px', borderRadius: '50%', background: `${c}18`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '10px', fontWeight: 700, color: c }}>
                  {name.split(' ').map(w => w[0]).join('')}
                </div>
                <span style={{ flex: 1, fontSize: '11px', color: TspPl.color.text.primary }}>{name}</span>
                <span style={{ fontSize: '11px', fontWeight: 600, color: c, fontFamily: TspPl.font.mono }}>{docs} docs</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Studio Platform ────────────────────────────────────────────────────────────
function StudioPlatform() {
  const [activeTab, setActiveTab] = useStPl('canvas');
  const st   = window.__st;
  const data = window.STUDIO_DATA;
  const k    = data.kpis;

  const tabs = [
    { id: 'canvas',    label: ' Canvas'    },
    { id: 'drafts',    label: '▤ Drafts'    },
    { id: 'templates', label: '◈ Templates' },
    { id: 'reviews',   label: '◉ Reviews'   },
    { id: 'sources',   label: '⟐ Sources'   },
    { id: 'versions',  label: ' Versions'  },
    { id: 'publish',   label: '▶ Publish'   },
    { id: 'activity',  label: '◎ Activity'  },
    { id: 'builder',   label: '◆ Builder'   },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'canvas':    return <StudioCanvas />;
      case 'drafts':    return <StudioDrafts />;
      case 'templates': return <StudioTemplates />;
      case 'reviews':   return <StudioReviews />;
      case 'sources':   return <StudioSources />;
      case 'versions':  return <StudioVersions />;
      case 'publish':   return <StudioPublish />;
      case 'activity':  return <StudioActivity />;
      case 'builder':   return <StudioBuilder />;
      default:          return <StudioCanvas />;
    }
  };

  return (
    <div style={st.container}>
      {/* Header */}
      <div style={st.header}>
        <div style={st.headerTitle}>
          <div style={st.stIcon}>{window.Icons && <window.Icons.Studio size={16} color="#fff" strokeWidth={1.75} />}</div>
          <div>
            <div style={st.title}>Studio</div>
            <div style={st.subtitle}>Compose · Draft · Collaborate · Publish · Integrate all platforms</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap' }}>
          {[
            [TspPl.color.bg.secondary, TspPl.color.border.light, TspPl.color.text.tertiary, TspPl.color.text.primary, 'Active Drafts', st.num(k.activeDrafts)],
            [st.goldBg, st.goldBorder, st.goldDeep, st.gold, 'In Review', k.inReview],
            ['rgba(5,150,105,0.06)', `${st.emerald}22`, st.emerald, st.emerald, 'Published / Mo', k.publishedMonth],
            ['rgba(180,83,9,0.06)', 'rgba(180,83,9,0.15)', st.amber, st.amber, 'Pending Sign-off', k.pendingSignoff],
            [st.cobaltBg, `${st.cobalt}22`, st.cobalt, st.cobalt, 'Collaborators', k.collaborators],
          ].map(([bg, border, labelColor, valColor, label, val]) => (
            <div key={label} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: bg, border: `1px solid ${border}` }}>
              <span style={{ fontSize: '10px', fontWeight: 600, color: labelColor, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{label}</span>
              <span style={{ fontSize: '14px', fontWeight: 700, color: valColor, fontFamily: TspPl.font.mono }}>{val}</span>
            </div>
          ))}
          <button style={st.btnPrimary}>+ New Document</button>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ ...st.tabs, overflowX: 'auto' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)}
            style={{ ...st.tab, ...(activeTab === t.id ? st.tabActive : {}) }}>
            {t.label}
          </button>
        ))}
      </div>

      {/* Body */}
      <div style={st.body}>
        {renderTab()}
      </div>
    </div>
  );
}

window.StudioPlatform = StudioPlatform;