solution-erp/fe-user/src/pages/office/MeetingRoomsPage.tsx

// Phòng họp (Meeting Rooms catalog) — Phase 10.2 G-O2 (S36 2026-05-28).
// Catalog CRUD admin-only — Pattern Master/Catalogs/CatalogsPage table CRUD.
// File này MIRROR SHA256 identical với fe-user counterpart.
// Pattern 16-bis 4-place mirror foundation (7× cumulative).
import { useMemo, useState, type FormEvent } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { Building2, Pencil, Plus, Search, Trash2 } from 'lucide-react'
import { toast } from 'sonner'
import { PageHeader } from '@/components/PageHeader'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Label } from '@/components/ui/Label'
import { Textarea } from '@/components/ui/Textarea'
import { Dialog } from '@/components/ui/Dialog'
import { api } from '@/lib/api'
import { getErrorMessage } from '@/lib/apiError'
import { cn } from '@/lib/cn'
import type { MeetingRoomCreateInput, MeetingRoomDto, MeetingRoomUpdateInput } from '@/types/meeting'

type FormState = {
  id?: string
  code: string
  name: string
  capacity: number | ''
  location: string
  equipment: string
  isActive: boolean
}

const EMPTY_FORM: FormState = {
  code: '',
  name: '',
  capacity: '',
  location: '',
  equipment: '',
  isActive: true,
}

export function MeetingRoomsPage() {
  const qc = useQueryClient()
  const [search, setSearch] = useState('')
  const [showInactive, setShowInactive] = useState(false)
  const [open, setOpen] = useState(false)
  const [form, setForm] = useState<FormState>(EMPTY_FORM)
  const isEdit = !!form.id

  const list = useQuery({
    queryKey: ['meeting-rooms', { search, showInactive }],
    queryFn: async () =>
      (await api.get<MeetingRoomDto[]>('/meeting-rooms', {
        params: {
          search: search || undefined,
          isActiveOnly: showInactive ? undefined : true,
        },
      })).data,
  })

  const save = useMutation({
    mutationFn: async () => {
      if (!form.code.trim() || !form.name.trim() || form.capacity === '' || Number(form.capacity) <= 0) {
        throw new Error('Vui lòng nhập đầy đủ Mã, Tên, Sức chứa (> 0)')
      }
      if (isEdit) {
        const body: MeetingRoomUpdateInput & { id: string } = {
          id: form.id!,
          code: form.code.trim(),
          name: form.name.trim(),
          capacity: Number(form.capacity),
          location: form.location.trim() || null,
          equipment: form.equipment.trim() || null,
          isActive: form.isActive,
        }
        await api.put(`/meeting-rooms/${form.id}`, body)
      } else {
        const body: MeetingRoomCreateInput = {
          code: form.code.trim(),
          name: form.name.trim(),
          capacity: Number(form.capacity),
          location: form.location.trim() || null,
          equipment: form.equipment.trim() || null,
        }
        await api.post('/meeting-rooms', body)
      }
    },
    onSuccess: () => {
      toast.success(isEdit ? 'Đã lưu phòng họp' : 'Đã thêm phòng họp')
      qc.invalidateQueries({ queryKey: ['meeting-rooms'] })
      setOpen(false)
      setForm(EMPTY_FORM)
    },
    onError: err => toast.error(getErrorMessage(err)),
  })

  const remove = useMutation({
    mutationFn: async (id: string) => {
      await api.delete(`/meeting-rooms/${id}`)
    },
    onSuccess: () => {
      toast.success('Đã tắt phòng họp (IsActive=false)')
      qc.invalidateQueries({ queryKey: ['meeting-rooms'] })
    },
    onError: err => toast.error(getErrorMessage(err)),
  })

  function openCreate() {
    setForm(EMPTY_FORM)
    setOpen(true)
  }

  function openEdit(row: MeetingRoomDto) {
    setForm({
      id: row.id,
      code: row.code,
      name: row.name,
      capacity: row.capacity,
      location: row.location ?? '',
      equipment: row.equipment ?? '',
      isActive: row.isActive,
    })
    setOpen(true)
  }

  const filtered = useMemo(() => list.data ?? [], [list.data])
  const total = filtered.length

  return (
    <div className="p-6">
      <PageHeader
        title={
          <span className="flex items-center gap-2">
            <Building2 className="h-5 w-5" />
            Phòng họp
          </span>
        }
        description={list.isLoading ? 'Đang tải…' : `${total} phòng họp`}
        actions={
          <Button onClick={openCreate}>
            <Plus className="h-4 w-4" />
            Thêm phòng họp
          </Button>
        }
      />

      {/* Filter row */}
      <div className="mb-4 flex flex-col gap-2 rounded-lg border border-slate-200 bg-white p-3 shadow-sm sm:flex-row sm:items-center">
        <div className="relative max-w-md flex-1">
          <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" />
          <Input
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Tìm theo mã / tên / vị trí…"
            className="pl-8"
          />
        </div>
        <label className="flex items-center gap-2 text-sm text-slate-600">
          <input
            type="checkbox"
            checked={showInactive}
            onChange={e => setShowInactive(e.target.checked)}
            className="h-4 w-4 accent-brand-600"
          />
          Hiện cả phòng đã tắt
        </label>
      </div>

      {/* Table */}
      <div className="overflow-x-auto rounded-lg border border-slate-200 bg-white">
        <table className="min-w-full text-sm">
          <thead className="bg-slate-50 text-[11px] uppercase tracking-wider text-slate-500">
            <tr>
              <th className="px-3 py-2 text-left">Mã</th>
              <th className="px-3 py-2 text-left">Tên</th>
              <th className="px-3 py-2 text-left">Sức chứa</th>
              <th className="px-3 py-2 text-left">Vị trí</th>
              <th className="px-3 py-2 text-left">Thiết bị</th>
              <th className="px-3 py-2 text-left">Trạng thái</th>
              <th className="w-20 px-3 py-2"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {list.isLoading && (
              <tr><td colSpan={7} className="p-6 text-center text-slate-400">Đang tải…</td></tr>
            )}
            {!list.isLoading && total === 0 && (
              <tr><td colSpan={7} className="p-6 text-center text-slate-400">Chưa có phòng họp — bấm Thêm để tạo mới.</td></tr>
            )}
            {filtered.map(row => (
              <tr key={row.id} className={cn('hover:bg-slate-50', !row.isActive && 'opacity-60')}>
                <td className="px-3 py-2 font-mono text-xs">{row.code}</td>
                <td className="px-3 py-2 font-medium text-slate-800">{row.name}</td>
                <td className="px-3 py-2 text-xs text-slate-600">{row.capacity} chỗ</td>
                <td className="px-3 py-2 text-xs text-slate-600">{row.location ?? '—'}</td>
                <td className="px-3 py-2 text-xs text-slate-600">{row.equipment ?? '—'}</td>
                <td className="px-3 py-2">
                  {row.isActive ? (
                    <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] text-emerald-700">Đang dùng</span>
                  ) : (
                    <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] text-slate-500">Đã tắt</span>
                  )}
                </td>
                <td className="px-3 py-2">
                  <div className="flex justify-end gap-1">
                    <button
                      onClick={() => openEdit(row)}
                      title="Sửa"
                      className="rounded p-1 text-slate-500 hover:bg-slate-100 hover:text-brand-600"
                    >
                      <Pencil className="h-3.5 w-3.5" />
                    </button>
                    {row.isActive && (
                      <button
                        onClick={() => {
                          if (confirm(`Tắt phòng "${row.name}"? (IsActive=false — booking cũ vẫn giữ.)`)) {
                            remove.mutate(row.id)
                          }
                        }}
                        title="Tắt phòng"
                        className="rounded p-1 text-slate-500 hover:bg-slate-100 hover:text-red-600"
                        disabled={remove.isPending}
                      >
                        <Trash2 className="h-3.5 w-3.5" />
                      </button>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title={`${isEdit ? 'Sửa' : 'Thêm'} phòng họp`}
        size="lg"
        footer={
          <>
            <Button variant="outline" onClick={() => setOpen(false)}>Hủy</Button>
            <Button
              onClick={(e: FormEvent) => { e.preventDefault(); save.mutate() }}
              disabled={save.isPending}
            >
              {save.isPending ? 'Đang lưu…' : (isEdit ? 'Lưu' : 'Thêm')}
            </Button>
          </>
        }
      >
        <form
          onSubmit={(e: FormEvent) => { e.preventDefault(); save.mutate() }}
          className="grid grid-cols-1 gap-3 sm:grid-cols-2"
        >
          <div className="space-y-1">
            <Label>Mã *</Label>
            <Input
              value={form.code}
              onChange={e => setForm(s => ({ ...s, code: e.target.value }))}
              placeholder="VD: ROOM-A1"
              required
              maxLength={50}
            />
          </div>
          <div className="space-y-1">
            <Label>Tên *</Label>
            <Input
              value={form.name}
              onChange={e => setForm(s => ({ ...s, name: e.target.value }))}
              placeholder="VD: Phòng họp tầng 3"
              required
              maxLength={200}
            />
          </div>
          <div className="space-y-1">
            <Label>Sức chứa *</Label>
            <Input
              type="number"
              min={1}
              value={form.capacity}
              onChange={e => setForm(s => ({ ...s, capacity: e.target.value === '' ? '' : Number(e.target.value) }))}
              placeholder="10"
              required
            />
          </div>
          <div className="space-y-1">
            <Label>Vị trí</Label>
            <Input
              value={form.location}
              onChange={e => setForm(s => ({ ...s, location: e.target.value }))}
              placeholder="VD: Tầng 3, Toà nhà A"
              maxLength={200}
            />
          </div>
          <div className="col-span-1 space-y-1 sm:col-span-2">
            <Label>Thiết bị</Label>
            <Textarea
              rows={2}
              value={form.equipment}
              onChange={e => setForm(s => ({ ...s, equipment: e.target.value }))}
              placeholder="VD: Máy chiếu, bảng trắng, loa Bluetooth..."
            />
          </div>
          {isEdit && (
            <div className="col-span-1 space-y-1 sm:col-span-2">
              <Label>Trạng thái</Label>
              <div className="flex items-center gap-2 pt-1">
                <input
                  type="checkbox"
                  checked={form.isActive}
                  onChange={e => setForm(s => ({ ...s, isActive: e.target.checked }))}
                  className="h-4 w-4 accent-brand-600"
                />
                <span className="text-sm text-slate-600">Đang dùng (bỏ tick để tắt — booking cũ vẫn giữ)</span>
              </div>
            </div>
          )}
        </form>
      </Dialog>
    </div>
  )
}