'use client';

import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { newsData } from '@/data/news';

interface NewsSectionProps {
  show: boolean;
  onClose: () => void;
  showLiveStream: boolean;
}

export default function NewsSection({ show, onClose, showLiveStream }: NewsSectionProps) {
  const [selectedNews, setSelectedNews] = useState<number | null>(null);
  
  if (!show) return null;

  const featuredNews = newsData.filter(news => news.featured).slice(0, 4);

  return (
    <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream ? 'pt-8' : 'pt-8 md:pt-32'} pb-8`}>
      <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
              </svg>
            </div>
            <h2 className="text-2xl font-bold text-[#004B87]">Son Haberler</h2>
          </div>
          <div className="flex items-center space-x-3">
            <Link 
              href="/haberler"
              className="px-4 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#0096C7] transition-all font-semibold text-sm flex items-center space-x-2"
            >
              <span>Tümünü Gör</span>
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </Link>
            <button 
              onClick={onClose}
              className="text-gray-500 hover:text-red-500 transition-colors"
            >
              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
        
        {/* Haberler Grid veya Detay */}
        {selectedNews === null ? (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {featuredNews.map((news) => (
              <div key={news.id} className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                {/* Haber Görseli */}
                <div className="h-48 overflow-hidden">
                  <Image
                    src={news.image}
                    alt={news.title}
                    width={400}
                    height={192}
                    className="w-full h-full object-cover hover:scale-110 transition-transform duration-500"
                  />
                </div>
                
                {/* Haber İçeriği */}
                <div className="p-5">
                  <div className="flex items-center space-x-2 text-sm text-gray-500 mb-2">
                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                    </svg>
                    <span>{news.date}</span>
                  </div>
                  <h3 className="text-lg font-bold text-[#004B87] mb-2 line-clamp-2">
                    {news.title}
                  </h3>
                  <p className="text-gray-600 text-sm line-clamp-3 mb-4">
                    {news.summary}
                  </p>
                  <button 
                    onClick={() => setSelectedNews(news.id)}
                    className="text-[#00B4D8] hover:text-[#004B87] font-semibold text-sm flex items-center space-x-1 transition-colors"
                  >
                    <span>Devamını Oku</span>
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </button>
                </div>
              </div>
            ))}
          </div>
        ) : (
          /* Haber Detayı */
          <div className="animate-fadeIn">
            {newsData.filter(n => n.id === selectedNews).map((news) => (
              <div key={news.id}>
                {/* Geri Butonu */}
                <button 
                  onClick={() => setSelectedNews(null)}
                  className="flex items-center space-x-2 text-[#00B4D8] hover:text-[#004B87] font-semibold mb-6 transition-colors"
                >
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                  </svg>
                  <span>Haberlere Dön</span>
                </button>
                
                {/* Detay İçerik */}
                <div className="bg-white rounded-xl overflow-hidden">
                  {/* Büyük Görsel */}
                  <div className="h-96 overflow-hidden">
                    <Image
                      src={news.image}
                      alt={news.title}
                      width={800}
                      height={384}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  
                  {/* Detay Metni */}
                  <div className="p-8">
                    <div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                      </svg>
                      <span>{news.date}</span>
                      <span className="mx-2">•</span>
                      <span>{news.author}</span>
                    </div>
                    
                    <h1 className="text-3xl font-bold text-[#004B87] mb-4">
                      {news.title}
                    </h1>
                    
                    <p className="text-gray-700 text-lg leading-relaxed mb-6">
                      {news.content}
                    </p>
                    
                    {/* Tags */}
                    <div className="flex flex-wrap gap-2">
                      {news.tags.map((tag, index) => (
                        <span 
                          key={index}
                          className="px-3 py-1 bg-[#00B4D8]/10 text-[#004B87] rounded-full text-sm font-semibold"
                        >
                          #{tag}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}