// 3-panel "Danh sách HĐ" admin — Panel 1 (list compact + filter + pagination)
// | Panel 2 (detail content) | Panel 3 (workflow + lịch sử duyệt). Selected
// HĐ giữ qua URL `?id=` để bookmarkable + back/forward navigation.
//
// URL params:
//   - type=X    — filter loại HĐ (sidebar menu hoặc landing card pass)
//   - pendingMe=1 — chỉ HĐ chờ role tôi
//   - id=...    — selected contract (Panel 2/3)
//   - q=...     — search term (synced URL để share link)
//   - phase=N   — filter phase
//   - page=N    — pagination page
//
// Mobile fallback (< lg): click row → fullpage /contracts/:id.
import { useMemo } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { FileText, Search } from 'lucide-react'
import { ContractDetailContent } from '@/components/contracts/ContractDetailContent'
import { ContractWorkflowPanel } from '@/components/contracts/ContractWorkflowPanel'
import { WorkflowHistoryPanel } from '@/components/contracts/WorkflowHistoryPanel'
import { PipelineTreePanel } from '@/components/pipeline/PipelineTreePanel'
import { PhaseBadge } from '@/components/PhaseBadge'
import { SlaTimer } from '@/components/SlaTimer'
import { EmptyState } from '@/components/EmptyState'
import { Input } from '@/components/ui/Input'
import { Select } from '@/components/ui/Select'
import { api } from '@/lib/api'
import { cn } from '@/lib/cn'
import type { Paged } from '@/types/master'
import {
  ContractPhase,
  ContractPhaseLabel,
  type ContractDetail,
  type ContractListItem,
} from '@/types/contracts'
import { ContractTypeLabel } from '@/types/forms'

const fmtMoney = (v: number) => v.toLocaleString('vi-VN')

export function ContractsListPage() {
  const navigate = useNavigate()
  const [searchParams, setSearchParams] = useSearchParams()

  const urlType = searchParams.get('type')
  const urlPendingMe = searchParams.get('pendingMe') === '1'
  // [W7 S187] `type` nay ĐI THẲNG lên BE (không còn lọc client) ⇒ phải chặn giá trị rác
  // TRƯỚC khi lên dây: `Number('abc') = NaN` mà `NaN != null` là true ⇒ nếu 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 đã chạy CÙNG THƯ MỤC ở `HardCopiesPage.tsx:66-68` (GĐ4) — dùng lại nguyên.
  const parsedType = urlType === null ? Number.NaN : Number(urlType)
  const typeFilter = Number.isFinite(parsedType) && parsedType > 0 ? parsedType : null
  const search = searchParams.get('q') ?? ''
  const phase = searchParams.get('phase') ?? ''
  const page = Number(searchParams.get('page') ?? '1')
  const selectedId = searchParams.get('id')

  const list = useQuery({
    // `typeFilter` ĐÃ nằm trong key từ trước ⇒ đổi sang lọc server KHÔNG cần thêm trục mới;
    // cache cũ (payload chưa lọc) tự hết hiệu lực vì mỗi `type` là 1 ô key riêng sẵn rồi.
    queryKey: ['contracts', { page, search, phase, typeFilter, urlPendingMe }],
    queryFn: async () =>
      (
        await api.get<Paged<ContractListItem>>('/contracts', {
          params: {
            page,
            pageSize: 30,
            search: search || undefined,
            phase: phase || undefined,
            // [W7 S187] Lọc loại HĐ CHUYỂN LÊN SERVER. Trước đây lọc client SAU khi đã cắt
            // 30 dòng/trang ⇒ 3 cái sai cùng lúc: (a) loại hiếm biến mất IM LẶNG khi nằm
            // ngoài trang đang xem; (b) badge đếm `{total}` ở header lấy `res.data.total`
            // = tổng CHƯA lọc ⇒ nói dối khi có `?type=`; (c) phân trang tính theo tổng
            // chưa lọc ⇒ có trang rỗng hoàn toàn. BE lọc TRƯỚC khi đếm & cắt
            // (`ContractFeatures.cs:327` → `CountAsync:340` → `Skip/Take:342`) ⇒ chuyển lên
            // server sửa cả 3. Param có sẵn: `ContractsController.cs:25`.
            // `?? undefined` ⇒ axios bỏ hẳn key, giữ nguyên hành vi "không chọn loại".
            type: typeFilter ?? undefined,
          },
        })
      ).data,
    // [W7 S187] Vế `items.filter(c => c.type === typeFilter)` ĐÃ GỠ — BE lọc rồi. Giữ lại
    // = lọc 2 lần, và che mất lỗi nếu server trả sai loại (sai sẽ THẦM LẶNG).
  })

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

  const headerTitle = useMemo(() => {
    if (typeFilter != null) {
      const label = ContractTypeLabel[typeFilter] ?? 'HĐ'
      return urlPendingMe ? `${label} — Chờ duyệt` : label
    }
    return 'Hợp đồng'
  }, [typeFilter, urlPendingMe])

  function setParam(key: string, value: string | null) {
    const next = new URLSearchParams(searchParams)
    if (value == null || value === '') next.delete(key)
    else next.set(key, value)
    if (key !== 'id' && key !== 'page') next.delete('page') // reset paging khi đổi filter
    setSearchParams(next, { replace: key === 'q' })
  }

  function selectContract(id: string) {
    if (typeof window !== 'undefined' && window.matchMedia('(min-width: 1024px)').matches) {
      setParam('id', id)
    } else {
      navigate(`/contracts/${id}`)
    }
  }

  function clearSelection() {
    setParam('id', null)
  }

  const rows = list.data?.items ?? []
  const total = list.data?.total ?? 0

  return (
    <div className="flex h-[calc(100vh-4rem)] flex-col">
      <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 items-center gap-2">
          <FileText className="h-5 w-5 text-slate-500" />
          <h1 className="text-base font-semibold tracking-tight text-slate-900">{headerTitle}</h1>
          <span className="ml-2 rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
            {total}
          </span>
          {typeFilter != null && (
            <button
              onClick={() => navigate('/contracts')}
              className="ml-2 rounded-md border border-slate-300 bg-white px-2 py-0.5 text-[11px] text-slate-600 hover:bg-slate-50"
            >
              ← Tất cả loại
            </button>
          )}
        </div>
      </header>

      <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[340px_1fr_360px]">
        {/* Panel 1 — List + filters + pagination */}
        <aside className="flex flex-col overflow-hidden border-r border-slate-200 bg-white">
          <div className="space-y-2 border-b border-slate-200 p-3">
            <div className="relative">
              <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" />
              <Input
                value={search}
                onChange={e => setParam('q', e.target.value)}
                placeholder="Tìm mã / tên / NCC…"
                className="pl-8"
              />
            </div>
            <Select value={phase} onChange={e => setParam('phase', e.target.value)}>
              <option value="">Tất cả phase</option>
              {Object.values(ContractPhase).map(p => (
                <option key={p} value={p}>{ContractPhaseLabel[p]}</option>
              ))}
            </Select>
          </div>

          <div className="flex-1 overflow-y-auto">
            {list.isLoading && (
              <div className="space-y-2 p-3">
                {Array.from({ length: 8 }).map((_, i) => (
                  <div key={i} className="h-16 animate-pulse rounded-md bg-slate-100" />
                ))}
              </div>
            )}
            {!list.isLoading && rows.length === 0 && (
              <div className="p-6">
                <EmptyState
                  icon={FileText}
                  title="Không có HĐ"
                  description="Đổi filter hoặc chọn loại HĐ khác."
                />
              </div>
            )}
            <ul className="divide-y divide-slate-100">
              {rows.map(c => (
                <li key={c.id}>
                  <button
                    onClick={() => selectContract(c.id)}
                    className={cn(
                      'block w-full px-3 py-2.5 text-left transition hover:bg-slate-50',
                      selectedId === c.id && 'bg-brand-50 ring-1 ring-inset ring-brand-200',
                    )}
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div className="min-w-0 flex-1">
                        <div className="truncate text-[13px] font-medium text-slate-900">
                          {c.tenHopDong ?? '(chưa đặt tên)'}
                        </div>
                        <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-500">
                          <span className="font-mono">{c.maHopDong ?? '—'}</span>
                          <span>·</span>
                          <span className="truncate">{c.supplierName}</span>
                        </div>
                        <div className="mt-0.5 truncate text-[11px] text-slate-500">
                          {c.projectName}
                        </div>
                      </div>
                      <PhaseBadge phase={c.phase} className="shrink-0 text-[10px]" />
                    </div>
                    <div className="mt-1 flex items-center justify-between text-[11px] text-slate-500">
                      <span>{fmtMoney(c.giaTri)}</span>
                      <SlaTimer deadline={c.slaDeadline} createdAt={c.createdAt} />
                    </div>
                  </button>
                </li>
              ))}
            </ul>
          </div>

          {/* Pagination compact */}
          {total > 30 && (
            <div className="flex shrink-0 items-center justify-between border-t border-slate-200 px-3 py-2 text-[11px]">
              <span className="text-slate-500">
                Trang {page} / {Math.ceil(total / 30)}
              </span>
              <div className="flex gap-1">
                <button
                  onClick={() => setParam('page', String(Math.max(1, page - 1)))}
                  disabled={page <= 1}
                  className="rounded border border-slate-300 px-2 py-0.5 text-slate-600 hover:bg-slate-50 disabled:opacity-40"
                >
                  ←
                </button>
                <button
                  onClick={() => setParam('page', String(page + 1))}
                  disabled={page * 30 >= total}
                  className="rounded border border-slate-300 px-2 py-0.5 text-slate-600 hover:bg-slate-50 disabled:opacity-40"
                >
                  →
                </button>
              </div>
            </div>
          )}
        </aside>

        {/* Panel 2 — Detail content */}
        <main className="hidden overflow-y-auto bg-slate-50 p-6 lg:block">
          {!selectedId && (
            <EmptyState
              icon={FileText}
              title="Chọn 1 HĐ ở danh sách 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 — Workflow + history */}
        <aside className="hidden overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
          {/* [S168 GĐ3-D — owner slot (63) chốt D] Chưa chọn HĐ ⇒ cây toàn trình (GĐ3)
              thế chỗ ô trống; chọn HĐ thì nhường chỗ cho quy trình duyệt. Trade-off D
              (cây rời panel khi chọn HĐ) — sub-implfe-gd3.md §1. */}
          {/* [gate F-1/F-2] Panel-3 TỰ CUỘN ⇒ thân cây `lg:max-h-none` giữ đúng 1 thanh cuộn;
              sticky/self-start của khuôn vô hiệu ở host display:block này — by-design. */}
          {!selectedId && <PipelineTreePanel currentStage={3} bodyMaxHClass="max-h-[28rem] lg:max-h-none" />}
          {selectedId && detail.data && (
            <div className="space-y-4">
              {/* [WQ3b S190 · YC-030 Q5] Máy duyệt V2 dời từ ContractDetailContent ra host. */}
              {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>
  )
}
