import { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { Users, Calendar } from 'lucide-react';
import { useAuthStore } from '../../store/useAuthStore';
import { usePractitionerStore } from '../store/usePractitionerStore';

export default function DashboardPage() {
  const user = useAuthStore((s) => s.user);
  const { patients, patientsLoading } = usePractitionerStore();
  const navigate = useNavigate();

  const greeting = useMemo(() => {
    const hour = new Date().getHours();
    if (hour >= 5 && hour < 12) return 'Good Morning';
    if (hour >= 12 && hour < 17) return 'Good Afternoon';
    if (hour >= 17 && hour < 21) return 'Good Evening';
    return 'Good Night';
  }, []);

  const stats = [
    { label: 'Total Patients', value: patients.length, icon: Users, color: 'text-primary bg-primary/10' },
    { label: 'Appointments This Week', value: '—', icon: Calendar, color: 'text-secondary bg-secondary/10' },
  ];

  return (
    <div className="space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">
          {greeting}, {user?.title ? `${user.title} ` : ''}{(user?.dispName || 'Doctor').replace(/\b\w/g, (c) => c.toUpperCase())}
        </h1>
        <p className="text-sm text-gray-500 mt-1">
          {user?.specialty && <span>{user.specialty} &middot; </span>}
          {user?.department && <span>{user.department} &middot; </span>}
          {user?.hospital || 'Hipograf Health Platform'}
        </p>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {stats.map((stat) => (
          <div key={stat.label} className="card p-5">
            <div className="flex items-center gap-3">
              <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${stat.color}`}>
                <stat.icon className="w-5 h-5" />
              </div>
              <div>
                <p className="stat-value">{stat.value}</p>
                <p className="stat-label">{stat.label}</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Quick Actions */}

      {/* Recent Patients */}
      <div>
        <div className='flex justify-between'>
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Recent Patients</h2>
          <div className="flex gap-3">
            <button onClick={() => navigate('/patients')} className="btn-primary">
              View All Patients
            </button>
          </div>
        </div>
        {patientsLoading ? (
          <div className="flex items-center justify-center py-12">
            <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
          </div>
        ) : patients.length === 0 ? (
          <div className="card p-8 text-center">
            <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-3">
              <Users className="w-6 h-6 text-gray-400" />
            </div>
            <p className="text-sm font-medium text-gray-900">No patients yet</p>
            <p className="text-xs text-gray-500 mt-1">Patients will appear here once they share their data with you</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {patients.slice(0, 6).map((patient) => (
              <div
                key={patient._id}
                onClick={() => navigate(`/patients/${patient._id}`)}
                className="card p-5 cursor-pointer hover:shadow-card-hover transition-shadow"
              >
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold text-sm">
                    {patient.dispName
                      .split(' ')
                      .map((n) => n[0])
                      .join('')
                      .slice(0, 2)
                      .toUpperCase()}
                  </div>
                  <div className="min-w-0">
                    <p className="text-sm font-semibold text-gray-900 truncate">{patient.dispName}</p>
                    <p className="text-xs text-gray-500">
                      {[patient.residentCity, patient.bloodType].filter(Boolean).join(' · ')}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
