import React, { useEffect, useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';

interface AddRoleDialogProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  onSave: (data: { roleCode: string; roleName: string; description?: string }) => Promise<void>;
}

export const AddRoleDialog: React.FC<AddRoleDialogProps> = ({
  isOpen,
  onOpenChange,
  onSave
}) => {
  const [roleName, setRoleName] = useState('');
  const [roleCode, setRoleCode] = useState('');
  const [description, setDescription] = useState('');
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!isOpen) return;
    setRoleName('');
    setRoleCode('');
    setDescription('');
    setSaving(false);
  }, [isOpen]);

  const handleSubmit = async () => {
    if (!roleName.trim() || !roleCode.trim()) return;
    setSaving(true);
    try {
      await onSave({
        roleName: roleName.trim(),
        roleCode: roleCode.trim(),
        description: description.trim() || undefined
      });
      onOpenChange(false);
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Add Role</DialogTitle>
          <DialogDescription>Create a new role for Master Configuration.</DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="role-name">Role Name</Label>
            <Input
              id="role-name"
              value={roleName}
              onChange={(e) => setRoleName(e.target.value)}
              placeholder="e.g. Finance Admin"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="role-code">Role Code</Label>
            <Input
              id="role-code"
              value={roleCode}
              onChange={(e) => setRoleCode(e.target.value)}
              placeholder="e.g. FINANCE_ADMIN"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="role-description">Description</Label>
            <Textarea
              id="role-description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Optional"
              rows={3}
            />
          </div>
        </div>

        <div className="flex justify-end gap-2">
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
            Cancel
          </Button>
          <Button onClick={handleSubmit} disabled={saving || !roleName.trim() || !roleCode.trim()}>
            {saving ? 'Saving...' : 'Create Role'}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};
