import { useParams, Link } from 'react-router-dom';
import { articles } from '../data/articles';
import ArticleCard from '../components/ArticleCard';
import SEO from '../components/SEO';
import { ChevronRight } from 'lucide-react';

import { useLanguage } from '../contexts/LanguageContext';
import { CATEGORY_MAP } from '../constants';

export default function CategoryPage() {
  const { categorySlug } = useParams();
  const { lang } = useLanguage();
  
  const getCategoryData = (slug: string) => {
    const entry = Object.entries(CATEGORY_MAP).find(([_, value]) => value.slug === slug);
    
    if (entry) {
      const [originalName, data] = entry;
      return {
        name: data.name,
        originalName: originalName,
        description: `Deep dives, case studies and tactical analysis on ${data.name.toLowerCase()}.`
      };
    }

    return { 
      name: slug.charAt(0).toUpperCase() + slug.slice(1).replace(/-/g, ' '), 
      originalName: slug,
      description: 'Artigos e análises sobre o ecossistema digital.' 
    };
  };

  const { name: categoryName, originalName, description: categoryDescription } = getCategoryData(categorySlug || '');
  
  const filteredArticles = articles.filter(a => {
    // If we have a map entry, match by original category name
    if (originalName) {
      return a.category === originalName;
    }
    // Fallback strategy
    const slugfiedCategory = a.category.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, '-');
    return slugfiedCategory === categorySlug;
  });

  return (
    <>
      <SEO 
        title={`Artigos sobre ${categoryName}`}
        description={`Confira guias e dicas exclusivas sobre ${categoryName} em nosso blog de autoridade SEO.`}
      />

      <div className="bg-white py-20 border-b border-slate-100">
        <div className="mx-auto max-w-7xl px-4">
          <div className="flex items-center gap-3 text-blue-600 font-bold uppercase tracking-[0.2em] text-[10px] mb-6">
            <div className="h-[1px] w-6 bg-blue-600" />
            <span>Arquivo Editorial</span>
          </div>
          <h1 className="text-6xl font-serif font-bold text-slate-950 tracking-tighter">{categoryName}</h1>
          <p className="text-xl text-slate-500 mt-6 max-w-2xl leading-relaxed">{categoryDescription}</p>
        </div>
      </div>

      <div className="py-24 bg-[#FCFCFC]">
        <div className="mx-auto max-w-7xl px-4">
          {filteredArticles.length > 0 ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-20">
              {filteredArticles.map(article => (
                <ArticleCard key={article.id} article={article} />
              ))}
            </div>
          ) : (
            <div className="text-center py-20">
              <h2 className="text-2xl font-bold text-gray-400">Nenhum artigo encontrado nesta categoria.</h2>
              <Link to="/" className="text-blue-600 font-bold mt-4 inline-block hover:underline">Voltar para a Home</Link>
            </div>
          )}
        </div>
      </div>
    </>
  );
}
