"use client";

import { useState, useEffect } from 'react';

type Task = { id: string; title: string; status: string; assignee: string };
type CronJob = { name: string; enabled: boolean; status: string };

export default function MissionControl() {
  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]);

  return (
    <div style={{ minHeight: '100vh', background: '#0a0a0f', color: '#fff', padding: '20px', fontFamily: 'monospace' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>MISSION CONTROL</h1>
      
      <div style={{ display: 'flex', gap: '10px', marginBottom: '20px', flexWrap: 'wrap' }}>
        {['tasks', 'crons', 'server', 'backups', 'agents', 'whatsapp', 'memory'].map(t => (
          <button key={t} onClick={() => setTab(t)} style={{ padding: '10px 20px', background: tab === t ? '#ff0050' : '#333', color: '#fff', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>{t}</button>
        ))}
      </div>

      {loading ? (
        <p>Loading...</p>
      ) : (
        <pre style={{ background: '#111', padding: '20px', borderRadius: '10px', overflow: 'auto', maxHeight: '70vh' }}>
          {JSON.stringify(data, null, 2)}
        </pre>
      )}
    </div>
  );
}