// Generic Workflow Apps List Page — Phase 10.3 G-O4+G-O5+G-O6 (S38 2026-05-28).
// SKELETON Phase 1: read-only list. Create form + workflow actions DEFER Phase 11.
// Handles 4 module via URL `:kind` param: leave / ot / travel / vehicle.
// File MIRROR SHA256 identical fe-user counterpart.
import { useQuery } from '@tanstack/react-query'
import { useParams } from 'react-router-dom'
import { CalendarOff, Clock, Plane, Car, FileSignature } from 'lucide-react'
import { PageHeader } from '@/components/PageHeader'
import { api } from '@/lib/api'
import { cn } from '@/lib/cn'
import {
  WORKFLOW_APP_STATUS_BADGE, WORKFLOW_APP_STATUS_LABELS,
  type PagedResult,
} from '@/types/workflowApps'

type Kind = 'leave' | 'ot' | 'travel' | 'vehicle'

const KIND_CONFIG: Record<Kind, {
  title: string
  description: string
  endpoint: string
  columns: Array<{ key: string; label: string; render: (item: any) => React.ReactNode }>
}> = {
  leave: {
    title: 'Đơn xin nghỉ phép',
    description: 'Danh sách đơn nghỉ phép — Workflow V2 ApplicableType=5',
    endpoint: '/leave-requests',
    columns: [
      { key: 'maDonTu', label: 'Mã', render: (x) => <span className="font-mono text-xs">{x.maDonTu ?? '—'}</span> },
      { key: 'requesterFullName', label: 'Người xin', render: (x) => x.requesterFullName },
      { key: 'startDate', label: 'Từ', render: (x) => new Date(x.startDate).toLocaleDateString('vi-VN') },
      { key: 'endDate', label: 'Đến', render: (x) => new Date(x.endDate).toLocaleDateString('vi-VN') },
      { key: 'numDays', label: 'Ngày', render: (x) => x.numDays },
      { key: 'reason', label: 'Lý do', render: (x) => <span className="truncate max-w-xs block">{x.reason}</span> },
    ],
  },
  ot: {
    title: 'Đơn đăng ký OT',
    description: 'Danh sách đơn OT — Workflow V2 ApplicableType=6',
    endpoint: '/ot-requests',
    columns: [
      { key: 'maDonTu', label: 'Mã', render: (x) => <span className="font-mono text-xs">{x.maDonTu ?? '—'}</span> },
      { key: 'requesterFullName', label: 'Người xin', render: (x) => x.requesterFullName },
      { key: 'otDate', label: 'Ngày OT', render: (x) => new Date(x.otDate).toLocaleDateString('vi-VN') },
      { key: 'hours', label: 'Giờ', render: (x) => x.hours },
      { key: 'reason', label: 'Lý do', render: (x) => <span className="truncate max-w-xs block">{x.reason}</span> },
    ],
  },
  travel: {
    title: 'Đơn đi công tác',
    description: 'Danh sách đăng ký công tác',
    endpoint: '/travel-requests',
    columns: [
      { key: 'maDonTu', label: 'Mã', render: (x) => <span className="font-mono text-xs">{x.maDonTu ?? '—'}</span> },
      { key: 'requesterFullName', label: 'Người xin', render: (x) => x.requesterFullName },
      { key: 'destination', label: 'Địa điểm', render: (x) => x.destination },
      { key: 'startDate', label: 'Từ', render: (x) => new Date(x.startDate).toLocaleDateString('vi-VN') },
      { key: 'endDate', label: 'Đến', render: (x) => new Date(x.endDate).toLocaleDateString('vi-VN') },
      { key: 'purpose', label: 'Mục đích', render: (x) => <span className="truncate max-w-xs block">{x.purpose}</span> },
    ],
  },
  vehicle: {
    title: 'Đặt xe công',
    description: 'Danh sách booking xe — Workflow V2 ApplicableType=7',
    endpoint: '/vehicle-bookings',
    columns: [
      { key: 'maDonTu', label: 'Mã', render: (x) => <span className="font-mono text-xs">{x.maDonTu ?? '—'}</span> },
      { key: 'requesterFullName', label: 'Người đặt', render: (x) => x.requesterFullName },
      { key: 'vehicleLicense', label: 'Biển số', render: (x) => <span className="font-mono text-xs">{x.vehicleLicense}</span> },
      { key: 'destination', label: 'Đến', render: (x) => x.destination },
      { key: 'startAt', label: 'Bắt đầu', render: (x) => new Date(x.startAt).toLocaleString('vi-VN') },
      { key: 'driverName', label: 'Tài xế', render: (x) => x.driverName ?? '—' },
    ],
  },
}

const ICON_MAP: Record<Kind, any> = {
  leave: CalendarOff, ot: Clock, travel: Plane, vehicle: Car,
}

export function WorkflowAppsListPage() {
  const { kind = 'leave' } = useParams<{ kind: Kind }>()
  const config = KIND_CONFIG[kind as Kind]
  const Icon = ICON_MAP[kind as Kind] ?? FileSignature

  const list = useQuery({
    queryKey: [config.endpoint, { page: 1 }],
    queryFn: async () => (await api.get<PagedResult<any>>(config.endpoint, { params: { page: 1, pageSize: 50 } })).data,
    enabled: !!config,
  })

  const items = list.data?.items ?? []

  if (!config) {
    return <div className="text-red-600">Module không tồn tại: {kind}</div>
  }

  return (
    <div className="space-y-4">
      <PageHeader title={config.title} description={config.description} />

      <div className="rounded-lg border bg-amber-50/50 p-3 text-sm text-amber-900">
        ⚠️ <strong>Skeleton Phase 1 (S38):</strong> Read-only list. Form tạo + workflow Approve/Reject defer Phase 11 polish.
        Em chủ trì kích hoạt full ApproveV2 wire khi anh main yêu cầu.
      </div>

      <div className="rounded-lg border bg-card">
        <table className="w-full text-sm">
          <thead className="border-b bg-muted/50">
            <tr>
              {config.columns.map((c) => (
                <th key={c.key} className="px-4 py-2 text-left font-medium">{c.label}</th>
              ))}
              <th className="px-4 py-2 text-left font-medium">Trạng thái</th>
            </tr>
          </thead>
          <tbody>
            {list.isLoading && (
              <tr>
                <td colSpan={config.columns.length + 1} className="px-4 py-8 text-center text-muted-foreground">
                  Đang tải...
                </td>
              </tr>
            )}
            {!list.isLoading && items.length === 0 && (
              <tr>
                <td colSpan={config.columns.length + 1} className="px-4 py-8 text-center text-muted-foreground">
                  <Icon className="mx-auto h-8 w-8 mb-2 opacity-50" />
                  Chưa có dữ liệu.
                </td>
              </tr>
            )}
            {items.map((item: any) => (
              <tr key={item.id} className="border-b">
                {config.columns.map((c) => (
                  <td key={c.key} className="px-4 py-2">{c.render(item)}</td>
                ))}
                <td className="px-4 py-2">
                  <span
                    className={cn(
                      'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium',
                      WORKFLOW_APP_STATUS_BADGE[item.status],
                    )}
                  >
                    {WORKFLOW_APP_STATUS_LABELS[item.status]}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}