// File: frontend/app/(protected)/admin/users/_components/user-form-dialog.jsx
'use client';

import { useState, useEffect } from 'react';
import api from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Trash2 } from 'lucide-react';
import { ScrollArea } from '@/components/ui/scroll-area';


export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
  const [formData, setFormData] = useState({});
  const [allRoles, setAllRoles] = useState([]);
  const [selectedSystemRoles, setSelectedSystemRoles] = useState(new Set());
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [allProjects, setAllProjects] = useState([]);
  const [projectRoles, setProjectRoles] = useState([]);
  const [selectedProjectId, setSelectedProjectId] = useState('');
  const [selectedRoleId, setSelectedRoleId] = useState('');

  const isEditMode = !!user;

  useEffect(() => {
    const fetchPrerequisites = async () => {
      try {
        const [rolesRes, projectsRes] = await Promise.all([
          api.get('/rbac/roles'),
          api.get('/projects'),
        ]);
        setAllRoles(rolesRes.data);
        setAllProjects(projectsRes.data);
      } catch (err) {
        console.error('Failed to fetch prerequisites', err);
      }
    };
    if (isOpen) {
        fetchPrerequisites();
    }
  }, [isOpen]);

  useEffect(() => {
    const fetchUserData = async () => {
        if (isEditMode) {
            setFormData({
                username: user.username,
                email: user.email,
                first_name: user.first_name || '',
                last_name: user.last_name || '',
                is_active: user.is_active,
            });
            setSelectedSystemRoles(new Set(user.Roles?.map(role => role.id) || []));
            
            try {
                const res = await api.get(`/rbac/user-project-roles?userId=${user.id}`);
                setProjectRoles(res.data);
            } catch (err) {
                console.error("Failed to fetch user's project roles", err);
                setProjectRoles([]);
            }

        } else {
            setFormData({ username: '', email: '', password: '', first_name: '', last_name: '', is_active: true });
            setSelectedSystemRoles(new Set());
            setProjectRoles([]);
        }
        setError('');
        setSelectedProjectId('');
        setSelectedRoleId('');
    };
    
    if (isOpen) {
        fetchUserData();
    }
  }, [user, isOpen]);

  const handleInputChange = (e) => {
    const { id, value } = e.target;
    setFormData((prev) => ({ ...prev, [id]: value }));
  };

  const handleSystemRoleChange = (roleId) => {
    setSelectedSystemRoles(prev => {
        const newSet = new Set(prev);
        if (newSet.has(roleId)) newSet.delete(roleId);
        else newSet.add(roleId);
        return newSet;
    });
  };

  const handleAddProjectRole = async () => {
      if (!selectedProjectId || !selectedRoleId) {
          setError("Please select both a project and a role.");
          return;
      }
      setIsLoading(true);
      setError('');
      try {
          await api.post('/rbac/user-project-roles', {
              userId: user.id,
              projectId: selectedProjectId,
              roleId: selectedRoleId
          });
          const res = await api.get(`/rbac/user-project-roles?userId=${user.id}`);
          setProjectRoles(res.data);
          setSelectedProjectId('');
          setSelectedRoleId('');
      } catch(err) {
          setError(err.response?.data?.message || 'Failed to add project role.');
      } finally {
          setIsLoading(false);
      }
  };

  const handleRemoveProjectRole = async (assignment) => {
      setIsLoading(true);
      setError('');
      try {
          await api.delete('/rbac/user-project-roles', {
              data: {
                  userId: user.id,
                  projectId: assignment.project_id,
                  roleId: assignment.role_id
              }
          });
          setProjectRoles(prev => prev.filter(p => p.id !== assignment.id));
      } catch(err) {
          setError(err.response?.data?.message || 'Failed to remove project role.');
      } finally {
          setIsLoading(false);
      }
  };

  const handleSaveUserDetails = async () => {
    setIsLoading(true);
    setError('');
    const payload = { ...formData, roles: Array.from(selectedSystemRoles) };
    
    try {
      if (isEditMode) {
        await api.put(`/users/${user.id}`, payload);
      } else {
        await api.post('/users', payload);
      }
      onSuccess();
      setIsOpen(false);
    } catch (err) {
      setError(err.response?.data?.message || 'An unexpected error occurred.');
    } finally {
      setIsLoading(false);
    }
  };
  
  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogContent className="sm:max-w-3xl">
        <DialogHeader>
            <DialogTitle>{isEditMode ? `Edit User: ${user.username}` : 'Create New User'}</DialogTitle>
        </DialogHeader>
        <ScrollArea className="max-h-[70vh]">
        <div className="grid grid-cols-1 p-4 md:grid-cols-2 gap-x-6 gap-y-4">
            
            {/* Section 1: User Details & System Roles */}
            <div className="pr-4 space-y-4 border-r-0 md:border-r">
                <h3 className="pb-2 font-semibold border-b">User Details & System Roles</h3>
                <div className="space-y-2">
                    <Label htmlFor="username">Username</Label>
                    <Input id="username" value={formData.username || ''} onChange={handleInputChange} required disabled={isEditMode} />
                </div>
                <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input id="email" type="email" value={formData.email || ''} onChange={handleInputChange} required />
                </div>
                {!isEditMode && (
                  <div className="space-y-2">
                    <Label htmlFor="password">Password</Label>
                    <Input id="password" type="password" value={formData.password || ''} onChange={handleInputChange} required />
                  </div>
                )}
                <div className="flex gap-4">
                  <div className="flex-1 space-y-2">
                      <Label htmlFor="first_name">First Name</Label>
                      <Input id="first_name" value={formData.first_name || ''} onChange={handleInputChange} />
                  </div>
                  <div className="flex-1 space-y-2">
                      <Label htmlFor="last_name">Last Name</Label>
                      <Input id="last_name" value={formData.last_name || ''} onChange={handleInputChange} />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>System Roles</Label>
                  <div className="p-2 space-y-2 overflow-y-auto border rounded-md max-h-32">
                    {allRoles.map(role => (
                        <div key={role.id} className="flex items-center space-x-2">
                            <Checkbox id={`role-${role.id}`} checked={selectedSystemRoles.has(role.id)} onCheckedChange={() => handleSystemRoleChange(role.id)} />
                            <label htmlFor={`role-${role.id}`} className="text-sm font-medium">{role.name}</label>
                        </div>
                    ))}
                  </div>
                </div>
                <div className="flex items-center pt-2 space-x-2">
                    <Switch id="is_active" checked={formData.is_active || false} onCheckedChange={(checked) => setFormData(prev => ({...prev, is_active: checked}))} />
                    <Label htmlFor="is_active">User is Active</Label>
                </div>
            </div>

            {/* Section 2: Project Role Assignments */}
            <div className="space-y-4">
                <h3 className="pb-2 font-semibold border-b">Project Role Assignments</h3>
                {isEditMode ? (
                <>
                    <div className="p-4 space-y-3 border rounded-lg bg-muted/50">
                        <p className="text-sm font-medium">Assign New Project Role</p>
                        <div className="grid grid-cols-2 gap-2">
                            <Select onValueChange={setSelectedProjectId} value={selectedProjectId}>
                                <SelectTrigger><SelectValue placeholder="Select Project" /></SelectTrigger>
                                <SelectContent>{allProjects.map(p => <SelectItem key={p.id} value={String(p.id)}>{p.name}</SelectItem>)}</SelectContent>
                            </Select>
                            <Select onValueChange={setSelectedRoleId} value={selectedRoleId}>
                                <SelectTrigger><SelectValue placeholder="Select Role" /></SelectTrigger>
                                <SelectContent>{allRoles.map(r => <SelectItem key={r.id} value={String(r.id)}>{r.name}</SelectItem>)}</SelectContent>
                            </Select>
                        </div>
                        <Button onClick={handleAddProjectRole} disabled={isLoading || !selectedProjectId || !selectedRoleId} size="sm" className="w-full">
                            {isLoading ? 'Adding...' : 'Add Project Role'}
                        </Button>
                    </div>

                    <div className="space-y-2">
                        <p className="text-sm font-medium">Current Assignments</p>
                        <div className="pr-1 space-y-1 overflow-y-auto max-h-48">
                            {projectRoles.length > 0 ? projectRoles.map(pr => (
                                <div key={pr.id} className="flex items-center justify-between p-2 text-sm border rounded-md">
                                    <div>
                                        <span className="font-semibold">{pr.Project.name}</span>
                                        <span className="text-muted-foreground"> as </span>
                                        <span>{pr.Role.name}</span>
                                    </div>
                                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleRemoveProjectRole(pr)} disabled={isLoading}>
                                        <Trash2 className="w-4 h-4 text-red-500" />
                                    </Button>
                                </div>
                            )) : <p className="py-2 text-sm italic text-center text-muted-foreground">No project assignments.</p>}
                        </div>
                    </div>
                </>
                ) : <p className="py-4 text-sm italic text-center text-muted-foreground">Save the user first to assign project roles.</p>}
            </div>
        </div>
        </ScrollArea>
        {error && <p className="pb-2 text-sm text-center text-red-500">{error}</p>}
        <DialogFooter className="pt-4 border-t">
            <Button onClick={() => setIsOpen(false)} variant="outline">Close</Button>
            <Button onClick={handleSaveUserDetails} disabled={isLoading}>
                {isLoading ? 'Saving...' : 'Save User Details'}
            </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}