"use client";

import { useMemo, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
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 { useAuth } from "@/hooks/useAuth";
import { getUserAppointments, getUserAppointmentStats } from "@/lib/actions/appointments";
import type { Appointment, UserAppointmentStats } from "@/lib/models/appointments";
import { toast } from "sonner";

export default function UserDashboard() {
  const router = useRouter();
  const { theme } = useAppTheme();
  const isDark = theme === "dark";
  const { user } = useAuth();
  const [appointments, setAppointments] = useState<Appointment[]>([]);
  const [loading, setLoading] = useState(true);
  const [stats, setStats] = useState<UserAppointmentStats | null>(null);
  const [loadingStats, setLoadingStats] = useState(true);

  // Fetch user appointments from user-specific endpoint
  useEffect(() => {
    const fetchAppointments = async () => {
      setLoading(true);
      try {
        const data = await getUserAppointments();
        setAppointments(data || []);
      } catch (error) {
        toast.error("Failed to load appointments. Please try again.");
        setAppointments([]);
      } finally {
        setLoading(false);
      }
    };

    fetchAppointments();
  }, []);

  // Fetch stats from API for authenticated user
  useEffect(() => {
    const fetchStats = async () => {
      setLoadingStats(true);
      try {
        const statsData = await getUserAppointmentStats();
        setStats(statsData);
      } catch (error) {
        toast.error("Failed to load appointment statistics.");
        setStats({
          total_requests: 0,
          pending_review: 0,
          scheduled: 0,
          rejected: 0,
          completed: 0,
          completion_rate: 0,
        });
      } finally {
        setLoadingStats(false);
      }
    };

    fetchStats();
  }, []);

  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 appointments.filter(
      (appointment) => appointment.status === "scheduled"
    );
  }, [appointments]);

  const pendingAppointments = useMemo(() => {
    return appointments.filter(
      (appointment) => appointment.status === "pending_review"
    );
  }, [appointments]);

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

  const rejectedAppointments = useMemo(() => {
    return appointments.filter(
      (appointment) => appointment.status === "rejected"
    );
  }, [appointments]);

  // Sort appointments by created_at (newest first)
  const allAppointments = useMemo(() => {
    return [...appointments].sort((a, b) => {
      const dateA = new Date(a.created_at).getTime();
      const dateB = new Date(b.created_at).getTime();
      return dateB - dateA;
    });
  }, [appointments]);

  // Use stats from API, fallback to calculated stats if API stats not available
  const displayStats = useMemo(() => {
    if (stats) {
      return {
        scheduled: stats.scheduled || 0,
        scheduled_pct: stats.scheduled_pct,
        completed: stats.completed || 0,
        completed_pct: stats.completed_pct,
        pending_review: stats.pending_review || 0,
        pending_review_pct: stats.pending_review_pct,
        rejected: stats.rejected || 0,
        rejected_pct: stats.rejected_pct,
        total_requests: stats.total_requests || 0,
        completion_rate: stats.completion_rate || 0,
      };
    }
    // Fallback: calculate from appointments if stats not loaded yet
    const scheduled = appointments.filter(a => a.status === "scheduled").length;
    const completed = appointments.filter(a => a.status === "completed").length;
    const pending_review = appointments.filter(a => a.status === "pending_review").length;
    const rejected = appointments.filter(a => a.status === "rejected").length;
    const total_requests = appointments.length;
    const completion_rate = total_requests > 0 ? (scheduled / total_requests) * 100 : 0;

    return {
      scheduled,
      completed,
      pending_review,
      rejected,
      total_requests,
      completion_rate,
    };
  }, [stats, appointments]);

  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" />
                Book 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">
                  <div
                    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'}`}>
                    <CalendarCheck className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                      </div>
                      {displayStats.scheduled_pct !== undefined && (
                        <div
                          className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${isDark ? "bg-green-900/30 text-green-400" : "bg-green-50 text-green-700"}`}
                        >
                          <ArrowUpRight className="w-3 h-3" />
                          <span>{`${Math.round(displayStats.scheduled_pct)}%`}</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'}`}>
                    Upcoming Appointments
                  </h3>
                  <p className={`text-xl sm:text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                    {displayStats.scheduled}
                  </p>
                </div>
              </div>

              <div
                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'}`}>
                    <CheckCircle2 className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                  </div>
                  {displayStats.completed_pct !== undefined && (
                    <div
                      className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${isDark ? "bg-green-900/30 text-green-400" : "bg-green-50 text-green-700"}`}
                    >
                      <ArrowUpRight className="w-3 h-3" />
                      <span>{`${Math.round(displayStats.completed_pct)}%`}</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'}`}>
                    Completed Sessions
                  </h3>
                  <p className={`text-xl sm:text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                    {displayStats.completed}
                  </p>
                      </div>
                    </div>

              <div
                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'}`}>
                    <Calendar className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                  </div>
                  {/* No percentage badge for total appointments */}
                </div>
                      <div>
                        <h3 className={`text-xs font-medium mb-1 sm:mb-2 uppercase tracking-wider ${isDark ? 'text-rose-400' : 'text-rose-600'}`}>
                    Total Appointments
                        </h3>
                        <p className={`text-xl sm:text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                    {displayStats.total_requests}
                        </p>
                      </div>
              </div>

              <div
                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'}`}>
                    <Calendar className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
                  </div>
                  {displayStats.pending_review_pct !== undefined && (
                    <div
                      className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${isDark ? "bg-yellow-900/30 text-yellow-400" : "bg-yellow-50 text-yellow-700"}`}
                    >
                      <ArrowUpRight className="w-3 h-3" />
                      <span>{`${Math.round(displayStats.pending_review_pct)}%`}</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'}`}>
                    Pending Review
                  </h3>
                  <p className={`text-xl sm:text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                    {displayStats.pending_review}
                  </p>
                </div>
              </div>
            </div>

            {/* All Appointments Section */}
            {allAppointments.length > 0 ? (
              <div className={`rounded-lg border overflow-hidden ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
                <div className={`px-4 sm:px-5 md:px-6 py-4 border-b ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
                  <h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                    All Appointments
                </h2>
                </div>
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className={`${isDark ? "bg-gray-800 border-b border-gray-700" : "bg-gray-50 border-b border-gray-200"}`}>
                      <tr>
                        <th className={`px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                          Appointment
                        </th>
                        <th className={`px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium uppercase tracking-wider hidden md:table-cell ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                          Date & Time
                        </th>
                        <th className={`px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium uppercase tracking-wider hidden lg:table-cell ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                          Duration
                        </th>
                        <th className={`px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                          Status
                        </th>
                        <th className={`px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium uppercase tracking-wider hidden lg:table-cell ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                          Preferred Times
                        </th>
                        <th className={`px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium uppercase tracking-wider hidden xl:table-cell ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                          Created
                        </th>
                        <th className={`px-3 sm:px-4 md:px-6 py-3 text-right text-xs font-medium uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody className={`${isDark ? "bg-gray-800 divide-gray-700" : "bg-white divide-gray-200"}`}>
                      {allAppointments.map((appointment) => {
                        const getStatusColor = (status: string) => {
                          switch (status) {
                            case "scheduled":
                              return isDark ? 'bg-green-900/30 text-green-400' : 'bg-green-50 text-green-700';
                            case "pending_review":
                              return isDark ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-50 text-yellow-700';
                            case "completed":
                              return isDark ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-50 text-blue-700';
                            case "rejected":
                              return isDark ? 'bg-red-900/30 text-red-400' : 'bg-red-50 text-red-700';
                            default:
                              return isDark ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-700';
                          }
                        };

                        const formatStatus = (status: string) => {
                          return status.replace("_", " ").replace(/\b\w/g, (l) => l.toUpperCase());
                        };

                        const dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                        const timeSlotLabels: Record<string, string> = {
                          morning: 'Morning',
                          afternoon: 'Lunchtime',
                          evening: 'Evening',
                        };

                        return (
                          <tr
                      key={appointment.id}
                            className={`transition-colors cursor-pointer ${isDark ? "hover:bg-gray-700" : "hover:bg-gray-50"}`}
                            onClick={() => router.push(`/user/appointments/${appointment.id}`)}
                          >
                            <td className="px-3 sm:px-4 md:px-6 py-4">
                              <div className="flex items-center">
                                <div className={`shrink-0 h-8 w-8 sm:h-10 sm:w-10 rounded-full flex items-center justify-center ${isDark ? "bg-gray-700" : "bg-gray-100"}`}>
                                  <User className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? "text-gray-200" : "text-gray-600"}`} />
                                </div>
                                <div className="ml-2 sm:ml-4 min-w-0">
                                  <div className={`text-xs sm:text-sm font-medium truncate ${isDark ? "text-white" : "text-gray-900"}`}>
                                    {appointment.first_name} {appointment.last_name}
                                  </div>
                                  {appointment.reason && (
                                    <div className={`text-xs sm:text-sm truncate mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                                      {appointment.reason}
                                    </div>
                                  )}
                          {appointment.scheduled_datetime && (
                                    <div className={`text-xs sm:hidden mt-0.5 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                                  {formatDate(appointment.scheduled_datetime)}
                                    </div>
                                  )}
                                </div>
                              </div>
                            </td>
                            <td className="px-3 sm:px-4 md:px-6 py-4 whitespace-nowrap hidden md:table-cell">
                              {appointment.scheduled_datetime ? (
                                <>
                                  <div className={`text-xs sm:text-sm ${isDark ? "text-white" : "text-gray-900"}`}>
                                    {formatDate(appointment.scheduled_datetime)}
                                  </div>
                                  <div className={`text-xs sm:text-sm flex items-center gap-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                                    <Clock className="w-3 h-3" />
                                  {formatTime(appointment.scheduled_datetime)}
                              </div>
                            </>
                              ) : (
                                <div className={`text-xs sm:text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                                  Not scheduled
                                </div>
                              )}
                            </td>
                            <td className={`px-3 sm:px-4 md:px-6 py-4 whitespace-nowrap text-xs sm:text-sm hidden lg:table-cell ${isDark ? "text-white" : "text-gray-900"}`}>
                              {appointment.scheduled_duration ? `${appointment.scheduled_duration} min` : "-"}
                            </td>
                            <td className="px-3 sm:px-4 md:px-6 py-4 whitespace-nowrap">
                              <span
                                className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(
                                  appointment.status
                                )}`}
                              >
                                {formatStatus(appointment.status)}
                              </span>
                            </td>
                            <td className={`px-3 sm:px-4 md:px-6 py-4 hidden lg:table-cell ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                              {appointment.selected_slots && appointment.selected_slots.length > 0 ? (
                                <div className="flex flex-col gap-1">
                                  {appointment.selected_slots.slice(0, 2).map((slot, idx) => (
                                    <span key={idx} className="text-xs sm:text-sm">
                                      {dayNames[slot.day]} - {timeSlotLabels[slot.time_slot] || slot.time_slot}
                                    </span>
                                  ))}
                                  {appointment.selected_slots.length > 2 && (
                                    <span className="text-xs">+{appointment.selected_slots.length - 2} more</span>
                          )}
                        </div>
                              ) : (
                                "-"
                              )}
                            </td>
                            <td className={`px-3 sm:px-4 md:px-6 py-4 whitespace-nowrap text-xs sm:text-sm hidden xl:table-cell ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                              {formatDate(appointment.created_at)}
                            </td>
                            <td className="px-3 sm:px-4 md:px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                              <div className="flex items-center justify-end gap-1 sm:gap-2">
                                {appointment.participant_join_url && (
                            <a
                              href={appointment.participant_join_url}
                              target="_blank"
                              rel="noopener noreferrer"
                                    className={`p-1.5 sm:p-2 rounded-lg transition-colors ${
                                      appointment.can_join_as_participant
                                        ? isDark
                                          ? "bg-blue-600 hover:bg-blue-700 text-white"
                                          : "bg-blue-600 hover:bg-blue-700 text-white"
                                        : isDark
                                        ? "text-gray-400 hover:text-gray-300 hover:bg-gray-700"
                                        : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
                                    }`}
                                    title={appointment.can_join_as_participant ? "Join Meeting" : "Meeting Not Available"}
                                    onClick={(e) => {
                                      e.stopPropagation();
                                      if (!appointment.can_join_as_participant) {
                                        e.preventDefault();
                                      }
                                    }}
                                  >
                                    <Video className="w-4 h-4" />
                                  </a>
                                )}
                        </div>
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </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'}`}>
                    No Appointments
                  </p>
                  <p className={`text-sm mb-6 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                    You don't have any appointments yet. 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" />
                      Book 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>
  );
}