solution-erp/fe-user/src/pages/InboxPage.tsx

// 3-panel "Hộp thư" — HĐ chờ role tôi xử lý. Stats row + Panel 1 (list
// pending) | Panel 2 (detail content) | Panel 3 (workflow + lịch sử duyệt).
// Selected qua URL ?id= để bookmarkable.
//
// Khác MyContractsPage: data từ /contracts/inbox (BE đã filter HĐ chờ role
// tôi), thêm 4-card stats overdue/dueSoon/total/totalValue ở header.
import { useMemo } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Inbox, AlertTriangle, Clock, FileText, Search, X } from 'lucide-react'
import { ContractDetailContent } from '@/components/contracts/ContractDetailContent'
import { WorkflowHistoryPanel } from '@/components/contracts/WorkflowHistoryPanel'
import { PhaseBadge } from '@/components/PhaseBadge'
import { SlaTimer } from '@/components/SlaTimer'
import { EmptyState } from '@/components/EmptyState'
import { Input } from '@/components/ui/Input'
import { useAuth } from '@/contexts/AuthContext'
import { api } from '@/lib/api'
import { cn } from '@/lib/cn'
import type { ContractDetail, ContractListItem } from '@/types/contracts'
import { ContractTypeLabel } from '@/types/forms'

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

function StatPill({
  icon: Icon,
  label,
  value,
  tone = 'default',
}: {
  icon: React.ComponentType<{ className?: string }>
  label: string
  value: React.ReactNode
  tone?: 'default' | 'warn' | 'danger'
}) {
  const toneClass =
    tone === 'danger' ? 'text-red-600 bg-red-50' :
    tone === 'warn' ? 'text-amber-600 bg-amber-50' :
    'text-brand-600 bg-brand-50'
  return (
    <div className="flex items-center gap-2 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-xs">
      <span className={cn('flex h-5 w-5 items-center justify-center rounded', toneClass)}>
        <Icon className="h-3 w-3" />
      </span>
      <span className="text-slate-500">{label}</span>
      <span className="font-semibold text-slate-900">{value}</span>
    </div>
  )
}

export function InboxPage() {
  const navigate = useNavigate()
  const { user } = useAuth()
  const [searchParams, setSearchParams] = useSearchParams()

  const typeFilter = searchParams.get('type') ? Number(searchParams.get('type')) : null
  const selectedId = searchParams.get('id')
  const search = searchParams.get('q') ?? ''

  const list = useQuery({
    queryKey: ['inbox'],
    queryFn: async () => (await api.get<ContractListItem[]>('/contracts/inbox')).data,
  })

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

  const allRows = list.data ?? []

  const rows = useMemo(() => {
    let items = allRows
    if (typeFilter != null) items = items.filter(c => c.type === typeFilter)
    if (search.trim()) {
      const q = search.toLowerCase()
      items = items.filter(c =>
        (c.maHopDong ?? '').toLowerCase().includes(q) ||
        (c.tenHopDong ?? '').toLowerCase().includes(q) ||
        (c.supplierName ?? '').toLowerCase().includes(q),
      )
    }
    return items
  }, [allRows, typeFilter, search])

  const stats = useMemo(() => {
    const now = Date.now()
    const dayMs = 24 * 60 * 60 * 1000
    let overdue = 0
    let dueSoon = 0
    let totalValue = 0
    for (const c of rows) {
      totalValue += c.giaTri ?? 0
      if (!c.slaDeadline) continue
      const diff = new Date(c.slaDeadline).getTime() - now
      if (diff < 0) overdue++
      else if (diff < dayMs) dueSoon++
    }
    return { total: rows.length, overdue, dueSoon, totalValue }
  }, [rows])

  function selectContract(id: string) {
    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 })
  }

  const typeLabel = typeFilter != null ? ContractTypeLabel[typeFilter] : null

  return (
    <div className="flex h-[calc(100vh-4rem)] flex-col">
      {/* Header — title + stats inline để Panel 1 max chỗ */}
      <header className="flex shrink-0 flex-wrap items-center gap-3 border-b border-slate-200 bg-white px-6 py-3">
        <div className="flex items-center gap-2">
          <Inbox className="h-5 w-5 text-slate-500" />
          <h1 className="text-base font-semibold tracking-tight text-slate-900">
            Hộp thư {typeLabel && <span className="text-slate-500">· {typeLabel}</span>}
          </h1>
        </div>
        <div className="ml-auto flex flex-wrap gap-2">
          <StatPill icon={Inbox} label="Cần xử lý" value={stats.total} />
          <StatPill icon={Clock} label="Sắp quá hạn" value={stats.dueSoon} tone="warn" />
          <StatPill icon={AlertTriangle} label="Quá hạn" value={stats.overdue} tone="danger" />
          <StatPill icon={FileText} label="Giá trị" value={fmtMoney(stats.totalValue)} />
        </div>
      </header>

      {user?.roles.length ? (
        <div className="shrink-0 border-b border-slate-200 bg-amber-50 px-6 py-1.5 text-[11px] text-amber-700">
          Vai trò bạn đang xử lý: <span className="font-medium">{user.roles.join(', ')}</span>
        </div>
      ) : null}

      <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[320px_1fr_360px]">
        {/* Panel 1 — Pending list */}
        <aside className="flex flex-col overflow-hidden border-r border-slate-200 bg-white">
          <div className="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 => updateSearch(e.target.value)}
                placeholder="Tìm theo mã / tên / NCC…"
                className="pl-8"
              />
            </div>
          </div>
          <div className="flex-1 overflow-y-auto">
            {list.isLoading && (
              <div className="space-y-2 p-3">
                {Array.from({ length: 5 }).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={Inbox}
                  title="Hộp thư trống"
                  description={
                    typeFilter != null
                      ? `Không có ${ContractTypeLabel[typeFilter]} nào đang chờ.`
                      : 'Không có HĐ nào chờ bạn xử lý.'
                  }
                />
              </div>
            )}
            <ul className="divide-y divide-slate-100">
              {rows.map(c => {
                const overdue = c.slaDeadline && new Date(c.slaDeadline).getTime() < Date.now()
                return (
                  <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',
                        overdue && selectedId !== c.id && 'border-l-2 border-l-red-400',
                      )}
                    >
                      <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>
                        <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>
        </aside>

        {/* Panel 2 — Detail content */}
        <main className="hidden overflow-y-auto bg-slate-50 p-6 lg:block">
          {!selectedId && (
            <EmptyState
              icon={Inbox}
              title="Chọn 1 HĐ ở danh sách bên trái"
              description="Chi tiết HĐ + góp ý + đính kèm + nút Duyệt 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">
          {!selectedId && (
            <div className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">
              <X className="mx-auto mb-2 h-5 w-5" />
              Quy trình duyệt sẽ hiện khi chọn HĐ.
            </div>
          )}
          {selectedId && detail.data && <WorkflowHistoryPanel contract={detail.data} />}
        </aside>
      </div>
    </div>
  )
}