goodgo-platform/apps/web/app/[locale]/(dashboard)/projects/page.tsx

'use client';

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { Pencil, Plus, Trash2 } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import * as React from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Select } from '@/components/ui/select';
import { formatPrice } from '@/lib/currency';
import {
  duAnApi,
  PROJECT_STATUS_COLORS,
  PROJECT_STATUS_LABELS,
  type ProjectStatus,
  type SearchProjectsParams,
} from '@/lib/du-an-api';
import { shimmerBlurDataURL } from '@/lib/image-blur';

const STATUS_OPTIONS: { value: ProjectStatus; label: string }[] = [
  { value: 'PLANNING', label: PROJECT_STATUS_LABELS.PLANNING },
  { value: 'UNDER_CONSTRUCTION', label: PROJECT_STATUS_LABELS.UNDER_CONSTRUCTION },
  { value: 'HANDOVER', label: PROJECT_STATUS_LABELS.HANDOVER },
  { value: 'COMPLETED', label: PROJECT_STATUS_LABELS.COMPLETED },
];

const INITIAL_FILTERS = {
  q: '',
  status: '' as '' | ProjectStatus,
  city: '',
  page: 1,
};

export default function ProjectsAdminPage() {
  const [filters, setFilters] = React.useState(INITIAL_FILTERS);

  const queryParams = React.useMemo<SearchProjectsParams>(() => {
    const params: SearchProjectsParams = { page: filters.page, limit: 12 };
    if (filters.q) params.q = filters.q;
    if (filters.status) params.status = filters.status;
    if (filters.city) params.city = filters.city;
    return params;
  }, [filters]);

  const { data: result, isLoading } = useQuery({
    queryKey: ['admin-projects', queryParams],
    queryFn: () => duAnApi.search(queryParams),
    staleTime: 30_000,
  });

  const queryClient = useQueryClient();
  const deleteMutation = useMutation({
    mutationFn: (id: string) => duAnApi.delete(id),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['admin-projects'] }),
  });

  const handleDelete = (id: string, name: string) => {
    if (!window.confirm(`Xoá dự án "${name}"? Thao tác này không thể hoàn tác.`)) return;
    deleteMutation.mutate(id);
  };

  const resetFilters = () => setFilters(INITIAL_FILTERS);

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold">Quản lý dự án</h1>
          <p className="text-sm text-muted-foreground">
            Tạo, chỉnh sửa và xoá dự án bất động sản.
          </p>
        </div>
        <Link href="/projects/new">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            Thêm dự án
          </Button>
        </Link>
      </div>

      {/* Filters */}
      <div className="flex flex-wrap items-center gap-3">
        <Input
          value={filters.q}
          onChange={(e) => setFilters((f) => ({ ...f, q: e.target.value, page: 1 }))}
          placeholder="Tìm theo tên dự án..."
          className="w-64"
        />
        <Select
          value={filters.status}
          onChange={(e) =>
            setFilters((f) => ({
              ...f,
              status: e.target.value as '' | ProjectStatus,
              page: 1,
            }))
          }
          className="w-48"
        >
          <option value="">Tất cả trạng thái</option>
          {STATUS_OPTIONS.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </Select>
        <Input
          value={filters.city}
          onChange={(e) => setFilters((f) => ({ ...f, city: e.target.value, page: 1 }))}
          placeholder="Thành phố"
          className="w-48"
        />
        <Button variant="outline" size="sm" onClick={resetFilters}>
          Đặt lại
        </Button>
      </div>

      {/* Error banner */}
      {deleteMutation.isError && (
        <div className="flex items-center justify-between gap-2 rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
          <p>Không thể xoá dự án. Vui lòng thử lại.</p>
          <button
            type="button"
            onClick={() => deleteMutation.reset()}
            className="text-xs underline"
          >
            Đóng
          </button>
        </div>
      )}

      {/* Content */}
      {isLoading ? (
        <div className="flex min-h-[300px] items-center justify-center">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
        </div>
      ) : !result || result.data.length === 0 ? (
        <div className="flex min-h-[300px] flex-col items-center justify-center text-muted-foreground">
          <p>Chưa có dự án nào</p>
          <Link href="/projects/new" className="mt-2">
            <Button variant="outline" size="sm">
              Thêm dự án đầu tiên
            </Button>
          </Link>
        </div>
      ) : (
        <Card>
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b text-left">
                    <th className="p-3 font-medium">Ảnh</th>
                    <th className="p-3 font-medium">Tên dự án</th>
                    <th className="p-3 font-medium">Chủ đầu tư</th>
                    <th className="p-3 font-medium">Thành phố / Quận</th>
                    <th className="p-3 font-medium text-right">Tổng căn</th>
                    <th className="p-3 font-medium text-right">Giá từ</th>
                    <th className="p-3 font-medium text-center">Trạng thái</th>
                    <th className="p-3 font-medium text-right">Thao tác</th>
                  </tr>
                </thead>
                <tbody>
                  {result.data.map((project) => (
                    <tr
                      key={project.id}
                      className="border-b last:border-0 transition-colors hover:bg-accent/50"
                    >
                      <td className="p-3">
                        <div className="relative h-10 w-14 flex-shrink-0 overflow-hidden rounded bg-muted">
                          {project.thumbnailUrl ? (
                            <Image
                              src={project.thumbnailUrl}
                              alt={project.name}
                              fill
                              sizes="56px"
                              className="object-cover"
                              placeholder="blur"
                              blurDataURL={shimmerBlurDataURL()}
                            />
                          ) : (
                            <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
                              N/A
                            </div>
                          )}
                        </div>
                      </td>
                      <td className="p-3">
                        <a
                          href={`/du-an/${project.slug}`}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="font-medium hover:text-primary hover:underline"
                        >
                          {project.name}
                        </a>
                      </td>
                      <td className="p-3 text-muted-foreground">
                        {project.developer.name}
                      </td>
                      <td className="p-3 text-muted-foreground">
                        {project.city}
                        {project.district ? ` / ${project.district}` : ''}
                      </td>
                      <td className="p-3 text-right">{project.totalUnits}</td>
                      <td className="p-3 text-right font-medium text-primary">
                        {project.minPrice ? formatPrice(project.minPrice) : '—'}
                      </td>
                      <td className="p-3 text-center">
                        <Badge className={PROJECT_STATUS_COLORS[project.status]}>
                          {PROJECT_STATUS_LABELS[project.status]}
                        </Badge>
                      </td>
                      <td className="p-3 text-right">
                        <div className="flex justify-end gap-2">
                          <Link href={`/projects/${project.id}/edit`}>
                            <Button variant="outline" size="sm">
                              <Pencil className="mr-1 h-3.5 w-3.5" />
                              Sửa
                            </Button>
                          </Link>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleDelete(project.id, project.name)}
                            disabled={deleteMutation.isPending}
                            className="text-destructive hover:text-destructive"
                          >
                            <Trash2 className="mr-1 h-3.5 w-3.5" />
                            Xoá
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Pagination */}
      {result && result.totalPages > 1 && (
        <div className="flex items-center justify-center gap-2">
          <Button
            variant="outline"
            size="sm"
            disabled={filters.page <= 1}
            onClick={() => setFilters((f) => ({ ...f, page: f.page - 1 }))}
          >
            Trước
          </Button>
          <span className="text-sm text-muted-foreground">
            Trang {result.page} / {result.totalPages}
          </span>
          <Button
            variant="outline"
            size="sm"
            disabled={filters.page >= result.totalPages}
            onClick={() => setFilters((f) => ({ ...f, page: f.page + 1 }))}
          >
            Tiếp
          </Button>
        </div>
      )}
    </div>
  );
}