'use client';

import { X, Mail, Phone, User as UserIcon } from 'lucide-react';
import Image from 'next/image';
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";

export default function UserModal({ user, onClose }) {
  const getAvatarUrl = (avatarPath) => {
    if (!avatarPath) return '/images/default-avatar.jpg';
    if (avatarPath.startsWith('https')) return avatarPath;
    return `${process.env.NEXT_PUBLIC_BACKEND_URL}${avatarPath}`;
  };

  return (
    <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex justify-center items-center z-50" onClick={onClose}>
      <div
        onClick={(e) => e.stopPropagation()}
        className="bg-white max-w-2xl w-full rounded-lg p-6 relative shadow-lg overflow-y-auto max-h-[90vh]"
      >
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-1 rounded-full hover:bg-gray-100 transition-colors cursor-pointer"
        >
          <X size={20} className="text-gray-500" />
        </button>

        <div className="flex flex-col">
          {/* Profile Header */}
          <div className="flex flex-col items-center text-center mb-6">
            <div className="relative w-24 h-24 mb-4">
              <img
                src={getAvatarUrl(user.avatar)}
                alt={user.firstName || user.name}
                width={96}
                height={96}
                className="rounded-full object-cover border-4 border-white shadow-md"
              />
              <Badge
                variant={user.status === 'Active' ? 'success' : 'warning'}
                className="absolute -bottom-2 left-1/2 transform -translate-x-1/2"
              >
                {user.status}
              </Badge>
            </div>

            <h2 className="text-2xl font-bold text-gray-900">
              {user.firstName && user.lastName ? `${user.firstName} ${user.lastName}` : user.name}
            </h2>

            <div className="flex items-center mt-2 text-gray-600">
              <Badge variant="secondary" className="mr-2">
                {user.role.toUpperCase()}
              </Badge>
              <Badge
                variant="outline"
                className={
                  user.isVerified
                    ? "border-green-400 text-green-400"
                    : "border-red-400 text-red-400"
                }
              >
                {user.isVerified ? 'Verified' : 'Unverified'}
              </Badge>
            </div>

            <div className="mt-4 space-y-1 text-sm">
              <div className="flex items-center justify-center">
                <Mail className="h-4 w-4 mr-2 text-gray-500" />
                <a href={`mailto:${user.email}`} className="text-blue-600 hover:underline">
                  {user.email}
                </a>
              </div>
              {user.phone && (
                <div className="flex items-center justify-center">
                  <Phone className="h-4 w-4 mr-2 text-gray-500" />
                  <a href={`tel:${user.phone}`} className="text-blue-600 hover:underline">
                    {user.phone}
                  </a>
                </div>
              )}
            </div>
          </div>

          <Separator className="my-4" />

          {/* Basic Information */}
          <div className="space-y-4">
            <h3 className="font-semibold text-lg flex items-center">
              <UserIcon className="h-5 w-5 mr-2" />
              Basic Information
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
              <div>
                <p className="text-gray-500">Registration Date</p>
                <p>{user.createdAt || 'Not available'}</p>
              </div>
              <div>
                <p className="text-gray-500">Last Active</p>
                <p>{user.lastActive || 'Not available'}</p>
              </div>
              {user.specialty && (
                <div>
                  <p className="text-gray-500">Specialty</p>
                  <p>{user.speciality}</p>
                </div>
              )}
              {user.location && (
                <div>
                  <p className="text-gray-500">Location</p>
                  <p>{user.location}</p>
                </div>
              )}
              {/* Add more fields as needed */}
            </div>
          </div>

          {/* Additional Information Section */}
          {user.additionalInfo && (
            <>
              <Separator className="my-4" />
              <div className="space-y-4">
                <h3 className="font-semibold text-lg">Additional Information</h3>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <pre className="text-sm whitespace-pre-wrap">{JSON.stringify(user.additionalInfo, null, 2)}</pre>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}