star-erp/resources/js/Components/Warehouse/WarehouseCard.tsx

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

import { useState } from "react";
import {
  Package,
  AlertTriangle,
  MapPin,
  Edit,
  Info,
  FileText,
  CupSoda,
  QrCode,
  Milk,
} from "lucide-react";
import { Warehouse, WarehouseStats } from "@/types/warehouse";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { Card, CardContent } from "@/Components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/Components/ui/dialog";
import { Can } from "@/Components/Permission/Can";

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

const WAREHOUSE_TYPE_LABELS: Record<string, string> = {
  standard: "標準倉",
  production: "生產倉",
  retail: "門市倉",
  vending: "販賣機",
  transit: "在途倉",
  quarantine: "瑕疵倉",
};

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

  return (
    <Card
      className={`relative overflow-hidden transition-all duration-300 hover:shadow-lg flex flex-col group ${isVending
        ? "border-primary-400 border-2 bg-white min-h-[300px]"
        : hasWarning
          ? "border-orange-400 border-2 bg-orange-50/50"
          : "border-gray-200"
        }`}
    >
      {/* 裝飾性背景元素 (僅限販賣機) */}
      {isVending && (
        <>
          {/* LED 裝飾線條 - 保持主色調 */}
          <div className="absolute top-0 bottom-0 left-0 w-1 bg-primary-500 shadow-[1px_0_5px_rgba(var(--primary-main-rgb),0.2)]" />
        </>
      )}

      {/* 警告橫幅 */}
      {hasWarning && (
        <div className="absolute top-0 left-0 right-0 bg-orange-500 text-white px-4 py-1 flex items-center justify-between text-sm z-10">
          <div className="flex items-center gap-2">
            <AlertTriangle className="h-4 w-4" />
            <span>低庫存警告</span>
          </div>
          <span className="font-bold">{stats.lowStockCount} 項</span>
        </div>
      )}

      <CardContent className={`p-6 flex flex-col flex-1 ${hasWarning ? "pt-12" : "pt-6"}`}>
        {/* 上半部：資訊區域 */}
        <div className="flex-1 relative z-10">
          {/* 標題區塊 */}
          <div className="flex items-start justify-between mb-2">
            <div>
              <div className="flex items-center gap-2 mb-1">
                <h3 className="text-2xl font-bold text-gray-900">
                  {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>
              <div className="flex gap-2 mt-1">
                <Badge
                  variant={warehouse.type === 'quarantine' ? "secondary" : "outline"}
                  className={`text-xs font-normal ${warehouse.type === 'quarantine' ? 'bg-red-100 text-red-700 border-red-200' : ''}`}
                >
                  {WAREHOUSE_TYPE_LABELS[warehouse.type || 'standard'] || '標準倉'}
                  {warehouse.type === 'quarantine' ? ' (不計入可用)' : ' (計入可用)'}
                </Badge>
              </div>
            </div>
          </div>

          <div className="text-sm text-gray-600 mb-4 line-clamp-2 min-h-[40px]">
            {warehouse.description || (isVending ? "管理此機台的商品配貨與補貨狀況" : "無描述")}
          </div>

          {/* 統計區塊 */}
          <div className="space-y-3">
            <Can permission="inventory.view_cost">
              {warehouse.type !== 'quarantine' && (
                <div className="flex items-center justify-between p-3 rounded-lg bg-primary-50/50 border border-primary-100 text-primary-700">
                  <div className="flex items-center gap-2">
                    <Package className="h-4 w-4 opacity-80" />
                    <span className="text-sm font-medium">帳面庫存估值</span>
                  </div>
                  <div className="text-sm font-bold text-primary-main">
                    ${Number(stats.totalValue || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                  </div>
                </div>
              )}
            </Can>

            <Can permission="inventory.view_cost">
              {Number(stats.abnormalValue || 0) > 0 && (
                <div className="flex items-center justify-between p-3 rounded-lg bg-red-50/50 border border-red-100 mt-3">
                  <div className="flex items-center gap-2 text-red-700">
                    <AlertTriangle className="h-4 w-4" />
                    <span className="text-sm font-medium">
                      {warehouse.type === 'quarantine' ? '瑕疵總計' : '過期統計'}
                    </span>
                  </div>
                  <div className="text-sm font-bold text-red-600">
                    ${Number(stats.abnormalValue || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                  </div>
                </div>
              )}
            </Can>

            {/* 販賣機特色視覺：投幣、取物口裝飾 (移動至帳面庫存下方，顏色更顯眼) */}
            {isVending && (
              <div className="flex gap-4 mt-6 items-end">
                <div className="flex-1 h-12 bg-gray-100 rounded-lg border-2 border-gray-300 shadow-inner flex items-center justify-center relative overflow-hidden">
                  <div className="absolute inset-0 bg-gradient-to-b from-gray-200/50 to-transparent pointer-events-none" />
                  <div className="flex gap-1 items-end opacity-30 pb-1">
                    <CupSoda className="h-5 w-5 text-gray-400 rotate-12 -translate-x-1" />
                    <Milk className="h-6 w-6 text-gray-500 -rotate-12 translate-y-1" />
                    <CupSoda className="h-5 w-5 text-gray-400 rotate-3" />
                    <Milk className="h-5 w-5 text-gray-400 -rotate-6 translate-x-1" />
                    <CupSoda className="h-6 w-6 text-gray-500 rotate-12 translate-y-1" />
                  </div>
                </div>
                <div className="w-10 h-10 bg-gray-200 rounded-sm border-2 border-gray-400 flex items-center justify-center p-1 shadow-sm self-center">
                  <div className="text-gray-600 opacity-60">
                    <QrCode className="h-6 w-6" />
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* 下半部：操作按鈕 */}
        <div className="mt-5 pt-4 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>
              {warehouse.code}
            </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>

            <div className="space-y-2">
              <div className="flex items-start gap-2 text-gray-600">
                <FileText 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 whitespace-pre-wrap">{warehouse.description || "-"}</p>
                </div>
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </Card>
  );
}