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

'use client';

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { ExternalLink, Pencil, Trash2 } from 'lucide-react';
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 {
  industrialApi,
  PARK_STATUS_COLORS,
  PARK_STATUS_LABELS,
  REGION_LABELS,
  type IndustrialParkStatus,
  type SearchIndustrialParksParams,
  type VietnamRegion,
} from '@/lib/khu-cong-nghiep-api';

const STATUS_OPTIONS: IndustrialParkStatus[] = [
  'PLANNING',
  'UNDER_CONSTRUCTION',
  'OPERATIONAL',
  'FULL',
];

const REGION_OPTIONS: VietnamRegion[] = ['NORTH', 'CENTRAL', 'SOUTH'];

interface FiltersState {
  q: string;
  province: string;
  status: IndustrialParkStatus | '';
  region: VietnamRegion | '';
  page: number;
}

const INITIAL_FILTERS: FiltersState = {
  q: '',
  province: '',
  status: '',
  region: '',
  page: 1,
};

export default function IndustrialParksListPage() {
  const [filters, setFilters] = React.useState<FiltersState>(INITIAL_FILTERS);

  const queryParams = React.useMemo<SearchIndustrialParksParams>(() => {
    const p: SearchIndustrialParksParams = { page: filters.page, limit: 12 };
    if (filters.q) p.q = filters.q;
    if (filters.province) p.province = filters.province;
    if (filters.status) p.status = filters.status;
    if (filters.region) p.region = filters.region;
    return p;
  }, [filters]);

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

  const queryClient = useQueryClient();
  const deleteMutation = useMutation({
    mutationFn: (id: string) => industrialApi.deletePark(id),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['admin-industrial-parks'] }),
  });

  const handleDelete = (id: string, name: string) => {
    if (!window.confirm(`Xoá KCN "${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ý KCN</h1>
          <p className="text-sm text-muted-foreground">
            Quản lý danh sách khu công nghiệp, chủ đầu tư và tình trạng lấp đầy
          </p>
        </div>
        <Link href="/industrial-parks/new">
          <Button>Thêm KCN</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, chủ đầu tư..."
          className="w-64"
        />
        <Input
          value={filters.province}
          onChange={(e) => setFilters((f) => ({ ...f, province: e.target.value, page: 1 }))}
          placeholder="Tỉnh/Thành phố"
          className="w-48"
        />
        <Select
          value={filters.region}
          onChange={(e) =>
            setFilters((f) => ({ ...f, region: e.target.value as VietnamRegion | '', page: 1 }))
          }
          className="w-40"
        >
          <option value="">Tất cả vùng</option>
          {REGION_OPTIONS.map((r) => (
            <option key={r} value={r}>
              {REGION_LABELS[r]}
            </option>
          ))}
        </Select>
        <Select
          value={filters.status}
          onChange={(e) =>
            setFilters((f) => ({
              ...f,
              status: e.target.value as IndustrialParkStatus | '',
              page: 1,
            }))
          }
          className="w-48"
        >
          <option value="">Tất cả trạng thái</option>
          {STATUS_OPTIONS.map((s) => (
            <option key={s} value={s}>
              {PARK_STATUS_LABELS[s]}
            </option>
          ))}
        </Select>
        <Button variant="outline" size="sm" onClick={resetFilters}>
          Đặt lại
        </Button>
      </div>

      {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á KCN. 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ó KCN nào</p>
          <Link href="/industrial-parks/new" className="mt-2">
            <Button variant="outline" size="sm">
              Thêm KCN đầ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">Tên KCN</th>
                    <th className="p-3 font-medium">Chủ đầu tư</th>
                    <th className="p-3 font-medium">Tỉnh</th>
                    <th className="p-3 font-medium">Vùng</th>
                    <th className="p-3 font-medium text-right">Diện tích (ha)</th>
                    <th className="p-3 font-medium text-right">Tỉ lệ lấp đầy</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((park) => (
                    <tr
                      key={park.id}
                      className="border-b last:border-0 transition-colors hover:bg-accent/50"
                    >
                      <td className="p-3">
                        <Link
                          href={`/khu-cong-nghiep/${park.slug}`}
                          target="_blank"
                          rel="noreferrer"
                          className="group inline-flex items-center gap-1 font-medium hover:text-primary"
                        >
                          <span className="truncate">{park.name}</span>
                          <ExternalLink className="h-3 w-3 opacity-60" />
                        </Link>
                        {park.nameEn && (
                          <p className="truncate text-xs text-muted-foreground">{park.nameEn}</p>
                        )}
                      </td>
                      <td className="p-3 text-muted-foreground">{park.developer}</td>
                      <td className="p-3">{park.province}</td>
                      <td className="p-3 text-xs text-muted-foreground">
                        {REGION_LABELS[park.region]}
                      </td>
                      <td className="p-3 text-right">{park.totalAreaHa.toLocaleString('vi-VN')}</td>
                      <td className="p-3 text-right">
                        {park.occupancyRate.toFixed(1)}%
                      </td>
                      <td className="p-3 text-center">
                        <Badge className={PARK_STATUS_COLORS[park.status]} variant="outline">
                          {PARK_STATUS_LABELS[park.status]}
                        </Badge>
                      </td>
                      <td className="p-3 text-right">
                        <div className="flex justify-end gap-1">
                          <Link href={`/industrial-parks/${park.id}/edit`}>
                            <Button variant="ghost" size="sm" aria-label="Sửa KCN">
                              <Pencil className="h-3.5 w-3.5" />
                            </Button>
                          </Link>
                          <Button
                            variant="ghost"
                            size="sm"
                            aria-label="Xoá KCN"
                            className="text-destructive"
                            disabled={
                              deleteMutation.isPending &&
                              deleteMutation.variables === park.id
                            }
                            onClick={() => handleDelete(park.id, park.name)}
                          >
                            <Trash2 className="h-3.5 w-3.5" />
                          </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>
  );
}