'use client';

import React from 'react';
import { UserResponse, Role } from '@goodgo/types';
import { Mail, Calendar, Shield, Edit, MoreHorizontal, Trash2 } from 'lucide-react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem
} from '../ui/dropdown-menu';
import { Switch } from '../ui/switch';
import { cn } from '@/shared/lib/utils';

/**
 * EN: Props for UserCard component
 * VI: Props cho component UserCard
 */
export interface UserCardProps {
  /** EN: User data to display / VI: Dữ liệu user để hiển thị */
  user: UserResponse;
  /** EN: Whether the card is in compact mode / VI: Card có ở chế độ compact không */
  compact?: boolean;
  /** EN: Callback when user is edited / VI: Callback khi user được edit */
  onEdit?: (user: UserResponse) => void;
  /** EN: Callback when user status is toggled / VI: Callback khi toggle trạng thái user */
  onToggleStatus?: (user: UserResponse) => void;
  /** EN: Callback when user is deleted / VI: Callback khi user bị xóa */
  onDelete?: (user: UserResponse) => void;
  /** EN: Show admin actions (edit, delete, status toggle) / VI: Hiển thị admin actions */
  showAdminActions?: boolean;
  /** EN: Additional CSS classes / VI: CSS classes bổ sung */
  className?: string;
}

/**
 * EN: User Card Component - Displays user information in a card format
 * VI: Component User Card - Hiển thị thông tin user dưới dạng card
 *
 * Features:
 * - User avatar (email initial)
 * - Basic user info (email, role, status)
 * - Creation/update dates
 * - Admin actions (edit, delete, toggle status)
 * - Compact and full modes
 */
export function UserCard({
  user,
  compact = false,
  onEdit,
  onToggleStatus,
  onDelete,
  showAdminActions = false,
  className,
}: UserCardProps) {
  const getRoleColor = (role: Role) => {
    switch (role) {
      case Role.SUPER_ADMIN:
        return 'bg-red-100 text-red-800 border-red-200';
      case Role.ADMIN:
        return 'bg-blue-100 text-blue-800 border-blue-200';
      case Role.USER:
        return 'bg-gray-100 text-gray-800 border-gray-200';
      default:
        return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  const getStatusColor = (isActive: boolean) => {
    return isActive
      ? 'text-green-600 bg-green-100'
      : 'text-gray-600 bg-gray-100';
  };

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

  if (compact) {
    return (
      <Card className={cn('p-4 hover:shadow-md transition-shadow', className)}>
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            {/* Avatar */}
            <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
              <span className="text-blue-600 font-semibold text-sm">
                {user.email[0].toUpperCase()}
              </span>
            </div>

            {/* User Info */}
            <div>
              <div className="flex items-center space-x-2">
                <span className="font-medium text-gray-900">{user.email}</span>
                <span className={cn(
                  'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border',
                  getRoleColor(user.role)
                )}>
                  {user.role}
                </span>
              </div>
              <div className="flex items-center space-x-2 text-sm text-gray-500">
                <span className={cn(
                  'inline-flex items-center px-2 py-0.5 rounded text-xs',
                  getStatusColor(user.isActive)
                )}>
                  {user.isActive ? 'Active' : 'Inactive'}
                </span>
                <span>Created {formatDate(user.createdAt)}</span>
              </div>
            </div>
          </div>

          {/* Actions */}
          {showAdminActions && (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm">
                  <MoreHorizontal className="w-4 h-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                <DropdownMenuItem onClick={() => onEdit?.(user)}>
                  <Edit className="w-4 h-4 mr-2" />
                  <span>Edit</span>
                </DropdownMenuItem>
                <DropdownMenuItem
                  onClick={() => onDelete?.(user)}
                  className="text-red-600 focus:text-red-700 focus:bg-red-50"
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  <span>Delete</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          )}
        </div>
      </Card>
    );
  }

  return (
    <Card className={cn('p-6', className)}>
      <div className="flex items-start justify-between">
        <div className="flex items-start space-x-4">
          {/* Avatar */}
          <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
            <span className="text-blue-600 font-bold text-xl">
              {user.email[0].toUpperCase()}
            </span>
          </div>

          {/* User Info */}
          <div className="flex-1">
            <div className="flex items-center space-x-3 mb-2">
              <h3 className="text-lg font-semibold text-gray-900">{user.email}</h3>
              <span className={cn(
                'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium border',
                getRoleColor(user.role)
              )}>
                <Shield className="w-4 h-4 mr-1" />
                {user.role}
              </span>
            </div>

            <div className="flex items-center space-x-4 text-sm text-gray-600 mb-3">
              <div className="flex items-center space-x-1">
                <Mail className="w-4 h-4" />
                <span>{user.email}</span>
              </div>
              <div className="flex items-center space-x-1">
                <Calendar className="w-4 h-4" />
                <span>Created {formatDate(user.createdAt)}</span>
              </div>
            </div>

            <div className="flex items-center space-x-3">
              <div className="flex items-center space-x-2">
                <Switch
                  checked={user.isActive}
                  onCheckedChange={() => onToggleStatus?.(user)}
                  disabled={!showAdminActions}
                />
                <span className={cn(
                  'text-sm font-medium',
                  user.isActive ? 'text-green-600' : 'text-gray-500'
                )}>
                  {user.isActive ? 'Active' : 'Inactive'}
                </span>
              </div>

              <span className="text-sm text-gray-500">
                Updated {formatDate(user.updatedAt)}
              </span>
            </div>
          </div>
        </div>

        {/* Actions */}
        {showAdminActions && (
          <div className="flex space-x-2">
            <Button
              variant="secondary"
              size="sm"
              onClick={() => onEdit?.(user)}
            >
              <Edit className="w-4 h-4 mr-2" />
              Edit
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="secondary" size="sm">
                  <MoreHorizontal className="w-4 h-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                <DropdownMenuItem
                  onClick={() => onDelete?.(user)}
                  className="text-red-600 focus:text-red-700 focus:bg-red-50"
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  <span>Delete</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        )}
      </div>
    </Card>
  );
}