import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Play, FileText, Clock, Mic } from 'lucide-react';
import { MOCK_INTERVIEWS } from '../services/mockData';
import { InterviewType } from '../types';

const AfroLifePage = () => {
  const [filter, setFilter] = useState<'ALL' | 'VIDEO' | 'ARTICLE'>('ALL');

  const filteredInterviews = MOCK_INTERVIEWS.filter(interview => {
    if (filter === 'ALL') return true;
    return interview.type === filter;
  });

  return (
    <div className="bg-white min-h-screen">
      {/* Hero Header */}
      <div className="bg-dark-900 text-white py-20 relative overflow-hidden">
        <div className="absolute inset-0 opacity-30 bg-[url('https://images.unsplash.com/photo-1523580494863-6f3031224c94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1740&q=80')] bg-cover bg-center"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
           <span className="inline-block py-1 px-3 rounded-full bg-brand-600/20 border border-brand-500 text-brand-400 text-xs font-bold tracking-wider uppercase mb-4">
              Lifestyle & Inspiration
           </span>
           <h1 className="text-4xl md:text-6xl font-serif font-bold mb-6">Afro Life</h1>
           <p className="text-xl text-gray-300 max-w-2xl mx-auto">
             Plongez dans l'intimité des bâtisseurs. Entretiens exclusifs, parcours de vie et leçons de leadership.
           </p>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Filters */}
        <div className="flex justify-center mb-12 space-x-4">
            <button 
                onClick={() => setFilter('ALL')}
                className={`px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'ALL' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
            >
                Tout voir
            </button>
            <button 
                onClick={() => setFilter('VIDEO')}
                className={`flex items-center px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'VIDEO' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
            >
                <Play className="w-4 h-4 mr-2" /> Vidéos
            </button>
            <button 
                onClick={() => setFilter('ARTICLE')}
                className={`flex items-center px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'ARTICLE' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
            >
                <FileText className="w-4 h-4 mr-2" /> Articles
            </button>
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredInterviews.map(interview => (
                <Link to={`/afrolife/${interview.id}`} key={interview.id} className="group block h-full">
                    <div className="relative h-64 rounded-xl overflow-hidden shadow-sm group-hover:shadow-xl transition-all duration-300">
                        <img 
                            src={interview.thumbnailUrl} 
                            alt={interview.title} 
                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                        />
                        <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div>
                        
                        {/* Type Badge */}
                        <div className="absolute top-4 left-4">
                            <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide text-white backdrop-blur-md ${interview.type === InterviewType.VIDEO ? 'bg-red-600/90' : 'bg-blue-600/90'}`}>
                                {interview.type === InterviewType.VIDEO ? <Play className="w-3 h-3 mr-1 fill-current" /> : <Mic className="w-3 h-3 mr-1" />}
                                {interview.type === InterviewType.VIDEO ? 'Vidéo' : 'Interview'}
                            </span>
                        </div>

                        {/* Play Icon Overlay for Videos */}
                        {interview.type === InterviewType.VIDEO && (
                            <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div className="w-16 h-16 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
                                    <Play className="w-8 h-8 text-white fill-current ml-1" />
                                </div>
                            </div>
                        )}
                    </div>

                    <div className="pt-6 px-2">
                        <div className="flex items-center text-xs text-gray-500 mb-3 space-x-3">
                            <span className="font-semibold text-brand-600 uppercase">{interview.guestName}</span>
                            <span className="w-1 h-1 bg-gray-300 rounded-full"></span>
                            <span>{interview.companyName}</span>
                            <span className="w-1 h-1 bg-gray-300 rounded-full"></span>
                            <span className="flex items-center"><Clock className="w-3 h-3 mr-1"/> {interview.duration}</span>
                        </div>
                        <h3 className="text-xl font-serif font-bold text-gray-900 mb-2 group-hover:text-brand-600 transition-colors leading-tight">
                            {interview.title}
                        </h3>
                        <p className="text-gray-600 text-sm line-clamp-2">
                            {interview.excerpt}
                        </p>
                    </div>
                </Link>
            ))}
        </div>
      </div>
    </div>
  );
};

export default AfroLifePage;