/**
 * 狀態流程條組件
 */

import { Check } from "lucide-react";
import type { PurchaseOrderStatus } from "../../types/purchase-order";

interface StatusProgressBarProps {
  currentStatus: PurchaseOrderStatus;
}

// 流程步驟定義（包含草稿和已退回）
const STANDARD_FLOW_STEPS = [
  { key: "draft", label: "草稿" },
  { key: "review_pending", label: "待審核" },
  { key: "approved", label: "已核准" },
  { key: "in_transit", label: "待到貨" },
  { key: "need_check", label: "待驗收" },
  { key: "received", label: "已驗收" },
  { key: "pending_payment", label: "待付款" },
  { key: "done", label: "已完成" },
];

export function StatusProgressBar({ currentStatus }: StatusProgressBarProps) {
  // 找到當前狀態在流程中的位置
  const currentIndex = STANDARD_FLOW_STEPS.findIndex((step) => step.key === currentStatus);

  return (
    <div className="bg-card rounded-lg border-2 border-border p-6">
      <h3 className="text-sm font-medium mb-4">採購單流程</h3>
      <div className="relative">
        {/* 進度條背景 */}
        <div className="absolute top-5 left-0 right-0 h-0.5 bg-border" />
        
        {/* 進度條進度 */}
        {currentIndex >= 0 && (
          <div
            className="absolute top-5 left-0 h-0.5 bg-primary-main transition-all duration-500"
            style={{
              width: `${(currentIndex / (STANDARD_FLOW_STEPS.length - 1)) * 100}%`,
            }}
          />
        )}

        {/* 步驟標記 */}
        <div className="relative flex justify-between">
          {STANDARD_FLOW_STEPS.map((step, index) => {
            const isCompleted = index < currentIndex;
            const isCurrent = index === currentIndex;
            const isPending = index > currentIndex;

            return (
              <div key={step.key} className="flex flex-col items-center flex-1">
                {/* 圓點 */}
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all duration-300 ${
                    isCompleted
                      ? "bg-primary-main border-primary-main text-white"
                      : isCurrent
                      ? "bg-white border-primary-main text-primary-main ring-4 ring-primary-main/20"
                      : "bg-white border-border text-muted-foreground"
                  }`}
                >
                  {isCompleted ? (
                    <Check className="h-5 w-5" />
                  ) : (
                    <span className="text-sm font-medium">{index + 1}</span>
                  )}
                </div>

                {/* 標籤 */}
                <div className="mt-2 text-center">
                  <p
                    className={`text-xs whitespace-nowrap transition-colors ${
                      isCompleted || isCurrent
                        ? "text-foreground font-medium"
                        : "text-muted-foreground"
                    }`}
                  >
                    {step.label}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}