'use client';

import { useState, useEffect } from 'react';
import { api } from '@/lib/api';
import { useAuth } from '@/components/auth-context';
import { DataTable } from '@/components/data-table/DataTable';
import BackToDashboard from '@/components/BackToDashboard';
import { useRequirePermission } from '@/lib/useRequirePermission';

interface Country {
  id: number;
  name: string;
  iso2: string;
  iso3: string;
  phone_code: string;
  region: string;
  subregion: string;
  status: number;
}

export default function CountryPage() {
  useRequirePermission('master_data.view_country');
  const { user } = useAuth();
  const [countries, setCountries] = useState<Country[]>([]);
  const [loading, setLoading] = useState(true);

  const columns = [
    {
      id: 'srNo',
      header: 'Country ID',
      cell: ({ row }: any) => (
        <span className="font-semibold text-slate-500 dark:text-slate-400">
          {row.original.id}
        </span>
      ),
    },
    {
      accessorKey: 'name',
      header: 'Country Name',
      cell: ({ row }: any) => (
        <p className="font-extrabold text-slate-800 dark:text-white text-sm">
          {row.original.name}
        </p>
      ),
    },
    {
      accessorKey: 'iso2',
      header: 'ISO2',
      cell: ({ row }: any) => (
        <span className="text-slate-600 dark:text-slate-400 font-semibold">
          {row.original.iso2 || '-'}
        </span>
      ),
    },
    {
      accessorKey: 'iso3',
      header: 'ISO3',
      cell: ({ row }: any) => (
        <span className="text-slate-600 dark:text-slate-400 font-semibold">
          {row.original.iso3 || '-'}
        </span>
      ),
    },
    {
      accessorKey: 'phone_code',
      header: 'Phone Code',
      cell: ({ row }: any) => (
        <span className="text-slate-600 dark:text-slate-400 font-semibold">
          {row.original.phone_code || '-'}
        </span>
      ),
    },
    {
      accessorKey: 'region',
      header: 'Region',
      cell: ({ row }: any) => (
        <span className="text-slate-600 dark:text-slate-400 font-semibold">
          {row.original.region || '-'}
        </span>
      ),
    },
    {
      accessorKey: 'subregion',
      header: 'Sub Region',
      cell: ({ row }: any) => (
        <span className="text-slate-600 dark:text-slate-400 font-semibold">
          {row.original.subregion || '-'}
        </span>
      ),
    },
    {
      accessorKey: 'status',
      header: 'Status',
      cell: ({ row }: any) => {
        const val = row.original.status;
        return (
          <span
            className={`text-xs px-2.5 py-1 rounded-full font-bold border ${
              val === 1
                ? 'bg-emerald-50 dark:bg-emerald-950/50 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800'
                : 'bg-slate-100 dark:bg-slate-800 text-slate-650 dark:text-slate-450 border-slate-205 dark:border-slate-705'
            }`}
          >
            {val === 1 ? 'Active' : 'Inactive'}
          </span>
        );
      },
    },
  ];

  const loadAll = async () => {
    setLoading(true);
    try {
      // page_size=2000 (backend max) fetches all ~250 countries in one call.
      const countriesRes = (await api.get('/master-data/countries?page_size=2000')) as any;
      const countriesData = countriesRes.data;
      if (Array.isArray(countriesData)) {
        setCountries(countriesData);
      } else if (countriesData && Array.isArray(countriesData.results)) {
        setCountries(countriesData.results);
      } else {
        setCountries([]);
      }
    } catch (err) {
      console.error('Failed to load countries:', err);
      setCountries([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (!user) return;
    loadAll();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user]);

  if (!user) return null;

  return (
    <main className="flex-1 p-8 overflow-y-auto w-full space-y-6 max-w-7xl mx-auto">
      <BackToDashboard />
      <div>
        <p className="text-sm text-slate-500 dark:text-slate-400">
          View the master list of countries configuration.
        </p>
      </div>
      <DataTable
        columns={columns}
        data={countries}
        loading={loading}
        searchPlaceholder="Search countries by name..."
        emptyStateTitle="No Countries Found"
        emptyStateDescription="The countries master database table is currently empty."
      />
    </main>
  );
}