import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { api, getStoredUser } from '../api';

function DashboardHome() {
  const user = getStoredUser();
  const [stats, setStats] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    const load = async () => {
      try {
        if (user?.role === 'receptionist') {
          const [patientsRes, appointmentsRes] = await Promise.all([
            api.get('/patients'),
            api.get('/appointments'),
          ]);
          const appointments = appointmentsRes.data.appointments;
          setStats({
            patients: patientsRes.data.patients.length,
            appointments: appointments.length,
            scheduled: appointments.filter((a) => a.status === 'scheduled').length,
          });
        } else if (user?.role === 'doctor') {
          const [appointmentsRes, reportsRes] = await Promise.all([
            api.get('/appointments'),
            api.get('/medical-reports'),
          ]);
          const appointments = appointmentsRes.data.appointments;
          setStats({
            myAppointments: appointments.length,
            scheduled: appointments.filter((a) => a.status === 'scheduled').length,
            reports: reportsRes.data.reports.length,
          });
        }
      } catch (err) {
        setError(err.response?.data?.message || 'Could not load overview');
      }
    };
    load();
  }, [user?.role]);

  return (
    <div className="max-w-4xl">
      <h1 className="text-2xl font-bold text-slate-800 mb-2">Overview</h1>
      <p className="text-slate-600 mb-8">
        King Faisal Hospital Rwanda — appointment and medical report management.
      </p>

      {error && (
        <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
          {error}
        </p>
      )}

      {user?.role === 'receptionist' && stats && (
        <div className="grid gap-4 sm:grid-cols-3">
          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
            <p className="text-sm text-slate-500">Registered patients</p>
            <p className="text-3xl font-bold text-slate-800 mt-2">{stats.patients}</p>
            <Link to="/dashboard/patients" className="text-sm text-teal-600 hover:underline mt-3 inline-block">
              Manage patients →
            </Link>
          </div>
          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
            <p className="text-sm text-slate-500">Total appointments</p>
            <p className="text-3xl font-bold text-slate-800 mt-2">{stats.appointments}</p>
            <Link to="/dashboard/appointments" className="text-sm text-teal-600 hover:underline mt-3 inline-block">
              Manage appointments →
            </Link>
          </div>
          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
            <p className="text-sm text-slate-500">Scheduled</p>
            <p className="text-3xl font-bold text-amber-600 mt-2">{stats.scheduled}</p>
          </div>
        </div>
      )}

      {user?.role === 'doctor' && stats && (
        <div className="grid gap-4 sm:grid-cols-3">
          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
            <p className="text-sm text-slate-500">My appointments</p>
            <p className="text-3xl font-bold text-slate-800 mt-2">{stats.myAppointments}</p>
            <Link to="/dashboard/appointments" className="text-sm text-teal-600 hover:underline mt-3 inline-block">
              View appointments →
            </Link>
          </div>
          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
            <p className="text-sm text-slate-500">Scheduled</p>
            <p className="text-3xl font-bold text-amber-600 mt-2">{stats.scheduled}</p>
          </div>
          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
            <p className="text-sm text-slate-500">Medical reports</p>
            <p className="text-3xl font-bold text-teal-700 mt-2">{stats.reports}</p>
            <Link to="/dashboard/medical-reports" className="text-sm text-teal-600 hover:underline mt-3 inline-block">
              Manage reports →
            </Link>
          </div>
        </div>
      )}
    </div>
  );
}

export default DashboardHome;
