"use client";

import React, { useState, useMemo, useCallback } from "react";
import { Sidebar } from "@/components/dashboard/sidebar";
import { useSidebar } from "@/hooks/useSidebar";
import { useQuery } from "@apollo/client";
import { GET_MY_FULFILLMENT_SUPPLIES } from "@/graphql/queries";
import {
  Package,
  Wrench,
  AlertTriangle,
  CheckCircle,
  Clock,
} from "lucide-react";
import { toast } from "sonner";

// Новые компоненты
import { SuppliesHeader } from "./supplies-header";
import { SuppliesStats } from "./supplies-stats";
import { SuppliesGrid } from "./supplies-grid";
import { SuppliesList } from "./supplies-list";

// Типы
import {
  Supply,
  FilterState,
  SortState,
  ViewMode,
  GroupBy,
  StatusConfig,
} from "./types";

// Статусы расходников с цветами
const STATUS_CONFIG = {
  available: {
    label: "Доступен",
    color: "bg-green-500/20 text-green-300",
    icon: CheckCircle,
  },
  "low-stock": {
    label: "Мало на складе",
    color: "bg-yellow-500/20 text-yellow-300",
    icon: AlertTriangle,
  },
  "out-of-stock": {
    label: "Нет в наличии",
    color: "bg-red-500/20 text-red-300",
    icon: AlertTriangle,
  },
  "in-transit": {
    label: "В пути",
    color: "bg-blue-500/20 text-blue-300",
    icon: Clock,
  },
  reserved: {
    label: "Зарезервирован",
    color: "bg-purple-500/20 text-purple-300",
    icon: Package,
  },
} as const;

export function FulfillmentSuppliesPage() {
  const { getSidebarMargin } = useSidebar();

  // Состояния
  const [viewMode, setViewMode] = useState<ViewMode>("grid");
  const [filters, setFilters] = useState<FilterState>({
    search: "",
    category: "",
    status: "",
    supplier: "",
    lowStock: false,
  });
  const [sort, setSort] = useState<SortState>({
    field: "name",
    direction: "asc",
  });
  const [showFilters, setShowFilters] = useState(false);
  const [groupBy, setGroupBy] = useState<GroupBy>("none");
  const [expandedSupplies, setExpandedSupplies] = useState<Set<string>>(
    new Set()
  );

  // Загрузка данных
  const {
    data: suppliesData,
    loading,
    error,
    refetch,
  } = useQuery(GET_MY_FULFILLMENT_SUPPLIES, {
    fetchPolicy: "cache-and-network",
    onError: (error) => {
      toast.error("Ошибка загрузки расходников фулфилмента: " + error.message);
    },
  });

  const supplies: Supply[] = suppliesData?.myFulfillmentSupplies || [];

  // Логирование для отладки
  console.log("🔥🔥🔥 FULFILLMENT SUPPLIES PAGE DATA 🔥🔥🔥", {
    suppliesCount: supplies.length,
    supplies: supplies.map((s) => ({
      id: s.id,
      name: s.name,
      status: s.status,
      currentStock: s.currentStock,
      quantity: s.quantity,
    })),
  });

  // Функции
  const getStatusConfig = useCallback((status: string): StatusConfig => {
    return (
      STATUS_CONFIG[status as keyof typeof STATUS_CONFIG] ||
      STATUS_CONFIG.available
    );
  }, []);

  const getSupplyDeliveries = useCallback(
    (supply: Supply): Supply[] => {
      return supplies.filter(
        (s) => s.name === supply.name && s.category === supply.category
      );
    },
    [supplies]
  );

  // Объединение одинаковых расходников
  const consolidatedSupplies = useMemo(() => {
    const grouped = supplies.reduce((acc, supply) => {
      const key = `${supply.name}-${supply.category}`;
      if (!acc[key]) {
        acc[key] = {
          ...supply,
          currentStock: 0,
          quantity: 0, // Общее количество поставленного (= заказанному)
          price: 0,
          totalCost: 0, // Общая стоимость
          shippedQuantity: 0, // Общее отправленное количество
        };
      }

      // Суммируем поставленное количество (заказано = поставлено)
      acc[key].quantity += supply.quantity;

      // Суммируем отправленное количество
      acc[key].shippedQuantity += supply.shippedQuantity || 0;

      // Остаток = Поставлено - Отправлено
      // Если ничего не отправлено, то остаток = поставлено
      acc[key].currentStock = acc[key].quantity - acc[key].shippedQuantity;

      // Рассчитываем общую стоимость (количество × цена)
      acc[key].totalCost += supply.quantity * supply.price;

      // Средневзвешенная цена за единицу
      if (acc[key].quantity > 0) {
        acc[key].price = acc[key].totalCost / acc[key].quantity;
      }

      return acc;
    }, {} as Record<string, Supply & { totalCost: number }>);

    return Object.values(grouped);
  }, [supplies]);

  // Фильтрация и сортировка
  const filteredAndSortedSupplies = useMemo(() => {
    let filtered = consolidatedSupplies.filter((supply) => {
      const matchesSearch =
        supply.name.toLowerCase().includes(filters.search.toLowerCase()) ||
        supply.description.toLowerCase().includes(filters.search.toLowerCase());
      const matchesCategory =
        !filters.category || supply.category === filters.category;
      const matchesStatus = !filters.status || supply.status === filters.status;
      const matchesSupplier =
        !filters.supplier ||
        supply.supplier.toLowerCase().includes(filters.supplier.toLowerCase());
      const matchesLowStock =
        !filters.lowStock ||
        (supply.currentStock <= supply.minStock && supply.currentStock > 0);

      return (
        matchesSearch &&
        matchesCategory &&
        matchesStatus &&
        matchesSupplier &&
        matchesLowStock
      );
    });

    // Сортировка
    filtered.sort((a, b) => {
      let aValue: any = a[sort.field];
      let bValue: any = b[sort.field];

      if (typeof aValue === "string") {
        aValue = aValue.toLowerCase();
        bValue = bValue.toLowerCase();
      }

      if (sort.direction === "asc") {
        return aValue > bValue ? 1 : -1;
      } else {
        return aValue < bValue ? 1 : -1;
      }
    });

    return filtered;
  }, [consolidatedSupplies, filters, sort]);

  // Группировка
  const groupedSupplies = useMemo(() => {
    if (groupBy === "none")
      return { "Все расходники": filteredAndSortedSupplies };

    return filteredAndSortedSupplies.reduce((acc, supply) => {
      const key = supply[groupBy] || "Без категории";
      if (!acc[key]) acc[key] = [];
      acc[key].push(supply);
      return acc;
    }, {} as Record<string, Supply[]>);
  }, [filteredAndSortedSupplies, groupBy]);

  // Обработчики
  const handleSort = useCallback((field: SortState["field"]) => {
    setSort((prev) => ({
      field,
      direction:
        prev.field === field && prev.direction === "asc" ? "desc" : "asc",
    }));
  }, []);

  const toggleSupplyExpansion = useCallback((supplyId: string) => {
    setExpandedSupplies((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(supplyId)) {
        newSet.delete(supplyId);
      } else {
        newSet.add(supplyId);
      }
      return newSet;
    });
  }, []);

  const handleExport = useCallback(() => {
    const csvData = filteredAndSortedSupplies.map((supply) => ({
      Название: supply.name,
      Описание: supply.description,
      Категория: supply.category,
      Статус: getStatusConfig(supply.status).label,
      "Текущий остаток": supply.currentStock,
      "Минимальный остаток": supply.minStock,
      Единица: supply.unit,
      Цена: supply.price,
      Поставщик: supply.supplier,
      "Дата создания": new Date(supply.createdAt).toLocaleDateString("ru-RU"),
    }));

    const csv = [
      Object.keys(csvData[0]).join(","),
      ...csvData.map((row) => Object.values(row).join(",")),
    ].join("\n");

    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = `расходники_фулфилмента_${
      new Date().toISOString().split("T")[0]
    }.csv`;
    link.click();

    toast.success("Данные экспортированы в CSV");
  }, [filteredAndSortedSupplies, getStatusConfig]);

  const handleRefresh = useCallback(() => {
    refetch();
    toast.success("Данные обновлены");
  }, [refetch]);

  if (loading) {
    return (
      <div className="h-screen flex overflow-hidden">
        <Sidebar />
        <main
          className={`flex-1 ${getSidebarMargin()} px-4 py-3 flex flex-col transition-all duration-300 overflow-hidden`}
        >
          <div className="flex-1 overflow-y-auto flex items-center justify-center">
            <div className="text-white">Загрузка...</div>
          </div>
        </main>
      </div>
    );
  }

  if (error) {
    return (
      <div className="h-screen flex overflow-hidden">
        <Sidebar />
        <main
          className={`flex-1 ${getSidebarMargin()} px-4 py-3 flex flex-col transition-all duration-300 overflow-hidden`}
        >
          <div className="flex-1 overflow-y-auto flex items-center justify-center">
            <div className="text-red-300">Ошибка загрузки: {error.message}</div>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main
        className={`flex-1 ${getSidebarMargin()} px-4 py-3 flex flex-col transition-all duration-300 overflow-hidden`}
      >
        <div className="flex-1 overflow-y-auto space-y-6">
          {/* Заголовок и фильтры */}
          <SuppliesHeader
            viewMode={viewMode}
            onViewModeChange={setViewMode}
            groupBy={groupBy}
            onGroupByChange={setGroupBy}
            filters={filters}
            onFiltersChange={setFilters}
            showFilters={showFilters}
            onToggleFilters={() => setShowFilters(!showFilters)}
            onExport={handleExport}
            onRefresh={handleRefresh}
          />

          {/* Статистика */}
          <SuppliesStats supplies={consolidatedSupplies} />

          {/* Основной контент */}
          <div className="space-y-6">
            {groupBy === "none" ? (
              // Без группировки
              <>
                {viewMode === "grid" && (
                  <SuppliesGrid
                    supplies={filteredAndSortedSupplies}
                    expandedSupplies={expandedSupplies}
                    onToggleExpansion={toggleSupplyExpansion}
                    getSupplyDeliveries={getSupplyDeliveries}
                    getStatusConfig={getStatusConfig}
                  />
                )}

                {viewMode === "list" && (
                  <SuppliesList
                    supplies={filteredAndSortedSupplies}
                    expandedSupplies={expandedSupplies}
                    onToggleExpansion={toggleSupplyExpansion}
                    getSupplyDeliveries={getSupplyDeliveries}
                    getStatusConfig={getStatusConfig}
                    sort={sort}
                    onSort={handleSort}
                  />
                )}

                {viewMode === "analytics" && (
                  <div className="text-center text-white/60 py-12">
                    Аналитический режим будет добавлен позже
                  </div>
                )}
              </>
            ) : (
              // С группировкой
              <div className="space-y-6">
                {Object.entries(groupedSupplies).map(
                  ([groupName, groupSupplies]) => (
                    <div key={groupName} className="space-y-4">
                      <h3 className="text-lg font-semibold text-white flex items-center space-x-2">
                        <span>{groupName}</span>
                        <span className="text-sm text-white/60">
                          ({groupSupplies.length})
                        </span>
                      </h3>

                      {viewMode === "grid" && (
                        <SuppliesGrid
                          supplies={groupSupplies}
                          expandedSupplies={expandedSupplies}
                          onToggleExpansion={toggleSupplyExpansion}
                          getSupplyDeliveries={getSupplyDeliveries}
                          getStatusConfig={getStatusConfig}
                        />
                      )}

                      {viewMode === "list" && (
                        <SuppliesList
                          supplies={groupSupplies}
                          expandedSupplies={expandedSupplies}
                          onToggleExpansion={toggleSupplyExpansion}
                          getSupplyDeliveries={getSupplyDeliveries}
                          getStatusConfig={getStatusConfig}
                          sort={sort}
                          onSort={handleSort}
                        />
                      )}
                    </div>
                  )
                )}
              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}