// [S171 KHKK 3-panel] PANEL 2 (giữa) — nội-dung phiếu "Kế hoạch ký kết HĐ" (GĐ2).
// File MIRROR SHA256 identical với fe-admin counterpart.
//
// 🔴 Khối ý-kiến cấp duyệt (Section 5) là bản thứ 3 của cùng một hình (PE
// `PeDetailTabs.tsx:705-774` · HĐ `components/contracts/WorkflowHistoryPanel.tsx`).
// Gộp được KHI VÀ CHỈ KHI BE 3 module thống-nhất shape `status` precompute — trước đó
// gộp chỉ đẻ ra `if (module === …)`.
//
// Bố-cục mirror Duyệt NCC: dải 4 giai-đoạn trên cùng, rồi các Section ĐÁNH SỐ nối nhau
// bằng `divide-y`, ý-kiến cấp duyệt nằm DƯỚI CÙNG (Ảnh 3 khoanh đỏ).
//   1. Thông tin kế hoạch          4. File đính kèm
//   2. Giá đề xuất theo NCC        5. Ý kiến cấp duyệt
//   3. Căn cứ hồ sơ (b.8-9)
// 🔸 KHÁC PE ở NỘI DUNG (miễn-trừ P2-3, có lý-do nghiệp-vụ): GĐ2 không có báo-giá / so-sánh
// NCC (đã chốt ở GĐ1) mà có căn-cứ hồ-sơ TVGS. Giống nhau ở KHUNG, không ở chữ.
//
// [P2-7] `readOnly` là prop TỪ HOST — host quyết `phiếu ≠ Nháp ∨ user ≠ người soạn`.
// Không dựng workspace riêng cho việc này.
// [R-8] KHKK KHÔNG có phiếu V1-legacy (module sinh 2026-07-29) ⇒ KHÔNG port nhánh fallback
// V1 của PE (`PeDetailTabs.tsx:434-436`) — đó là code chết ngay ngày đầu.
import { Fragment, useState, type ReactNode } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import {
  ClipboardList, FileCheck, Lock, Paperclip, Pencil, Plus, Save, Trash2, Upload, Users,
} from 'lucide-react'
import { toast } from 'sonner'
import { PePipelineStrip } from '@/components/pe/PePipelineStrip'
import { Button } from '@/components/ui/Button'
import { Dialog } from '@/components/ui/Dialog'
import { Input } from '@/components/ui/Input'
import { Label } from '@/components/ui/Label'
import { Textarea } from '@/components/ui/Textarea'
import { api } from '@/lib/api'
import { getErrorMessage } from '@/lib/apiError'
import { cn } from '@/lib/cn'
import {
  DOSSIER_KIND_LABELS, DOSSIER_STATUS_BADGE, DOSSIER_STATUS_LABELS,
  DossierItemKind, DossierItemStatus,
  KHKK_APPROVAL_GROUP_LABELS, KHKK_PHASE_BADGE, KHKK_PHASE_LABELS,
  KhkkAttachmentPurpose, KhkkPhase,
  type DossierItemKindValue, type DossierItemStatusValue, type KhkkAttachmentDto,
  type KhkkDetailDto, type KhkkDossierItemDto, type KhkkPhaseValue,
  type UpsertKhkkDossierItemInput,
} from '@/types/khkk'

function formatVnd(n: number | null | undefined): string {
  if (n === null || n === undefined) return '—'
  return n.toLocaleString('vi-VN') + ' đ'
}

// [S175 · B2 · P0] Ô RỖNG phải MỜ HƠN dữ-liệu thật. Trước đây em-dash thừa-hưởng đúng
// màu chữ của ô (`text-slate-600/700`) ⇒ lướt bảng thì "—" trông y như một GIÁ-TRỊ.
// Gom về một chỗ để các ô rỗng không mỗi nơi một kiểu.
const DASH = <span className="text-slate-300">—</span>

/** Chuỗi có thể rỗng → em-dash mờ. */
function orDash(v: string | null | undefined): ReactNode {
  return v == null || v === '' ? DASH : v
}

/** Tiền: `formatVnd` trả CHUỖI "—" khi rỗng nên không tô mờ được — tách nhánh rỗng ra. */
function moneyOrDash(n: number | null | undefined): ReactNode {
  return n == null ? DASH : formatVnd(n)
}

function formatDateTime(iso: string): string {
  return new Date(iso).toLocaleString('vi-VN')
}

function formatSize(b: number): string {
  return b > 1024 * 1024 ? `${(b / 1024 / 1024).toFixed(1)} MB` : `${Math.round(b / 1024)} KB`
}

/** Khung Section ĐÁNH SỐ — mirror khuôn Section của màn Duyệt NCC (đánh số + divide-y). */
function Section({
  title, icon, accent, head, chipBg, chipFg, count, actions, children,
}: {
  title: string
  icon: ReactNode
  accent: string
  head: string
  chipBg: string
  chipFg: string
  count?: number
  actions?: ReactNode
  children: ReactNode
}) {
  return (
    <section className="px-5 py-4">
      <header className="mb-3 flex items-center gap-2">
        <span
          className="icon-chip"
          style={{ height: '1.75rem', width: '1.75rem', ['--chip-bg' as string]: chipBg, ['--chip-fg' as string]: chipFg }}
          aria-hidden
        >
          {icon}
        </span>
        <h3 className={cn('text-sm font-semibold tracking-tight', head)} style={{ ['--accent' as string]: accent }}>
          {title}
        </h3>
        {count != null && (
          <span className="rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-slate-500">
            {count}
          </span>
        )}
        {actions && <span className="ml-auto">{actions}</span>}
      </header>
      {children}
    </section>
  )
}

function Field({
  label, value, mono, full, children,
}: {
  label: string
  value?: ReactNode
  mono?: boolean
  full?: boolean
  children?: ReactNode
}) {
  const empty = value == null || value === ''
  return (
    <div className={cn('min-w-0 text-sm', full && 'sm:col-span-2')}>
      <div className="text-[11px] font-semibold uppercase tracking-wide text-brand-600">{label}</div>
      {/* [S175 · C3] VALUE về `text-slate-900`, LABEL giữ `text-brand-600`. Trước đây MỌI
          value đều tô brand ⇒ màu thương-hiệu mất hết sức nặng: khi cả trang đều là màu nhấn
          thì không còn gì là nhấn, và không chừa được màu cho thứ THẬT SỰ cần nổi (NCC trúng
          thầu, cảnh báo vượt ngân sách). PE giữ slate cho value đúng vì lý do này. */}
      <div className={cn('mt-0.5 break-words text-sm', empty && !children ? 'text-slate-300' : 'font-medium text-slate-900', mono && !empty && 'font-mono')}>
        {children ?? (empty ? '—' : value)}
      </div>
    </div>
  )
}

const EMPTY_ITEM: UpsertKhkkDossierItemInput = {
  kind: DossierItemKind.MauVatLieu,
  name: '',
  status: DossierItemStatus.ChuaNop,
  tvgsName: '',
  note: '',
}

export function KhkkDetailContent({
  plan,
  readOnly,
  onChanged,
}: {
  plan: KhkkDetailDto
  /** [P2-7] Host quyết: `true` khi phiếu ≠ Nháp/Trả lại HOẶC user ≠ người soạn. */
  readOnly: boolean
  onChanged?: () => void
}) {
  const qc = useQueryClient()
  const id = plan.id
  const [editHeader, setEditHeader] = useState(false)
  const [ghiChu, setGhiChu] = useState('')
  const [hoSoLink, setHoSoLink] = useState('')
  const [itemForm, setItemForm] = useState<UpsertKhkkDossierItemInput | null>(null)

  const phase = plan.phase as KhkkPhaseValue
  const draftPhase = phase === KhkkPhase.DangSoanThao || phase === KhkkPhase.TraLai
  // Sửa được = phiếu còn ở Nháp/Trả lại VÀ host không khoá (readOnly).
  const isDraft = draftPhase && !readOnly

  const invalidate = () => {
    qc.invalidateQueries({ queryKey: ['khkk-detail', id] })
    qc.invalidateQueries({ queryKey: ['khkk-list'] })
    onChanged?.()
  }

  const saveHeader = useMutation({
    mutationFn: async () => {
      await api.put(`/contract-signing-plans/${id}`, {
        ghiChu: ghiChu.trim() || null,
        hoSoLink: hoSoLink.trim() || null,
      })
    },
    onSuccess: () => { toast.success('Đã lưu'); setEditHeader(false); invalidate() },
    onError: (e) => toast.error(getErrorMessage(e)),
  })

  // Danh mục hạng mục SP-002 — chỉ tải khi phiếu còn sửa được (tránh 1 request thừa).
  const catalogOptions = useQuery({
    queryKey: ['contract-catalog', plan.approvalGroup],
    queryFn: async () =>
      (await api.get<{ id: string; code: string; tenVi: string }[]>('/catalogs/contract-catalog', {
        params: { approvalGroup: plan.approvalGroup },
      })).data,
    enabled: isDraft && plan.approvalGroup != null,
  })

  const assignLine = useMutation({
    mutationFn: async (p: { lineId: string; catalogEntryId: string }) =>
      api.put(`/contract-signing-plans/${id}/lines/${p.lineId}`, { catalogEntryId: p.catalogEntryId }),
    onSuccess: () => { toast.success('Đã gán hạng mục'); invalidate() },
    onError: (e) => toast.error(getErrorMessage(e)),
  })

  const upsertItem = useMutation({
    mutationFn: async (body: UpsertKhkkDossierItemInput) => {
      if (!body.name.trim()) throw new Error('Vui lòng nhập tên căn cứ')
      const payload = {
        ...body,
        contractSigningPlanId: id,
        name: body.name.trim(),
        tvgsName: body.tvgsName?.trim() || null,
        note: body.note?.trim() || null,
      }
      // [F-4 S161] POST ép Id=null = LUÔN insert ⇒ "Sửa" phải đi PUT, không thì đẻ bản sao im lặng.
      if (body.id) await api.put(`/contract-signing-plans/${id}/dossier-items/${body.id}`, payload)
      else await api.post(`/contract-signing-plans/${id}/dossier-items`, payload)
    },
    onSuccess: () => { toast.success('Đã lưu căn cứ'); setItemForm(null); invalidate() },
    onError: (e) => toast.error(getErrorMessage(e)),
  })

  const deleteItem = useMutation({
    mutationFn: async (itemId: string) => api.delete(`/contract-signing-plans/${id}/dossier-items/${itemId}`),
    onSuccess: () => { toast.success('Đã xóa căn cứ'); invalidate() },
    onError: (e) => toast.error(getErrorMessage(e)),
  })

  // [S175 · O4] +`dossierItemId`: gắn file vào ĐÚNG một căn cứ hồ sơ (shopdrawing, mẫu vật
  // liệu…) thay vì đổ chung một rổ. 🔴 0 BE MỚI — rail `dossierItemId` đã đủ 6 tầng từ Mig 69
  // (`KhkkAttachmentDto:241` ⟵ `POST /attachments` multipart `dossierItemId?`); trước đây FE
  // đơn giản là KHÔNG BAO GIỜ gửi trường đó lên, nên mọi file rơi về mức phiếu.
  const upload = useMutation({
    mutationFn: async ({ file, dossierItemId }: { file: File; dossierItemId?: string }) => {
      const fd = new FormData()
      fd.append('file', file)
      fd.append('purpose', String(KhkkAttachmentPurpose.DossierScan))
      if (dossierItemId) fd.append('dossierItemId', dossierItemId)
      return api.post(`/contract-signing-plans/${id}/attachments`, fd, {
        headers: { 'Content-Type': 'multipart/form-data' },
      })
    },
    onSuccess: () => { toast.success('Đã tải lên'); invalidate() },
    onError: (e) => toast.error(getErrorMessage(e)),
  })

  const deleteAttachment = useMutation({
    mutationFn: async (attId: string) => api.delete(`/contract-signing-plans/${id}/attachments/${attId}`),
    onSuccess: () => { toast.success('Đã xóa file'); invalidate() },
    onError: (e) => toast.error(getErrorMessage(e)),
  })

  async function download(att: KhkkAttachmentDto) {
    try {
      const res = await api.get(`/contract-signing-plans/${id}/attachments/${att.id}/download`, {
        responseType: 'blob',
      })
      const url = window.URL.createObjectURL(res.data as Blob)
      const a = document.createElement('a')
      a.href = url
      a.download = att.fileName
      a.click()
      window.URL.revokeObjectURL(url)
    } catch (e) {
      toast.error(getErrorMessage(e))
    }
  }

  async function onPickFiles(e: React.ChangeEvent<HTMLInputElement>, dossierItemId?: string) {
    const files = Array.from(e.target.files ?? [])
    e.target.value = ''
    for (const f of files) {
      try { await upload.mutateAsync({ file: f, dossierItemId }) } catch { /* lỗi đã toast ở onError */ }
    }
  }

  const startEditHeader = () => {
    setGhiChu(plan.ghiChu ?? '')
    setHoSoLink(plan.hoSoLink ?? '')
    setEditHeader(true)
  }

  // File "đính kèm khi duyệt" thuộc panel 3 (mục 5) — Section 4 chỉ liệt kê hồ-sơ của phiếu.
  // [S175 · O4] Chia 2 rổ: file GẮN VÀO một căn cứ hiện ngay dưới dòng căn cứ đó; Section 4
  // chỉ còn file mức PHIẾU. 🔴 Không chia thì file gắn căn cứ hiện ở CẢ HAI chỗ — người dùng
  // đếm 2 lần rồi tưởng đã tải nhầm lên hai bận.
  const dossierAttachments = new Map<string, KhkkAttachmentDto[]>()
  const planAttachments: KhkkAttachmentDto[] = []
  for (const a of plan.attachments) {
    if (a.purpose === KhkkAttachmentPurpose.ApprovalAttachment) continue
    if (a.dossierItemId) {
      const bucket = dossierAttachments.get(a.dossierItemId)
      if (bucket) bucket.push(a)
      else dossierAttachments.set(a.dossierItemId, [a])
    } else {
      planAttachments.push(a)
    }
  }

  // 🧊 [S174 owner] Section 5 "Ý kiến cấp duyệt" ĐÃ GỠ khỏi panel giữa — anh: "bỏ luôn cái
  // này ra luôn". Sơ-đồ Bước/Cấp + chữ ký đã sống ở PANEL 3 (`KhkkWorkflowPanel`), để cả hai
  // là kể một chuyện hai lần trên cùng màn hình. Dữ-liệu `plan.levelOpinions` /
  // `plan.workflowSteps` VẪN có trong DTO (panel 3 dùng) — chỉ bỏ chỗ VẼ ở đây.

  return (
    <div className="card-accent overflow-hidden" style={{ ['--accent' as string]: 'var(--color-brand-500)' }}>
      {/* Dải 4 giai-đoạn — GĐ2 đang sáng. Cùng component với màn Duyệt NCC (không nhân bản). */}
      <PePipelineStrip current={2} />

      <div className="flex flex-wrap items-center gap-2 border-b border-slate-200 px-5 py-3">
        <span className="font-mono text-sm font-semibold text-brand-800">{plan.maKeHoach ?? '(chưa cấp mã)'}</span>
        <span className="min-w-0 flex-1 truncate text-sm text-slate-700">{plan.peTenGoiThau ?? '—'}</span>
        {plan.approvalGroup != null && (
          <span
            className="inline-flex items-center rounded-md border border-violet-300 bg-violet-100 px-2 py-0.5 text-[11px] font-semibold text-violet-800"
            title={KHKK_APPROVAL_GROUP_LABELS[plan.approvalGroup] ?? `Nhóm ${plan.approvalGroup}`}
          >
            N{plan.approvalGroup}
          </span>
        )}
        <span className={cn('inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] font-medium', KHKK_PHASE_BADGE[phase])}>
          {KHKK_PHASE_LABELS[phase]}
        </span>
      </div>

      <div className="divide-y divide-slate-200">
        {/* ─────────────── 1 ─────────────── */}
        <Section
          title="1. Thông tin kế hoạch"
          icon={<FileCheck className="h-4 w-4" />}
          accent="var(--color-brand-500)"
          head="text-brand-800"
          chipBg="var(--color-brand-50)"
          chipFg="var(--color-brand-600)"
          actions={
            isDraft && !editHeader ? (
              <Button variant="outline" size="sm" onClick={startEditHeader}>
                <Pencil className="mr-2 h-3.5 w-3.5" /> Sửa
              </Button>
            ) : undefined
          }
        >
          <div className="grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2">
            <Field label="Mã kế hoạch" value={plan.maKeHoach ?? '—'} mono />
            <Field label="Phiếu Duyệt NCC nguồn">
              <span className="font-mono text-sm">{plan.peMaPhieu ?? '—'}</span>
            </Field>
            <Field label="Dự án" value={plan.projectName ?? '—'} />
            <Field label="Phòng ban" value={plan.departmentName ?? '—'} />
            <Field label="Người soạn" value={plan.drafterFullName ?? '—'} />
            <Field label="Quy trình">
              {plan.workflowCode ? (
                <span>
                  <span className="font-mono">{plan.workflowCode}</span>
                  {plan.workflowVersion != null && <span className="font-mono"> v{plan.workflowVersion}</span>}
                  {plan.workflowName ? ` · ${plan.workflowName}` : ''}
                </span>
              ) : (
                <span className="text-slate-300">— Chưa chọn —</span>
              )}
            </Field>
            <Field label="Ngày tạo" value={formatDateTime(plan.createdAt)} />
            <Field label="Hạn xử lý (tham khảo)" value={plan.slaDeadline ? formatDateTime(plan.slaDeadline) : '—'} />
          </div>

          {editHeader ? (
            <div className="mt-4 space-y-3 rounded-lg border border-slate-200 bg-slate-50/60 p-4">
              <div>
                <Label htmlFor="hoSoLink">Link hồ sơ (NAS)</Label>
                <Input id="hoSoLink" value={hoSoLink} onChange={(e) => setHoSoLink(e.target.value)} maxLength={1000} placeholder="\\\\nas\\du-an\\..." />
              </div>
              <div>
                <Label htmlFor="ghiChu">Ghi chú</Label>
                <Textarea id="ghiChu" value={ghiChu} onChange={(e) => setGhiChu(e.target.value)} maxLength={2000} rows={4} />
                <div className="mt-1 text-xs text-muted-foreground">{ghiChu.length}/2000</div>
              </div>
              <div className="flex justify-end gap-2">
                <Button variant="outline" size="sm" onClick={() => setEditHeader(false)}>Huỷ</Button>
                <Button size="sm" onClick={() => saveHeader.mutate()} disabled={saveHeader.isPending}>
                  <Save className="mr-2 h-3.5 w-3.5" />
                  {saveHeader.isPending ? 'Đang lưu...' : 'Lưu'}
                </Button>
              </div>
            </div>
          ) : (
            <div className="mt-4 grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2">
              <Field label="Link hồ sơ" full>
                {plan.hoSoLink ? <span className="break-all font-normal text-slate-700">{plan.hoSoLink}</span> : <span className="text-slate-300">—</span>}
              </Field>
              <Field label="Ghi chú" full>
                {plan.ghiChu ? <span className="whitespace-pre-wrap font-normal text-slate-700">{plan.ghiChu}</span> : <span className="text-slate-300">—</span>}
              </Field>
            </div>
          )}
        </Section>

        {/* ─────────────── 2 ─────────────── */}
        <Section
          title={`2. Giá đề xuất theo NCC trúng thầu (${plan.lines.length} dòng)`}
          icon={<Users className="h-4 w-4" />}
          accent="var(--color-teal-500)"
          head="text-teal-700"
          chipBg="var(--color-teal-50)"
          chipFg="var(--color-teal-700)"
          actions={
            plan.budgetFrozen ? (
              // [S175 · B2 · P0] emoji 🔒 → icon lucide: emoji render khác nhau theo font hệ
              // điều-hành (Windows/macOS/Android ra 3 hình), và nó KHÔNG ăn `currentColor`
              // nên luôn lệch tông với chữ amber bên cạnh.
              <span className="inline-flex items-center gap-1 rounded-md border border-amber-300 bg-amber-100 px-2 py-0.5 text-[11px] font-semibold normal-case tracking-normal text-amber-800">
                <Lock className="h-3 w-3" aria-hidden /> Giá đã chốt tại thời điểm duyệt
              </span>
            ) : undefined
          }
        >
          {plan.lines.length === 0 ? (
            <div className="text-sm italic text-slate-400">Phiếu nguồn chưa có NCC trúng thầu.</div>
          ) : (
            <>
            {/* [S175 · O3 — ANH CHỐT] TỔNG đặt PHÍA TRÊN bảng, đúng 2 con số:
                  ① trục = CHỈ TỔNG TOÀN PHIẾU (anh bác phương án tổng-mỗi-NCC);
                  ② hiện 2 TỔNG RIÊNG cạnh nhau — Σ giá ĐỀ XUẤT ⟂ Σ giá DUYỆT.
                🔴 KHÔNG cộng gộp 2 cột thành một số "hiện hành": đề-xuất và duyệt là hai
                  con số có ý nghĩa pháp-lý khác nhau (một cái chưa ai chốt, một cái đã qua
                  choke-point `ApplyApprovedValuesOnFinalize`); trộn lại là bịa ra một số
                  không tồn tại trong hồ-sơ nào.
                🔸 Dòng chưa có giá duyệt ⇒ `null`, `moneyOrDash` in em-dash mờ; tổng duyệt
                  chỉ cộng phần ĐÃ có, và nói rõ còn bao nhiêu dòng chưa chốt. */}
            {(() => {
              const sumProposed = plan.lines.reduce((s, l) => s + (l.proposedAmount ?? 0), 0)
              const approvedLines = plan.lines.filter(l => l.approvedAmount != null)
              const sumApproved = approvedLines.reduce((s, l) => s + (l.approvedAmount ?? 0), 0)
              const pending = plan.lines.length - approvedLines.length
              return (
                <div className="mb-3 flex flex-wrap items-stretch gap-2">
                  <div className="min-w-[13rem] flex-1 rounded-md border border-slate-200 bg-white px-3 py-2">
                    <div className="label-eyebrow">Tổng giá đề xuất</div>
                    <div className="mt-0.5 text-base font-semibold tabular-nums text-brand-800">
                      {formatVnd(sumProposed)}
                    </div>
                    <div className="text-[10px] text-slate-500">{plan.lines.length} dòng</div>
                  </div>
                  <div className={cn(
                    'min-w-[13rem] flex-1 rounded-md border px-3 py-2',
                    pending === 0 ? 'border-emerald-300 bg-emerald-50' : 'border-slate-200 bg-white',
                  )}>
                    <div className="label-eyebrow">Tổng giá duyệt</div>
                    <div className={cn(
                      'mt-0.5 text-base font-semibold tabular-nums',
                      pending === 0 ? 'text-emerald-700' : 'text-slate-400',
                    )}>
                      {approvedLines.length === 0 ? '—' : formatVnd(sumApproved)}
                    </div>
                    <div className="text-[10px] text-slate-500">
                      {pending === 0
                        ? 'đã chốt đủ mọi dòng'
                        : `còn ${pending}/${plan.lines.length} dòng chưa chốt giá`}
                    </div>
                  </div>
                </div>
              )
            })()}
            {/* [S175 · B2 · P0] `table-fixed` + `<colgroup>` + `min-w-[880px]`: bảng co giãn
                tự-do trước đây để cột tiền nhảy bề rộng theo độ dài tên NCC ⇒ 3 cột số không
                thẳng hàng giữa các phiếu. Chốt bề rộng rồi thì hẹp màn hình sẽ CUỘN NGANG
                (đúng ý đồ của `overflow-x-auto` bọc ngoài) thay vì bóp chữ. */}
            <div className="overflow-x-auto">
              <table className="w-full min-w-[880px] table-fixed text-xs">
                <colgroup>
                  <col className="w-[22%]" />
                  <col className="w-[22%]" />
                  <col className="w-[14%]" />
                  <col className="w-[14%]" />
                  <col className="w-[14%]" />
                  <col className="w-[14%]" />
                </colgroup>
                <thead className="border-b border-slate-200 bg-slate-50/70">
                  <tr>
                    <th className="label-eyebrow px-3 py-2 text-left">Nhà cung cấp</th>
                    <th className="label-eyebrow px-3 py-2 text-left">Hạng mục</th>
                    <th className="label-eyebrow px-3 py-2 text-right">Giá tham chiếu</th>
                    <th className="label-eyebrow px-3 py-2 text-right">Giá đề xuất</th>
                    <th className="label-eyebrow px-3 py-2 text-right">Giá duyệt</th>
                    <th className="label-eyebrow px-3 py-2 text-left">Ghi chú</th>
                  </tr>
                </thead>
                <tbody>
                  {plan.lines.map((l) => (
                    <tr key={l.id} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/60">
                      <td className="px-3 py-2 font-medium text-brand-800">
                        {orDash(l.supplierName)}
                        {l.contractId && (
                          <a href={`/contracts/${l.contractId}`} className="ml-2 text-[10px] font-medium text-brand-600 hover:underline" title="Dòng này đã được đưa vào hợp đồng">
                            ✓ HĐ
                          </a>
                        )}
                      </td>
                      <td className="px-3 py-2 text-slate-700">
                        {isDraft && !l.contractId ? (
                          <>
                            <select
                              value={l.catalogEntryId ?? ''}
                              onChange={(e) => e.target.value && assignLine.mutate({ lineId: l.id, catalogEntryId: e.target.value })}
                              disabled={assignLine.isPending}
                              aria-label={`Gán hạng mục SP-002 cho dòng ${l.supplierName ?? l.id}`}
                              className="h-8 w-full min-w-[12rem] rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-700 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
                            >
                              <option value="">— Chọn hạng mục —</option>
                              {/* Hạng mục ĐÃ LƯU mà không có trong options ⇒ chèn option đại diện,
                                  không thì dòng đã gán TRÔNG như chưa gán. */}
                              {l.catalogEntryId && !(catalogOptions.data ?? []).some((c) => c.id === l.catalogEntryId) && (
                                <option value={l.catalogEntryId}>{l.tenHangMuc ?? '(hạng mục đã gán)'}</option>
                              )}
                              {(catalogOptions.data ?? []).map((c) => (
                                <option key={c.id} value={c.id}>{c.code} — {c.tenVi}</option>
                              ))}
                            </select>
                            {catalogOptions.isError && (
                              <div className="mt-1 text-[11px] text-red-600">
                                Không tải được danh mục hạng mục —{' '}
                                <button type="button" className="underline" onClick={() => catalogOptions.refetch()}>thử lại</button>
                              </div>
                            )}
                            {catalogOptions.isSuccess && (catalogOptions.data?.length ?? 0) === 0 && (
                              <div className="mt-1 text-[11px] text-amber-700">
                                Nhóm duyệt N{plan.approvalGroup} chưa có hạng mục đang hiệu lực — liên hệ quản trị danh mục.
                              </div>
                            )}
                          </>
                        ) : orDash(l.tenHangMuc)}
                      </td>
                      <td className="px-3 py-2 text-right tabular-nums text-slate-600">{moneyOrDash(l.peReferenceAmount)}</td>
                      <td className="px-3 py-2 text-right tabular-nums text-brand-800">{moneyOrDash(l.proposedAmount)}</td>
                      <td className="px-3 py-2 text-right tabular-nums text-emerald-700">{moneyOrDash(l.approvedAmount)}</td>
                      <td className="px-3 py-2 text-slate-600">{orDash(l.note)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            </>
          )}
          <div className="mt-3 text-xs text-muted-foreground">
            Giá tham chiếu là SNAPSHOT tổng báo giá được chọn của NCC trên phiếu Duyệt NCC tại thời điểm lập kế hoạch.
            {' '}Cột Hạng mục gán ngay tại bảng khi phiếu ở Nháp/Trả lại — mọi dòng phải gán xong mới trình duyệt được.
          </div>
        </Section>

        {/* ─────────────── 3 ─────────────── */}
        <Section
          title="3. Căn cứ hồ sơ (mẫu vật liệu / shopdrawing)"
          icon={<ClipboardList className="h-4 w-4" />}
          accent="var(--color-violet-500)"
          head="text-violet-700"
          chipBg="var(--color-violet-50)"
          chipFg="var(--color-violet-700)"
          count={plan.dossierItems.length}
          actions={
            isDraft ? (
              <Button variant="outline" size="sm" onClick={() => setItemForm({ ...EMPTY_ITEM })}>
                <Plus className="mr-2 h-3.5 w-3.5" /> Thêm căn cứ
              </Button>
            ) : undefined
          }
        >
          {plan.dossierItems.length === 0 ? (
            <div className="text-sm italic text-slate-400">Chưa khai căn cứ nào.</div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full min-w-[880px] table-fixed text-xs">
                <colgroup>
                  <col className="w-[14%]" />
                  <col className={isDraft ? 'w-[26%]' : 'w-[30%]'} />
                  <col className="w-[14%]" />
                  <col className={isDraft ? 'w-[16%]' : 'w-[20%]'} />
                  <col className={isDraft ? 'w-[18%]' : 'w-[22%]'} />
                  {isDraft && <col className="w-[12%]" />}
                </colgroup>
                <thead className="border-b border-slate-200 bg-slate-50/70">
                  <tr>
                    <th className="label-eyebrow px-3 py-2 text-left">Loại</th>
                    <th className="label-eyebrow px-3 py-2 text-left">Tên căn cứ</th>
                    <th className="label-eyebrow px-3 py-2 text-left">Trạng thái</th>
                    <th className="label-eyebrow px-3 py-2 text-left">TVGS</th>
                    <th className="label-eyebrow px-3 py-2 text-left">Ghi chú</th>
                    {isDraft && <th className="label-eyebrow px-3 py-2 text-right">Thao tác</th>}
                  </tr>
                </thead>
                <tbody>
                  {plan.dossierItems.map((d: KhkkDossierItemDto) => {
                    // [S175 · O4] File gắn ĐÚNG căn cứ này (shopdrawing, mẫu vật liệu…).
                    const files = dossierAttachments.get(d.id) ?? []
                    return (
                    <Fragment key={d.id}>
                    <tr className={cn('border-slate-100 hover:bg-slate-50/60', files.length === 0 && 'border-b last:border-0')}>
                      <td className="px-3 py-2 text-slate-600">{orDash(DOSSIER_KIND_LABELS[d.kind])}</td>
                      <td className="px-3 py-2 font-medium text-brand-800">{d.name}</td>
                      <td className="px-3 py-2">
                        <span className={cn('inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium', DOSSIER_STATUS_BADGE[d.status])}>
                          {DOSSIER_STATUS_LABELS[d.status]}
                        </span>
                      </td>
                      <td className="px-3 py-2 text-slate-600">
                        {orDash(d.tvgsName)}
                        {d.tvgsResultAt && <span className="ml-1 text-[11px] text-slate-400">({formatDateTime(d.tvgsResultAt)})</span>}
                      </td>
                      <td className="px-3 py-2 text-slate-600">{orDash(d.note)}</td>
                      {isDraft && (
                        <td className="px-3 py-2 text-right">
                          <div className="flex justify-end gap-1">
                            {/* [S175 · O4] Đính kèm cho ĐÚNG căn cứ này. `<label>` bọc input
                                ẩn thay vì `<button>`+ref: mỗi dòng cần một ô chọn file riêng,
                                dùng ref thì phải nuôi N ref cho N dòng. */}
                            <label
                              title="Đính kèm file cho căn cứ này (shopdrawing, mẫu vật liệu…)"
                              className="cursor-pointer rounded px-1.5 py-1 text-teal-600 hover:bg-teal-50"
                            >
                              <Upload className="h-3.5 w-3.5" />
                              <input
                                type="file"
                                multiple
                                className="hidden"
                                onChange={(e) => onPickFiles(e, d.id)}
                              />
                            </label>
                            <button
                              type="button"
                              onClick={() => setItemForm({
                                id: d.id, kind: d.kind, supplierId: d.supplierId, name: d.name,
                                status: d.status, tvgsName: d.tvgsName ?? '', note: d.note ?? '',
                              })}
                              className="rounded px-1.5 py-1 text-violet-600 hover:bg-violet-50"
                              title="Sửa"
                            >
                              <Pencil className="h-3.5 w-3.5" />
                            </button>
                            <button
                              type="button"
                              onClick={() => { if (window.confirm(`Xóa căn cứ "${d.name}"?`)) deleteItem.mutate(d.id) }}
                              className="rounded px-1.5 py-1 text-red-600 hover:bg-red-50"
                              title="Xóa"
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </button>
                          </div>
                        </td>
                      )}
                    </tr>
                    {/* [S175 · O4] Dòng-con liệt kê file của căn cứ. Hiện CẢ KHI read-only —
                        người duyệt cần xem được shopdrawing, chỉ không được thêm/xoá. */}
                    {files.length > 0 && (
                      <tr className="border-b border-slate-100 last:border-0">
                        <td colSpan={isDraft ? 6 : 5} className="bg-slate-50/40 px-3 pb-2">
                          <div className="flex flex-wrap gap-1.5 pl-3">
                            {files.map((a) => (
                              <span
                                key={a.id}
                                className="inline-flex items-center gap-1 rounded border border-slate-200 bg-white px-1.5 py-0.5 text-[11px]"
                              >
                                <Paperclip className="h-3 w-3 shrink-0 text-teal-500" aria-hidden />
                                <button
                                  type="button"
                                  onClick={() => download(a)}
                                  title={`Tải xuống ${a.fileName} (${formatSize(a.fileSize)})`}
                                  className="max-w-[16rem] truncate text-slate-700 hover:text-brand-700 hover:underline"
                                >
                                  {a.fileName}
                                </button>
                                <span className="shrink-0 text-[10px] text-slate-400">{formatSize(a.fileSize)}</span>
                                {isDraft && (
                                  <button
                                    type="button"
                                    onClick={() => { if (window.confirm(`Xóa file "${a.fileName}"?`)) deleteAttachment.mutate(a.id) }}
                                    title="Xóa file"
                                    className="shrink-0 rounded text-red-500 hover:bg-red-50"
                                  >
                                    <Trash2 className="h-3 w-3" />
                                  </button>
                                )}
                              </span>
                            ))}
                          </div>
                        </td>
                      </tr>
                    )}
                    </Fragment>
                    )
                  })}
                </tbody>
              </table>
            </div>
          )}
        </Section>

        {/* ─────────────── 4 ─────────────── */}
        <Section
          title="4. File đính kèm"
          icon={<Paperclip className="h-4 w-4" />}
          accent="var(--color-teal-500)"
          head="text-teal-700"
          chipBg="var(--color-teal-50)"
          chipFg="var(--color-teal-700)"
          count={planAttachments.length}
          actions={
            readOnly ? undefined : (
              <label className="inline-flex cursor-pointer items-center rounded-md border border-slate-300 px-2.5 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">
                <Upload className="mr-2 h-3.5 w-3.5" />
                {upload.isPending ? 'Đang tải...' : 'Tải file lên'}
                <input type="file" multiple className="hidden" onChange={onPickFiles} />
              </label>
            )
          }
        >
          {planAttachments.length === 0 ? (
            <div className="text-sm italic text-slate-400">Chưa có file đính kèm.</div>
          ) : (
            <ul className="space-y-2">
              {planAttachments.map((a) => (
                <li key={a.id} className="flex items-center justify-between rounded-lg border border-slate-200 p-2.5 text-sm">
                  <div className="min-w-0">
                    <div className="truncate font-medium text-brand-800">{a.fileName}</div>
                    <div className="text-xs text-muted-foreground">{formatSize(a.fileSize)} · {formatDateTime(a.createdAt)}</div>
                  </div>
                  <div className="flex shrink-0 gap-2">
                    <button type="button" onClick={() => download(a)} className="text-xs text-primary hover:underline">Tải xuống</button>
                    {!readOnly && (
                      <button
                        type="button"
                        onClick={() => { if (window.confirm(`Xóa file "${a.fileName}"?`)) deleteAttachment.mutate(a.id) }}
                        className="text-xs text-red-600 hover:underline"
                      >
                        Xóa
                      </button>
                    )}
                  </div>
                </li>
              ))}
            </ul>
          )}
        </Section>
      </div>

      {/* Dialog thêm/sửa căn cứ */}
      <Dialog open={!!itemForm} onClose={() => setItemForm(null)} title={itemForm?.id ? 'Sửa căn cứ hồ sơ' : 'Thêm căn cứ hồ sơ'}>
        {itemForm && (
          <div className="space-y-3">
            <div>
              <Label htmlFor="item-kind">Loại căn cứ</Label>
              <select
                id="item-kind"
                value={itemForm.kind}
                onChange={(e) => setItemForm({ ...itemForm, kind: Number(e.target.value) as DossierItemKindValue })}
                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm"
              >
                {Object.entries(DOSSIER_KIND_LABELS).map(([v, label]) => (
                  <option key={v} value={v}>{label}</option>
                ))}
              </select>
            </div>
            <div>
              <Label htmlFor="item-name">Tên căn cứ <span className="text-red-500">*</span></Label>
              <Input id="item-name" value={itemForm.name} onChange={(e) => setItemForm({ ...itemForm, name: e.target.value })} maxLength={300} placeholder="vd. Mẫu thép D10 Hoà Phát" />
            </div>
            <div>
              <Label htmlFor="item-status">Trạng thái</Label>
              <select
                id="item-status"
                value={itemForm.status}
                onChange={(e) => setItemForm({ ...itemForm, status: Number(e.target.value) as DossierItemStatusValue })}
                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm"
              >
                {Object.entries(DOSSIER_STATUS_LABELS).map(([v, label]) => (
                  <option key={v} value={v}>{label}</option>
                ))}
              </select>
            </div>
            <div>
              <Label htmlFor="item-tvgs">Tên TVGS xử lý</Label>
              <Input id="item-tvgs" value={itemForm.tvgsName ?? ''} onChange={(e) => setItemForm({ ...itemForm, tvgsName: e.target.value })} maxLength={200} />
            </div>
            <div>
              <Label htmlFor="item-note">Ghi chú</Label>
              <Textarea id="item-note" value={itemForm.note ?? ''} onChange={(e) => setItemForm({ ...itemForm, note: e.target.value })} maxLength={1000} rows={3} />
            </div>
            <div className="flex justify-end gap-2 pt-2">
              <Button variant="outline" onClick={() => setItemForm(null)}>Huỷ</Button>
              <Button onClick={() => upsertItem.mutate(itemForm)} disabled={upsertItem.isPending || !itemForm.name.trim()}>
                {upsertItem.isPending ? 'Đang lưu...' : 'Lưu'}
              </Button>
            </div>
          </div>
        )}
      </Dialog>
    </div>
  )
}