// Fullpage detail (route /contracts/:id) — entered từ notification, bookmark,
// hoặc khi width < lg: trên 3-panel page. Dùng 2 component reuse:
// ContractDetailContent (Panel 2) + WorkflowHistoryPanel (Panel 3).
import { useQuery } from '@tanstack/react-query'
import { useNavigate, useParams } from 'react-router-dom'
import { ContractDetailContent } from '@/components/contracts/ContractDetailContent'
import { ContractWorkflowPanel } from '@/components/contracts/ContractWorkflowPanel'
import { WorkflowHistoryPanel } from '@/components/contracts/WorkflowHistoryPanel'
import { api } from '@/lib/api'
import type { ContractDetail } from '@/types/contracts'

export function ContractDetailPage() {
  const { id } = useParams()
  const navigate = useNavigate()

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

  if (detail.isLoading) return <div className="p-8 text-slate-500">Đang tải…</div>
  if (!detail.data) return <div className="p-8 text-slate-500">Không tìm thấy HĐ.</div>

  return (
    <div className="p-6">
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div className="lg:col-span-2">
          <ContractDetailContent contract={detail.data} onBack={() => navigate(-1)} />
        </div>
        <aside className="space-y-4">
          {/* [WQ3b S190 · YC-030 Q5] Máy duyệt V2 dời từ ContractDetailContent ra host —
              vị trí cột-cạnh khuôn KHKK, không nhân đôi bộ nút. */}
          {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} />
        </aside>
      </div>
    </div>
  )
}
