import { useState, useEffect } from "react";
import { productsApi, sizesApi } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  Table, 
  TableBody, 
  TableCell, 
  TableHead, 
  TableHeader, 
  TableRow 
} from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Loader2, Plus, Edit, Trash, AlertCircle } from "lucide-react";
import { toast } from "sonner";

// Интерфейсы
interface Size {
  id: string;
  name: string;
  value: string;
}

interface ProductVariant {
  id: string;
  product_id: string;
  size_id: string;
  size: Size;
  sku: string;
  stock: number;
  price?: number;
}

interface ProductVariantsProps {
  productId: string;
  productName: string;
  defaultPrice: number;
}

export function ProductVariants({ productId, productName, defaultPrice }: ProductVariantsProps) {
  const [variants, setVariants] = useState<ProductVariant[]>([]);
  const [sizes, setSizes] = useState<Size[]>([]);
  const [loading, setLoading] = useState(true);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [currentVariant, setCurrentVariant] = useState<ProductVariant | null>(null);
  
  // Состояние формы
  const [selectedSizeId, setSelectedSizeId] = useState("");
  const [sku, setSku] = useState("");
  const [stock, setStock] = useState<number>(0);
  const [price, setPrice] = useState<number | undefined>(undefined);
  const [isEditing, setIsEditing] = useState(false);
  
  // Загрузка данных о вариантах и размерах
  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        
        // Загружаем варианты продукта
        const variantsResponse = await productsApi.getVariants(productId);
        if (variantsResponse.status === 200 && variantsResponse.data) {
          setVariants(variantsResponse.data as ProductVariant[]);
        }
        
        // Загружаем доступные размеры
        const sizesResponse = await sizesApi.getAll();
        if (sizesResponse.status === 200 && sizesResponse.data) {
          setSizes(sizesResponse.data as Size[]);
        }
      } catch (error) {
        console.error("Ошибка при загрузке данных:", error);
        toast("Ошибка при загрузке данных", {
          description: "Не удалось загрузить варианты продукта или размеры",
        });
      } finally {
        setLoading(false);
      }
    };
    
    fetchData();
  }, [productId]);
  
  // Открытие диалога для создания нового варианта
  const openCreateDialog = () => {
    setIsEditing(false);
    setCurrentVariant(null);
    setSelectedSizeId("");
    setSku("");
    setStock(0);
    setPrice(defaultPrice);
    setIsDialogOpen(true);
  };
  
  // Открытие диалога для редактирования варианта
  const openEditDialog = (variant: ProductVariant) => {
    setIsEditing(true);
    setCurrentVariant(variant);
    setSelectedSizeId(variant.size_id);
    setSku(variant.sku);
    setStock(variant.stock);
    setPrice(variant.price !== undefined ? variant.price : defaultPrice);
    setIsDialogOpen(true);
  };
  
  // Открытие диалога для удаления варианта
  const openDeleteDialog = (variant: ProductVariant) => {
    setCurrentVariant(variant);
    setIsDeleteDialogOpen(true);
  };
  
  // Создание нового варианта
  const createVariant = async () => {
    if (!selectedSizeId) {
      toast("Выберите размер", {
        description: "Необходимо выбрать размер для варианта продукта",
      });
      return;
    }
    
    try {
      const variantData = {
        product_id: productId,
        size_id: selectedSizeId,
        sku: sku,
        stock: stock,
        price: price !== defaultPrice ? price : undefined,
      };
      
      const response = await productsApi.addVariant(productId, variantData);
      
      if (response.status === 201 && response.data) {
        // Добавляем новый вариант в список
        const newVariant = response.data as ProductVariant;
        setVariants(prev => [...prev, newVariant]);
        
        toast("Вариант создан", {
          description: "Вариант продукта успешно создан",
        });
        
        setIsDialogOpen(false);
      } else {
        throw new Error(response.error || "Не удалось создать вариант");
      }
    } catch (error) {
      console.error("Ошибка при создании варианта:", error);
      toast("Ошибка", {
        description: "Не удалось создать вариант продукта",
      });
    }
  };
  
  // Обновление варианта
  const updateVariant = async () => {
    if (!currentVariant) return;
    
    try {
      const variantData = {
        product_id: productId,
        size_id: selectedSizeId,
        sku: sku,
        stock: stock,
        price: price !== defaultPrice ? price : undefined,
      };
      
      const response = await productsApi.updateVariant(currentVariant.id, variantData);
      
      if (response.status === 200 && response.data) {
        // Обновляем вариант в списке
        const updatedVariant = response.data as ProductVariant;
        setVariants(prev => 
          prev.map(v => v.id === updatedVariant.id ? updatedVariant : v)
        );
        
        toast("Вариант обновлен", {
          description: "Вариант продукта успешно обновлен",
        });
        
        setIsDialogOpen(false);
      } else {
        throw new Error(response.error || "Не удалось обновить вариант");
      }
    } catch (error) {
      console.error("Ошибка при обновлении варианта:", error);
      toast("Ошибка", {
        description: "Не удалось обновить вариант продукта",
      });
    }
  };
  
  // Удаление варианта
  const deleteVariant = async () => {
    if (!currentVariant) return;
    
    try {
      const response = await productsApi.deleteVariant(currentVariant.id);
      
      if (response.status === 204 || response.status === 200) {
        // Удаляем вариант из списка
        setVariants(prev => prev.filter(v => v.id !== currentVariant.id));
        
        toast("Вариант удален", {
          description: "Вариант продукта успешно удален",
        });
        
        setIsDeleteDialogOpen(false);
      } else {
        throw new Error(response.error || "Не удалось удалить вариант");
      }
    } catch (error) {
      console.error("Ошибка при удалении варианта:", error);
      toast("Ошибка", {
        description: "Не удалось удалить вариант продукта",
      });
    }
  };
  
  // Проверка, доступен ли размер для выбора (не используется в существующих вариантах)
  const isSizeAvailable = (sizeId: string) => {
    return !variants.some(v => v.size_id === sizeId && (!currentVariant || v.id !== currentVariant.id));
  };
  
  // Форматирование цены
  const formatPrice = (price: number) => {
    return new Intl.NumberFormat("ru-RU", {
      style: "currency",
      currency: "RUB",
    }).format(price);
  };
  
  return (
    <Card className="mt-6">
      <CardHeader>
        <CardTitle>Варианты продукта</CardTitle>
        <CardDescription>
          Управление размерами и наличием товара "{productName}"
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="mb-4">
          <Button onClick={openCreateDialog}>
            <Plus className="h-4 w-4 mr-2" />
            Добавить вариант
          </Button>
        </div>
        
        {loading ? (
          <div className="flex justify-center py-8">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
          </div>
        ) : variants.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
            <p className="text-lg font-medium">Нет вариантов</p>
            <p className="text-sm text-muted-foreground mb-4">
              У этого продукта еще нет вариантов. Добавьте варианты, чтобы указать доступные размеры и количество.
            </p>
            <Button onClick={openCreateDialog}>
              <Plus className="h-4 w-4 mr-2" />
              Добавить первый вариант
            </Button>
          </div>
        ) : (
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Размер</TableHead>
                  <TableHead>Артикул (SKU)</TableHead>
                  <TableHead>В наличии</TableHead>
                  <TableHead>Цена</TableHead>
                  <TableHead className="text-right">Действия</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {variants.map((variant) => (
                  <TableRow key={variant.id}>
                    <TableCell className="font-medium">{variant.size?.name || "—"}</TableCell>
                    <TableCell>{variant.sku || "—"}</TableCell>
                    <TableCell>{variant.stock}</TableCell>
                    <TableCell>
                      {variant.price !== undefined ? formatPrice(variant.price) : formatPrice(defaultPrice)}
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end space-x-2">
                        <Button 
                          variant="outline" 
                          size="icon" 
                          onClick={() => openEditDialog(variant)}
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button 
                          variant="outline" 
                          size="icon" 
                          onClick={() => openDeleteDialog(variant)}
                        >
                          <Trash className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        )}
        
        {/* Диалог создания/редактирования варианта */}
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>
                {isEditing ? "Редактировать вариант" : "Добавить вариант"}
              </DialogTitle>
              <DialogDescription>
                {isEditing 
                  ? "Измените параметры варианта продукта" 
                  : "Заполните информацию о новом варианте продукта"}
              </DialogDescription>
            </DialogHeader>
            
            <div className="grid gap-4 py-4">
              <div className="grid gap-2">
                <Label htmlFor="size">Размер</Label>
                <Select
                  value={selectedSizeId}
                  onValueChange={setSelectedSizeId}
                  disabled={isEditing}
                >
                  <SelectTrigger id="size">
                    <SelectValue placeholder="Выберите размер" />
                  </SelectTrigger>
                  <SelectContent>
                    {sizes.map((size) => (
                      <SelectItem 
                        key={size.id} 
                        value={size.id}
                        disabled={!isSizeAvailable(size.id)}
                      >
                        {size.name} ({size.value})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              
              <div className="grid gap-2">
                <Label htmlFor="sku">Артикул (SKU)</Label>
                <Input
                  id="sku"
                  value={sku}
                  onChange={(e) => setSku(e.target.value)}
                  placeholder="Например: BLK-T-M"
                />
              </div>
              
              <div className="grid gap-2">
                <Label htmlFor="stock">Количество в наличии</Label>
                <Input
                  id="stock"
                  type="number"
                  min="0"
                  value={stock}
                  onChange={(e) => setStock(parseInt(e.target.value) || 0)}
                />
              </div>
              
              <div className="grid gap-2">
                <Label htmlFor="price">
                  Цена (опционально, если отличается от основной)
                </Label>
                <Input
                  id="price"
                  type="number"
                  min="0"
                  step="0.01"
                  value={price}
                  onChange={(e) => setPrice(parseFloat(e.target.value) || 0)}
                  placeholder={`По умолчанию: ${formatPrice(defaultPrice)}`}
                />
                <p className="text-sm text-muted-foreground">
                  Оставьте значение по умолчанию, если цена не отличается от основной
                </p>
              </div>
            </div>
            
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                Отмена
              </Button>
              <Button onClick={isEditing ? updateVariant : createVariant}>
                {isEditing ? "Сохранить" : "Добавить"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        
        {/* Диалог подтверждения удаления */}
        <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Удалить вариант</DialogTitle>
              <DialogDescription>
                Вы уверены, что хотите удалить этот вариант продукта?
                Это действие нельзя отменить.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
                Отмена
              </Button>
              <Button variant="destructive" onClick={deleteVariant}>
                Удалить
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </CardContent>
    </Card>
  );
} 