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-24 border-b border-slate-100">
        <div className="mx-auto max-w-7xl px-6">
          <div className="flex items-center gap-4 text-brand font-black uppercase tracking-[0.3em] text-[10px] mb-8">
            <div className="h-[1px] w-12 bg-brand" />
            <span>Arquivo Editorial</span>
          </div>
          <h1 className="text-6xl sm:text-8xl font-display font-black text-slate-950 tracking-[-0.04em] leading-[0.9]">{categoryName}</h1>
          <p className="text-xl text-slate-500 mt-8 max-w-2xl font-medium leading-relaxed border-l-2 border-slate-100 pl-6">{categoryDescription}</p>
        </div>
      </div>

      <div className="py-24 bg-white">
        <div className="mx-auto max-w-7xl px-6">
          {filteredArticles.length > 0 ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-20">
              {filteredArticles.map(article => (
                <ArticleCard key={article.id} article={article} />
              ))}
            </div>
          ) : (
            <div className="text-center py-32 bg-slate-50 rounded-[3rem] border border-slate-100">
              <h2 className="text-xl font-display font-black text-slate-300 uppercase tracking-widest mb-6">Nenhum insight encontrado</h2>
              <Link to="/" className="btn-primary inline-flex items-center gap-3">
                Voltar para a Home
              </Link>
            </div>
          )}
        </div>
      </div>
    </>
  );
}