import { useState, useEffect } from 'react';
import api from '../store/auth';
import { Users, GraduationCap, BookOpen, DollarSign } from 'lucide-react';

export default function Dashboard() {
  const [stats, setStats] = useState<any>(null);

  useEffect(() => {
    api.get('/dashboard/stats').then(res => setStats(res.data)).catch(console.error);
  }, []);

  if (!stats) return <div>Loading...</div>;

  const cards = [
    { label: 'Total Students', value: stats.totalStudents, icon: GraduationCap, color: 'blue' },
    { label: 'Total Teachers', value: stats.totalTeachers, icon: Users, color: 'green' },
    { label: 'Total Classes', value: stats.totalClasses, icon: BookOpen, color: 'purple' },
    { label: 'Total Revenue', value: `$${stats.totalRevenue.toLocaleString()}`, icon: DollarSign, color: 'orange' },
  ];

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">Dashboard</h1>
      
      <div className="grid grid-4 mb-6">
        {cards.map(({ label, value, icon: Icon, color }) => (
          <div key={label} className="card stat-card">
            <div className={`stat-icon ${color}`}>
              <Icon size={24} />
            </div>
            <div className="stat-info">
              <h3>{value}</h3>
              <p>{label}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="grid grid-2">
        <div className="card">
          <div className="card-header">
            <h2 className="card-title">Quick Stats</h2>
          </div>
          <div className="flex flex-col gap-4">
            <div className="flex items-center justify-between">
              <span>Pending Fees</span>
              <span className="font-semibold">${stats.pendingFees.toLocaleString()}</span>
            </div>
            <div className="flex items-center justify-between">
              <span>Today's Attendance</span>
              <span className="font-semibold">
                {stats.todayAttendance.present} / {stats.todayAttendance.total}
              </span>
            </div>
            <div className="flex items-center justify-between">
              <span>Attendance Rate</span>
              <span className="font-semibold badge badge-success">
                {stats.todayAttendance.total > 0 
                  ? Math.round((stats.todayAttendance.present / stats.todayAttendance.total) * 100)
                  : 0}%
              </span>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <h2 className="card-title">System Info</h2>
          </div>
          <div className="flex flex-col gap-4">
            <div className="flex items-center justify-between">
              <span>Database</span>
              <span className="badge badge-success">Connected</span>
            </div>
            <div className="flex items-center justify-between">
              <span>API Status</span>
              <span className="badge badge-success">Online</span>
            </div>
            <div className="flex items-center justify-between">
              <span>Version</span>
              <span className="font-semibold">1.0.0</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}