/**
 * 廠商管理主元件
 * 整合所有子元件，處理狀態管理和事件協調
 */

import { useState, useMemo } from "react";
import VendorSearchBar from "./VendorSearchBar";
import VendorList from "./VendorList";
import VendorFormDialog from "./VendorFormDialog";
import VendorDeleteDialog from "./VendorDeleteDialog";
import { filterSuppliers } from "../../utils/search";
import type { Supplier, SupplierFormData } from "../../types/vendor";
import type { Product } from "../../types/product";

interface VendorManagementProps {
  suppliers: Supplier[];
  products: Product[];
  onAddSupplier: (supplier: Omit<Supplier, "id">) => void;
  onUpdateSupplier: (id: string, supplier: Omit<Supplier, "id">) => void;
  onDeleteSupplier: (id: string) => void;
  onViewDetail: (supplierId: string) => void;
}

export default function VendorManagement({
  suppliers,
  products,
  onAddSupplier,
  onUpdateSupplier,
  onDeleteSupplier,
  onViewDetail,
}: VendorManagementProps) {
  const [searchQuery, setSearchQuery] = useState("");
  const [editingSupplier, setEditingSupplier] = useState<Supplier | null>(null);
  const [deletingSupplier, setDeletingSupplier] = useState<Supplier | null>(null);
  
  // 對話框顯示狀態
  const [showFormDialog, setShowFormDialog] = useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);

  // 過濾廠商列表
  const filteredSuppliers = useMemo(
    () => filterSuppliers(suppliers, searchQuery),
    [suppliers, searchQuery]
  );

  // 處理新增廠商
  const handleAddClick = () => {
    setEditingSupplier(null);
    setShowFormDialog(true);
  };

  // 處理查看詳情
  const handleViewDetails = (supplier: Supplier) => {
    onViewDetail(supplier.id);
  };

  // 處理編輯廠商
  const handleEdit = (supplier: Supplier) => {
    setEditingSupplier(supplier);
    setShowFormDialog(true);
  };

  // 處理刪除廠商
  const handleDelete = (supplier: Supplier) => {
    setDeletingSupplier(supplier);
    setShowDeleteDialog(true);
  };

  // 處理表單儲存
  const handleFormSave = (data: SupplierFormData) => {
    if (editingSupplier) {
      onUpdateSupplier(editingSupplier.id, data);
    } else {
      onAddSupplier(data);
    }
    setShowFormDialog(false);
    setEditingSupplier(null);
  };

  // 處理確認刪除
  const handleConfirmDelete = () => {
    if (deletingSupplier) {
      onDeleteSupplier(deletingSupplier.id);
    }
    setShowDeleteDialog(false);
    setDeletingSupplier(null);
  };

  return (
    <div className="p-6">
      {/* 頁面標題 */}
      <div className="mb-6">
        <h1>廠商管理</h1>
        <p className="body-sm text-muted-foreground mt-2">
          供應商資料總覽與管理
        </p>
      </div>

      {/* 搜尋列與新增按鈕 */}
      <div className="mb-6">
        <VendorSearchBar
          searchQuery={searchQuery}
          onSearchChange={setSearchQuery}
          onAddClick={handleAddClick}
        />
      </div>

      {/* 廠商列表 */}
      <VendorList
        suppliers={filteredSuppliers}
        searchQuery={searchQuery}
        onViewDetails={handleViewDetails}
        onEdit={handleEdit}
        onDelete={handleDelete}
      />

      {/* 新增/編輯對話框 */}
      <VendorFormDialog
        open={showFormDialog}
        supplier={editingSupplier}
        onClose={() => setShowFormDialog(false)}
        onSave={handleFormSave}
      />

      {/* 刪除確認對話框 */}
      <VendorDeleteDialog
        open={showDeleteDialog}
        supplier={deletingSupplier}
        onConfirm={handleConfirmDelete}
        onCancel={() => setShowDeleteDialog(false)}
      />
    </div>
  );
}
