'use client'

import { useEffect, useState } from 'react'

import type { PaginationListColumnType } from '@/types'
import PaginatedList from '@/components/PaginatedList'
import PageNavbar from '@/components/layouts/PageNavbar'
import { TableSkeleton } from '@/components/feedback/LoadingState'
import { fetchAllCities, type City } from '@/services/geography'

const columns: PaginationListColumnType[] = [
  {
    field: 'name',
    label: 'نام شهر',
    filterable: false,
    type: 'text',
    sortable: false,
  },
  // ستون استان فعلاً نمایش داده نمی‌شود؛ مدیریت موقعیت فقط بر اساس شهر است.
  // {
  //   field: 'provinceId',
  //   label: 'شناسه استان',
  //   filterable: false,
  //   type: 'number',
  //   sortable: false,
  // },
  {
    field: 'lat',
    label: 'عرض جغرافیایی',
    filterable: false,
    type: 'number',
    sortable: false,
  },
  {
    field: 'lng',
    label: 'طول جغرافیایی',
    filterable: false,
    type: 'number',
    sortable: false,
  },
]

const CitiesPage = () => {
  const [cities, setCities] = useState<City[]>([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    let isMounted = true

    const loadCities = async () => {
      setIsLoading(true)
      try {
        const rows = await fetchAllCities()

        if (isMounted) setCities(rows)
      } finally {
        if (isMounted) setIsLoading(false)
      }
    }

    void loadCities()

    return () => {
      isMounted = false
    }
  }, [])

  return (
    <section className="h-full w-full text-right">
      <PageNavbar pageTitle="شهرها" />
      <div className="admin-page-container space-y-4">
        {/*
          GET /geography/cities and GET /geography/provinces/:id/cities are
          both flat/unpaginated, with no server-side filtering -- this
          native select re-fetches a different flat list on change instead
          of relying on PaginatedList's (server-driven) filter row, which
          has nothing to talk to here. Table columns are non-filterable/
          non-sortable for the same reason. The pre-disable province-filter
          dropdown (a native <select> bound to `selectedProvinceId`) is
          preserved in git history (blame this file), not kept commented
          out here.
        */}

        {isLoading ? (
          <div className="admin-surface overflow-hidden">
            <TableSkeleton />
          </div>
        ) : (
          <PaginatedList
            columns={columns}
            staticData={cities}
          />
        )}
      </div>
    </section>
  )
}

export default CitiesPage