// 3-panel "HĐ của tôi" — [S190 · YC-030 Q1] anh BÁC bản hoán-đổi (W2 YC-029 Đ1) và chốt
// "Q1 như KHKK" ⇒ trang này nay là bản sao HÌNH của `pages/khkk/KhkkListPage.tsx`:
//   Panel 1 TRÁI 400px = `ContractListPanel` — CÂY toàn trình (GĐ3) ⟂ DANH SÁCH phẳng, MỘT cột
//   Panel 2 GIỮA       = chi tiết HĐ (`ContractDetailContent`) / EmptyState khi chưa chọn
//   Panel 3 PHẢI 360px = KHUÔN KHKK QĐ-2 — hộp dashed khi chưa chọn · quy trình + lịch sử
//                        duyệt khi đã chọn (`KhkkListPage.tsx:252-277`)
//
// 🔴 CÁI BỊ BỎ, khai thẳng để người sau không tưởng ai lỡ tay:
//   • CỘT DANH SÁCH THƯỜNG TRỰC (panel 3 của bản W2) KHÔNG còn — nó thành CHẾ ĐỘ PHẲNG bên
//     trong panel 1. Trục nào cũng mở được chế độ đó: từ khoá · trạng thái · `?pendingMe=1` ·
//     `?deleted=1`. Đây là đường DUY NHẤT tới HĐ tạo trực tiếp ngoài gói thầu (cây chỉ mọc từ
//     phiếu Duyệt NCC) ⇒ `ContractListPanel` có DÒNG CHỮ HIỆN chỉ đúng đường đó, không giấu.
//   • Badge đếm `{rows.length}` ở header GỠ: danh sách nay không thường trực nên ở chế độ cây
//     không có "số dòng" nào để đếm — số đếm xuống chân panel 1, chỉ hiện khi đang phẳng.
//   • `WorkflowHistoryPanel` rời panel 2 (chỗ W2 tạm để) về panel 3 — đúng chỗ cũ trước W2
//     (`git show 502f4d2e:…MyContractsPage.tsx` panel-3) và đúng khuôn KHKK.
//
// 🔴 [FLAG WQ1→WQ3b] Panel 3 CỐ Ý KHÔNG render `ContractWorkflowPanel`: nó ĐÃ nằm trong
//    `ContractDetailContent.tsx:331-335` (nhánh `isV2`, W6/S187) tức panel 2 — nhét thêm ở đây
//    là MỘT HĐ có HAI bộ nút Duyệt/Trả lại, đúng thứ chính khối W6 cấm ở `:140-142`. Muốn panel 3
//    mang 2 nút như `KhkkWorkflowPanel` thì phải GỠ khối `isV2` khỏi `ContractDetailContent`
//    (file mirror ×2 app) — NGOÀI ranh WQ1 (lane này chỉ được chạm `MyContractsPage` +
//    `ContractListPanel`), để WQ3b quyết.
//
// Mobile (< lg): GIỮ NGUYÊN đường cũ — panel 1 hiện ở mọi bề rộng, bấm row → fullpage
// `/contracts/:id` (khuôn KHKK M-4 `KhkkListPage.tsx:126-131`); panel 2/3 `hidden lg:block`.
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { FileText, Plus, X } from 'lucide-react'
import { ContractDetailContent } from '@/components/contracts/ContractDetailContent'
import { ContractListPanel } from '@/components/contracts/ContractListPanel'
import { ContractWorkflowPanel } from '@/components/contracts/ContractWorkflowPanel'
import { WorkflowHistoryPanel } from '@/components/contracts/WorkflowHistoryPanel'
import { EmptyState } from '@/components/EmptyState'
import { Button } from '@/components/ui/Button'
import { api } from '@/lib/api'
import type { ContractDetail } from '@/types/contracts'
import { ContractTypeLabel } from '@/types/forms'

export function MyContractsPage() {
  const navigate = useNavigate()
  const [searchParams, setSearchParams] = useSearchParams()
  // [W7 S187] `type` ĐI THẲNG lên BE ⇒ phải chặn giá trị rác TRƯỚC khi lên dây:
  // `Number('abc') = NaN` mà `NaN != null` là true ⇒ không chặn thì axios gửi `?type=NaN`,
  // BE bind `ContractType?` hỏng → 400 thay vì "danh sách rỗng". Khuôn `HardCopiesPage.tsx:67-68`.
  const rawType = searchParams.get('type')
  const parsedType = rawType === null ? Number.NaN : Number(rawType)
  const urlType = Number.isFinite(parsedType) && parsedType > 0 ? parsedType : null
  const selectedId = searchParams.get('id')
  const search = searchParams.get('q') ?? ''
  // [S159-đợt5] leaf 'Đã duyệt' (?phase=9) và 'Đã xóa' (?deleted=1 — endpoint riêng, chỉ-xem).
  const rawPhase = searchParams.get('phase')
  const urlPhase = rawPhase !== null && /^\d{1,2}$/.test(rawPhase) ? Number(rawPhase) : null
  const showDeleted = searchParams.get('deleted') === '1'
  // [S190 W3 YC-029] leaf "Đang duyệt" Ở LẠI trang này (`Layout.tsx` nhánh `Pending`) thay vì
  // nhảy sang `/inbox`. `pendingMe` là DANH-TÍNH leaf ⇒ CẤM đưa vào `TRANSIENT_QUERY_KEYS`
  // (strip = 2 leaf "Danh sách"/"Đang duyệt" cùng sáng).
  const pendingMe = searchParams.get('pendingMe') === '1'

  // ---- Lớp override do NGƯỜI DÙNG bấm, đè lên bộ lọc đến từ URL ----------------------------
  // Khuôn 3-trạng-thái của KHKK (`KhkkListPage.tsx:70-90`): `undefined` = chưa chạm ⇒ nghe URL ·
  // `null` = user chủ động chọn "Tất cả" · số = user chọn một giá trị. Gộp `undefined` với
  // `null` thì chọn "Tất cả" bị URL kéo ngược về bộ lọc cũ.
  //
  // 🔴 RESET BẰNG PHÉP DẪN XUẤT, KHÔNG bằng `useEffect` và cũng không set-state-trong-render:
  // override tự ĐÓNG DẤU cái leaf nó thuộc về (`nav`). Đổi leaf (bấm sang "02. HĐ Giao khoán"
  // hay sang "Đã xóa") ⇒ dấu không khớp ⇒ override tự rơi, mặc định MỚI của URL lên thay.
  // Bản W2 viết `useEffect(() => setTreeType(...))` và ăn ĐÚNG 1 lỗi `react-hooks/set-state-in-effect`
  // (eslint 47 → 48) — dẫn xuất vừa hết lỗi vừa bớt một nhịp render thừa.
  const navKey = `${rawType ?? ''}|${rawPhase ?? ''}|${showDeleted ? 'del' : ''}|${pendingMe ? 'pm' : ''}`
  const [override, setOverride] = useState<{
    nav: string
    type: number | null | undefined
    phase: number | null | undefined
  }>({ nav: navKey, type: undefined, phase: undefined })
  const live = override.nav === navKey ? override : { type: undefined, phase: undefined }
  const type = live.type !== undefined ? live.type : urlType
  const phase = live.phase !== undefined ? live.phase : urlPhase

  function pickType(v: number | null) {
    setOverride(o => ({ nav: navKey, type: v, phase: o.nav === navKey ? o.phase : undefined }))
  }
  function pickPhase(v: number | null) {
    setOverride(o => ({ nav: navKey, phase: v, type: o.nav === navKey ? o.type : undefined }))
  }

  const detail = useQuery({
    queryKey: ['contract', selectedId],
    queryFn: async () => (await api.get<ContractDetail>(`/contracts/${selectedId}`)).data,
    enabled: !!selectedId,
  })

  function selectContract(id: string) {
    // [S159-đợt5 FLAG-2 reviewer] Màn "Đã xóa" = CHỈ XEM DANH SÁCH (khuôn PE S155): detail
    // endpoint KHÔNG IgnoreQueryFilters ⇒ HĐ đã xóa 404 ⇒ desktop = 2 panel trắng, mobile =
    // navigate sang trang 404. Chặn tại gốc (panel cũng đã `disabled`, đây là chốt thứ hai).
    if (showDeleted) return
    // Desktop ≥ lg: cập nhật URL để render Panel 2 cạnh cây/danh-sách.
    // Mobile: Panel 2 hidden → navigate fullpage /contracts/:id (UX khả dụng).
    if (typeof window !== 'undefined' && window.matchMedia('(min-width: 1024px)').matches) {
      const next = new URLSearchParams(searchParams)
      next.set('id', id)
      setSearchParams(next, { replace: false })
    } else {
      navigate(`/contracts/${id}`)
    }
  }

  function clearSelection() {
    const next = new URLSearchParams(searchParams)
    next.delete('id')
    setSearchParams(next, { replace: false })
  }

  function updateSearch(value: string) {
    const next = new URLSearchParams(searchParams)
    if (value) next.set('q', value)
    else next.delete('q')
    setSearchParams(next, { replace: true })
  }

  // Nhãn đọc theo loại ĐANG ÁP (đã tính `Select`), không theo `?type=` trần: chọn "Tất cả loại
  // HĐ" mà tiêu đề vẫn treo tên một loại là tiêu đề nói dối. Khuôn `KhkkListPage.tsx:151-153`
  // (headerTitle đọc `group` đã giải, không đọc `urlGroup`).
  const typeLabel = type != null ? ContractTypeLabel[type] : null

  return (
    <div className="flex h-[calc(100vh-4rem)] flex-col">
      {/* Compact page header — chiếm ít chiều cao để 3 panel có max chỗ */}
      <header className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-slate-200 bg-white px-6 py-3">
        <div className="flex min-w-0 items-center gap-2">
          <FileText className="h-5 w-5 text-slate-500" />
          <h1 className="truncate text-base font-semibold tracking-tight text-slate-900">
            HĐ của tôi {typeLabel && <span className="text-slate-500">· {typeLabel}</span>}
          </h1>
        </div>
        {showDeleted && (
          <span className="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-600 ring-1 ring-inset ring-slate-300">
            Đã xóa — chỉ xem
          </span>
        )}
        {!showDeleted && phase === 9 && (
          <span className="rounded-full bg-teal-50 px-2.5 py-1 text-[11px] font-semibold text-teal-700 ring-1 ring-inset ring-teal-200">
            Đã phát hành
          </span>
        )}
        {/* [S190 W3] Chế độ phải NHÌN THẤY ĐƯỢC: cùng URL `/my-contracts`, cùng tiêu đề,
            nhưng danh-sách đọc từ hộp thư đến ⇒ không có nhãn thì user tưởng HĐ biến mất. */}
        {!showDeleted && pendingMe && (
          <span className="rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-semibold text-amber-700 ring-1 ring-inset ring-amber-200">
            Đang duyệt — đến lượt tôi
          </span>
        )}
        {!showDeleted && (
          <Button onClick={() => navigate(type ? `/contracts/new?type=${type}` : '/contracts/new')}>
            <Plus className="h-4 w-4" />
            Tạo HĐ mới
          </Button>
        )}
      </header>

      {/* 3-panel grid — GIỮ đúng số đo bản W2 (= số đo host KHKK `KhkkListPage.tsx:171`). */}
      <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[400px_1fr_360px]">
        {/* Panel 1 — cây toàn trình ⟂ danh sách phẳng, xem ContractListPanel.tsx */}
        <ContractListPanel
          selectedId={selectedId}
          onSelect={selectContract}
          search={search}
          onSearchChange={updateSearch}
          type={type}
          onTypeChange={pickType}
          phase={phase}
          onPhaseChange={pickPhase}
          pendingMe={pendingMe}
          deletedView={showDeleted}
        />

        {/* Panel 2 — chi tiết HĐ. EmptyState là trạng-thái ĐẦU TIÊN người dùng thấy; thiếu nó
            thì host 3-panel mở ra là một mảng trắng ở giữa. */}
        <main className="hidden overflow-y-auto bg-slate-50 p-6 lg:block">
          {!selectedId && (
            <EmptyState
              icon={FileText}
              title="Chọn 1 HĐ ở cột bên trái"
              description="Chi tiết HĐ + thông tin / góp ý / file đính kèm sẽ hiển thị ở đây."
            />
          )}
          {selectedId && detail.isLoading && (
            <div className="text-sm text-slate-500">Đang tải HĐ…</div>
          )}
          {selectedId && detail.data && (
            <ContractDetailContent contract={detail.data} onBack={clearSelection} />
          )}
        </main>

        {/* Panel 3 — quy trình duyệt + lịch sử (khuôn KHKK QĐ-2 `KhkkListPage.tsx:252-277`).
            🔴 Chưa chọn ⇒ CHỈ hộp dashed, KHÔNG nhét `PipelineTreePanel` vào đây: cây đã sống
            ở panel 1: nhét lần hai là kể một thứ hai lần (đúng lý do QĐ-2 của KHKK). Bản S168
            từng để cây ở ô này — nay ô đó đã có chủ mới. */}
        <aside className="hidden overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
          {!selectedId && (
            <div className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-500">
              <X className="mx-auto mb-2 h-5 w-5" />
              {showDeleted
                ? 'HĐ đã xóa không còn quy trình duyệt.'
                : 'Chọn 1 HĐ ở cột bên trái để xem quy trình duyệt.'}
            </div>
          )}
          {selectedId && detail.data && (
            <div className="space-y-4">
              {/* [WQ3b S190 · YC-030 Q5] Máy duyệt V2 đứng ĐẦU panel-3 — đúng vị trí khuôn
                  KHKK (`KhkkListPage` panel-3); trước đây nó nằm TRONG ContractDetailContent
                  (panel-2) — đã dời ra host để không nhân đôi bộ nút (FLAG WQ1). */}
              {detail.data.approvalWorkflowId != null && (
                <section className="rounded-lg border border-brand-200 bg-white p-5">
                  <ContractWorkflowPanel contract={detail.data} />
                </section>
              )}
              <WorkflowHistoryPanel contract={detail.data} />
            </div>
          )}
        </aside>
      </div>

    </div>
  )
}
