import { useState, useEffect } from 'react';
import { adminService } from '../../services/admin.service';
import { masterService } from '../../services/master.service';
import { Card, CardContent } from '../ui/card';
import { Badge } from '../ui/badge';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
import { Switch } from '../ui/switch';
import {
    Users,
    UserPlus,
    Search,
    Edit2,
    Trash2,
    Shield,
    Mail,
    Phone,
    Filter,
    RefreshCw,
    CheckCircle,
    XCircle
} from 'lucide-react';
import { toast } from 'sonner';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';

export function UserManagementPage() {
    const getParentIdByType = (location: any, parentType: string): string => {
        if (!location?.parents || !Array.isArray(location.parents)) return '';
        const match = location.parents.find((p: any) => p?.type === parentType);
        return match?.id || '';
    };

    const normalizeList = (res: any, preferredKey: string): any[] => {
        if (!res) return [];
        if (Array.isArray(res[preferredKey])) return res[preferredKey];
        if (Array.isArray(res.data)) return res.data;
        return [];
    };

    const [users, setUsers] = useState<any[]>([]);
    const [roles, setRoles] = useState<any[]>([]);
    const [zones, setZones] = useState<any[]>([]);
    const [regions, setRegions] = useState<any[]>([]);
    const [states, setStates] = useState<any[]>([]);
    const [districts, setDistricts] = useState<any[]>([]);
    
    const [loading, setLoading] = useState(true);
    const [searchQuery, setSearchQuery] = useState('');
    const [roleFilter, setRoleFilter] = useState('all');
    const [statusFilter, setStatusFilter] = useState('all');

    // Edit/Add Modal State
    const [showUserModal, setShowUserModal] = useState(false);
    const [editingUser, setEditingUser] = useState<any>(null);
    const [formData, setFormData] = useState({
        fullName: '',
        email: '',
        roleCode: '',
        status: 'active',
        isActive: true,
        mobileNumber: '',
        department: '',
        designation: '',
        employeeId: '',
        zoneId: '',
        regionId: '',
        stateId: '',
        districtId: ''
    });

    useEffect(() => {
        fetchData();
    }, []);

    const fetchData = async () => {
        setLoading(true);
        try {
            const [usersRes, rolesRes, zonesRes, regionsRes] = await Promise.all([
                adminService.getAllUsers(),
                masterService.getRoles(),
                masterService.getZones(),
                masterService.getRegions()
            ]) as any[];

            if (usersRes.success) setUsers(usersRes.data);
            if (rolesRes.success) setRoles(rolesRes.data);
            if (zonesRes.success) setZones(zonesRes.data);
            if (regionsRes.success) setRegions(regionsRes.data);
        } catch (error) {
            toast.error('Failed to load user management data');
        } finally {
            setLoading(false);
        }
    };

    // Load states when zone changes (or on edit)
    useEffect(() => {
        if (formData.zoneId) {
            masterService.getStates(formData.zoneId).then((res: any) => {
                if (res && res.success) setStates(normalizeList(res, 'states'));
            });
        } else {
            setStates([]);
        }
    }, [formData.zoneId]);

    // Load districts when state changes
    useEffect(() => {
        if (formData.stateId) {
            masterService.getDistricts(formData.stateId).then((res: any) => {
                if (res && res.success) setDistricts(normalizeList(res, 'districts'));
            });
        } else {
            setDistricts([]);
        }
    }, [formData.stateId]);

    // Load areas when district changes (Disabled)
    useEffect(() => {
        // Area selection removed as per user request
    }, [formData.districtId]);

    const handleEditUser = (user: any) => {
        const userLocation = user.location;
        const userLocationType = userLocation?.type;

        const zoneId = user.zoneId || (userLocationType === 'zone' ? userLocation?.id : getParentIdByType(userLocation, 'zone'));
        const regionId = user.regionId || (userLocationType === 'region' ? userLocation?.id : getParentIdByType(userLocation, 'region'));
        const stateId = user.stateId || (userLocationType === 'state' ? userLocation?.id : getParentIdByType(userLocation, 'state'));
        const districtId = user.districtId || (userLocationType === 'district' ? userLocation?.id : getParentIdByType(userLocation, 'district'));
        
        setEditingUser(user);
        setFormData({
            fullName: user.fullName || '',
            email: user.email || '',
            roleCode: user.roleCode || '',
            status: user.status || 'active',
            isActive: user.isActive ?? true,
            mobileNumber: user.mobileNumber || '',
            department: user.department || '',
            designation: user.designation || '',
            employeeId: user.employeeId || '',
            zoneId: zoneId || '',
            regionId: regionId || '',
            stateId: stateId || '',
            districtId: districtId || ''
        });
        setShowUserModal(true);
    };

    const handleSubmit = async () => {
        if (!formData.fullName || !formData.email || !formData.roleCode) {
            toast.error('Please fill in all required fields');
            return;
        }

        try {
            const userLocationId = formData.districtId || formData.stateId || formData.regionId || formData.zoneId || null;
            const submitData = {
                ...formData,
                locationId: userLocationId
            };

            if (editingUser) {
                const res = await adminService.updateUser(editingUser.id, submitData);
                if (res.success) {
                    setShowUserModal(false);
                    fetchData();
                }
            } else {
                const res = await adminService.createUser(submitData);
                if (res.success) {
                    toast.success('User created successfully');
                    setFormData({
                        fullName: '', email: '', roleCode: '', status: 'active', isActive: true,
                        mobileNumber: '', department: '', designation: '', employeeId: '',
                        zoneId: '', regionId: '', stateId: '', districtId: ''
                    });
                    setShowUserModal(false);
                    fetchData();
                } else {
                    toast.error(res.message || 'Failed to create user');
                }
            }
        } catch (error) {
            const message = (error as any)?.response?.data?.message || (error as any)?.message || 'Operation failed';
            toast.error(message);
        }
    };

    const toggleUserStatus = async (user: any) => {
        const newStatus = user.status === 'active' ? 'inactive' : 'active';
        const newActive = !user.isActive;

        const res = await adminService.updateUserStatus(user.id, newStatus, newActive);
        if (res.success) {
            fetchData();
        }
    };

    const filteredUsers = users.filter(user => {
        const matchesSearch =
            user.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
            user.email?.toLowerCase().includes(searchQuery.toLowerCase()) ||
            user.employeeId?.toLowerCase().includes(searchQuery.toLowerCase());

        const matchesRole = roleFilter === 'all' || user.roleCode === roleFilter;
        const matchesStatus = statusFilter === 'all' || user.status === statusFilter;

        return matchesSearch && matchesRole && matchesStatus;
    });

    return (
        <div className="space-y-6 max-w-7xl mx-auto py-6 px-4">
            {/* Header section */}
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
                        <Users className="w-6 h-6 text-re-red" />
                        User Management
                    </h1>
                    <p className="text-slate-500">Manage system users, roles, and access permissions.</p>
                </div>
                <Button
                    onClick={() => {
                        setEditingUser(null); setFormData({
                        fullName: '', email: '', roleCode: '', status: 'active', isActive: true,
                        mobileNumber: '', department: '', designation: '', employeeId: '',
                        zoneId: '', regionId: '', stateId: '', districtId: ''
                    }); setShowUserModal(true);
                    }}
                    className="bg-re-red hover:bg-re-red-hover text-white shrink-0"
                >
                    <UserPlus className="w-4 h-4 mr-2" />
                    Add New User
                </Button>
            </div>

            {/* Filters section */}
            <Card className="border-slate-200">
                <CardContent className="p-4">
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div className="relative">
                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                            <Input
                                placeholder="Search by name, email, ID..."
                                className="pl-10"
                                value={searchQuery}
                                onChange={(e) => setSearchQuery(e.target.value)}
                            />
                        </div>
                        <Select value={roleFilter} onValueChange={setRoleFilter}>
                            <SelectTrigger>
                                <Filter className="w-4 h-4 mr-2 text-slate-400" />
                                <SelectValue placeholder="Filter by Role" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">All Roles</SelectItem>
                                {roles.map(role => (
                                    <SelectItem key={role.id} value={role.roleCode}>{role.roleName}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        <Select value={statusFilter} onValueChange={setStatusFilter}>
                            <SelectTrigger>
                                <SelectValue placeholder="Filter by Status" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">All Status</SelectItem>
                                <SelectItem value="active">Active</SelectItem>
                                <SelectItem value="inactive">Inactive</SelectItem>
                            </SelectContent>
                        </Select>
                        <Button variant="outline" onClick={fetchData} disabled={loading}>
                            <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
                            Refresh
                        </Button>
                    </div>
                </CardContent>
            </Card>

            {/* Users Table */}
            <Card className="border-slate-200 overflow-hidden">
                <CardContent className="p-0">
                    <Table>
                        <TableHeader className="bg-slate-50">
                            <TableRow>
                                <TableHead>User Information</TableHead>
                                <TableHead>Geographical Mapping</TableHead>
                                <TableHead>Account Details</TableHead>
                                <TableHead>Role & Department</TableHead>
                                <TableHead>Status</TableHead>
                                <TableHead className="text-right">Actions</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {loading ? (
                                <TableRow>
                                    <TableCell colSpan={5} className="h-40 text-center">
                                        <div className="flex flex-col items-center justify-center space-y-2 text-slate-500">
                                            <RefreshCw className="w-8 h-8 animate-spin" />
                                            <p>Loading users...</p>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ) : filteredUsers.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={5} className="h-40 text-center text-slate-500">
                                        <Users className="w-12 h-12 mx-auto mb-2 opacity-20" />
                                        No users found matching your criteria.
                                    </TableCell>
                                </TableRow>
                            ) : (
                                filteredUsers.map((user) => (
                                    <TableRow key={user.id} className="hover:bg-slate-50/50">
                                        <TableCell>
                                            <div className="flex items-center gap-3">
                                                <div className="w-10 h-10 rounded-full bg-red-100 text-re-red-hover flex items-center justify-center font-bold">
                                                    {user.fullName?.charAt(0) || user.email?.charAt(0)}
                                                </div>
                                                <div>
                                                    <div className="font-medium text-slate-900">{user.fullName}</div>
                                                    <div className="text-xs text-slate-500 flex items-center gap-1">
                                                        <Mail className="w-3 h-3" />
                                                        {user.email}
                                                    </div>
                                                </div>
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <div className="space-y-1">
                                                <div className="flex items-center gap-2">
                                                    <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                                                        Location: {user.location?.name || 'N/A'}
                                                    </Badge>
                                                </div>
                                                <div className="text-xs text-slate-500">
                                                    Type: {user.location?.type ? user.location.type.toUpperCase() : 'N/A'}
                                                </div>
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <div className="space-y-1">
                                                <div className="text-sm font-medium">ID: {user.employeeId || 'N/A'}</div>
                                                <div className="text-xs text-slate-500 flex items-center gap-1">
                                                    <Phone className="w-3 h-3" />
                                                    {user.mobileNumber || 'No phone'}
                                                </div>
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <div className="space-y-1">
                                                <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                                                    <Shield className="w-3 h-3 mr-1" />
                                                    {user.roleCode}
                                                </Badge>
                                                <div className="text-xs text-slate-500">{user.department || 'No department'}</div>
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <div className="flex items-center gap-3">
                                                <div className="flex flex-col items-start gap-1">
                                                    <Badge
                                                        variant={user.status === 'active' ? 'default' : 'destructive'}
                                                        className={`text-xs ${user.status === 'active' ? 'bg-green-600 hover:bg-green-700' : ''}`}
                                                    >
                                                        {user.status === 'active' ? (
                                                            <CheckCircle className="w-3 h-3 mr-1" />
                                                        ) : (
                                                            <XCircle className="w-3 h-3 mr-1" />
                                                        )}
                                                        {user.status}
                                                    </Badge>
                                                </div>
                                                <Switch
                                                    checked={user.isActive}
                                                    onCheckedChange={() => toggleUserStatus(user)}
                                                />
                                            </div>
                                        </TableCell>
                                        <TableCell className="text-right">
                                            <div className="flex justify-end gap-2">
                                                <Button variant="ghost" size="icon" onClick={() => handleEditUser(user)}>
                                                    <Edit2 className="w-4 h-4 text-slate-400 hover:text-re-red" />
                                                </Button>
                                                <Button variant="ghost" size="icon">
                                                    <Trash2 className="w-4 h-4 text-slate-400 hover:text-red-600" />
                                                </Button>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))
                            )}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>

            {/* User Edit/Add Modal */}
            <Dialog open={showUserModal} onOpenChange={setShowUserModal}>
                <DialogContent className="max-w-2xl bg-white">
                    <DialogHeader>
                        <DialogTitle>{editingUser ? 'Edit User' : 'Add New User'}</DialogTitle>
                        <DialogDescription>
                            Modify user profiles and system access settings.
                        </DialogDescription>
                    </DialogHeader>

                    <div className="grid grid-cols-2 gap-4 py-4">
                        <div className="grid gap-2">
                            <Label htmlFor="fullName">Full Name *</Label>
                            <Input
                                id="fullName"
                                value={formData.fullName}
                                onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
                            />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="email">Email Address *</Label>
                            <Input
                                id="email"
                                type="email"
                                value={formData.email}
                                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                            />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="employeeId">Employee ID</Label>
                            <Input
                                id="employeeId"
                                value={formData.employeeId}
                                onChange={(e) => setFormData({ ...formData, employeeId: e.target.value })}
                            />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="roleCode">Role *</Label>
                            <Select
                                value={formData.roleCode}
                                onValueChange={(val) => setFormData({ ...formData, roleCode: val })}
                            >
                                <SelectTrigger id="roleCode">
                                    <SelectValue placeholder="Select a role" />
                                </SelectTrigger>
                                <SelectContent>
                                    {roles.map(role => (
                                        <SelectItem key={role.id} value={role.roleCode}>{role.roleName}</SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="department">Department</Label>
                            <Input
                                id="department"
                                value={formData.department}
                                onChange={(e) => setFormData({ ...formData, department: e.target.value })}
                            />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="designation">Designation</Label>
                            <Input
                                id="designation"
                                value={formData.designation}
                                onChange={(e) => setFormData({ ...formData, designation: e.target.value })}
                            />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="mobileNumber">Mobile Number</Label>
                            <Input
                                id="mobileNumber"
                                value={formData.mobileNumber}
                                onChange={(e) => setFormData({ ...formData, mobileNumber: e.target.value })}
                            />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="status">Account Status</Label>
                            <Select
                                value={formData.status}
                                onValueChange={(val) => setFormData({ ...formData, status: val })}
                            >
                                <SelectTrigger id="status">
                                    <SelectValue placeholder="Select status" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="active">Active</SelectItem>
                                    <SelectItem value="inactive">Inactive</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        {/* Geographical Assignments */}
                        <div className="col-span-2 border-t pt-4 mt-2">
                            <h3 className="text-sm font-semibold text-slate-900 mb-1">Geographical Assignments</h3>
                            <p className="text-xs text-slate-500 mb-4">Optional: you can create users without territory mapping and assign later.</p>
                            <div className="grid grid-cols-2 gap-4">
                                <div className="grid gap-2">
                                    <Label htmlFor="zoneId">Zone (Top Level)</Label>
                                    <Select
                                        value={formData.zoneId}
                                        onValueChange={(val) => setFormData({ ...formData, zoneId: val, regionId: '', stateId: '', districtId: '' })}
                                    >
                                        <SelectTrigger id="zoneId">
                                            <SelectValue placeholder="Select Zone" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {zones.map(zone => (
                                                <SelectItem key={zone.id} value={zone.id}>{zone.name || zone.zoneName}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="regionId">Region</Label>
                                    <Select
                                        value={formData.regionId}
                                        onValueChange={(val) => setFormData({ ...formData, regionId: val })}
                                        disabled={!formData.zoneId}
                                    >
                                        <SelectTrigger id="regionId">
                                            <SelectValue placeholder="Select Region" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {regions.filter(r => (r.parents && r.parents.some((p:any) => p.id === formData.zoneId)) || r.zoneId === formData.zoneId).map(region => (
                                                <SelectItem key={region.id} value={region.id}>{region.name || region.regionName}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="stateId">State</Label>
                                    <Select
                                        value={formData.stateId}
                                        onValueChange={(val) => setFormData({ ...formData, stateId: val, districtId: '' })}
                                        disabled={!formData.zoneId}
                                    >
                                        <SelectTrigger id="stateId">
                                            <SelectValue placeholder="Select State" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {states.filter(s => (s.parents && s.parents.some((p:any) => p.id === formData.zoneId)) || s.zoneId === formData.zoneId).map(state => (
                                                <SelectItem key={state.id} value={state.id}>{state.name || state.stateName}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="districtId">District</Label>
                                    <Select
                                        value={formData.districtId}
                                        onValueChange={(val) => setFormData({ ...formData, districtId: val })}
                                        disabled={!formData.stateId}
                                    >
                                        <SelectTrigger id="districtId">
                                            <SelectValue placeholder="Select District" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {districts.filter(d => (d.parents && d.parents.some((p:any) => p.id === formData.stateId)) || d.stateId === formData.stateId).map(district => (
                                                <SelectItem key={district.id} value={district.id}>{district.name || district.districtName}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <DialogFooter className="bg-slate-50 -mx-6 -mb-6 p-4 rounded-b-lg">
                        <Button variant="outline" onClick={() => setShowUserModal(false)}>Cancel</Button>
                        <Button className="bg-re-red hover:bg-re-red-hover text-white" onClick={handleSubmit}>
                            {editingUser ? 'Save Changes' : 'Create User'}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    );
}