"use client";

import { useState, useEffect } from 'react';

export default function Page() {
  const [tab, setTab] = useState('tasks');
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch('/api/data?type=' + tab)
      .then(r => r.json())
      .then(d => { setData(d); setLoading(false); })
      .catch(() => setLoading(false));
  }, [tab]);

  const tabs = ['tasks','crons','server','backups','agents','whatsapp','memory'];

  return (
    <div style={{background:'#000',minHeight:'100vh',color:'#fff',fontFamily:'monospace',padding:'20px'}}>
      <h1 style={{fontSize:'20px',marginBottom:'15px'}}>MISSION CONTROL</h1>
      <div style={{display:'flex',gap:'5px',flexWrap:'wrap',marginBottom:'15px'}}>
        {tabs.map(t => (
          <button key={t} onClick={()=>setTab(t)} style={{
            padding:'8px 12px',background:tab===t?'#f0f': '#333',
            color:'#fff',border:'none',borderRadius:'4px',fontSize:'12px'
          }}>{t}</button>
        ))}
      </div>
      <pre style={{background:'#111',padding:'15px',borderRadius:'8px',overflow:'auto'}}>
        {loading ? 'Loading...' : JSON.stringify(data,null,2)}
      </pre>
    </div>
  );
}