goodgo-platform/apps/web/app/[locale]/(public)/khu-cong-nghiep/page.tsx

'use client';

import { Factory, Map as MapIcon, List, Columns } from 'lucide-react';
import * as React from 'react';
import { ParkCard } from '@/components/khu-cong-nghiep/park-card';
import { ParkFilterBar } from '@/components/khu-cong-nghiep/park-filter-bar';
import { ParkMap } from '@/components/khu-cong-nghiep/park-map';
import { Button } from '@/components/ui/button';
import { useIndustrialParksSearch } from '@/lib/hooks/use-khu-cong-nghiep';
import type { SearchIndustrialParksParams } from '@/lib/khu-cong-nghiep-api';

const PAGE_SIZE = 12;

type ViewMode = 'list' | 'map' | 'split';

export default function KhuCongNghiepPage() {
  const [filters, setFilters] = React.useState<SearchIndustrialParksParams>({
    page: 1,
    limit: PAGE_SIZE,
  });
  const [viewMode, setViewMode] = React.useState<ViewMode>('split');

  const { data, isLoading, isError } = useIndustrialParksSearch(filters);

  const handleFilterChange = (newFilters: SearchIndustrialParksParams) => {
    setFilters({ ...newFilters, limit: PAGE_SIZE });
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handlePageChange = (page: number) => {
    setFilters((prev) => ({ ...prev, page }));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <div className="mx-auto max-w-7xl px-4 py-6">
      {/* Page header */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold md:text-3xl">Khu Công Nghiệp Việt Nam</h1>
        <p className="mt-1 text-muted-foreground">
          Tìm kiếm và so sánh các khu công nghiệp trên toàn quốc
        </p>
      </div>

      {/* Filters */}
      <ParkFilterBar params={filters} onChange={handleFilterChange} />

      {/* View mode toggle */}
      <div className="mt-4 flex justify-end">
        <div className="inline-flex gap-1 rounded-lg border p-1">
          <Button
            variant={viewMode === 'list' ? 'default' : 'ghost'}
            size="sm"
            className="gap-1.5"
            onClick={() => setViewMode('list')}
            aria-pressed={viewMode === 'list'}
          >
            <List className="h-4 w-4" />
            Danh sách
          </Button>
          <Button
            variant={viewMode === 'map' ? 'default' : 'ghost'}
            size="sm"
            className="gap-1.5"
            onClick={() => setViewMode('map')}
            aria-pressed={viewMode === 'map'}
          >
            <MapIcon className="h-4 w-4" />
            Bản đồ
          </Button>
          <Button
            variant={viewMode === 'split' ? 'default' : 'ghost'}
            size="sm"
            className="hidden gap-1.5 lg:inline-flex"
            onClick={() => setViewMode('split')}
            aria-pressed={viewMode === 'split'}
          >
            <Columns className="h-4 w-4" />
            Chia đôi
          </Button>
        </div>
      </div>

      {/* Results */}
      <div className="mt-4">
        {isLoading ? (
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {Array.from({ length: 6 }).map((_, i) => (
              <div
                key={i}
                className="h-72 animate-pulse rounded-lg bg-muted"
              />
            ))}
          </div>
        ) : isError ? (
          <div className="py-12 text-center">
            <p className="text-muted-foreground">
              Không thể tải danh sách khu công nghiệp. Vui lòng thử lại.
            </p>
            <Button
              variant="outline"
              className="mt-4"
              onClick={() => setFilters({ ...filters })}
            >
              Thử lại
            </Button>
          </div>
        ) : data && data.data.length > 0 ? (
          <>
            <p className="mb-4 text-sm text-muted-foreground">
              {data.total} khu công nghiệp được tìm thấy
            </p>

            {/* Map-only view */}
            {viewMode === 'map' && (
              <ParkMap parks={data.data} className="h-[calc(100vh-260px)]" />
            )}

            {/* Split view: list left, sticky map right (lg+ only) */}
            {viewMode === 'split' && (
              <div className="grid gap-4 lg:grid-cols-2">
                <div className="overflow-auto" style={{ maxHeight: 'calc(100vh - 220px)' }}>
                  <div className="grid gap-4 sm:grid-cols-2">
                    {data.data.map((park) => (
                      <ParkCard key={park.id} park={park} />
                    ))}
                  </div>
                </div>
                <div className="hidden lg:block">
                  <ParkMap
                    parks={data.data}
                    className="sticky top-20 h-[calc(100vh-220px)]"
                  />
                </div>
              </div>
            )}

            {/* List-only view */}
            {viewMode === 'list' && (
              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {data.data.map((park) => (
                  <ParkCard key={park.id} park={park} />
                ))}
              </div>
            )}

            {/* Pagination — show in list/split mode only */}
            {viewMode !== 'map' && data.totalPages > 1 && (
              <div className="mt-8 flex items-center justify-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  disabled={filters.page === 1}
                  onClick={() => handlePageChange((filters.page || 1) - 1)}
                >
                  Trước
                </Button>
                <span className="text-sm text-muted-foreground">
                  Trang {data.page} / {data.totalPages}
                </span>
                <Button
                  variant="outline"
                  size="sm"
                  disabled={data.page >= data.totalPages}
                  onClick={() => handlePageChange((filters.page || 1) + 1)}
                >
                  Sau
                </Button>
              </div>
            )}
          </>
        ) : (
          <div className="py-12 text-center">
            <Factory className="mx-auto h-12 w-12 text-muted-foreground/30" />
            <p className="mt-4 text-lg font-medium">Không tìm thấy khu công nghiệp</p>
            <p className="mt-1 text-sm text-muted-foreground">
              Thử thay đổi bộ lọc để tìm kiếm nhiều hơn
            </p>
          </div>
        )}
      </div>
    </div>
  );
}