/**
 * 驗收頁面 - 驗收後自動執行區塊 (Level 4)
 */

import { useState } from "react";
import { ChevronDown, ChevronUp, CheckCircle2 } from "lucide-react";
import { Button } from "../ui/button";

export function InspectionAutoActions() {
  const [isExpanded, setIsExpanded] = useState(false);

  const actions = [
    "更新商品庫存數量",
    "建立應付帳款憑證",
    "更新採購單狀態為已完成",
  ];

  return (
    <div className="bg-card rounded-lg border-2 border-border overflow-hidden">
      {/* 標題列（可點擊展開/收合） */}
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full p-6 flex items-center justify-between hover:bg-muted/50 transition-colors"
      >
        <div className="flex items-center gap-2">
          <CheckCircle2 className="h-5 w-5 text-success" />
          <h3>驗收後自動執行</h3>
        </div>
        {isExpanded ? (
          <ChevronUp className="h-5 w-5 text-muted-foreground" />
        ) : (
          <ChevronDown className="h-5 w-5 text-muted-foreground" />
        )}
      </button>

      {/* 內容區（展開時顯示） */}
      {isExpanded && (
        <div className="px-6 pb-6 border-t border-border pt-4">
          <p className="text-muted-foreground mb-4 body-sm">
            確認驗收後，系統將自動執行以下操作：
          </p>
          <ul className="space-y-2">
            {actions.map((action, index) => (
              <li key={index} className="flex items-start gap-2">
                <CheckCircle2 className="h-4 w-4 text-success mt-1 shrink-0" />
                <span className="body-sm">{action}</span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}
