checkcle/application/src/components/settings/user-management/EditUserDialog.tsx

import React from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Form } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { UseFormReturn } from "react-hook-form";
import { User } from "@/services/userService";
import { Loader2, AlertCircle } from "lucide-react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import UserTextField from "./form-fields/UserTextField";
import UserToggleField from "./form-fields/UserToggleField";
import UserRoleField from "./form-fields/UserRoleField";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

interface EditUserDialogProps {
  isOpen: boolean;
  setIsOpen: (open: boolean) => void;
  form: UseFormReturn<any>;
  user: User | null;
  onSubmit: (data: any) => void;
  onImpersonate: (data: any) => void;
  isSubmitting?: boolean;
  error?: string | null;
}

const EditUserDialog = ({ 
  isOpen, 
  setIsOpen, 
  form, 
  user, 
  onSubmit,
  onImpersonate,
  isSubmitting = false,
  error = null
}: EditUserDialogProps) => {
  if (!user) return null;

  const [impersonationDurationSeconds, setImpersonationDurationSeconds] = React.useState<number>(3600);

  const handleImpersonateClick = () => {
    // Impersonation should not depend on edit form validation.
    onImpersonate({ user, durationSeconds: impersonationDurationSeconds });
  };
  
  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogContent className="sm:max-w-[700px] w-[95vw] max-h-[95vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle>Edit User</DialogTitle>
          <DialogDescription>
            Update user information
          </DialogDescription>
        </DialogHeader>
        
        <ScrollArea className="flex-1 overflow-auto">
          <div className="p-1">
            {error && (
              <Alert variant="destructive" className="mb-4">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}
            
            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                
                <div className="grid grid-cols-2 gap-4">
                  <UserTextField
                    control={form.control}
                    name="full_name"
                    label="Full Name"
                    placeholder="Enter full name"
                  />
                  
                  <UserTextField
                    control={form.control}
                    name="email"
                    label="Email"
                    placeholder="Enter email"
                    type="email"
                  />
                  
                  <UserTextField
                    control={form.control}
                    name="username"
                    label="Username"
                    placeholder="Enter username"
                  />
                  
                  <UserRoleField
                    control={form.control}
                    name="role"
                    label="Role"
                  />
                </div>
                
                <UserToggleField
                  control={form.control}
                  name="isActive"
                  label="Active Status"
                  description="User will be able to access the system"
                />
              </form>
            </Form>

            {/* Impersonation settings are not part of the form to avoid validation */}
            <div className="mt-6 space-y-2">
              <Label htmlFor="impersonation-duration">Impersonation token duration (seconds)</Label>
              <Input
                id="impersonation-duration"
                type="number"
                inputMode="numeric"
                min={60}
                step={60}
                value={impersonationDurationSeconds}
                onChange={(e) => setImpersonationDurationSeconds(Number(e.target.value || 0))}
              />
              <p className="text-xs text-muted-foreground">
                Default is 3600 (1 hour). Minimum 60 seconds.
              </p>
            </div>
          </div>
        </ScrollArea>

        <DialogFooter className="flex-shrink-0 pt-4 border-t">
          <Button 
            type="button" 
            variant="outline" 
            onClick={() => setIsOpen(false)}
            disabled={isSubmitting}
          >
            Cancel
          </Button>
          <Button 
            onClick={form.handleSubmit(onSubmit)} 
            disabled={isSubmitting}
          >
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Updating...
              </>
            ) : (
              "Update User"
            )}
          </Button>
          <Button 
            type="button"
            onClick={handleImpersonateClick}
            disabled={isSubmitting}
          >
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Impersonating...
              </>
            ) : (
              "Impersonate"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default EditUserDialog;