import React, { useState, useEffect } from 'react';
import { Header } from '../../components/Header';
import { TaskCard } from '../../components/TaskCard';
import { useCallTool } from '../../hooks/useCallTool';
import '../../styles/global.css';

export function App() {
  const [tasks, setTasks] = useState<any[]>([]);
  const [filter, setFilter] = useState({ status: 'Active', importance: '' });
  const { callTool, loading } = useCallTool();

  useEffect(() => {
    loadTasks();
  }, [filter]);

  const loadTasks = async () => {
    const result = await callTool('wrike_list_tasks', filter);
    if (result.data) setTasks(result.data);
  };

  const stats = {
    total: tasks.length,
    high: tasks.filter(t => t.importance === 'High').length,
    active: tasks.filter(t => t.status === 'Active').length,
    completed: tasks.filter(t => t.status === 'Completed').length,
  };

  return (
    <div className="app-container">
      <Header 
        title="Task Dashboard" 
        subtitle={`${stats.total} tasks`}
        actions={
          <button className="btn btn-primary" onClick={loadTasks}>
            Refresh
          </button>
        }
      />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', marginBottom: '24px' }}>
        <div className="card">
          <h3 style={{ margin: '0 0 8px 0', fontSize: '14px', color: 'var(--text-secondary)' }}>Total Tasks</h3>
          <div style={{ fontSize: '32px', fontWeight: 'bold' }}>{stats.total}</div>
        </div>
        <div className="card">
          <h3 style={{ margin: '0 0 8px 0', fontSize: '14px', color: 'var(--text-secondary)' }}>High Priority</h3>
          <div style={{ fontSize: '32px', fontWeight: 'bold', color: 'var(--danger)' }}>{stats.high}</div>
        </div>
        <div className="card">
          <h3 style={{ margin: '0 0 8px 0', fontSize: '14px', color: 'var(--text-secondary)' }}>Active</h3>
          <div style={{ fontSize: '32px', fontWeight: 'bold', color: 'var(--info)' }}>{stats.active}</div>
        </div>
        <div className="card">
          <h3 style={{ margin: '0 0 8px 0', fontSize: '14px', color: 'var(--text-secondary)' }}>Completed</h3>
          <div style={{ fontSize: '32px', fontWeight: 'bold', color: 'var(--success)' }}>{stats.completed}</div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
        <select className="select" style={{ width: 'auto' }} value={filter.status} onChange={e => setFilter({...filter, status: e.target.value})}>
          <option value="">All Status</option>
          <option value="Active">Active</option>
          <option value="Completed">Completed</option>
          <option value="Deferred">Deferred</option>
          <option value="Cancelled">Cancelled</option>
        </select>
        <select className="select" style={{ width: 'auto' }} value={filter.importance} onChange={e => setFilter({...filter, importance: e.target.value})}>
          <option value="">All Priorities</option>
          <option value="High">High</option>
          <option value="Normal">Normal</option>
          <option value="Low">Low</option>
        </select>
      </div>

      {loading ? (
        <div className="loading">Loading tasks...</div>
      ) : (
        <div>
          {tasks.map(task => (
            <TaskCard key={task.id} task={task} />
          ))}
        </div>
      )}
    </div>
  );
}
