"use client";

import { useState } from 'react';

// Mission Control - Next.js App
// Track tasks, content, calendar, memory, team, and office

// Types
type TaskStatus = 'todo' | 'in-progress' | 'done';
type Task = { id: string; title: string; status: TaskStatus; assignee: 'me' | 'jelena' | 'neo' };

type ContentStage = 'idea' | 'script' | 'thumbnail' | 'filming' | 'done';
type ContentItem = { id: string; title: string; stage: ContentStage; script?: string };

type CalendarEvent = { id: string; title: string; date: string; type: 'cron' | 'scheduled' };

type Memory = { id: string; title: string; date: string; preview: string };

type TeamMember = { id: string; name: string; role: string; status: 'working' | 'idle' };

export default function MissionControl() {
  const [activeTab, setActiveTab] = useState('tasks');

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', minHeight: '100vh', background: '#0f0f23', color: 'white' }}>
      <header style={{ padding: '20px 40px', borderBottom: '1px solid #1e1e3f', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h1 style={{ fontSize: '1.8rem', fontWeight: 700 }}>🎯 Mission Control</h1>
        <nav style={{ display: 'flex', gap: '10px' }}>
          {['tasks', 'content', 'calendar', 'memory', 'team', 'office'].map(tab => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              style={{
                padding: '10px 20px',
                background: activeTab === tab ? '#e94560' : 'transparent',
                border: 'none',
                borderRadius: '8px',
                color: 'white',
                cursor: 'pointer',
                textTransform: 'capitalize'
              }}
            >
              {tab}
            </button>
          ))}
        </nav>
      </header>
      <main style={{ padding: '40px' }}>
        {activeTab === 'tasks' && <TasksBoard />}
        {activeTab === 'content' && <ContentPipeline />}
        {activeTab === 'calendar' && <Calendar />}
        {activeTab === 'memory' && <Memory />}
        {activeTab === 'team' && <Team />}
        {activeTab === 'office' && <Office />}
      </main>
    </div>
  );
}

function TasksBoard() {
  const [tasks, setTasks] = useState<Task[]>([
    { id: '1', title: 'Fix git backup push', status: 'in-progress', assignee: 'neo' },
    { id: '2', title: 'Deploy nodecrew landing page', status: 'done', assignee: 'neo' },
    { id: '3', title: 'Fix YouTube backup', status: 'todo', assignee: 'neo' },
    { id: '4', title: 'Setup Mission Control', status: 'in-progress', assignee: 'jelena' },
  ]);

  const columns: { status: TaskStatus; label: string; color: string }[] = [
    { status: 'todo', label: 'To Do', color: '#6b7280' },
    { status: 'in-progress', label: 'In Progress', color: '#e94560' },
    { status: 'done', label: 'Done', color: '#10b981' },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
      {columns.map(col => (
        <div key={col.status} style={{ background: '#1a1a2e', borderRadius: '12px', padding: '20px' }}>
          <h3 style={{ color: col.color, marginBottom: '20px' }}>{col.label}</h3>
          {tasks.filter(t => t.status === col.status).map(task => (
            <div key={task.id} style={{ background: '#16213e', padding: '15px', borderRadius: '8px', marginBottom: '10px' }}>
              <p>{task.title}</p>
              <span style={{ fontSize: '0.8rem', color: '#9ca3af' }}>@{task.assignee}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

function ContentPipeline() {
  const [items, setItems] = useState<ContentItem[]>([
    { id: '1', title: 'ManoonOils Ad Copy', stage: 'script' },
    { id: '2', title: 'AI Agency Promo', stage: 'idea' },
    { id: '3', title: 'Product Launch Video', stage: 'thumbnail' },
  ]);

  const stages: { stage: ContentStage; label: string }[] = [
    { stage: 'idea', label: '💡 Ideas' },
    { stage: 'script', label: '📝 Script' },
    { stage: 'thumbnail', label: '🖼️ Thumbnail' },
    { stage: 'filming', label: '🎬 Filming' },
    { stage: 'done', label: '✅ Done' },
  ];

  return (
    <div style={{ display: 'flex', gap: '15px', overflowX: 'auto', paddingBottom: '20px' }}>
      {stages.map(s => (
        <div key={s.stage} style={{ minWidth: '250px', background: '#1a1a2e', borderRadius: '12px', padding: '20px' }}>
          <h3 style={{ marginBottom: '15px' }}>{s.label}</h3>
          {items.filter(i => i.stage === s.stage).map(item => (
            <div key={item.id} style={{ background: '#16213e', padding: '15px', borderRadius: '8px', marginBottom: '10px' }}>
              {item.title}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

function Calendar() {
  const events: CalendarEvent[] = [
    { id: '1', title: 'Twitter Briefing', date: '2026-02-19 06:00', type: 'cron' },
    { id: '2', title: 'Infra Status Report', date: '2026-02-19 07:00', type: 'cron' },
    { id: '3', title: 'ManoonOils Analytics', date: '2026-02-19 08:00', type: 'cron' },
  ];

  return (
    <div style={{ background: '#1a1a2e', borderRadius: '12px', padding: '30px' }}>
      <h2 style={{ marginBottom: '30px' }}>📅 Scheduled Tasks & Cron Jobs</h2>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ borderBottom: '1px solid #2a2a4e' }}>
            <th style={{ textAlign: 'left', padding: '15px', color: '#9ca3af' }}>Task</th>
            <th style={{ textAlign: 'left', padding: '15px', color: '#9ca3af' }}>Date/Time</th>
            <th style={{ textAlign: 'left', padding: '15px', color: '#9ca3af' }}>Type</th>
          </tr>
        </thead>
        <tbody>
          {events.map(event => (
            <tr key={event.id} style={{ borderBottom: '1px solid #2a2a4e' }}>
              <td style={{ padding: '15px' }}>{event.title}</td>
              <td style={{ padding: '15px', color: '#9ca3af' }}>{event.date}</td>
              <td style={{ padding: '15px' }}>
                <span style={{ background: event.type === 'cron' ? '#e94560' : '#10b981', padding: '4px 12px', borderRadius: '20px', fontSize: '0.8rem' }}>
                  {event.type}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function Memory() {
  const memories: Memory[] = [
    { id: '1', title: 'ManoonOils Product Formula', date: '2026-02-07', preview: 'Professional formulation for anti-aging serum...' },
    { id: '2', title: 'Backup System Setup', date: '2026-02-05', preview: 'Storage Box mounted at /mnt/storagebox...' },
    { id: '3', title: 'Neo Agent Created', date: '2026-02-03', preview: 'Neo as CTO - infrastructure agent...' },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '20px' }}>
      {memories.map(mem => (
        <div key={mem.id} style={{ background: '#1a1a2e', borderRadius: '12px', padding: '20px' }}>
          <h3>{mem.title}</h3>
          <p style={{ color: '#9ca3af', fontSize: '0.9rem', marginTop: '10px' }}>{mem.preview}</p>
          <span style={{ color: '#6b7280', fontSize: '0.8rem' }}>{mem.date}</span>
        </div>
      ))}
    </div>
  );
}

function Team() {
  const members: TeamMember[] = [
    { id: '1', name: 'Jelena', role: 'Chief of Staff', status: 'working' },
    { id: '2', name: 'Neo', role: 'CTO / DevOps', status: 'working' },
    { id: '3', name: 'Agent 3', role: 'Sales Agent', status: 'idle' },
    { id: '4', name: 'Agent 4', role: 'Ad Manager', status: 'idle' },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '20px' }}>
      {members.map(member => (
        <div key={member.id} style={{ background: '#1a1a2e', borderRadius: '12px', padding: '25px', display: 'flex', alignItems: 'center', gap: '15px' }}>
          <div style={{ width: '50px', height: '50px', borderRadius: '50%', background: member.status === 'working' ? '#10b981' : '#6b7280', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.5rem' }}>
            {member.name[0]}
          </div>
          <div>
            <h3>{member.name}</h3>
            <p style={{ color: '#9ca3af', fontSize: '0.9rem' }}>{member.role}</p>
            <span style={{ color: member.status === 'working' ? '#10b981' : '#6b7280', fontSize: '0.8rem' }}>
              {member.status === 'working' ? '● Working' : '○ Idle'}
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}

function Office() {
  const agents = [
    { name: 'Jelena', area: 'Executive Suite', working: true, task: 'Managing operations' },
    { name: 'Neo', area: 'Server Room', working: true, task: 'Infrastructure monitoring' },
  ];

  return (
    <div style={{ background: '#1a1a2e', borderRadius: '12px', padding: '30px' }}>
      <h2 style={{ marginBottom: '30px' }}>🏢 Digital Office</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px' }}>
        {agents.map(agent => (
          <div key={agent.name} style={{ background: '#16213e', borderRadius: '12px', padding: '25px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <h3>{agent.name}</h3>
              <span style={{ width: '12px', height: '12px', borderRadius: '50%', background: agent.working ? '#10b981' : '#6b7280' }} />
            </div>
            <p style={{ color: '#9ca3af', marginTop: '10px' }}>📍 {agent.area}</p>
            <p style={{ color: '#e94560', marginTop: '5px' }}>💻 {agent.task}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
