/**
 * 新增安全庫存對話框（兩步驟）
 */

import { useState } from "react";
import { Search, ChevronRight, ChevronLeft } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from "../ui/dialog";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { Checkbox } from "../ui/checkbox";
import { SafetyStockSetting, Product } from "../../types/warehouse";
import { generateId } from "../../utils/format";
import { toast } from "sonner@2.0.3";
import { Badge } from "../ui/badge";

interface AddSafetyStockDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  warehouseId: string;
  existingSettings: SafetyStockSetting[];
  availableProducts: Product[];
  onAdd: (settings: SafetyStockSetting[]) => void;
}

interface ProductWithQuantity {
  product: Product;
  safetyStock: number;
}

export default function AddSafetyStockDialog({
  open,
  onOpenChange,
  warehouseId,
  existingSettings,
  availableProducts,
  onAdd,
}: AddSafetyStockDialogProps) {
  const [step, setStep] = useState<1 | 2>(1);
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedProducts, setSelectedProducts] = useState<Set<string>>(new Set());
  const [productQuantities, setProductQuantities] = useState<Map<string, number>>(new Map());

  // 重置對話框
  const resetDialog = () => {
    setStep(1);
    setSearchTerm("");
    setSelectedProducts(new Set());
    setProductQuantities(new Map());
  };

  // 關閉對話框
  const handleClose = () => {
    resetDialog();
    onOpenChange(false);
  };

  // 已設定的商品 ID
  const existingProductIds = new Set(existingSettings.map((s) => s.productId));

  // 可選擇的商品（排除已設定的）
  const selectableProducts = availableProducts.filter(
    (p) => !existingProductIds.has(p.id)
  );

  // 篩選後的商品
  const filteredProducts = selectableProducts.filter(
    (p) =>
      p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      p.type.includes(searchTerm)
  );

  // 切換商品選擇
  const toggleProduct = (productId: string) => {
    const newSet = new Set(selectedProducts);
    if (newSet.has(productId)) {
      newSet.delete(productId);
      // 同時移除數量設定
      const newQuantities = new Map(productQuantities);
      newQuantities.delete(productId);
      setProductQuantities(newQuantities);
    } else {
      newSet.add(productId);
    }
    setSelectedProducts(newSet);
  };

  // 更新商品安全庫存量
  const updateQuantity = (productId: string, value: number) => {
    const newQuantities = new Map(productQuantities);
    newQuantities.set(productId, value);
    setProductQuantities(newQuantities);
  };

  // 前往步驟 2
  const goToStep2 = () => {
    if (selectedProducts.size === 0) {
      toast.error("請至少選擇一個商品");
      return;
    }
    setStep(2);
  };

  // 提交
  const handleSubmit = () => {
    // 驗證所有商品都已輸入數量
    const missingQuantity = Array.from(selectedProducts).some(
      (productId) => !productQuantities.has(productId) || (productQuantities.get(productId) || 0) <= 0
    );

    if (missingQuantity) {
      toast.error("請為所有商品設定安全庫存量");
      return;
    }

    // 創建安全庫存設定
    const newSettings: SafetyStockSetting[] = Array.from(selectedProducts).map((productId) => {
      const product = availableProducts.find((p) => p.id === productId)!;
      return {
        id: generateId(),
        warehouseId,
        productId,
        productName: product.name,
        productType: product.type,
        safetyStock: productQuantities.get(productId) || 0,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      };
    });

    onAdd(newSettings);
    toast.success(`成功新增 ${newSettings.length} 項安全庫存設定`);
    handleClose();
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>
            新增安全庫存 - 步驟 {step}/2
          </DialogTitle>
          <DialogDescription>
            請選擇商品並設定安全庫存量。
          </DialogDescription>
        </DialogHeader>

        {step === 1 ? (
          // 步驟 1：選擇商品
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>選擇商品（可多選）</Label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="搜尋商品名稱或類型..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>

            <div className="border rounded-lg max-h-96 overflow-y-auto">
              {filteredProducts.length === 0 ? (
                <div className="p-8 text-center text-gray-400">
                  {selectableProducts.length === 0
                    ? "所有商品都已設定安全庫存"
                    : "無符合條件的商品"}
                </div>
              ) : (
                <div className="divide-y">
                  {filteredProducts.map((product) => {
                    const isSelected = selectedProducts.has(product.id);
                    return (
                      <div
                        key={product.id}
                        className={`p-4 flex items-center gap-3 hover:bg-gray-50 cursor-pointer transition-colors ${
                          isSelected ? "bg-blue-50" : ""
                        }`}
                        onClick={() => toggleProduct(product.id)}
                      >
                        <Checkbox
                          checked={isSelected}
                          onCheckedChange={() => toggleProduct(product.id)}
                        />
                        <div className="flex-1">
                          <div className="font-medium">{product.name}</div>
                        </div>
                        <Badge variant="outline">{product.type}</Badge>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>

            <div className="text-sm text-gray-600">
              已選擇 {selectedProducts.size} 項商品
            </div>
          </div>
        ) : (
          // 步驟 2：設定安全庫存量
          <div className="space-y-4">
            <p className="text-sm text-gray-600">
              為每個商品設定安全庫存量（共 {selectedProducts.size} 項）
            </p>

            <div className="border rounded-lg max-h-96 overflow-y-auto">
              <div className="divide-y">
                {Array.from(selectedProducts).map((productId) => {
                  const product = availableProducts.find((p) => p.id === productId)!;
                  const quantity = productQuantities.get(productId) || 0;

                  return (
                    <div key={productId} className="p-4 space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <span className="font-medium">{product.name}</span>
                          <Badge variant="outline">{product.type}</Badge>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Label className="w-24">安全庫存</Label>
                        <Input
                          type="number"
                          min="1"
                          value={quantity || ""}
                          onChange={(e) =>
                            updateQuantity(productId, parseInt(e.target.value) || 0)
                          }
                          placeholder="請輸入數量"
                          className="flex-1"
                        />
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}

        <DialogFooter>
          {step === 1 ? (
            <>
              <Button variant="outline" onClick={handleClose}>
                取消
              </Button>
              <Button
                onClick={goToStep2}
                disabled={selectedProducts.size === 0}
                className="button-filled-primary"
              >
                下一步
                <ChevronRight className="ml-2 h-4 w-4" />
              </Button>
            </>
          ) : (
            <>
              <Button variant="outline" onClick={() => setStep(1)}>
                <ChevronLeft className="mr-2 h-4 w-4" />
                上一步
              </Button>
              <Button onClick={handleSubmit} className="button-filled-primary">
                確認新增
              </Button>
            </>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}