'use client';

import { useState } from 'react';
import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default function News() {
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [selectedNews, setSelectedNews] = useState<number | null>(null);

  const categories = [
    { id: 'all', name: 'Tümü', icon: '📰' },
    { id: 'construction', name: 'İnşaat', icon: '🏗️' },
    { id: 'announcements', name: 'Duyurular', icon: '📢' },
    { id: 'events', name: 'Etkinlikler', icon: '🎉' },
  ];

  const news = [
    {
      id: 1,
      category: 'construction',
      title: 'A2 Metro Hattı Kazı Çalışmaları Hızla İlerliyor',
      summary: 'Dikimevi-Natoyolu Metro Hattı inşaat çalışmaları planlandığı gibi devam ediyor.',
      image: 'https://picsum.photos/800/450?random=1',
      date: '15 Ekim 2025',
      author: 'Ankara Büyükşehir Belediyesi',
      content: 'A2 Metro Hattı kapsamında Dikimevi-Natoyolu güzergâhında yürütülen kazı çalışmaları planlandığı şekilde devam ediyor. 6.5 kilometre uzunluğundaki hat üzerinde 5 istasyon inşa edilecek. Proje, Ankara\'nın ulaşım altyapısına önemli bir katkı sağlayacak.',
      tags: ['Metro', 'İnşaat', 'A2 Hattı']
    },
    {
      id: 2,
      category: 'announcements',
      title: 'Yeni İstasyon Tasarımları Açıklandı',
      summary: 'Modern ve çevre dostu istasyon tasarımları kamuoyuyla paylaşıldı.',
      image: 'https://picsum.photos/800/450?random=2',
      date: '12 Ekim 2025',
      author: 'Proje Yönetimi',
      content: 'A2 Metro Hattı istasyonlarının mimari tasarımları tamamlandı. Tasarımlarda enerji verimliliği, erişilebilirlik ve modern estetik ön planda tutuldu. İstasyonlarda güneş enerjisi panelleri, LED aydınlatma ve akıllı havalandırma sistemleri kullanılacak.',
      tags: ['Tasarım', 'Sürdürülebilirlik', 'İstasyon']
    },
    {
      id: 3,
      category: 'construction',
      title: 'Dikimevi İstasyonu Temel Atma Töreni Gerçekleştirildi',
      summary: 'Dikimevi İstasyonu\'nun temel atma töreni büyük bir coşkuyla yapıldı.',
      image: 'https://picsum.photos/800/450?random=3',
      date: '8 Ekim 2025',
      author: 'Ankara Büyükşehir Belediyesi',
      content: 'A2 Metro Hattı\'nın önemli duraklarından biri olan Dikimevi İstasyonu\'nun temel atma töreni gerçekleştirildi. Törene Ankara Büyükşehir Belediye Başkanı, milletvekilleri ve bölge sakinleri katıldı. İstasyonun 2026 yılı sonunda hizmete girmesi planlanıyor.',
      tags: ['Tören', 'Dikimevi', 'Milestone']
    },
    {
      id: 4,
      category: 'events',
      title: 'Metro Projesi Tanıtım Günleri Düzenlendi',
      summary: 'Vatandaşlarımız proje hakkında detaylı bilgi aldı.',
      image: 'https://picsum.photos/800/450?random=4',
      date: '5 Ekim 2025',
      author: 'Halkla İlişkiler',
      content: 'A2 Metro Hattı Projesi\'ni tanıtmak amacıyla düzenlenen etkinlikte vatandaşlar, proje yetkilileriyle bir araya geldi. Etkinlikte 3D animasyonlar, maketler ve interaktif sunumlarla proje detayları anlatıldı. Vatandaşların soruları cevaplandı.',
      tags: ['Tanıtım', 'Etkinlik', 'Halkla İlişkiler']
    },
    {
      id: 5,
      category: 'announcements',
      title: 'Trafik Düzenlemesi Duyurusu',
      summary: 'İnşaat nedeniyle bazı yollarda geçici trafik düzenlemeleri yapılacak.',
      image: 'https://picsum.photos/800/450?random=5',
      date: '1 Ekim 2025',
      author: 'Ulaşım Koordinasyon',
      content: 'A2 Metro Hattı inşaatı kapsamında Dikimevi-Tuzluçayır güzergâhında geçici trafik düzenlemeleri uygulanacak. Alternatif güzergâhlar belirlenmiş olup, yönlendirme levhaları yerleştirilmiştir. Vatandaşlarımızın anlayışına sığınıyoruz.',
      tags: ['Trafik', 'Duyuru', 'Koordinasyon']
    },
    {
      id: 6,
      category: 'construction',
      title: 'TBM Makinesi Tünele Girdi',
      summary: 'Dev tünel açma makinesi (TBM) çalışmalara başladı.',
      image: 'https://picsum.photos/800/450?random=6',
      date: '28 Eylül 2025',
      author: 'İnşaat Ekibi',
      content: 'A2 Metro Hattı tünel kazı çalışmalarında kullanılacak TBM (Tunnel Boring Machine) makinesi tünele girdi. 120 metrelik dev makine, günde ortalama 15 metre ilerleme kaydedecek. TBM teknolojisi sayesinde kazı çalışmaları daha hızlı ve güvenli şekilde yapılıyor.',
      tags: ['TBM', 'Tünel', 'Teknoloji']
    }
  ];

  const filteredNews = selectedCategory === 'all' 
    ? news 
    : news.filter(item => item.category === selectedCategory);

  const selectedNewsItem = news.find(item => item.id === selectedNews);

  return (
    <div className="min-h-screen bg-[#003366]">
      <Header />
      
      <main className="pt-32 pb-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Başlık */}
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-white mb-4">Haberler ve Duyurular</h1>
            <p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
              A2 Metro Hattı projesi ile ilgili güncel haberler, duyurular ve etkinlikler
            </p>
          </div>

          {/* Kategori Filtreleri */}
          <div className="flex flex-wrap justify-center gap-3 mb-12">
            {categories.map((category) => (
              <button
                key={category.id}
                onClick={() => setSelectedCategory(category.id)}
                className={`px-6 py-3 rounded-full font-semibold transition-all duration-300 flex items-center space-x-2 ${
                  selectedCategory === category.id
                    ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                    : 'bg-white text-[#004B87] hover:bg-gray-100'
                }`}
              >
                <span>{category.icon}</span>
                <span>{category.name}</span>
              </button>
            ))}
          </div>

          {/* Haber Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredNews.map((item) => (
              <div
                key={item.id}
                onClick={() => setSelectedNews(item.id)}
                className="bg-white rounded-2xl shadow-lg overflow-hidden cursor-pointer transform transition-all duration-300 hover:scale-105 hover:shadow-2xl"
              >
                {/* Görsel */}
                <div className="relative h-48 overflow-hidden">
                  <img
                    src={item.image}
                    alt={item.title}
                    className="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
                  />
                  <div className="absolute top-3 left-3">
                    <span className="px-3 py-1 bg-[#00B4D8] text-white text-xs font-semibold rounded-full">
                      {categories.find(c => c.id === item.category)?.name}
                    </span>
                  </div>
                </div>

                {/* İçerik */}
                <div className="p-6">
                  <div className="flex items-center space-x-2 text-xs text-gray-500 mb-3">
                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
                    </svg>
                    <span>{item.date}</span>
                  </div>
                  
                  <h3 className="text-xl font-bold text-[#004B87] mb-3 line-clamp-2">
                    {item.title}
                  </h3>
                  
                  <p className="text-gray-600 text-sm mb-4 line-clamp-3">
                    {item.summary}
                  </p>

                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">
                      {item.author}
                    </span>
                    <button className="text-[#00B4D8] font-semibold text-sm hover:text-[#004B87] transition-colors">
                      Devamını Oku →
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Haber Bulunamadı */}
          {filteredNews.length === 0 && (
            <div className="text-center py-16">
              <div className="text-6xl mb-4">📰</div>
              <h3 className="text-2xl font-bold text-white mb-2">Henüz Haber Yok</h3>
              <p className="text-[#F8F9FA]">Bu kategoride henüz haber bulunmuyor.</p>
            </div>
          )}
        </div>
      </main>

      {/* Haber Detay Modal */}
      {selectedNewsItem && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4 animate-fadeIn">
          <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            {/* Görsel */}
            <div className="relative h-64 md:h-96">
              <img
                src={selectedNewsItem.image}
                alt={selectedNewsItem.title}
                className="w-full h-full object-cover"
              />
              <button
                onClick={() => setSelectedNews(null)}
                className="absolute top-4 right-4 w-10 h-10 bg-white rounded-full flex items-center justify-center hover:bg-gray-100 transition-colors shadow-lg"
              >
                <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
              <div className="absolute bottom-4 left-4">
                <span className="px-4 py-2 bg-[#00B4D8] text-white font-semibold rounded-full">
                  {categories.find(c => c.id === selectedNewsItem.category)?.name}
                </span>
              </div>
            </div>

            {/* İçerik */}
            <div className="p-8">
              <div className="flex items-center space-x-4 text-sm text-gray-500 mb-4">
                <div className="flex items-center space-x-1">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
                  </svg>
                  <span>{selectedNewsItem.date}</span>
                </div>
                <div className="flex items-center space-x-1">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
                  </svg>
                  <span>{selectedNewsItem.author}</span>
                </div>
              </div>

              <h2 className="text-3xl font-bold text-[#004B87] mb-6">
                {selectedNewsItem.title}
              </h2>

              <p className="text-gray-700 text-lg leading-relaxed mb-6">
                {selectedNewsItem.content}
              </p>

              {/* Etiketler */}
              <div className="flex flex-wrap gap-2 mb-6">
                {selectedNewsItem.tags.map((tag, index) => (
                  <span
                    key={index}
                    className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full"
                  >
                    #{tag}
                  </span>
                ))}
              </div>

              {/* Paylaş */}
              <div className="border-t pt-6">
                <div className="flex items-center justify-between">
                  <span className="text-gray-600 font-semibold">Haberi Paylaş:</span>
                  <div className="flex space-x-3">
                    <button className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors">
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                      </svg>
                    </button>
                    <button className="w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center hover:bg-sky-600 transition-colors">
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                      </svg>
                    </button>
                    <button className="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition-colors">
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <Footer />
    </div>
  );
}