import { CalendarIcon } from 'lucide-react';
import { z } from 'zod';

import { FormEventHandler, useEffect, useState } from 'react';

import { useForm } from '@inertiajs/react';

import InputError from '@/Components/InputError';
import { Button } from '@/Components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/Components/ui/dialog';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/Components/ui/select';
import { Textarea } from '@/Components/ui/textarea';
import { useFormValidation } from '@/hooks/useFormValidation';

const createTaskSchema = z.object({
  title: z.string().min(1, 'Title is required').max(500, 'Title must not exceed 500 characters'),
  description: z.string().optional(),
  due_date: z.string().min(1, 'Due date is required'),
  scheduled_date: z.string().optional(),
  status: z.enum(['planned', 'in_progress', 'completed'], { message: 'Invalid status' }),
  page_url: z
    .string()
    .optional()
    .refine(
      (val) => {
        if (!val || val === '') return true;
        try {
          new URL(val);
          return true;
        } catch {
          return false;
        }
      },
      { message: 'Must be a valid URL' },
    ),
});

interface CreateTaskDialogProps {
  open: boolean;
  onClose: () => void;
  siteId: number;
  initialDueDate?: string;
}

export default function CreateTaskDialog({
  open,
  onClose,
  siteId,
  initialDueDate,
}: CreateTaskDialogProps) {
  const {
    errors: clientErrors,
    validateField,
    validateAll,
    clearError,
  } = useFormValidation(createTaskSchema);
  const [statusValue, setStatusValue] = useState('planned');

  const { data, setData, post, processing, errors, reset } = useForm({
    title: '',
    description: '',
    due_date: initialDueDate || '',
    scheduled_date: '',
    status: 'planned' as 'planned' | 'in_progress' | 'completed',
    page_url: '',
  });

  useEffect(() => {
    if (initialDueDate) {
      setData('due_date', initialDueDate);
    }
    // setData is stable (Inertia useForm guarantee) — omitting it avoids infinite loops
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [initialDueDate]);

  useEffect(() => {
    if (open) {
      setStatusValue('planned');
      reset();
      if (initialDueDate) {
        setData('due_date', initialDueDate);
      }
    }
    // reset/setData/setStatusValue are stable refs; including them would re-fire on every render
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open]);

  const handleSubmit: FormEventHandler = (e) => {
    e.preventDefault();

    const validationData = {
      ...data,
      description: data.description || undefined,
      scheduled_date: data.scheduled_date || undefined,
      page_url: data.page_url || undefined,
    };

    if (!validateAll(validationData)) return;

    post(route('calendar.store', { site: siteId }), {
      onSuccess: () => {
        reset();
        onClose();
      },
      preserveScroll: true,
    });
  };

  const handleClose = () => {
    reset();
    onClose();
  };

  const handleStatusChange = (value: string) => {
    setStatusValue(value);
    setData('status', value as 'planned' | 'in_progress' | 'completed');
  };

  return (
    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>Create New Task</DialogTitle>
          <DialogDescription>
            Add a new task to your SEO calendar to track your content work.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="title">
              Title <span className="text-destructive">*</span>
            </Label>
            <Input
              id="title"
              type="text"
              placeholder="e.g., Update blog post about SEO best practices"
              value={data.title}
              onChange={(e) => {
                setData('title', e.target.value);
                if (clientErrors.title) clearError('title');
              }}
              onBlur={(e) => validateField('title', e.target.value)}
              required
              aria-describedby={clientErrors.title || errors.title ? 'title-error' : undefined}
              aria-invalid={!!(clientErrors.title || errors.title)}
            />
            <InputError
              id="title-error"
              message={clientErrors.title || errors.title}
              className="text-xs"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              placeholder="Add notes or details about this task..."
              value={data.description}
              onChange={(e) => {
                setData('description', e.target.value);
                if (clientErrors.description) clearError('description');
              }}
              rows={3}
              aria-describedby={
                clientErrors.description || errors.description ? 'description-error' : undefined
              }
              aria-invalid={!!(clientErrors.description || errors.description)}
            />
            <InputError
              id="description-error"
              message={clientErrors.description || errors.description}
              className="text-xs"
            />
          </div>

          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="due_date">
                Due Date <span className="text-destructive">*</span>
              </Label>
              <div className="relative">
                <CalendarIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id="due_date"
                  type="date"
                  value={data.due_date}
                  onChange={(e) => {
                    setData('due_date', e.target.value);
                    if (clientErrors.due_date) clearError('due_date');
                  }}
                  onBlur={(e) => validateField('due_date', e.target.value)}
                  className="pl-10"
                  required
                  aria-describedby={
                    clientErrors.due_date || errors.due_date ? 'due-date-error' : undefined
                  }
                  aria-invalid={!!(clientErrors.due_date || errors.due_date)}
                />
              </div>
              <InputError
                id="due-date-error"
                message={clientErrors.due_date || errors.due_date}
                className="text-xs"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="scheduled_date">Scheduled Date</Label>
              <div className="relative">
                <CalendarIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id="scheduled_date"
                  type="datetime-local"
                  value={data.scheduled_date}
                  onChange={(e) => {
                    setData('scheduled_date', e.target.value);
                    if (clientErrors.scheduled_date) clearError('scheduled_date');
                  }}
                  onBlur={(e) => validateField('scheduled_date', e.target.value)}
                  className="pl-10"
                  aria-describedby={
                    clientErrors.scheduled_date || errors.scheduled_date
                      ? 'scheduled-date-error'
                      : undefined
                  }
                  aria-invalid={!!(clientErrors.scheduled_date || errors.scheduled_date)}
                />
              </div>
              <InputError
                id="scheduled-date-error"
                message={clientErrors.scheduled_date || errors.scheduled_date}
                className="text-xs"
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="status">
              Status <span className="text-destructive">*</span>
            </Label>
            <Select value={statusValue} onValueChange={handleStatusChange}>
              <SelectTrigger id="status">
                <SelectValue placeholder="Select status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="planned">Planned</SelectItem>
                <SelectItem value="in_progress">In Progress</SelectItem>
                <SelectItem value="completed">Completed</SelectItem>
              </SelectContent>
            </Select>
            <InputError
              id="status-error"
              message={clientErrors.status || errors.status}
              className="text-xs"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="page_url">Page URL</Label>
            <Input
              id="page_url"
              type="url"
              placeholder="https://example.com/page"
              value={data.page_url}
              onChange={(e) => {
                setData('page_url', e.target.value);
                if (clientErrors.page_url) clearError('page_url');
              }}
              onBlur={(e) => validateField('page_url', e.target.value)}
              aria-describedby={
                clientErrors.page_url || errors.page_url ? 'page-url-error' : undefined
              }
              aria-invalid={!!(clientErrors.page_url || errors.page_url)}
            />
            <InputError
              id="page-url-error"
              message={clientErrors.page_url || errors.page_url}
              className="text-xs"
            />
          </div>

          <DialogFooter>
            <Button type="button" variant="outline" onClick={handleClose} disabled={processing}>
              Cancel
            </Button>
            <Button type="submit" disabled={processing}>
              {processing ? 'Creating...' : 'Create Task'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}