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

function Reports() {
  const [stats, setStats] = useState({
    totalDoctors: 0,
    totalPatients: 0,
    totalAppointments: 0,
    pendingAppointments: 0
  });
  
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchHospitalStats = async () => {
      try {
        const res = await axios.get(`http://localhost:5000/api/reports/summary?startDate=${startDate}&endDate=${endDate}`);
        setStats(res.data);
      } catch (err) {
        console.error(err);
        setError("Failed to load hospital statistics.");
      }
    };

    fetchHospitalStats();
  }, [startDate, endDate]);

  return (
    <div className="space-y-6">
      {error && <div className="bg-red-50 text-red-600 p-3 rounded-xl text-sm font-medium">⚠️ {error}</div>}

      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-200 pb-4">
        <div>
          <h2 className="text-xl font-bold text-slate-800 tracking-wide flex items-center gap-2">
            <span>📊</span> Clinical Insights Matrix
          </h2>
          <p className="text-sm text-slate-500 mt-1">Real-time reports filterable by scheduling dates.</p>
        </div>
        
        <div className="flex items-center gap-2 bg-white border p-2 rounded-xl shadow-sm">
          <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="text-xs font-semibold text-slate-700 bg-slate-50 p-1 rounded focus:outline-none" />
          <span className="text-xs text-slate-400 font-bold">TO</span>
          <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="text-xs font-semibold text-slate-700 bg-slate-50 p-1 rounded focus:outline-none" />
          {(startDate || endDate) && (
            <button onClick={() => { setStartDate(''); setEndDate(''); }} className="text-[10px] bg-slate-100 hover:bg-slate-200 px-2 py-1 rounded font-bold text-slate-500 cursor-pointer">Clear</button>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {/* Card 1: Total Doctors */}
        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
          <div className="text-2xl mb-2">🩺</div>
          <div className="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Doctors</div>
          <div className="text-3xl font-black text-slate-900 mt-2">{stats.totalDoctors}</div>
        </div>

        {/* Card 2: Total Patients */}
        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
          <div className="text-2xl mb-2">🛌</div>
          <div className="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Patients</div>
          <div className="text-3xl font-black text-slate-900 mt-2">{stats.totalPatients}</div>
        </div>

        {/* Card 3: Encounter Bookings */}
        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
          <div className="text-2xl mb-2">📅</div>
          <div className="text-xs font-bold text-slate-400 uppercase tracking-wider">Encounter Bookings</div>
          <div className="text-3xl font-black text-slate-900 mt-2">{stats.totalAppointments}</div>
        </div>

        {/* Card 4: Pending Bookings */}
        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm border-l-4 border-l-amber-500">
          <div className="text-2xl mb-2">⏳</div>
          <div className="text-xs font-bold text-slate-400 uppercase tracking-wider">Pending Bookings</div>
          <div className="text-3xl font-black text-amber-600 mt-2">{stats.pendingAppointments}</div>
        </div>
      </div>
    </div>
  );
}

export default Reports;
