'use client';

import { useState } from 'react';
import InternalPageTemplate from '@/components/InternalPageTemplate';
import { SCRAPING_COUNTRIES } from '@/lib/countries';
import { useTranslations } from 'next-intl';

const grouped = SCRAPING_COUNTRIES.reduce<Record<string, typeof SCRAPING_COUNTRIES>>((acc, c) => {
  const letter = c.name[0].toUpperCase();
  if (!acc[letter]) acc[letter] = [];
  acc[letter].push(c);
  return acc;
}, {});

const letters = Object.keys(grouped).sort();

export default function CountriesPage() {
  const t = useTranslations('pages.countries');
  const [query, setQuery] = useState('');

  const filtered = query.trim()
    ? SCRAPING_COUNTRIES.filter(c =>
        c.name.toLowerCase().includes(query.toLowerCase()) ||
        c.code.toLowerCase().includes(query.toLowerCase())
      )
    : null;

  return (
    <InternalPageTemplate>
      {/* Header */}
      <div className="mb-10">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">{t('heading')}</h1>
        <p className="text-gray-500 text-lg max-w-2xl leading-relaxed">
          {t('subheading', { count: SCRAPING_COUNTRIES.length })}
        </p>
      </div>

      {/* Search */}
      <div className="mb-10">
        <input
          type="text"
          placeholder={t('searchPlaceholder')}
          value={query}
          onChange={e => setQuery(e.target.value)}
          className="w-full max-w-sm border border-gray-200 rounded-lg px-4 py-2.5 text-sm outline-none focus:border-brand-purple focus:ring-1 focus:ring-brand-purple transition"
        />
      </div>

      {/* Filtered results */}
      {filtered ? (
        filtered.length === 0 ? (
          <p className="text-gray-400 text-sm">{t('noResults', { query })}</p>
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
            {filtered.map(c => (
              <div key={c.code} className="flex items-center gap-2.5 bg-gray-50 border border-gray-100 rounded-xl px-3 py-2.5">
                <span className="text-xl leading-none">{c.flag}</span>
                <span className="text-sm text-gray-700 truncate">{c.name}</span>
              </div>
            ))}
          </div>
        )
      ) : (
        /* A–Z grouped list */
        <div className="flex flex-col gap-10">
          {letters.map(letter => (
            <div key={letter}>
              <h2 className="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3 border-b border-gray-100 pb-1">
                {letter}
              </h2>
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
                {grouped[letter].map(c => (
                  <div key={c.code} className="flex items-center gap-2.5 bg-gray-50 border border-gray-100 rounded-xl px-3 py-2.5">
                    <span className="text-xl leading-none">{c.flag}</span>
                    <span className="text-sm text-gray-700 truncate">{c.name}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </InternalPageTemplate>
  );
}