import { useState } from 'react';
import { Dialog } 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';
import { createRole } from '../services/roleService';
import { useToast } from '@/hooks/useToast';
import { Plus } from 'lucide-react';
import { parseApiError } from '@/utils/apiErrorHandler';

// FE-PAGE-011: Complete Roles page implementation

interface CreateRoleModalProps {
  onRoleCreated: () => void;
}

export function CreateRoleModal({ onRoleCreated }: CreateRoleModalProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    display_name: '',
    description: '',
    is_active: true,
  });
  const { success, error } = useToast();

  const handleSubmit = async () => {
    setIsLoading(true);

    try {
      await createRole(formData);
      success('Role created successfully');
      setIsOpen(false);
      setFormData({
        name: '',
        display_name: '',
        description: '',
        is_active: true,
      });
      onRoleCreated();
      setFormData({
        name: '',
        display_name: '',
        description: '',
        is_active: true,
      });
      onRoleCreated();
    } catch (err: unknown) {
      const apiError = parseApiError(err);
      error(apiError.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        <Plus className="h-4 w-4 mr-2" />
        Create Role
      </Button>
      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        title="Create New Role"
        onConfirm={handleSubmit}
        confirmLabel={isLoading ? 'Creating...' : 'Create Role'}
        cancelLabel="Cancel"
      >
        <form
          onSubmit={(e) => {
            e.preventDefault();
            handleSubmit();
          }}
          className="space-y-4"
        >
          <div>
            <Label htmlFor="name">Name *</Label>
            <Input
              id="name"
              value={formData.name}
              onChange={(e) =>
                setFormData({ ...formData, name: e.target.value })
              }
              placeholder="e.g., content_moderator"
              required
            />
          </div>
          <div>
            <Label htmlFor="display_name">Display Name *</Label>
            <Input
              id="display_name"
              value={formData.display_name}
              onChange={(e) =>
                setFormData({ ...formData, display_name: e.target.value })
              }
              placeholder="e.g., Content Moderator"
              required
            />
          </div>
          <div>
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              value={formData.description}
              onChange={(e) =>
                setFormData({ ...formData, description: e.target.value })
              }
              placeholder="Role description..."
              rows={3}
            />
          </div>
          <div className="flex items-center space-x-2">
            <input
              type="checkbox"
              id="is_active"
              checked={formData.is_active}
              onChange={(e) =>
                setFormData({ ...formData, is_active: e.target.checked })
              }
              className="rounded"
            />
            <Label htmlFor="is_active">Active</Label>
          </div>
        </form>
      </Dialog>
    </>
  );
}
