import { useAuth, isAdmin, isManagement } from '@/contexts/AuthContext';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { 
  User, 
  Mail, 
  Briefcase, 
  Building2, 
  Phone, 
  Shield,
  Calendar,
  CheckCircle,
  Users
} from 'lucide-react';

export function Profile() {
  const { user } = useAuth();

  // Helper to get user initials for avatar
  const getUserInitials = () => {
    if (user?.displayName) {
      const names = user.displayName.split(' ').filter(Boolean);
      if (names.length >= 2) {
        return `${names[0]?.[0] || ''}${names[names.length - 1]?.[0] || ''}`.toUpperCase();
      }
      return user.displayName.substring(0, 2).toUpperCase();
    }
    if (user?.email) {
      return user.email.substring(0, 2).toUpperCase();
    }
    return 'U';
  };

  return (
    <div className="space-y-6 max-w-7xl mx-auto">
      {/* Header Card */}
      <Card className="relative overflow-hidden shadow-xl border-0">
        <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
        
        <CardContent className="relative z-10 p-8 lg:p-12">
          <div className="flex flex-col md:flex-row items-start md:items-center gap-6">
            <div className="relative">
              <Avatar className="h-24 w-24 ring-4 ring-white/20 shadow-xl">
                <AvatarImage src={user?.picture || ''} />
                <AvatarFallback className="bg-yellow-400 text-slate-900 text-2xl font-bold">
                  {getUserInitials()}
                </AvatarFallback>
              </Avatar>
              {isAdmin(user) && (
                <div className="absolute -bottom-2 -right-2 bg-yellow-400 rounded-full p-1.5 shadow-lg">
                  <Shield className="w-4 h-4 text-slate-900" />
                </div>
              )}
            </div>

            <div className="flex-1 text-white">
              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                  <h1 className="text-3xl font-bold mb-2">
                    {user?.displayName || user?.name || 'User Profile'}
                  </h1>
                  <p className="text-lg text-gray-200 mb-3">
                    {user?.email || 'No email provided'}
                  </p>
                  <div className="flex flex-wrap gap-2">
                    {isAdmin(user) && (
                      <Badge className="bg-yellow-400 text-slate-900 hover:bg-yellow-400 font-semibold">
                        <Shield className="w-3 h-3 mr-1" />
                        Administrator
                      </Badge>
                    )}
                    {isManagement(user) && (
                      <Badge className="bg-blue-400 text-slate-900 hover:bg-blue-400 font-semibold">
                        <Users className="w-3 h-3 mr-1" />
                        Management
                      </Badge>
                    )}
                    {user?.employeeId && (
                      <Badge variant="outline" className="border-white/30 text-white bg-white/10">
                        ID: {user.employeeId}
                      </Badge>
                    )}
                  </div>
                </div>
                {/* <Button 
                  variant="secondary"
                  className="bg-white text-slate-900 hover:bg-gray-100"
                >
                  <Edit className="w-4 h-4 mr-2" />
                  Edit Profile
                </Button> */}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Profile Information Cards */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Personal Information */}
        <Card className="shadow-lg hover:shadow-xl transition-shadow">
          <CardHeader className="pb-4">
            <div className="flex items-center gap-3">
              <div className="p-3 bg-blue-100 rounded-lg">
                <User className="h-5 w-5 text-blue-600" />
              </div>
              <div>
                <CardTitle className="text-lg text-gray-900">Personal Information</CardTitle>
                <CardDescription className="text-gray-600">Your personal details</CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-3">
              <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <Mail className="w-5 h-5 text-gray-400 mt-0.5 shrink-0" />
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-gray-500">Email</p>
                  <p className="text-base text-gray-900 break-words">
                    {user?.email || 'Not provided'}
                  </p>
                </div>
              </div>

              {user?.firstName && (
                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                  <User className="w-5 h-5 text-gray-400 mt-0.5 shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-500">First Name</p>
                    <p className="text-base text-gray-900">{user.firstName}</p>
                  </div>
                </div>
              )}

              {user?.lastName && (
                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                  <User className="w-5 h-5 text-gray-400 mt-0.5 shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-500">Last Name</p>
                    <p className="text-base text-gray-900">{user.lastName}</p>
                  </div>
                </div>
              )}

              {user?.displayName && (
                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                  <User className="w-5 h-5 text-gray-400 mt-0.5 shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-500">Display Name</p>
                    <p className="text-base text-gray-900">{user.displayName}</p>
                  </div>
                </div>
              )}

              {(user as any)?.phone && (
                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                  <Phone className="w-5 h-5 text-gray-400 mt-0.5 shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-500">Phone</p>
                    <p className="text-base text-gray-900">{(user as any).phone}</p>
                  </div>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Professional Information */}
        <Card className="shadow-lg hover:shadow-xl transition-shadow">
          <CardHeader className="pb-4">
            <div className="flex items-center gap-3">
              <div className="p-3 bg-emerald-100 rounded-lg">
                <Briefcase className="h-5 w-5 text-emerald-600" />
              </div>
              <div>
                <CardTitle className="text-lg text-gray-900">Professional Information</CardTitle>
                <CardDescription className="text-gray-600">Work-related details</CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-3">
              {user?.employeeId && (
                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                  <User className="w-5 h-5 text-gray-400 mt-0.5 shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-500">Employee ID</p>
                    <p className="text-base text-gray-900 font-medium">{user.employeeId}</p>
                  </div>
                </div>
              )}

              {user?.department && (
                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                  <Building2 className="w-5 h-5 text-gray-400 mt-0.5 shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-500">Department</p>
                    <p className="text-base text-gray-900">{user.department}</p>
                  </div>
                </div>
              )}

              {user?.designation && (
                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                  <Briefcase className="w-5 h-5 text-gray-400 mt-0.5 shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-500">Designation</p>
                    <p className="text-base text-gray-900">{user.designation}</p>
                  </div>
                </div>
              )}

              <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <Shield className="w-5 h-5 text-gray-400 mt-0.5 shrink-0" />
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-gray-500">Role</p>
                  <div className="flex items-center gap-2 mt-1">
                    <Badge 
                      variant={isAdmin(user) || isManagement(user) ? "default" : "secondary"}
                      className={
                        isAdmin(user) 
                          ? "bg-yellow-400 text-slate-900" 
                          : isManagement(user)
                          ? "bg-blue-400 text-slate-900"
                          : ""
                      }
                    >
                      {isAdmin(user) ? 'Administrator' : isManagement(user) ? 'Management' : 'User'}
                    </Badge>
                    {(isAdmin(user) || isManagement(user)) && (
                      <CheckCircle className="w-4 h-4 text-green-600" />
                    )}
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Account Status Card */}
      <Card className="shadow-lg hover:shadow-xl transition-shadow">
        <CardHeader className="pb-4">
          <div className="flex items-center gap-3">
            <div className="p-3 bg-purple-100 rounded-lg">
              <Calendar className="h-5 w-5 text-purple-600" />
            </div>
            <div>
              <CardTitle className="text-lg text-gray-900">Account Status</CardTitle>
              <CardDescription className="text-gray-600">Account information and activity</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center justify-between p-4 bg-green-50 rounded-lg border border-green-200">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-green-500 rounded-full">
                  <CheckCircle className="w-4 h-4 text-white" />
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-900">Account Status</p>
                  <p className="text-xs text-gray-600">Active and verified</p>
                </div>
              </div>
              <Badge className="bg-green-500 hover:bg-green-600 text-white">
                Active
              </Badge>
            </div>

            {user?.userId && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="p-4 bg-gray-50 rounded-lg">
                  <p className="text-sm font-medium text-gray-500 mb-1">User ID</p>
                  <p className="text-sm text-gray-900 font-mono break-all">{user.userId}</p>
                </div>
                {user.employeeId && (
                  <div className="p-4 bg-gray-50 rounded-lg">
                    <p className="text-sm font-medium text-gray-500 mb-1">Employee ID</p>
                    <p className="text-sm text-gray-900 font-mono">{user.employeeId}</p>
                  </div>
                )}
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

