// ComingSoonPage — trang đích cho các mục menu skeleton GĐ2/GĐ4 (module chưa build).
// [S159 2026-07-29] Owner: menu hiển thị đủ 4 giai đoạn + phân list như Duyệt NCC
// NGAY TỪ BÂY GIỜ để mọi người góp ý — leaf chưa có module trỏ về đây thay vì
// link chết. MIRROR ×2 app BYTE-IDENTICAL (nút quay lại dùng navigate(-1) để
// không phụ thuộc route riêng từng app).
import { useNavigate, useSearchParams } from 'react-router-dom'
import { ArrowLeft, Hourglass } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { PePipelineStrip } from '@/components/pe/PePipelineStrip'

const STAGE_INFO: Record<string, { name: string; steps: string; desc: string }> = {
  '2': {
    name: 'Kế hoạch ký kết HĐ',
    steps: 'Bước 7 → 12',
    desc: 'Phiếu nối tiếp từ phiếu Duyệt NCC đã duyệt — duyệt mẫu/shopdrawing, so sánh giá và chốt giá trị ký kết hợp đồng.',
  },
  '4': {
    name: 'Hợp đồng cứng',
    steps: 'Bước 19 → 21',
    desc: 'Lưu bản hợp đồng đã ký cứng (tải lên bản scan sau khi ký, đóng dấu và phát hành).',
  },
}

export function ComingSoonPage() {
  const navigate = useNavigate()
  const [params] = useSearchParams()
  const stage = params.get('stage') ?? '2'
  const info = STAGE_INFO[stage] ?? STAGE_INFO['2']

  return (
    <div className="p-6">
      <div className="mx-auto max-w-3xl rounded-lg border border-slate-200 bg-white shadow-sm">
        <PePipelineStrip current={Number(stage)} />
        <div className="flex flex-col items-center px-6 py-10 text-center">
          <span className="icon-chip mb-3">
            <Hourglass className="h-4 w-4" />
          </span>
          <h2 className="text-lg font-semibold text-slate-900">{info.name}</h2>
          <div className="mt-1 text-xs font-medium text-slate-500">
            Giai đoạn {stage} · {info.steps}
          </div>
          <p className="mt-3 max-w-md text-sm leading-relaxed text-slate-600">{info.desc}</p>
          <p className="mt-2 rounded-md bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700">
            Phân hệ đang được triển khai — cấu trúc menu hiển thị trước để mọi người góp ý.
          </p>
          <Button variant="outline" size="sm" className="mt-5" onClick={() => navigate(-1)}>
            <ArrowLeft className="h-3.5 w-3.5" />
            Quay lại
          </Button>
        </div>
      </div>
    </div>
  )
}