/**
 * 倉庫卡片元件
 * 顯示單個倉庫的資訊和統計
 */

import { useState } from "react";
import {
  Package,
  AlertTriangle,
  MapPin,
  User,
  Phone,
  Edit,
  Info,
  FileText,
  Warehouse as WarehouseIcon,
  Store,
} from "lucide-react";
import { Warehouse, WarehouseStats } from "../../types/warehouse";
import { Button } from "../ui/button";
import { Badge } from "../ui/badge";
import { Card, CardContent } from "../ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog";
import { formatNumber } from "../../utils/format";

interface WarehouseCardProps {
  warehouse: Warehouse;
  stats: WarehouseStats;
  hasWarning: boolean;
  onViewInventory: (warehouseId: string) => void;
  onEdit: (warehouse: Warehouse) => void;
}

export default function WarehouseCard({
  warehouse,
  stats,
  hasWarning,
  onViewInventory,
  onEdit,
}: WarehouseCardProps) {
  const [showInfoDialog, setShowInfoDialog] = useState(false);

  const getTypeBadgeClass = (type: Warehouse["type"]) => {
    const baseClass = "border-2";
    switch (type) {
      case "倉庫":
        return `${baseClass} border-blue-500 text-blue-700 bg-blue-50`;
      case "門市":
        return `${baseClass} border-purple-500 text-purple-700 bg-purple-50`;
      default:
        return baseClass;
    }
  };

  const getTypeIcon = (type: Warehouse["type"]) => {
    switch (type) {
      case "倉庫":
        return <WarehouseIcon className="h-5 w-5 text-blue-600" />;
      case "門市":
        return <Store className="h-5 w-5 text-purple-600" />;
      default:
        return null;
    }
  };

  return (
    <Card
      className={`relative overflow-hidden transition-all hover:shadow-lg flex flex-col ${ 
        hasWarning
          ? "border-orange-400 border-2 bg-orange-50/50"
          : "border-gray-200"
      }`}
    >
      {/* 警告橫幅 */}
      {hasWarning && (
        <div className="absolute top-0 left-0 right-0 bg-orange-500 text-white px-4 py-1 flex items-center gap-2 text-sm">
          <AlertTriangle className="h-4 w-4" />
          <span>庫存警告</span>
        </div>
      )}

      <CardContent className={`p-6 flex flex-col flex-1 ${hasWarning ? "pt-12" : "pt-6"}`}>
        {/* 上半部：庫存警告區域 */}
        <div className="flex-1">
          {/* 標題區塊 */}
          <div className="flex items-start justify-between mb-4">
            <div>
              <div className="flex items-center gap-2 mb-1">
                {warehouse.type !== "門市" && getTypeIcon(warehouse.type)}
                <h3 className="text-[28px] font-bold">{warehouse.name}</h3>
                <button
                  onClick={() => setShowInfoDialog(true)}
                  className="text-gray-400 hover:text-gray-600 transition-colors"
                >
                  <Info className="h-5 w-5" />
                </button>
              </div>
              <Badge variant="outline" className={getTypeBadgeClass(warehouse.type)}>
                {warehouse.type === "門市" && warehouse.storeName
                  ? warehouse.storeName
                  : warehouse.type}
              </Badge>
            </div>
          </div>

          {/* 統計區塊 - 庫存警告 */}
          <div className="space-y-3">
            {/* 低庫存警告 */}
            <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <div className="flex items-center gap-2 text-gray-600">
                <AlertTriangle className="h-4 w-4" />
                <span className="text-sm">低庫存警告</span>
              </div>
              <div>
                {stats.lowStockCount > 0 ? (
                  <Badge
                    variant="destructive"
                    className="bg-orange-500 hover:bg-orange-600"
                  >
                    {stats.lowStockCount} 項
                  </Badge>
                ) : (
                  <span className="text-sm text-green-600">正常</span>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* 下半部：庫存資料 - 固定在底部 */}
        <div className="mt-5 pt-3 border-t border-gray-200">
          {/* 操作按鈕 */}
          <div className="flex gap-2">
            <Button
              onClick={() => onViewInventory(warehouse.id)}
              className="flex-1 button-filled-primary"
              size="sm"
            >
              <Package className="h-4 w-4 mr-2" />
              查看庫存
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => onEdit(warehouse)}
              className="button-outlined-primary"
            >
              <Edit className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </CardContent>

      {/* 倉庫資訊對話框 */}
      <Dialog open={showInfoDialog} onOpenChange={setShowInfoDialog}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>{warehouse.name} - 聯絡資訊</DialogTitle>
            <DialogDescription>
              倉庫的詳細聯絡資訊
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <div className="flex items-start gap-2 text-gray-600">
                <MapPin className="h-5 w-5 mt-0.5 flex-shrink-0" />
                <div>
                  <p className="text-sm text-gray-500 mb-1">地址</p>
                  <p className="text-gray-900">{warehouse.address}</p>
                </div>
              </div>
            </div>
            {warehouse.manager && (
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-gray-600">
                  <User className="h-5 w-5 flex-shrink-0" />
                  <div>
                    <p className="text-sm text-gray-500 mb-1">負責人</p>
                    <p className="text-gray-900">{warehouse.manager}</p>
                  </div>
                </div>
              </div>
            )}
            {warehouse.phone && (
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-gray-600">
                  <Phone className="h-5 w-5 flex-shrink-0" />
                  <div>
                    <p className="text-sm text-gray-500 mb-1">聯絡電話</p>
                    <p className="text-gray-900">{warehouse.phone}</p>
                  </div>
                </div>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>
    </Card>
  );
}