"use client";

import React, { useState } from "react";
import { useRouter } from "next/navigation";
import { useQuery, useMutation } from "@apollo/client";
import { Sidebar } from "@/components/dashboard/sidebar";
import { useSidebar } from "@/hooks/useSidebar";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import {
  ArrowLeft,
  Building2,
  MapPin,
  Phone,
  Mail,
  Star,
  Search,
  Package,
  Plus,
  Minus,
  ShoppingCart,
  Wrench,
  Box,
} from "lucide-react";
import { GET_MY_COUNTERPARTIES, GET_ALL_PRODUCTS } from "@/graphql/queries";
import { CREATE_SUPPLY_ORDER } from "@/graphql/mutations";
import { OrganizationAvatar } from "@/components/market/organization-avatar";
import { toast } from "sonner";
import Image from "next/image";

interface ConsumableSupplier {
  id: string;
  inn: string;
  name?: string;
  fullName?: string;
  type: "FULFILLMENT" | "SELLER" | "LOGIST" | "WHOLESALE";
  address?: string;
  phones?: Array<{ value: string }>;
  emails?: Array<{ value: string }>;
  users?: Array<{ id: string; avatar?: string; managerName?: string }>;
  createdAt: string;
}

interface ConsumableProduct {
  id: string;
  name: string;
  description?: string;
  price: number;
  category?: { name: string };
  images: string[];
  mainImage?: string;
  organization: {
    id: string;
    name: string;
  };
  stock?: number;
  unit?: string;
}

interface SelectedConsumable {
  id: string;
  name: string;
  price: number;
  selectedQuantity: number;
  unit?: string;
  category?: string;
  supplierId: string;
  supplierName: string;
}

export function CreateConsumablesSupplyPage() {
  const router = useRouter();
  const { getSidebarMargin } = useSidebar();
  const [selectedSupplier, setSelectedSupplier] =
    useState<ConsumableSupplier | null>(null);
  const [selectedConsumables, setSelectedConsumables] = useState<
    SelectedConsumable[]
  >([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [productSearchQuery, setProductSearchQuery] = useState("");
  const [deliveryDate, setDeliveryDate] = useState("");
  const [isCreatingSupply, setIsCreatingSupply] = useState(false);

  // Загружаем контрагентов-поставщиков расходников
  const { data: counterpartiesData, loading: counterpartiesLoading } = useQuery(
    GET_MY_COUNTERPARTIES
  );

  // Загружаем товары для выбранного поставщика
  const { data: productsData, loading: productsLoading } = useQuery(
    GET_ALL_PRODUCTS,
    {
      skip: !selectedSupplier,
      variables: { search: productSearchQuery || null, category: null },
    }
  );

  // Мутация для создания заказа поставки расходников
  const [createSupplyOrder] = useMutation(CREATE_SUPPLY_ORDER);

  // Фильтруем только поставщиков расходников (оптовиков)
  const consumableSuppliers = (
    counterpartiesData?.myCounterparties || []
  ).filter((org: ConsumableSupplier) => org.type === "WHOLESALE");

  // Фильтруем поставщиков по поисковому запросу
  const filteredSuppliers = consumableSuppliers.filter(
    (supplier: ConsumableSupplier) =>
      supplier.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      supplier.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      supplier.inn?.toLowerCase().includes(searchQuery.toLowerCase())
  );

  // Фильтруем товары по выбранному поставщику
  const supplierProducts = selectedSupplier
    ? (productsData?.allProducts || []).filter(
        (product: ConsumableProduct) =>
          product.organization.id === selectedSupplier.id
      )
    : [];

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("ru-RU", {
      style: "currency",
      currency: "RUB",
      minimumFractionDigits: 0,
    }).format(amount);
  };

  const renderStars = (rating: number = 4.5) => {
    return Array.from({ length: 5 }, (_, i) => (
      <Star
        key={i}
        className={`h-3 w-3 ${
          i < Math.floor(rating)
            ? "text-yellow-400 fill-current"
            : "text-gray-400"
        }`}
      />
    ));
  };

  const updateConsumableQuantity = (productId: string, quantity: number) => {
    const product = supplierProducts.find(
      (p: ConsumableProduct) => p.id === productId
    );
    if (!product || !selectedSupplier) return;

    setSelectedConsumables((prev) => {
      const existing = prev.find((p) => p.id === productId);

      if (quantity === 0) {
        // Удаляем расходник если количество 0
        return prev.filter((p) => p.id !== productId);
      }

      if (existing) {
        // Обновляем количество существующего расходника
        return prev.map((p) =>
          p.id === productId ? { ...p, selectedQuantity: quantity } : p
        );
      } else {
        // Добавляем новый расходник
        return [
          ...prev,
          {
            id: product.id,
            name: product.name,
            price: product.price,
            selectedQuantity: quantity,
            unit: product.unit || "шт",
            category: product.category?.name || "Расходники",
            supplierId: selectedSupplier.id,
            supplierName:
              selectedSupplier.name || selectedSupplier.fullName || "Поставщик",
          },
        ];
      }
    });
  };

  const getSelectedQuantity = (productId: string): number => {
    const selected = selectedConsumables.find((p) => p.id === productId);
    return selected ? selected.selectedQuantity : 0;
  };

  const getTotalAmount = () => {
    return selectedConsumables.reduce(
      (sum, consumable) => sum + consumable.price * consumable.selectedQuantity,
      0
    );
  };

  const getTotalItems = () => {
    return selectedConsumables.reduce(
      (sum, consumable) => sum + consumable.selectedQuantity,
      0
    );
  };

  const handleCreateSupply = async () => {
    if (
      !selectedSupplier ||
      selectedConsumables.length === 0 ||
      !deliveryDate
    ) {
      toast.error("Заполните все обязательные поля");
      return;
    }

    setIsCreatingSupply(true);

    try {
      const result = await createSupplyOrder({
        variables: {
          input: {
            partnerId: selectedSupplier.id,
            deliveryDate: deliveryDate,
            items: selectedConsumables.map((consumable) => ({
              productId: consumable.id,
              quantity: consumable.selectedQuantity,
            })),
          },
        },
      });

      if (result.data?.createSupplyOrder?.success) {
        toast.success("Поставка расходников создана успешно!");
        router.push("/supplies");
      } else {
        toast.error(
          result.data?.createSupplyOrder?.message ||
            "Ошибка при создании поставки"
        );
      }
    } catch (error) {
      console.error("Error creating consumables supply:", error);
      toast.error("Ошибка при создании поставки расходников");
    } finally {
      setIsCreatingSupply(false);
    }
  };

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main
        className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}
      >
        <div className="h-full w-full flex flex-col">
          {/* Заголовок */}
          <div className="flex items-center justify-between mb-4">
            <div>
              <h1 className="text-2xl font-bold text-white mb-2">
                Создание поставки расходников
              </h1>
              <p className="text-white/60">
                Выберите поставщика и добавьте расходники в заказ
              </p>
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => router.push("/supplies")}
              className="text-white/60 hover:text-white hover:bg-white/10"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Назад к поставкам
            </Button>
          </div>

          {/* Основной контент с двумя блоками */}
          <div className="flex-1 overflow-hidden flex gap-4">
            {/* Левая колонка - Поставщики и Расходники */}
            <div className="flex-1 flex flex-col gap-4 overflow-hidden">
              {/* Блок "Поставщики" */}
              <Card className="bg-white/10 backdrop-blur border-white/20 flex-shrink-0">
                <div className="p-4 border-b border-white/10">
                  <div className="flex items-center justify-between mb-3">
                    <h2 className="text-lg font-semibold text-white flex items-center">
                      <Building2 className="h-5 w-5 mr-2" />
                      Поставщики
                    </h2>
                    {selectedSupplier && (
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => setSelectedSupplier(null)}
                        className="text-white/60 hover:text-white hover:bg-white/10"
                      >
                        Сбросить выбор
                      </Button>
                    )}
                  </div>
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
                    <Input
                      placeholder="Поиск поставщиков по названию, ИНН..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
                    />
                  </div>
                </div>

                <div className="p-4 max-h-60 overflow-y-auto">
                  {counterpartiesLoading ? (
                    <div className="text-center py-8">
                      <div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent mx-auto mb-3"></div>
                      <p className="text-white/60">Загрузка поставщиков...</p>
                    </div>
                  ) : filteredSuppliers.length === 0 ? (
                    <div className="text-center py-8">
                      <Building2 className="h-8 w-8 text-white/40 mx-auto mb-2" />
                      <p className="text-white/60 text-sm">
                        {searchQuery
                          ? "Поставщики не найдены"
                          : "У вас пока нет партнеров-поставщиков расходников"}
                      </p>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                      {filteredSuppliers.map((supplier: ConsumableSupplier) => (
                        <Card
                          key={supplier.id}
                          className={`p-3 cursor-pointer transition-all border ${
                            selectedSupplier?.id === supplier.id
                              ? "bg-orange-500/20 border-orange-500/50"
                              : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"
                          }`}
                          onClick={() => setSelectedSupplier(supplier)}
                        >
                          <div className="flex items-center space-x-3">
                            <OrganizationAvatar
                              organization={{
                                id: supplier.id,
                                name:
                                  supplier.name ||
                                  supplier.fullName ||
                                  "Поставщик",
                                fullName: supplier.fullName,
                                users: (supplier.users || []).map((user) => ({
                                  id: user.id,
                                  avatar: user.avatar,
                                })),
                              }}
                              size="sm"
                            />
                            <div className="flex-1 min-w-0">
                              <h3 className="text-white font-medium text-sm truncate">
                                {supplier.name ||
                                  supplier.fullName ||
                                  "Поставщик"}
                              </h3>
                              <div className="flex items-center space-x-1 mb-1">
                                {renderStars(4.5)}
                                <span className="text-white/60 text-xs ml-1">
                                  4.5
                                </span>
                              </div>
                              <p className="text-white/60 text-xs truncate">
                                ИНН: {supplier.inn}
                              </p>
                            </div>
                            {selectedSupplier?.id === supplier.id && (
                              <div className="flex-shrink-0">
                                <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
                                  Выбран
                                </Badge>
                              </div>
                            )}
                          </div>
                        </Card>
                      ))}
                    </div>
                  )}
                </div>
              </Card>

              {/* Блок "Расходники" */}
              <Card className="bg-white/10 backdrop-blur border-white/20 flex-1 overflow-hidden">
                <div className="p-4 border-b border-white/10">
                  <div className="flex items-center justify-between mb-3">
                    <h2 className="text-lg font-semibold text-white flex items-center">
                      <Wrench className="h-5 w-5 mr-2" />
                      Расходники
                      {selectedSupplier && (
                        <span className="text-white/60 text-sm font-normal ml-2">
                          - {selectedSupplier.name || selectedSupplier.fullName}
                        </span>
                      )}
                    </h2>
                  </div>
                  {selectedSupplier && (
                    <div className="relative">
                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
                      <Input
                        placeholder="Поиск расходников..."
                        value={productSearchQuery}
                        onChange={(e) => setProductSearchQuery(e.target.value)}
                        className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
                      />
                    </div>
                  )}
                </div>

                <div className="p-4 flex-1 overflow-y-auto">
                  {!selectedSupplier ? (
                    <div className="text-center py-12">
                      <Wrench className="h-12 w-12 text-white/40 mx-auto mb-4" />
                      <p className="text-white/60">
                        Выберите поставщика для просмотра расходников
                      </p>
                    </div>
                  ) : productsLoading ? (
                    <div className="text-center py-12">
                      <div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent mx-auto mb-3"></div>
                      <p className="text-white/60">Загрузка расходников...</p>
                    </div>
                  ) : supplierProducts.length === 0 ? (
                    <div className="text-center py-12">
                      <Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
                      <p className="text-white/60">
                        У данного поставщика нет доступных расходников
                      </p>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                      {supplierProducts.map((product: ConsumableProduct) => {
                        const selectedQuantity = getSelectedQuantity(
                          product.id
                        );
                        return (
                          <Card
                            key={product.id}
                            className="bg-white/10 backdrop-blur border-white/20 p-4"
                          >
                            <div className="space-y-3">
                              {/* Изображение товара */}
                              <div className="aspect-square bg-white/5 rounded-lg overflow-hidden">
                                {product.images && product.images.length > 0 && product.images[0] ? (
                                  <Image
                                    src={product.images[0]}
                                    alt={product.name}
                                    width={200}
                                    height={200}
                                    className="w-full h-full object-cover"
                                  />
                                ) : product.mainImage ? (
                                  <Image
                                    src={product.mainImage}
                                    alt={product.name}
                                    width={200}
                                    height={200}
                                    className="w-full h-full object-cover"
                                  />
                                ) : (
                                  <div className="w-full h-full flex items-center justify-center">
                                    <Wrench className="h-12 w-12 text-white/40" />
                                  </div>
                                )}
                              </div>

                              {/* Информация о товаре */}
                              <div>
                                <h3 className="text-white font-medium mb-1 line-clamp-2">
                                  {product.name}
                                </h3>
                                {product.category && (
                                  <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs mb-2">
                                    {product.category.name}
                                  </Badge>
                                )}
                                <p className="text-white/60 text-sm mb-2 line-clamp-2">
                                  {product.description ||
                                    "Описание отсутствует"}
                                </p>
                                <div className="flex items-center justify-between">
                                  <span className="text-green-400 font-semibold">
                                    {formatCurrency(product.price)}
                                    {product.unit && (
                                      <span className="text-white/60 text-sm ml-1">
                                        / {product.unit}
                                      </span>
                                    )}
                                  </span>
                                  {product.stock && (
                                    <span className="text-white/60 text-sm">
                                      В наличии: {product.stock}
                                    </span>
                                  )}
                                </div>
                              </div>

                              {/* Управление количеством */}
                              <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-2">
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() =>
                                      updateConsumableQuantity(
                                        product.id,
                                        Math.max(0, selectedQuantity - 1)
                                      )
                                    }
                                    className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
                                    disabled={selectedQuantity === 0}
                                  >
                                    <Minus className="h-4 w-4" />
                                  </Button>
                                  <span className="text-white font-medium w-8 text-center">
                                    {selectedQuantity}
                                  </span>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() =>
                                      updateConsumableQuantity(
                                        product.id,
                                        selectedQuantity + 1
                                      )
                                    }
                                    className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
                                  >
                                    <Plus className="h-4 w-4" />
                                  </Button>
                                </div>
                                {selectedQuantity > 0 && (
                                  <span className="text-green-400 font-medium text-sm">
                                    {formatCurrency(
                                      product.price * selectedQuantity
                                    )}
                                  </span>
                                )}
                              </div>
                            </div>
                          </Card>
                        );
                      })}
                    </div>
                  )}
                </div>
              </Card>
            </div>

            {/* Правая колонка - Корзина */}
            {selectedConsumables.length > 0 && (
              <div className="w-80 flex-shrink-0">
                <Card className="bg-white/10 backdrop-blur border-white/20 p-4 sticky top-0">
                  <h3 className="text-white font-semibold mb-4 flex items-center">
                    <ShoppingCart className="h-4 w-4 mr-2" />
                    Корзина ({getTotalItems()} шт)
                  </h3>

                  <div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
                    {selectedConsumables.map((consumable) => (
                      <div
                        key={consumable.id}
                        className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
                      >
                        <div className="flex-1 min-w-0">
                          <p className="text-white text-sm font-medium truncate">
                            {consumable.name}
                          </p>
                          <p className="text-white/60 text-xs">
                            {formatCurrency(consumable.price)} ×{" "}
                            {consumable.selectedQuantity}
                          </p>
                        </div>
                        <div className="flex items-center space-x-2">
                          <span className="text-green-400 font-medium text-sm">
                            {formatCurrency(
                              consumable.price * consumable.selectedQuantity
                            )}
                          </span>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() =>
                              updateConsumableQuantity(consumable.id, 0)
                            }
                            className="h-6 w-6 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
                          >
                            ×
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="border-t border-white/20 pt-4">
                    <div className="mb-4">
                      <label className="text-white/60 text-sm mb-2 block">
                        Дата поставки:
                      </label>
                      <Input
                        type="date"
                        value={deliveryDate}
                        onChange={(e) => setDeliveryDate(e.target.value)}
                        className="bg-white/10 border-white/20 text-white"
                        min={new Date().toISOString().split("T")[0]}
                        required
                      />
                    </div>
                    <div className="flex items-center justify-between mb-4">
                      <span className="text-white font-semibold">Итого:</span>
                      <span className="text-green-400 font-bold text-lg">
                        {formatCurrency(getTotalAmount())}
                      </span>
                    </div>
                    <Button
                      onClick={handleCreateSupply}
                      disabled={isCreatingSupply || !deliveryDate}
                      className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50"
                    >
                      {isCreatingSupply
                        ? "Создание..."
                        : "Создать поставку расходников"}
                    </Button>
                  </div>
                </Card>
              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}