// AUTOMATION PLATFORM — entry (13 tabs)
const { useState: useAuPlatState } = React;
const Taup = window.ArbiterTokens;

function AutoPlatform() {
  const [activeTab, setActiveTab] = useAuPlatState('dashboard');
  const au = window.__au;
  const data = window.AUTO_DATA;
  const k = data.kpis;

  const tabs = [
    { id: 'dashboard',    label: 'Dashboard' },
    { id: 'myqueue',      label: 'My Queue' },
    { id: 'tasks',        label: 'Tasks' },
    { id: 'workflows',    label: 'Workflows' },
    { id: 'events',       label: 'Events' },
    { id: 'integrations', label: 'Integrations' },
    { id: 'reliability',  label: 'Reliability' },
    { id: 'governance',   label: 'Governance' },
    { id: 'ops',          label: 'Ops' },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'dashboard':    return <AutoDashboard            data={data} />;
      case 'myqueue':      return <AutoMyQueue              data={data} />;
      case 'tasks':        return <AutoTasksPlatform />;
      case 'workflows':    return <AutoWorkflowsPlatform />;
      case 'events':       return <AutoEventsPlatform />;
      case 'integrations': return <AutoIntegrationsPlatform />;
      case 'reliability':  return <AutoReliability          data={data} />;
      case 'governance':   return <AutoGovernance           data={data} />;
      case 'ops':          return <AutoOps                  data={data} />;
      default:             return <AutoDashboard            data={data} />;
    }
  };

  return (
    <div style={au.container}>
      <div style={au.header}>
        <div style={au.headerTitle}>
          <div style={au.auIcon}>{window.Icons && <window.Icons.Automation size={16} color="#fff" strokeWidth={1.75} />}</div>
          <div>
            <div style={au.title}>Automation Platform</div>
            <div style={au.subtitle}>Tasks · Workflows · Events · Triggers · Integrations · Scripts · Audit</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: Taup.color.bg.secondary, border: `1px solid ${Taup.color.border.light}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: Taup.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Active Tasks</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: Taup.color.text.primary, fontFamily: Taup.font.mono }}>{au.num(k.activeTasks)}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: au.limeBg, border: `1px solid ${au.limeBorder}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: au.limeDeep, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Active Runs</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: au.lime, fontFamily: Taup.font.mono }}>{k.activeRuns}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: au.emeraldBg, border: `1px solid ${au.emerald}22` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: au.emerald, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Success YTD</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: au.emerald, fontFamily: Taup.font.mono }}>{k.successRatePct}%</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: 'rgba(185,28,28,0.06)', border: '1px solid rgba(185,28,28,0.15)' }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: '#B91C1C', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Overdue</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: '#B91C1C', fontFamily: Taup.font.mono }}>{k.overdue}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: au.cobaltBg, border: `1px solid ${au.cobalt}22` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: au.cobalt, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Events/day</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: au.cobalt, fontFamily: Taup.font.mono }}>{au.num(k.eventsPerDay)}</span>
          </div>
          <button style={au.btnPrimary}>+ New workflow</button>
        </div>
      </div>

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

      <div style={au.body}>
        {renderTab()}
      </div>
    </div>
  );
}

window.AutoPlatform = AutoPlatform;