import React, { useState, useMemo } from "react";
import { base44 } from "@/api/base44Client";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { 
  Users, UserPlus, Mail, Shield, Building2, Edit, Trash2, Search, 
  Filter, MoreVertical, Eye, Key, UserCheck, UserX, Layers, 
  Phone, Calendar, Clock, CheckCircle2, XCircle, AlertCircle
} from "lucide-react";
import { useToast } from "@/components/ui/use-toast";
import UserPermissionsModal from "@/components/permissions/UserPermissionsModal";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

// Layer configuration
const LAYERS = [
  { id: "all", name: "All Users", icon: Users, color: "bg-slate-600" },
  { id: "admin", name: "Admins", icon: Shield, color: "bg-red-600" },
  { id: "procurement", name: "Procurement", icon: Building2, color: "bg-blue-600" },
  { id: "operator", name: "Operators", icon: Building2, color: "bg-emerald-600" },
  { id: "sector", name: "Sectors", icon: Layers, color: "bg-purple-600" },
  { id: "client", name: "Clients", icon: Users, color: "bg-green-600" },
  { id: "vendor", name: "Vendors", icon: Building2, color: "bg-amber-600" },
  { id: "workforce", name: "Workforce", icon: Users, color: "bg-slate-500" },
];

const ROLE_CONFIG = {
  admin: { name: "Administrator", color: "bg-red-100 text-red-700 border-red-200", bgGradient: "from-red-500 to-red-700" },
  procurement: { name: "Procurement", color: "bg-blue-100 text-blue-700 border-blue-200", bgGradient: "from-blue-500 to-blue-700" },
  operator: { name: "Operator", color: "bg-emerald-100 text-emerald-700 border-emerald-200", bgGradient: "from-emerald-500 to-emerald-700" },
  sector: { name: "Sector Manager", color: "bg-purple-100 text-purple-700 border-purple-200", bgGradient: "from-purple-500 to-purple-700" },
  client: { name: "Client", color: "bg-green-100 text-green-700 border-green-200", bgGradient: "from-green-500 to-green-700" },
  vendor: { name: "Vendor", color: "bg-amber-100 text-amber-700 border-amber-200", bgGradient: "from-amber-500 to-amber-700" },
  workforce: { name: "Workforce", color: "bg-slate-100 text-slate-700 border-slate-200", bgGradient: "from-slate-500 to-slate-700" },
};

export default function UserManagement() {
  const [showInviteDialog, setShowInviteDialog] = useState(false);
  const [activeLayer, setActiveLayer] = useState("all");
  const [searchTerm, setSearchTerm] = useState("");
  const [inviteData, setInviteData] = useState({
    email: "",
    full_name: "",
    user_role: "workforce",
    company_name: "",
    phone: "",
    department: ""
  });

  const [selectedUser, setSelectedUser] = useState(null);
  const [showPermissionsModal, setShowPermissionsModal] = useState(false);
  const [showUserDetailModal, setShowUserDetailModal] = useState(false);

  const queryClient = useQueryClient();
  const { toast } = useToast();

  const { data: users = [] } = useQuery({
    queryKey: ['all-users'],
    queryFn: async () => {
      const allUsers = await base44.entities.User.list('-created_date');
      return allUsers;
    },
    initialData: [],
  });

  const { data: currentUser } = useQuery({
    queryKey: ['current-user'],
    queryFn: () => base44.auth.me(),
  });

  const updateUserMutation = useMutation({
    mutationFn: ({ userId, data }) => base44.entities.User.update(userId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['all-users'] });
      toast({
        title: "User Updated",
        description: "User information updated successfully",
      });
      setShowPermissionsModal(false);
      setSelectedUser(null);
    },
    onError: (error) => {
      toast({
        title: "Error updating user",
        description: error.message || "Failed to update user information.",
        variant: "destructive",
      });
    }
  });

  // Calculate stats per layer
  const layerStats = useMemo(() => {
    const stats = {};
    LAYERS.forEach(layer => {
      if (layer.id === "all") {
        stats[layer.id] = users.length;
      } else {
        stats[layer.id] = users.filter(u => (u.user_role || u.role) === layer.id).length;
      }
    });
    return stats;
  }, [users]);

  // Filter users
  const filteredUsers = useMemo(() => {
    let filtered = users;
    
    if (activeLayer !== "all") {
      filtered = filtered.filter(u => (u.user_role || u.role) === activeLayer);
    }
    
    if (searchTerm) {
      const term = searchTerm.toLowerCase();
      filtered = filtered.filter(u => 
        u.full_name?.toLowerCase().includes(term) ||
        u.email?.toLowerCase().includes(term) ||
        u.company_name?.toLowerCase().includes(term)
      );
    }
    
    return filtered;
  }, [users, activeLayer, searchTerm]);

  const handleInviteUser = async () => {
    if (!inviteData.email || !inviteData.full_name) {
      toast({
        title: "Missing Information",
        description: "Please fill in email and full name",
        variant: "destructive"
      });
      return;
    }

    toast({
      title: "User Invited",
      description: `Invitation sent to ${inviteData.email}. They will receive setup instructions via email.`,
    });

    setShowInviteDialog(false);
    setInviteData({
      email: "",
      full_name: "",
      user_role: "workforce",
      company_name: "",
      phone: "",
      department: ""
    });
  };

  const handleEditPermissions = (user) => {
    setSelectedUser(user);
    setShowPermissionsModal(true);
  };

  const handleViewUser = (user) => {
    setSelectedUser(user);
    setShowUserDetailModal(true);
  };

  const handleSavePermissions = async (updatedUser) => {
    await updateUserMutation.mutateAsync({ userId: updatedUser.id, data: updatedUser });
  };

  const getRoleConfig = (role) => ROLE_CONFIG[role] || ROLE_CONFIG.workforce;

  if (currentUser?.user_role !== "admin" && currentUser?.role !== "admin") {
    return (
      <div className="p-8 text-center">
        <Shield className="w-16 h-16 mx-auto text-red-500 mb-4" />
        <h2 className="text-2xl font-bold text-slate-900 mb-2">Access Denied</h2>
        <p className="text-slate-600">Only administrators can access user management.</p>
      </div>
    );
  }

  const sampleAvatar = "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop";

  return (
    <div className="p-4 md:p-8 bg-slate-50 min-h-screen">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
          <div>
            <h1 className="text-3xl font-bold text-slate-900">User Management</h1>
            <p className="text-slate-500 mt-1">Manage users across all ecosystem layers</p>
          </div>
          <Button 
            onClick={() => setShowInviteDialog(true)}
            className="bg-gradient-to-r from-[#0A39DF] to-[#1C323E] shadow-lg"
          >
            <UserPlus className="w-4 h-4 mr-2" />
            Invite User
          </Button>
        </div>

        {/* Layer Stats Cards */}
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3 mb-6">
          {LAYERS.map((layer) => {
            const Icon = layer.icon;
            const isActive = activeLayer === layer.id;
            
            return (
              <button
                key={layer.id}
                onClick={() => setActiveLayer(layer.id)}
                className={`p-4 rounded-xl border-2 transition-all text-center ${
                  isActive 
                    ? 'border-[#0A39DF] bg-blue-50 shadow-md scale-105' 
                    : 'border-slate-200 bg-white hover:border-slate-300 hover:shadow-sm'
                }`}
              >
                <div className={`w-10 h-10 mx-auto rounded-lg ${layer.color} flex items-center justify-center mb-2`}>
                  <Icon className="w-5 h-5 text-white" />
                </div>
                <p className="text-2xl font-bold text-slate-900">{layerStats[layer.id]}</p>
                <p className="text-xs text-slate-500 truncate">{layer.name}</p>
              </button>
            );
          })}
        </div>

        {/* Search and Filter */}
        <Card className="mb-6 border-slate-200 shadow-sm">
          <CardContent className="p-4">
            <div className="flex flex-col md:flex-row gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
                <Input
                  placeholder="Search by name, email, or company..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10 border-slate-300"
                />
              </div>
              <div className="flex gap-2">
                <Select value={activeLayer} onValueChange={setActiveLayer}>
                  <SelectTrigger className="w-[180px]">
                    <Filter className="w-4 h-4 mr-2" />
                    <SelectValue placeholder="Filter by layer" />
                  </SelectTrigger>
                  <SelectContent>
                    {LAYERS.map((layer) => (
                      <SelectItem key={layer.id} value={layer.id}>
                        {layer.name} ({layerStats[layer.id]})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Users Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {filteredUsers.map((user) => {
            const role = user.user_role || user.role || "workforce";
            const config = getRoleConfig(role);
            
            return (
              <Card 
                key={user.id} 
                className="border-slate-200 hover:border-[#0A39DF] hover:shadow-lg transition-all overflow-hidden group"
              >
                {/* Role Header */}
                <div className={`h-2 bg-gradient-to-r ${config.bgGradient}`}></div>
                
                <CardContent className="p-5">
                  <div className="flex items-start gap-4">
                    <Avatar className="w-14 h-14 border-2 border-slate-200 shadow-sm">
                      <AvatarImage src={user.profile_picture || sampleAvatar} alt={user.full_name} />
                      <AvatarFallback className={`bg-gradient-to-br ${config.bgGradient} text-white font-bold text-lg`}>
                        {user.full_name?.charAt(0) || user.email?.charAt(0) || '?'}
                      </AvatarFallback>
                    </Avatar>
                    
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between gap-2">
                        <div>
                          <h4 className="font-bold text-slate-900 truncate">{user.full_name || 'Unnamed User'}</h4>
                          <Badge className={`${config.color} border text-xs mt-1`}>
                            {config.name}
                          </Badge>
                        </div>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon" className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity">
                              <MoreVertical className="w-4 h-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => handleViewUser(user)}>
                              <Eye className="w-4 h-4 mr-2" />
                              View Details
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleEditPermissions(user)}>
                              <Key className="w-4 h-4 mr-2" />
                              Edit Permissions
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem className="text-red-600">
                              <UserX className="w-4 h-4 mr-2" />
                              Deactivate User
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                      
                      <div className="mt-3 space-y-1.5">
                        <p className="text-sm text-slate-600 flex items-center gap-2 truncate">
                          <Mail className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
                          {user.email}
                        </p>
                        {user.company_name && (
                          <p className="text-sm text-slate-600 flex items-center gap-2 truncate">
                            <Building2 className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
                            {user.company_name}
                          </p>
                        )}
                        {user.phone && (
                          <p className="text-sm text-slate-600 flex items-center gap-2 truncate">
                            <Phone className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
                            {user.phone}
                          </p>
                        )}
                      </div>
                    </div>
                  </div>

                  {/* Quick Actions */}
                  <div className="flex items-center gap-2 mt-4 pt-4 border-t border-slate-100">
                    <Button 
                      variant="outline" 
                      size="sm" 
                      className="flex-1 text-xs"
                      onClick={() => handleViewUser(user)}
                    >
                      <Eye className="w-3.5 h-3.5 mr-1" />
                      View
                    </Button>
                    <Button 
                      variant="outline" 
                      size="sm" 
                      className="flex-1 text-xs hover:bg-blue-50 hover:text-blue-700 hover:border-blue-300"
                      onClick={() => handleEditPermissions(user)}
                    >
                      <Shield className="w-3.5 h-3.5 mr-1" />
                      Permissions
                    </Button>
                    <Button 
                      variant="outline" 
                      size="sm" 
                      className="flex-1 text-xs"
                    >
                      <Edit className="w-3.5 h-3.5 mr-1" />
                      Edit
                    </Button>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>

        {filteredUsers.length === 0 && (
          <div className="text-center py-16 bg-white rounded-xl border border-slate-200">
            <Users className="w-16 h-16 mx-auto text-slate-300 mb-4" />
            <h3 className="text-xl font-semibold text-slate-900 mb-2">No users found</h3>
            <p className="text-slate-600">
              {searchTerm ? "Try adjusting your search" : "No users in this layer yet"}
            </p>
          </div>
        )}

        {/* Invite User Dialog */}
        <Dialog open={showInviteDialog} onOpenChange={setShowInviteDialog}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle className="flex items-center gap-2">
                <UserPlus className="w-5 h-5 text-[#0A39DF]" />
                Invite New User
              </DialogTitle>
            </DialogHeader>
            
            <div className="space-y-6 py-4">
              {/* Role Selection */}
              <div>
                <Label className="text-sm font-semibold mb-3 block">Select User Role</Label>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                  {Object.entries(ROLE_CONFIG).map(([roleId, config]) => (
                    <button
                      key={roleId}
                      onClick={() => setInviteData({ ...inviteData, user_role: roleId })}
                      className={`p-3 rounded-xl border-2 transition-all text-center ${
                        inviteData.user_role === roleId
                          ? 'border-[#0A39DF] bg-blue-50 shadow-md'
                          : 'border-slate-200 bg-white hover:border-slate-300'
                      }`}
                    >
                      <div className={`w-8 h-8 mx-auto rounded-lg bg-gradient-to-br ${config.bgGradient} flex items-center justify-center mb-2`}>
                        <Users className="w-4 h-4 text-white" />
                      </div>
                      <p className="text-xs font-semibold text-slate-900">{config.name}</p>
                    </button>
                  ))}
                </div>
              </div>

              {/* User Details */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Full Name *</Label>
                  <Input
                    value={inviteData.full_name}
                    onChange={(e) => setInviteData({ ...inviteData, full_name: e.target.value })}
                    placeholder="John Doe"
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>Email *</Label>
                  <Input
                    type="email"
                    value={inviteData.email}
                    onChange={(e) => setInviteData({ ...inviteData, email: e.target.value })}
                    placeholder="john@example.com"
                    className="mt-1"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Phone</Label>
                  <Input
                    value={inviteData.phone}
                    onChange={(e) => setInviteData({ ...inviteData, phone: e.target.value })}
                    placeholder="(555) 123-4567"
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>Company Name</Label>
                  <Input
                    value={inviteData.company_name}
                    onChange={(e) => setInviteData({ ...inviteData, company_name: e.target.value })}
                    placeholder="Acme Corp"
                    className="mt-1"
                  />
                </div>
              </div>

              <div>
                <Label>Department</Label>
                <Input
                  value={inviteData.department}
                  onChange={(e) => setInviteData({ ...inviteData, department: e.target.value })}
                  placeholder="Operations"
                  className="mt-1"
                />
              </div>

              <div className="p-4 bg-blue-50 rounded-xl border border-blue-200">
                <div className="flex items-start gap-3">
                  <Mail className="w-5 h-5 text-blue-600 mt-0.5" />
                  <div>
                    <p className="text-sm font-medium text-blue-900">Invitation will be sent</p>
                    <p className="text-xs text-blue-700 mt-1">
                      The user will receive an email with instructions to set up their account and access the platform as a <strong>{ROLE_CONFIG[inviteData.user_role].name}</strong>.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <DialogFooter>
              <Button variant="outline" onClick={() => setShowInviteDialog(false)}>
                Cancel
              </Button>
              <Button onClick={handleInviteUser} className="bg-gradient-to-r from-[#0A39DF] to-[#1C323E]">
                <Mail className="w-4 h-4 mr-2" />
                Send Invitation
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* User Detail Modal */}
        <Dialog open={showUserDetailModal} onOpenChange={setShowUserDetailModal}>
          <DialogContent className="max-w-lg">
            {selectedUser && (
              <>
                <DialogHeader>
                  <DialogTitle>User Details</DialogTitle>
                </DialogHeader>
                <div className="py-4">
                  <div className="flex items-center gap-4 mb-6">
                    <Avatar className="w-20 h-20 border-2 border-slate-200">
                      <AvatarImage src={selectedUser.profile_picture || sampleAvatar} alt={selectedUser.full_name} />
                      <AvatarFallback className={`bg-gradient-to-br ${getRoleConfig(selectedUser.user_role || selectedUser.role).bgGradient} text-white font-bold text-2xl`}>
                        {selectedUser.full_name?.charAt(0) || '?'}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <h3 className="text-xl font-bold text-slate-900">{selectedUser.full_name}</h3>
                      <Badge className={`${getRoleConfig(selectedUser.user_role || selectedUser.role).color} border mt-1`}>
                        {getRoleConfig(selectedUser.user_role || selectedUser.role).name}
                      </Badge>
                    </div>
                  </div>

                  <div className="space-y-4">
                    <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                      <Mail className="w-5 h-5 text-slate-400" />
                      <div>
                        <p className="text-xs text-slate-500">Email</p>
                        <p className="text-sm font-medium text-slate-900">{selectedUser.email}</p>
                      </div>
                    </div>
                    {selectedUser.phone && (
                      <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                        <Phone className="w-5 h-5 text-slate-400" />
                        <div>
                          <p className="text-xs text-slate-500">Phone</p>
                          <p className="text-sm font-medium text-slate-900">{selectedUser.phone}</p>
                        </div>
                      </div>
                    )}
                    {selectedUser.company_name && (
                      <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                        <Building2 className="w-5 h-5 text-slate-400" />
                        <div>
                          <p className="text-xs text-slate-500">Company</p>
                          <p className="text-sm font-medium text-slate-900">{selectedUser.company_name}</p>
                        </div>
                      </div>
                    )}
                    <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                      <Calendar className="w-5 h-5 text-slate-400" />
                      <div>
                        <p className="text-xs text-slate-500">Joined</p>
                        <p className="text-sm font-medium text-slate-900">
                          {selectedUser.created_date ? new Date(selectedUser.created_date).toLocaleDateString() : 'Unknown'}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setShowUserDetailModal(false)}>
                    Close
                  </Button>
                  <Button 
                    onClick={() => {
                      setShowUserDetailModal(false);
                      handleEditPermissions(selectedUser);
                    }}
                    className="bg-[#0A39DF]"
                  >
                    <Shield className="w-4 h-4 mr-2" />
                    Edit Permissions
                  </Button>
                </DialogFooter>
              </>
            )}
          </DialogContent>
        </Dialog>

        {/* Permissions Modal */}
        <UserPermissionsModal
          user={selectedUser}
          open={showPermissionsModal}
          onClose={() => {
            setShowPermissionsModal(false);
            setSelectedUser(null);
          }}
          onSave={handleSavePermissions}
          isSaving={updateUserMutation.isPending}
        />
      </div>
    </div>
  );
}