website/app/(user)/user/dashboard/page.tsx

"use client";

import { useMemo } from "react";
import { Button } from "@/components/ui/button";
import {
  Calendar,
  Clock,
  User,
  Mail,
  Phone,
  Heart,
  CalendarPlus,
  Video,
  CheckCircle2,
  XCircle,
  CalendarCheck,
  ArrowUpRight,
  Settings,
  Loader2,
} from "lucide-react";
import Link from "next/link";
import { Navbar } from "@/components/Navbar";
import { useAppTheme } from "@/components/ThemeProvider";
import { useAppointments } from "@/hooks/useAppointments";
import { useAuth } from "@/hooks/useAuth";
import type { Appointment } from "@/lib/models/appointments";
import { toast } from "sonner";

export default function UserDashboard() {
  const { theme } = useAppTheme();
  const isDark = theme === "dark";
  const { user } = useAuth();
  const { 
    userAppointments, 
    userAppointmentStats, 
    isLoadingUserAppointments, 
    isLoadingUserStats,
    refetchUserAppointments,
    refetchUserStats,
  } = useAppointments();

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };

  const formatTime = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleTimeString("en-US", {
      hour: "numeric",
      minute: "2-digit",
    });
  };

  const formatMemberSince = (dateString?: string) => {
    if (!dateString) return "N/A";
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      month: "long",
      year: "numeric",
    });
  };

  // Filter appointments by status
  const upcomingAppointments = useMemo(() => {
    return userAppointments.filter(
      (appointment) => appointment.status === "scheduled"
    );
  }, [userAppointments]);

  const completedAppointments = useMemo(() => {
    return userAppointments.filter(
      (appointment) => appointment.status === "completed"
    );
  }, [userAppointments]);

  const stats = userAppointmentStats || {
    total_requests: 0,
    pending_review: 0,
    scheduled: 0,
    rejected: 0,
    completed: 0,
    completion_rate: 0,
  };

  const statCards = [
    {
      title: "Upcoming Appointments",
      value: stats.scheduled,
      icon: CalendarCheck,
      trend: stats.scheduled > 0 ? `+${stats.scheduled}` : "0",
      trendUp: true,
    },
    {
      title: "Completed Sessions",
      value: stats.completed || 0,
      icon: CheckCircle2,
      trend: stats.completed > 0 ? `+${stats.completed}` : "0",
      trendUp: true,
    },
    {
      title: "Total Appointments",
      value: stats.total_requests,
      icon: Calendar,
      trend: `${Math.round(stats.completion_rate || 0)}%`,
      trendUp: true,
    },
    {
      title: "Pending Review",
      value: stats.pending_review,
      icon: Calendar,
      trend: stats.pending_review > 0 ? `${stats.pending_review}` : "0",
      trendUp: false,
    },
  ];

  const loading = isLoadingUserAppointments || isLoadingUserStats;

  return (
    <div className={`min-h-screen ${isDark ? 'bg-gray-900' : 'bg-gray-50'}`}>
      <Navbar />

      {/* Main Content */}
      <main className="container mx-auto px-4 sm:px-6 lg:px-8 space-y-6 pt-20 sm:pt-24 pb-8">
        {/* Welcome Section */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
          <div>
            <h1 className={`text-2xl font-semibold mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>
              Welcome Back!
            </h1>
            <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
              Here's an overview of your appointments
            </p>
          </div>
          <div className="flex items-center gap-3">
            <Link href="/user/settings" className="flex-1 sm:flex-initial">
              <Button
                variant="outline"
                className={`w-full sm:w-auto ${isDark ? 'hover:bg-gray-800 border-gray-700 text-gray-300' : 'hover:bg-gray-100'}`}
              >
                <Settings className="w-4 h-4 mr-2" />
                Settings
              </Button>
            </Link>
            <Link href="/book-now" className="flex-1 sm:flex-initial">
              <Button
                className="w-full sm:w-auto bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
              >
                <CalendarPlus className="w-4 h-4 mr-2" />
                Request Appointment
              </Button>
            </Link>
          </div>
        </div>

        {loading ? (
          <div className="flex items-center justify-center py-12">
            <Loader2 className={`w-8 h-8 animate-spin ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
          </div>
        ) : (
          <>
            {/* Stats Grid */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
              {statCards.map((card, index) => {
                const Icon = card.icon;
                return (
                  <div
                    key={index}
                    className={`rounded-lg border p-4 sm:p-5 md:p-6 hover:shadow-md transition-shadow ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}
                  >
                    <div className="flex items-start justify-between mb-3 sm:mb-4">
                      <div className={`p-2 sm:p-2.5 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
                        <Icon className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                      </div>
                      <div
                        className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
                          card.trendUp
                            ? isDark ? "bg-green-900/30 text-green-400" : "bg-green-50 text-green-700"
                            : isDark ? "bg-red-900/30 text-red-400" : "bg-red-50 text-red-700"
                        }`}
                      >
                        {card.trendUp ? (
                          <ArrowUpRight className="w-3 h-3" />
                        ) : (
                          <ArrowUpRight className="w-3 h-3" />
                        )}
                        <span>{card.trend}</span>
                      </div>
                    </div>

                      <div>
                        <h3 className={`text-xs font-medium mb-1 sm:mb-2 uppercase tracking-wider ${isDark ? 'text-rose-400' : 'text-rose-600'}`}>
                          {card.title}
                        </h3>
                        <p className={`text-xl sm:text-2xl font-bold mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>
                          {card.value}
                        </p>
                        <p className={`text-xs font-medium ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>vs last month</p>
                      </div>
                  </div>
                );
              })}
            </div>

            {/* Upcoming Appointments Section */}
            {upcomingAppointments.length > 0 ? (
              <div className={`rounded-lg border p-4 sm:p-5 md:p-6 ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
                <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
                  Upcoming Appointments
                </h2>
                <div className="space-y-3">
                  {upcomingAppointments.map((appointment) => (
                    <div
                      key={appointment.id}
                      className={`border rounded-lg p-4 hover:shadow-md transition-shadow ${isDark ? 'border-gray-700 bg-gray-700/50' : 'border-gray-200'}`}
                    >
                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div className="flex-1">
                          {appointment.scheduled_datetime && (
                            <>
                              <div className="flex items-center gap-2 mb-2">
                                <Calendar className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                                <span className={`font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                                  {formatDate(appointment.scheduled_datetime)}
                                </span>
                              </div>
                              <div className="flex items-center gap-2 mb-2">
                                <Clock className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                                <span className={isDark ? 'text-gray-300' : 'text-gray-700'}>
                                  {formatTime(appointment.scheduled_datetime)}
                                </span>
                                {appointment.scheduled_duration && (
                                  <span className={`text-sm font-medium ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                                    ({appointment.scheduled_duration} minutes)
                                  </span>
                                )}
                              </div>
                            </>
                          )}
                          {appointment.reason && (
                            <p className={`text-sm mt-2 font-medium ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
                              {appointment.reason}
                            </p>
                          )}
                        </div>
                        <div className="flex flex-col sm:items-end gap-3">
                          <div className="flex items-center gap-2">
                            <span className={`px-3 py-1 rounded-full text-sm font-medium ${
                              appointment.status === "scheduled" 
                                ? isDark ? 'bg-green-900/30 text-green-400' : 'bg-green-50 text-green-700'
                                : appointment.status === "pending_review"
                                ? isDark ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-50 text-yellow-700'
                                : isDark ? 'bg-red-900/30 text-red-400' : 'bg-red-50 text-red-700'
                            }`}>
                              {appointment.status.charAt(0).toUpperCase() +
                                appointment.status.slice(1).replace('_', ' ')}
                            </span>
                          </div>
                          {appointment.jitsi_meet_url && appointment.can_join_meeting && (
                            <a
                              href={appointment.jitsi_meet_url}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors"
                            >
                              <Video className="w-4 h-4" />
                              Join Session
                            </a>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ) : !loading && (
              <div className={`rounded-lg border p-4 sm:p-5 md:p-6 ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <CalendarCheck className={`w-12 h-12 mb-4 ${isDark ? 'text-gray-500' : 'text-gray-400'}`} />
                  <p className={`text-lg font-medium mb-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
                    Request Appointment
                  </p>
                  <p className={`text-sm mb-6 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                    No upcoming appointments. Book an appointment to get started.
                  </p>
                  <Link href="/book-now">
                    <Button className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white">
                      <CalendarPlus className="w-4 h-4 mr-2" />
                      Request Appointment
                    </Button>
                  </Link>
                </div>
              </div>
            )}

            {/* Account Information */}
            {user && (
              <div className={`rounded-lg border p-4 sm:p-5 md:p-6 ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
                <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
                  Account Information
                </h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="flex items-center gap-3">
                    <div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
                      <User className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                    </div>
                    <div>
                      <p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                        Full Name
                      </p>
                      <p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                        {user.first_name} {user.last_name}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
                      <Mail className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                    </div>
                    <div>
                      <p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                        Email
                      </p>
                      <p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                        {user.email}
                      </p>
                    </div>
                  </div>
                  {user.phone_number && (
                    <div className="flex items-center gap-3">
                      <div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
                        <Phone className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                      </div>
                      <div>
                        <p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                          Phone
                        </p>
                        <p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                          {user.phone_number}
                        </p>
                      </div>
                    </div>
                  )}
                  {user.date_joined && (
                    <div className="flex items-center gap-3">
                      <div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
                        <Calendar className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                      </div>
                      <div>
                        <p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                          Member Since
                        </p>
                        <p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                          {formatMemberSince(user.date_joined)}
                        </p>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            )}
          </>
        )}
      </main>
    </div>
  );
}