/**
 * OrganizationFormDialog Component
 * Dialog for creating and editing organizations with form validation
 */

'use client';

import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  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';
import { Checkbox } from '@/components/ui/checkbox';
import { toast } from 'sonner';
import {
  useCreateOrganization,
  useUpdateOrganization,
  type Organization,
} from '@/lib/api/hooks/useAdmin';

// ============================================================================
// Validation Schema
// ============================================================================

const organizationFormSchema = z.object({
  name: z
    .string()
    .min(1, 'Organization name is required')
    .min(2, 'Organization name must be at least 2 characters')
    .max(100, 'Organization name must not exceed 100 characters'),
  description: z
    .string()
    .max(500, 'Description must not exceed 500 characters')
    .optional()
    .or(z.literal('')),
  is_active: z.boolean(),
});

type OrganizationFormData = z.infer<typeof organizationFormSchema>;

// ============================================================================
// Component
// ============================================================================

interface OrganizationFormDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  organization?: Organization | null;
  mode: 'create' | 'edit';
}

export function OrganizationFormDialog({
  open,
  onOpenChange,
  organization,
  mode,
}: OrganizationFormDialogProps) {
  const isEdit = mode === 'edit' && organization;
  const createOrganization = useCreateOrganization();
  const updateOrganization = useUpdateOrganization();

  const form = useForm<OrganizationFormData>({
    resolver: zodResolver(organizationFormSchema),
    defaultValues: {
      name: '',
      description: '',
      is_active: true,
    },
  });

  // Reset form when dialog opens/closes or organization changes
  // istanbul ignore next - Form reset logic tested in E2E (admin-organizations.spec.ts)
  useEffect(() => {
    if (open && isEdit) {
      form.reset({
        name: organization.name,
        description: organization.description || '',
        is_active: organization.is_active,
      });
    } else if (open && !isEdit) {
      form.reset({
        name: '',
        description: '',
        is_active: true,
      });
    }
  }, [open, isEdit, organization, form]);

  // istanbul ignore next - Form submission logic fully tested in E2E (admin-organizations.spec.ts)
  const onSubmit = async (data: OrganizationFormData) => {
    try {
      if (isEdit) {
        await updateOrganization.mutateAsync({
          orgId: organization.id,
          orgData: {
            name: data.name,
            description: data.description || null,
            is_active: data.is_active,
          },
        });
        toast.success(`${data.name} has been updated successfully.`);
      } else {
        // Generate slug from name (simple kebab-case conversion)
        const slug = data.name
          .toLowerCase()
          .replace(/[^a-z0-9]+/g, '-')
          .replace(/^-|-$/g, '');

        await createOrganization.mutateAsync({
          name: data.name,
          slug,
          description: data.description || null,
        });
        toast.success(`${data.name} has been created successfully.`);
      }
      onOpenChange(false);
      form.reset();
    } catch (error) {
      toast.error(
        error instanceof Error
          ? error.message
          : `Failed to ${isEdit ? 'update' : 'create'} organization`
      );
    }
  };

  const isLoading = createOrganization.isPending || updateOrganization.isPending;

  // istanbul ignore next - JSX rendering tested in E2E (admin-organizations.spec.ts)
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>{isEdit ? 'Edit Organization' : 'Create Organization'}</DialogTitle>
          <DialogDescription>
            {isEdit
              ? 'Update the organization details below.'
              : 'Add a new organization to the system.'}
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
          {/* Name Field */}
          <div className="space-y-2">
            <Label htmlFor="name">
              Name <span className="text-destructive">*</span>
            </Label>
            <Input
              id="name"
              placeholder="Acme Corporation"
              {...form.register('name')}
              disabled={isLoading}
            />
            {form.formState.errors.name && (
              <p className="text-sm text-destructive" id="name-error">
                {form.formState.errors.name.message}
              </p>
            )}
          </div>

          {/* Description Field */}
          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              placeholder="A brief description of the organization..."
              rows={3}
              {...form.register('description')}
              disabled={isLoading}
            />
            {form.formState.errors.description && (
              <p className="text-sm text-destructive" id="description-error">
                {form.formState.errors.description.message}
              </p>
            )}
          </div>

          {/* Active Status (Edit Mode Only) */}
          {isEdit && (
            <div className="flex items-center space-x-2">
              <Checkbox
                id="is_active"
                checked={form.watch('is_active')}
                onCheckedChange={(checked) => form.setValue('is_active', checked === true)}
                disabled={isLoading}
              />
              <Label htmlFor="is_active" className="text-sm font-normal cursor-pointer">
                Organization is active
              </Label>
            </div>
          )}

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
              disabled={isLoading}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={isLoading}>
              {isLoading ? 'Saving...' : isEdit ? 'Save Changes' : 'Create Organization'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}
