import { useEffect, useState } from 'react';
import { supabase } from '../lib/supabase';
import { useAuth } from '../contexts/AuthContext';

interface DashboardStats {
  visitorsToday: number;
  activeComplaints: number;
  pendingVisitors: number;
  recentNotices: any[];
}

export default function Dashboard() {
  const { user } = useAuth();
  const [stats, setStats] = useState<DashboardStats>({
    visitorsToday: 0,
    activeComplaints: 0,
    pendingVisitors: 0,
    recentNotices: [],
  });

  useEffect(() => {
    const fetchDashboardData = async () => {
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      const [visitorsResult, complaintsResult, pendingResult, noticesResult] = await Promise.all([
        supabase
          .from('visitors')
          .select('count')
          .gte('created_at', today.toISOString()),
        
        supabase
          .from('complaints')
          .select('count')
          .eq('status', 'open'),
        
        supabase
          .from('visitors')
          .select('count')
          .eq('status', 'pending'),
        
        supabase
          .from('notices')
          .select('*')
          .order('created_at', { ascending: false })
          .limit(5),
      ]);

      setStats({
        visitorsToday: visitorsResult.count || 0,
        activeComplaints: complaintsResult.count || 0,
        pendingVisitors: pendingResult.count || 0,
        recentNotices: noticesResult.data || [],
      });
    };

    fetchDashboardData();
  }, []);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white p-6 rounded-lg shadow">
          <h3 className="text-lg font-medium">Today's Visitors</h3>
          <p className="text-3xl font-bold mt-2">{stats.visitorsToday}</p>
        </div>
        
        <div className="bg-white p-6 rounded-lg shadow">
          <h3 className="text-lg font-medium">Active Complaints</h3>
          <p className="text-3xl font-bold mt-2">{stats.activeComplaints}</p>
        </div>
        
        <div className="bg-white p-6 rounded-lg shadow">
          <h3 className="text-lg font-medium">Pending Visitors</h3>
          <p className="text-3xl font-bold mt-2">{stats.pendingVisitors}</p>
        </div>
      </div>

      <div className="bg-white p-6 rounded-lg shadow">
        <h3 className="text-lg font-medium mb-4">Recent Notices</h3>
        <div className="space-y-4">
          {stats.recentNotices.map((notice) => (
            <div key={notice.id} className="border-b pb-4">
              <h4 className="font-medium">{notice.title}</h4>
              <p className="text-gray-600 mt-1">{notice.content}</p>
              <p className="text-sm text-gray-500 mt-2">
                {new Date(notice.created_at).toLocaleDateString()}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}