import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { 
  Form, 
  FormControl, 
  FormField, 
  FormItem, 
  FormLabel, 
  FormMessage 
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Save } from "lucide-react";

// Интерфейс для категории
export interface Category {
  id: string | number;
  name: string;
  slug: string;
  description?: string | null;
  parent_id?: string | number | null;
  is_active: boolean;
  children?: Category[];
  level?: number;
}

// Схема валидации формы
export const categoryFormSchema = z.object({
  name: z.string().min(1, "Название категории обязательно"),
  slug: z.string().min(1, "URL-адрес обязателен"),
  description: z.string().optional(),
  parent_id: z.string().nullable().optional(),
  is_active: z.boolean().default(true),
});

export type CategoryFormValues = z.infer<typeof categoryFormSchema>;

interface CategoryFormProps {
  defaultValues: CategoryFormValues;
  categories: Category[];
  onSubmit: (values: CategoryFormValues) => Promise<void>;
  isSaving: boolean;
  onCancel: () => void;
  isEditing?: boolean;
}

export function CategoryForm({
  defaultValues,
  categories,
  onSubmit,
  isSaving,
  onCancel,
  isEditing = false
}: CategoryFormProps) {
  // Инициализация формы
  const form = useForm<CategoryFormValues>({
    resolver: zodResolver(categoryFormSchema),
    defaultValues,
  });

  // Генерация slug из названия
  const generateSlug = () => {
    const name = form.getValues("name");
    if (name) {
      const slug = name
        .toLowerCase()
        .replace(/[^\w\s-]/g, "")
        .replace(/\s+/g, "-");
      form.setValue("slug", slug);
    }
  };

  // Фильтрация категорий для выбора родительской категории
  // Исключаем текущую категорию и её дочерние элементы при редактировании
  const getFilteredCategories = () => {
    if (!isEditing) return categories;
    
    const currentCategoryId = defaultValues.parent_id;
    
    // Функция для проверки, является ли категория потомком текущей
    const isDescendant = (category: Category, targetId: string | number | null | undefined): boolean => {
      if (!targetId) return false;
      if (category.id.toString() === targetId.toString()) return true;
      if (category.children) {
        return category.children.some(child => isDescendant(child, targetId));
      }
      return false;
    };
    
    return categories.filter(category => 
      !isDescendant(category, currentCategoryId)
    );
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Название</FormLabel>
                <FormControl>
                  <Input placeholder="Название категории" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          
          <div className="flex space-x-2 items-end">
            <FormField
              control={form.control}
              name="slug"
              render={({ field }) => (
                <FormItem className="flex-1">
                  <FormLabel>URL-адрес</FormLabel>
                  <FormControl>
                    <Input placeholder="url-адрес-категории" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button 
              type="button" 
              variant="outline" 
              onClick={generateSlug}
              className="mb-2"
            >
              Сгенерировать
            </Button>
          </div>
          
          <FormField
            control={form.control}
            name="parent_id"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Родительская категория</FormLabel>
                <Select 
                  onValueChange={field.onChange} 
                  value={field.value || undefined}
                >
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Выберите родительскую категорию" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="">Нет родительской категории</SelectItem>
                    {getFilteredCategories().map((category) => (
                      <SelectItem key={category.id} value={category.id.toString()}>
                        {category.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />
          
          <FormField
            control={form.control}
            name="is_active"
            render={({ field }) => (
              <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                <div className="space-y-0.5">
                  <FormLabel>Активна</FormLabel>
                  <div className="text-sm text-muted-foreground">
                    Отображать категорию в каталоге
                  </div>
                </div>
                <FormControl>
                  <Switch
                    checked={field.value}
                    onCheckedChange={field.onChange}
                  />
                </FormControl>
              </FormItem>
            )}
          />
        </div>
        
        <FormField
          control={form.control}
          name="description"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Описание</FormLabel>
              <FormControl>
                <Textarea 
                  placeholder="Описание категории" 
                  className="min-h-32" 
                  {...field} 
                  value={field.value || ""}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        
        <div className="flex justify-end space-x-4">
          <Button 
            type="button" 
            variant="outline" 
            onClick={onCancel}
          >
            Отмена
          </Button>
          <Button 
            type="submit" 
            disabled={isSaving}
          >
            {isSaving ? (
              "Сохранение..."
            ) : (
              <>
                <Save className="h-4 w-4 mr-2" />
                Сохранить
              </>
            )}
          </Button>
        </div>
      </form>
    </Form>
  );
} 