solution-erp/fe-user/src/pages/master/ProjectsPage.tsx

import { useState, type FormEvent } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { Pencil, Plus, Trash2 } from 'lucide-react'
import { toast } from 'sonner'
import { PageHeader } from '@/components/PageHeader'
import { DataTable, Pagination, type Column } from '@/components/DataTable'
import { PermissionGuard } from '@/components/PermissionGuard'
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 { MenuKeys } from '@/lib/menuKeys'
import type { Paged, Project } from '@/types/master'

type FormState = {
  id?: string
  code: string
  name: string
  startDate: string
  endDate: string
  budgetTotal: string
  note: string
}

const emptyForm: FormState = { code: '', name: '', startDate: '', endDate: '', budgetTotal: '', note: '' }

const fmtMoney = (v: number | null) => (v == null ? '—' : v.toLocaleString('vi-VN'))
const fmtDate = (s: string | null) => (s ? new Date(s).toLocaleDateString('vi-VN') : '—')

export function ProjectsPage() {
  const qc = useQueryClient()
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState('')
  const [sortBy, setSortBy] = useState<string | undefined>()
  const [sortDesc, setSortDesc] = useState(true)
  const [open, setOpen] = useState(false)
  const [form, setForm] = useState<FormState>(emptyForm)
  const isEdit = !!form.id

  const list = useQuery({
    queryKey: ['projects', { page, search, sortBy, sortDesc }],
    queryFn: async () => {
      const res = await api.get<Paged<Project>>('/projects', {
        params: { page, pageSize: 20, search: search || undefined, sortBy, sortDesc },
      })
      return res.data
    },
  })

  const mutate = useMutation({
    mutationFn: async (d: FormState) => {
      const payload = {
        id: d.id,
        code: d.code,
        name: d.name,
        startDate: d.startDate || null,
        endDate: d.endDate || null,
        managerUserId: null,
        budgetTotal: d.budgetTotal ? Number(d.budgetTotal) : null,
        note: d.note || null,
      }
      if (d.id) await api.put(`/projects/${d.id}`, payload)
      else await api.post('/projects', payload)
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['projects'] })
      toast.success(isEdit ? 'Đã cập nhật dự án' : 'Đã thêm dự án')
      setOpen(false)
      setForm(emptyForm)
    },
    onError: err => toast.error(getErrorMessage(err)),
  })

  const remove = useMutation({
    mutationFn: (id: string) => api.delete(`/projects/${id}`),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['projects'] })
      toast.success('Đã xóa')
    },
    onError: err => toast.error(getErrorMessage(err)),
  })

  function openEdit(p: Project) {
    setForm({
      id: p.id,
      code: p.code,
      name: p.name,
      startDate: p.startDate ? p.startDate.slice(0, 10) : '',
      endDate: p.endDate ? p.endDate.slice(0, 10) : '',
      budgetTotal: p.budgetTotal?.toString() ?? '',
      note: p.note ?? '',
    })
    setOpen(true)
  }

  const columns: Column<Project>[] = [
    { key: 'code', header: 'Mã DA', sortable: true, render: p => <span className="font-mono text-xs">{p.code}</span>, width: 'w-32' },
    { key: 'name', header: 'Tên dự án', sortable: true, render: p => p.name },
    { key: 'startDate', header: 'Bắt đầu', render: p => fmtDate(p.startDate), width: 'w-32' },
    { key: 'endDate', header: 'Kết thúc', render: p => fmtDate(p.endDate), width: 'w-32' },
    { key: 'budgetTotal', header: 'Ngân sách', align: 'right', render: p => fmtMoney(p.budgetTotal) },
    {
      key: 'actions',
      header: '',
      align: 'right',
      width: 'w-28',
      render: p => (
        <div className="flex justify-end gap-1">
          <PermissionGuard menuKey={MenuKeys.Projects} action="Update">
            <Button size="sm" variant="ghost" onClick={() => openEdit(p)}>
              <Pencil className="h-3.5 w-3.5" />
            </Button>
          </PermissionGuard>
          <PermissionGuard menuKey={MenuKeys.Projects} action="Delete">
            <Button
              size="sm"
              variant="ghost"
              onClick={() => {
                if (confirm(`Xóa dự án "${p.name}"?`)) remove.mutate(p.id)
              }}
            >
              <Trash2 className="h-3.5 w-3.5 text-red-500" />
            </Button>
          </PermissionGuard>
        </div>
      ),
    },
  ]

  return (
    <div className="p-6">
      <PageHeader
        title="Dự án"
        description="Quản lý các dự án xây dựng — tham chiếu trong mã HĐ"
        actions={
          <PermissionGuard menuKey={MenuKeys.Projects} action="Create">
            <Button onClick={() => { setForm(emptyForm); setOpen(true) }}>
              <Plus className="h-4 w-4" />
              Thêm dự án
            </Button>
          </PermissionGuard>
        }
      />

      <div className="mb-3 flex gap-2">
        <Input
          placeholder="Tìm theo mã, tên…"
          value={search}
          onChange={e => { setSearch(e.target.value); setPage(1) }}
          className="max-w-sm"
        />
      </div>

      <DataTable
        columns={columns}
        rows={list.data?.items ?? []}
        getRowKey={p => p.id}
        isLoading={list.isLoading}
        sortBy={sortBy}
        sortDesc={sortDesc}
        onSortChange={(k, d) => { setSortBy(k); setSortDesc(d) }}
      />
      <Pagination page={page} pageSize={20} total={list.data?.total ?? 0} onChange={setPage} />

      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title={isEdit ? 'Sửa dự án' : 'Thêm dự án mới'}
        size="md"
        footer={
          <>
            <Button variant="outline" onClick={() => setOpen(false)}>Hủy</Button>
            <Button onClick={(e: FormEvent) => { e.preventDefault(); mutate.mutate(form) }} disabled={mutate.isPending}>
              {mutate.isPending ? 'Đang lưu…' : 'Lưu'}
            </Button>
          </>
        }
      >
        <form
          className="grid grid-cols-2 gap-4"
          onSubmit={e => { e.preventDefault(); mutate.mutate(form) }}
        >
          <div className="space-y-1.5">
            <Label>Mã dự án *</Label>
            <Input value={form.code} onChange={e => setForm({ ...form, code: e.target.value })} required />
          </div>
          <div className="space-y-1.5">
            <Label>Ngân sách (VND)</Label>
            <Input type="number" value={form.budgetTotal} onChange={e => setForm({ ...form, budgetTotal: e.target.value })} />
          </div>
          <div className="col-span-2 space-y-1.5">
            <Label>Tên dự án *</Label>
            <Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required />
          </div>
          <div className="space-y-1.5">
            <Label>Ngày bắt đầu</Label>
            <Input type="date" value={form.startDate} onChange={e => setForm({ ...form, startDate: e.target.value })} />
          </div>
          <div className="space-y-1.5">
            <Label>Ngày kết thúc</Label>
            <Input type="date" value={form.endDate} onChange={e => setForm({ ...form, endDate: e.target.value })} />
          </div>
          <div className="col-span-2 space-y-1.5">
            <Label>Ghi chú</Label>
            <Textarea rows={3} value={form.note} onChange={e => setForm({ ...form, note: e.target.value })} />
          </div>
        </form>
      </Dialog>
    </div>
  )
}