/**
 * 安全庫存設定頁面
 */

import { useState } from "react";
import { ArrowLeft, Plus, Shield } from "lucide-react";
import { Button } from "./ui/button";
import { SafetyStockSetting, WarehouseInventory } from "../types/warehouse";
import { AVAILABLE_PRODUCTS } from "../constants/products";
import SafetyStockList from "./safety-stock/SafetyStockList";
import AddSafetyStockDialog from "./safety-stock/AddSafetyStockDialog";
import EditSafetyStockDialog from "./safety-stock/EditSafetyStockDialog";

interface SafetyStockPageProps {
  warehouseId: string;
  warehouseName: string;
  safetyStockSettings: SafetyStockSetting[];
  inventories: WarehouseInventory[];
  onBack: () => void;
  onSave: (settings: SafetyStockSetting[]) => void;
}

export default function SafetyStockPage({
  warehouseId,
  warehouseName,
  safetyStockSettings,
  inventories,
  onBack,
  onSave,
}: SafetyStockPageProps) {
  const [settings, setSettings] = useState<SafetyStockSetting[]>(safetyStockSettings);
  const [showAddDialog, setShowAddDialog] = useState(false);
  const [editingSetting, setEditingSetting] = useState<SafetyStockSetting | null>(null);

  const handleAdd = (newSettings: SafetyStockSetting[]) => {
    const updatedSettings = [...settings, ...newSettings];
    setSettings(updatedSettings);
    onSave(updatedSettings);
    setShowAddDialog(false);
  };

  const handleEdit = (updatedSetting: SafetyStockSetting) => {
    const updatedSettings = settings.map((s) =>
      s.id === updatedSetting.id ? updatedSetting : s
    );
    setSettings(updatedSettings);
    onSave(updatedSettings);
    setEditingSetting(null);
  };

  const handleDelete = (id: string) => {
    const updatedSettings = settings.filter((s) => s.id !== id);
    setSettings(updatedSettings);
    onSave(updatedSettings);
  };

  return (
    <div className="container mx-auto p-6 max-w-7xl">
      {/* 頁面標題與麵包屑 */}
      <div className="mb-6">
        <Button
          onClick={onBack}
          variant="ghost"
          className="mb-4 -ml-2 hover:bg-background-light"
        >
          <ArrowLeft className="mr-2 h-4 w-4" />
          返回庫存管理
        </Button>

        <div className="flex items-center gap-2 text-sm text-grey-2 mb-2">
          <span>商品與庫存管理</span>
          <span>/</span>
          <span>倉庫管理</span>
          <span>/</span>
          <span>庫存管理</span>
          <span>/</span>
          <span className="text-grey-0">安全庫存設定</span>
        </div>

        <div className="flex items-center justify-between">
          <div>
            <div className="flex items-center gap-3 mb-2">
              <Shield className="h-8 w-8 text-primary" />
              <h1>安全庫存設定 - {warehouseName}</h1>
            </div>
            <p className="text-gray-600">設定商品的安全庫存量，當庫存低於安全值時將發出警告</p>
          </div>
          <Button
            onClick={() => setShowAddDialog(true)}
            className="button-filled-primary"
          >
            <Plus className="mr-2 h-4 w-4" />
            新增安全庫存
          </Button>
        </div>
      </div>

      {/* 安全庫存列表 */}
      <SafetyStockList
        settings={settings}
        inventories={inventories}
        onEdit={setEditingSetting}
        onDelete={handleDelete}
      />

      {/* 新增對話框 */}
      <AddSafetyStockDialog
        open={showAddDialog}
        onOpenChange={setShowAddDialog}
        warehouseId={warehouseId}
        existingSettings={settings}
        availableProducts={AVAILABLE_PRODUCTS}
        onAdd={handleAdd}
      />

      {/* 編輯對話框 */}
      {editingSetting && (
        <EditSafetyStockDialog
          open={!!editingSetting}
          onOpenChange={(open) => !open && setEditingSetting(null)}
          setting={editingSetting}
          onSave={handleEdit}
        />
      )}
    </div>
  );
}
