import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Dashboard = () => {
  const [stats, setStats] = useState(null);

  useEffect(() => {
    const fetchStats = async () => {
      const res = await axios.get('/dashboard/overview');
      setStats(res.data);
    };
    fetchStats();
  }, []);

  if (!stats) return <div className="p-10 text-center">Analyzing Data...</div>;

  return (
    <div className="space-y-6">
      {/* 18 Focus Areas Progress */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-900">
          <h3 className="text-gray-500 text-sm font-medium">Active Rocks (EOS)</h3>
          <p className="text-3xl font-bold text-blue-900">{stats.rockStats.onTrack} / {stats.rockStats.total}</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-yellow-500">
          <h3 className="text-gray-500 text-sm font-medium">Pending Approvals</h3>
          <p className="text-3xl font-bold text-yellow-600">{stats.taskStats.pendingApproval}</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-red-500">
          <h3 className="text-gray-500 text-sm font-medium">Overdue Tasks</h3>
          <p className="text-3xl font-bold text-red-600">{stats.taskStats.overdue}</p>
        </div>
      </div>

      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-lg font-bold text-gray-800 mb-4">PES Strategic Focus Areas (18 Points)</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {stats.focusAreas.map((area) => (
            <div key={area.id} className="border p-3 rounded hover:bg-gray-50 flex justify-between items-center">
              <span className="text-sm text-gray-700 font-medium">{area.name}</span>
              <div className="flex items-center space-x-2">
                <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">{area.tasks_count} Tasks</span>
                <div className="w-16 bg-gray-200 rounded-full h-1.5">
                  <div className="bg-blue-600 h-1.5 rounded-full" style={{ width: `${area.avg_rock_progress || 0}%` }}></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Dashboard;