'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { newsData, categories } from '@/data/news';
import type { NewsItem } from '@/data/news';
import { mediaData } from '@/data/media';
import type { MediaItem } from '@/data/media';
import { documentsData, documentCategories, getFileIcon } from '@/data/documents';
import type { Document } from '@/data/documents';
import { metroStations, getStatusColor, getStatusText } from '@/data/metroStations';
import type { MetroStation } from '@/data/metroStations';

export default function Dashboard() {
  const router = useRouter();
  const [activeSection, setActiveSection] = useState('overview');
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem('admin_token');
    if (!token) {
      router.push('/yonetim-paneli-a2m-secure');
    }
  }, [router]);

  const handleLogout = () => {
    localStorage.removeItem('admin_token');
    router.push('/yonetim-paneli-a2m-secure');
  };

  const stats = [
    { title: 'Aktif Slider', value: '4', icon: '🎬', color: 'from-[#004B87] to-[#00B4D8]', change: '+1' },
    { title: 'Toplam Haberler', value: newsData.length.toString(), icon: '📰', color: 'from-[#00B4D8] to-[#0096C7]', change: '+2' },
    { title: 'Medya İçeriği', value: mediaData.length.toString(), icon: '�', color: 'from-[#0096C7] to-[#48CAE4]', change: '+3' },
    { title: 'Metro İstasyonları', value: metroStations.length.toString(), icon: '�', color: 'from-[#48CAE4] to-[#90E0EF]', change: '+2' },
  ];

  const menuItems = [
    { id: 'overview', label: 'Genel Bakış', icon: '📊' },
    { id: 'slider', label: 'Slider Yönetimi', icon: '🎬' },
    { id: 'news', label: 'Haberler', icon: '📰' },
    { id: 'media', label: 'Medya', icon: '📸' },
    { id: 'documents', label: 'Belgeler', icon: '📄' },
    { id: 'metro-line', label: 'Metro Hattı', icon: '🚇' },
    { id: 'settings', label: 'Ayarlar', icon: '⚙️' },
  ];

  // Slider data
  const [sliderItems, setSliderItems] = useState([
    {
      id: 1,
      title: 'Ankara Metro Altyapı Projelerinde Öncü Çözümler',
      description: 'Ankara Büyükşehir Belediyesi ile birlikte, modern teknoloji ve mühendislik uzmanlığımızla başkentin ulaşım ağını inşa ediyor, geleceğin metro sistemlerini bugünden hayata geçiriyoruz.',
      buttonText: 'Detayları Gör',
      buttonLink: '#proje-detay',
      active: true
    },
    {
      id: 2,
      title: 'A2 Metro Hattı İnşaatında Son Aşamaya Gelindi',
      description: '15 istasyonlu A2 Metro Hattı projemiz %75 tamamlandı. 2026 yılında hizmete açılacak modern metro hattımız, günlük 300 bin yolcuya hizmet verecek.',
      buttonText: 'İlerlemeyi İzle',
      buttonLink: '#metro-hatti',
      active: true
    },
    {
      id: 3,
      title: 'Çevre Dostu Metro Teknolojileri',
      description: 'Yenilenebilir enerji kaynakları ve sürdürülebilir inşaat teknikleri ile çevre dostu metro projelerine imza atıyoruz. Karbon emisyonunu %40 azaltan yenilikçi çözümlerimiz.',
      buttonText: 'Yeşil Projeler',
      buttonLink: '#cevre',
      active: true
    },
    {
      id: 4,
      title: 'Güvenli İnşaat, Güvenli Gelecek',
      description: 'ISO 45001 sertifikalı iş güvenliği sistemlerimiz ile 2000+ çalışanımızın güvenliğini en üst düzeyde tutuyoruz. Sıfır iş kazası hedefiyle çalışıyoruz.',
      buttonText: 'Güvenlik Önlemleri',
      buttonLink: '#guvenlik',
      active: true
    }
  ]);

  // News management state
  const [newsList, setNewsList] = useState<NewsItem[]>(newsData);
  const [selectedNewsCategory, setSelectedNewsCategory] = useState('all');
  const [editingNews, setEditingNews] = useState<NewsItem | null>(null);
  const [showNewsForm, setShowNewsForm] = useState(false);

  const filteredNewsList = selectedNewsCategory === 'all' 
    ? newsList 
    : newsList.filter(news => news.category === selectedNewsCategory);

  // Media management state
  const [mediaList, setMediaList] = useState<MediaItem[]>(mediaData);
  const [selectedMediaType, setSelectedMediaType] = useState<'all' | 'video' | 'photo'>('all');

  const filteredMediaList = selectedMediaType === 'all'
    ? mediaList
    : mediaList.filter(media => media.type === selectedMediaType);

  // Documents management state
  const [documentsList, setDocumentsList] = useState<Document[]>(documentsData);
  const [selectedDocCategory, setSelectedDocCategory] = useState('all');

  const filteredDocsList = selectedDocCategory === 'all'
    ? documentsList
    : documentsList.filter(doc => doc.category === selectedDocCategory);

  // Metro stations management state
  const [stationsList, setStationsList] = useState<MetroStation[]>(metroStations);
  const [selectedStationStatus, setSelectedStationStatus] = useState<'all' | 'completed' | 'in-progress' | 'planned'>('all');

  const filteredStationsList = selectedStationStatus === 'all'
    ? stationsList
    : stationsList.filter(station => station.status === selectedStationStatus);

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Sidebar */}
      <aside className={`fixed top-0 left-0 h-full bg-[#003366] text-white w-64 transform transition-transform duration-300 z-50 ${menuOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0`}>
        <div className="p-6 border-b border-[#004B87]">
          <h1 className="text-2xl font-bold">A2 Metro</h1>
          <p className="text-sm text-[#90E0EF] mt-1">Yönetim Paneli</p>
        </div>

        <nav className="p-4 space-y-2">
          {menuItems.map((item) => (
            <button
              key={item.id}
              onClick={() => {
                setActiveSection(item.id);
                setMenuOpen(false);
              }}
              className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all ${
                activeSection === item.id
                  ? 'bg-[#004B87] text-white shadow-lg'
                  : 'text-[#90E0EF] hover:bg-[#004B87]/50'
              }`}
            >
              <span className="text-2xl">{item.icon}</span>
              <span className="font-medium">{item.label}</span>
            </button>
          ))}
        </nav>

        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-[#004B87]">
          <button
            onClick={handleLogout}
            className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-[#90E0EF] hover:bg-red-500/20 hover:text-red-300 transition-all"
          >
            <span className="text-2xl">🚪</span>
            <span className="font-medium">Çıkış Yap</span>
          </button>
        </div>
      </aside>

      {/* Main Content */}
      <div className="lg:ml-64">
        {/* Header */}
        <header className="bg-white shadow-sm sticky top-0 z-40">
          <div className="flex items-center justify-between px-4 py-4 lg:px-8">
            <button
              onClick={() => setMenuOpen(!menuOpen)}
              className="lg:hidden text-[#003366] p-2"
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>

            <h2 className="text-xl font-bold text-[#003366]">
              {menuItems.find(item => item.id === activeSection)?.label || 'Dashboard'}
            </h2>

            <div className="flex items-center space-x-4">
              <button className="relative p-2 text-gray-600 hover:text-[#004B87] transition-colors">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                </svg>
                <span className="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
              </button>

              <div className="flex items-center space-x-2">
                <div className="w-10 h-10 bg-linear-to-br from-[#004B87] to-[#00B4D8] rounded-full flex items-center justify-center">
                  <span className="text-white font-bold">A</span>
                </div>
              </div>
            </div>
          </div>
        </header>

        {/* Dashboard Content */}
        <main className="p-4 lg:p-8">
          {activeSection === 'overview' && (
            <>
              {/* Stats Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
                {stats.map((stat, index) => (
                  <div key={index} className="bg-white rounded-xl shadow-sm p-6 hover:shadow-lg transition-shadow">
                    <div className="flex items-center justify-between mb-4">
                      <div className={`w-12 h-12 bg-linear-to-br ${stat.color} rounded-lg flex items-center justify-center text-2xl`}>
                        {stat.icon}
                      </div>
                      <span className="text-green-500 text-sm font-semibold">{stat.change}</span>
                    </div>
                    <h3 className="text-gray-600 text-sm font-medium mb-1">{stat.title}</h3>
                    <p className="text-3xl font-bold text-[#003366]">{stat.value}</p>
                  </div>
                ))}
              </div>

              {/* Charts Section */}
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-8">
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <h3 className="text-lg font-bold text-[#003366] mb-4">İnşaat İlerleme Durumu</h3>
                  <div className="space-y-4">
                    {[
                      { name: 'Temeller', progress: 100, color: 'bg-green-500' },
                      { name: 'Yapı İnşaatı', progress: 75, color: 'bg-[#00B4D8]' },
                      { name: 'Elektrik', progress: 60, color: 'bg-[#0096C7]' },
                      { name: 'Ray Döşeme', progress: 40, color: 'bg-yellow-500' },
                      { name: 'İç Mekan', progress: 25, color: 'bg-orange-500' },
                    ].map((item, index) => (
                      <div key={index}>
                        <div className="flex justify-between mb-2">
                          <span className="text-sm font-medium text-gray-700">{item.name}</span>
                          <span className="text-sm font-semibold text-[#003366]">{item.progress}%</span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-2">
                          <div className={`${item.color} h-2 rounded-full transition-all duration-500`} style={{ width: `${item.progress}%` }}></div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="bg-white rounded-xl shadow-sm p-6">
                  <h3 className="text-lg font-bold text-[#003366] mb-4">Son Aktiviteler</h3>
                  <div className="space-y-4">
                    {[
                      { action: 'Yeni haber eklendi', time: '5 dakika önce', icon: '📰', color: 'bg-blue-100 text-blue-600' },
                      { action: 'Medya içeriği güncellendi', time: '1 saat önce', icon: '📸', color: 'bg-purple-100 text-purple-600' },
                      { action: 'Belge yüklendi', time: '2 saat önce', icon: '📄', color: 'bg-green-100 text-green-600' },
                      { action: 'İstasyon durumu güncellendi', time: '3 saat önce', icon: '🚇', color: 'bg-yellow-100 text-yellow-600' },
                    ].map((activity, index) => (
                      <div key={index} className="flex items-start space-x-3">
                        <div className={`w-10 h-10 ${activity.color} rounded-lg flex items-center justify-center shrink-0`}>
                          {activity.icon}
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-medium text-gray-900">{activity.action}</p>
                          <p className="text-xs text-gray-500">{activity.time}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Quick Actions */}
              <div className="bg-white rounded-xl shadow-sm p-6">
                <h3 className="text-lg font-bold text-[#003366] mb-4">Hızlı İşlemler</h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {[
                    { label: 'Haber Ekle', icon: '➕', color: 'from-[#004B87] to-[#00B4D8]' },
                    { label: 'Medya Yükle', icon: '📤', color: 'from-[#00B4D8] to-[#0096C7]' },
                    { label: 'Belge Yükle', icon: '📁', color: 'from-[#0096C7] to-[#48CAE4]' },
                    { label: 'Rapor Oluştur', icon: '📊', color: 'from-[#48CAE4] to-[#90E0EF]' },
                  ].map((action, index) => (
                    <button
                      key={index}
                      className={`bg-linear-to-br ${action.color} text-white p-6 rounded-xl hover:shadow-lg transition-all duration-300 hover:scale-105`}
                    >
                      <div className="text-4xl mb-2">{action.icon}</div>
                      <div className="font-semibold text-sm">{action.label}</div>
                    </button>
                  ))}
                </div>
              </div>
            </>
          )}

          {/* Slider Management Section */}
          {activeSection === 'slider' && (
            <div className="space-y-6">
              {/* Header */}
              <div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between">
                <div>
                  <h3 className="text-2xl font-bold text-[#003366]">Slider Yönetimi</h3>
                  <p className="text-gray-600 mt-1">Ana sayfa hero slider içeriklerini yönetin</p>
                </div>
                <button className="bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2">
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                  </svg>
                  <span>Yeni Slide Ekle</span>
                </button>
              </div>

              {/* Slider Items Grid */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {sliderItems.map((slide, index) => (
                  <div key={slide.id} className="bg-white rounded-xl shadow-sm p-6 hover:shadow-lg transition-all">
                    <div className="flex items-start justify-between mb-4">
                      <div className="flex items-center space-x-3">
                        <div className="w-12 h-12 bg-linear-to-br from-[#004B87] to-[#00B4D8] rounded-lg flex items-center justify-center text-white font-bold text-lg">
                          {index + 1}
                        </div>
                        <div>
                          <h4 className="font-bold text-[#003366] text-sm">Slide #{slide.id}</h4>
                          <span className={`text-xs px-2 py-1 rounded-full ${slide.active ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-600'}`}>
                            {slide.active ? '✓ Aktif' : '○ Pasif'}
                          </span>
                        </div>
                      </div>
                      <div className="flex space-x-2">
                        <button className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg 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.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                          </svg>
                        </button>
                        <button className="p-2 text-red-500 hover:bg-red-50 rounded-lg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                          </svg>
                        </button>
                      </div>
                    </div>

                    <div className="space-y-3">
                      <div>
                        <label className="text-xs font-semibold text-gray-500 uppercase">Başlık</label>
                        <p className="text-sm font-semibold text-[#003366] mt-1">{slide.title}</p>
                      </div>
                      <div>
                        <label className="text-xs font-semibold text-gray-500 uppercase">Açıklama</label>
                        <p className="text-sm text-gray-600 mt-1 line-clamp-2">{slide.description}</p>
                      </div>
                      <div className="flex items-center justify-between pt-3 border-t">
                        <div>
                          <label className="text-xs font-semibold text-gray-500 uppercase">Buton Metni</label>
                          <p className="text-sm font-medium text-[#00B4D8]">{slide.buttonText}</p>
                        </div>
                        <div className="flex items-center space-x-2">
                          <button className="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded transition-colors">
                            Sırayı Değiştir
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Info Box */}
              <div className="bg-blue-50 border border-blue-200 rounded-xl p-6">
                <div className="flex items-start space-x-3">
                  <div className="text-blue-500 text-2xl">ℹ️</div>
                  <div>
                    <h4 className="font-bold text-blue-900 mb-2">Slider Kullanım Bilgisi</h4>
                    <ul className="text-sm text-blue-700 space-y-1">
                      <li>• Slider otomatik olarak 5 saniyede bir değişir</li>
                      <li>• Maksimum 4 slide önerilir (mevcut: {sliderItems.length}/4)</li>
                      <li>• Başlık 80 karakter, açıklama 200 karakter ile sınırlıdır</li>
                      <li>• Değişiklikler anında ana sayfaya yansır</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* News Management Section */}
          {activeSection === 'news' && (
            <div className="space-y-6">
              {/* Header */}
              <div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
                <div>
                  <h3 className="text-2xl font-bold text-[#003366]">Haberler Yönetimi</h3>
                  <p className="text-gray-600 mt-1">Haberler ve duyuruları yönetin, düzenleyin</p>
                </div>
                <button 
                  onClick={() => setShowNewsForm(true)}
                  className="bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2"
                >
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                  </svg>
                  <span>Yeni Haber Ekle</span>
                </button>
              </div>

              {/* Category Filter */}
              <div className="bg-white rounded-xl shadow-sm p-6">
                <div className="flex flex-wrap gap-3">
                  {categories.map((category) => (
                    <button
                      key={category.id}
                      onClick={() => setSelectedNewsCategory(category.id)}
                      className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
                        selectedNewsCategory === category.id
                          ? 'bg-[#00B4D8] text-white shadow-md'
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                    >
                      {category.icon} {category.name}
                    </button>
                  ))}
                </div>
              </div>

              {/* News Table */}
              <div className="bg-white rounded-xl shadow-sm overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gray-50 border-b border-gray-200">
                      <tr>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          Haber
                        </th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          Kategori
                        </th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          Tarih
                        </th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          Yazar
                        </th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          Durum
                        </th>
                        <th className="px-6 py-4 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          İşlemler
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200">
                      {filteredNewsList.map((news) => (
                        <tr key={news.id} className="hover:bg-gray-50 transition-colors">
                          <td className="px-6 py-4">
                            <div className="flex items-center space-x-3">
                              <img 
                                src={news.image} 
                                alt={news.title}
                                className="w-16 h-16 rounded-lg object-cover"
                              />
                              <div className="max-w-md">
                                <p className="font-semibold text-[#003366] line-clamp-1">{news.title}</p>
                                <p className="text-sm text-gray-500 line-clamp-1">{news.summary}</p>
                              </div>
                            </div>
                          </td>
                          <td className="px-6 py-4">
                            <span className="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-700">
                              {categories.find(c => c.id === news.category)?.name}
                            </span>
                          </td>
                          <td className="px-6 py-4 text-sm text-gray-600">
                            {news.date}
                          </td>
                          <td className="px-6 py-4 text-sm text-gray-600">
                            {news.author}
                          </td>
                          <td className="px-6 py-4">
                            {news.featured ? (
                              <span className="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-700">
                                ⭐ Ana Sayfa
                              </span>
                            ) : (
                              <span className="px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-600">
                                Yayında
                              </span>
                            )}
                          </td>
                          <td className="px-6 py-4 text-right">
                            <div className="flex items-center justify-end space-x-2">
                              <button 
                                onClick={() => setEditingNews(news)}
                                className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors"
                                title="Düzenle"
                              >
                                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                </svg>
                              </button>
                              <button 
                                className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                                title="Sil"
                              >
                                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>

              {/* Stats */}
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Toplam Haber</p>
                      <p className="text-2xl font-bold text-[#003366] mt-1">{newsList.length}</p>
                    </div>
                    <div className="text-4xl">📰</div>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Ana Sayfada</p>
                      <p className="text-2xl font-bold text-[#003366] mt-1">{newsList.filter(n => n.featured).length}</p>
                    </div>
                    <div className="text-4xl">⭐</div>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">İnşaat Haberleri</p>
                      <p className="text-2xl font-bold text-[#003366] mt-1">{newsList.filter(n => n.category === 'construction').length}</p>
                    </div>
                    <div className="text-4xl">🏗️</div>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Duyurular</p>
                      <p className="text-2xl font-bold text-[#003366] mt-1">{newsList.filter(n => n.category === 'announcements').length}</p>
                    </div>
                    <div className="text-4xl">📢</div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Media Management Section */}
          {activeSection === 'media' && (
            <div className="space-y-6">
              {/* Header */}
              <div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
                <div>
                  <h3 className="text-2xl font-bold text-[#003366]">Medya Galerisi Yönetimi</h3>
                  <p className="text-gray-600 mt-1">Video ve fotoğraf içeriklerini yönetin</p>
                </div>
                <button className="bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2">
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                  </svg>
                  <span>Yeni Medya Ekle</span>
                </button>
              </div>

              {/* Type Filter */}
              <div className="bg-white rounded-xl shadow-sm p-6">
                <div className="flex flex-wrap gap-3">
                  <button
                    onClick={() => setSelectedMediaType('all')}
                    className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
                      selectedMediaType === 'all'
                        ? 'bg-[#00B4D8] text-white shadow-md'
                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    }`}
                  >
                    📁 Tümü
                  </button>
                  <button
                    onClick={() => setSelectedMediaType('video')}
                    className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
                      selectedMediaType === 'video'
                        ? 'bg-[#00B4D8] text-white shadow-md'
                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    }`}
                  >
                    🎥 Videolar
                  </button>
                  <button
                    onClick={() => setSelectedMediaType('photo')}
                    className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
                      selectedMediaType === 'photo'
                        ? 'bg-[#00B4D8] text-white shadow-md'
                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    }`}
                  >
                    📸 Fotoğraflar
                  </button>
                </div>
              </div>

              {/* Media Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredMediaList.map((media) => (
                  <div key={media.id} className="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-all">
                    <div className="relative h-48">
                      <img src={media.thumbnail} alt={media.title} className="w-full h-full object-cover" />
                      <div className="absolute top-3 left-3">
                        <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
                          media.type === 'video' ? 'bg-red-500 text-white' : 'bg-blue-500 text-white'
                        }`}>
                          {media.type === 'video' ? '🎥 Video' : '📸 Foto'}
                        </span>
                      </div>
                      {media.duration && (
                        <div className="absolute bottom-3 right-3 bg-black/70 text-white px-2 py-1 rounded text-xs font-semibold">
                          {media.duration}
                        </div>
                      )}
                    </div>
                    <div className="p-4">
                      <h4 className="font-bold text-[#003366] mb-2 line-clamp-2">{media.title}</h4>
                      <p className="text-sm text-gray-600 mb-3 line-clamp-2">{media.description}</p>
                      <div className="flex items-center justify-between">
                        <span className="text-xs text-gray-500">{media.date}</span>
                        <div className="flex space-x-2">
                          <button className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors">
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                            </svg>
                          </button>
                          <button className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors">
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Stats */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Toplam Medya</p>
                      <p className="text-2xl font-bold text-[#003366] mt-1">{mediaList.length}</p>
                    </div>
                    <div className="text-4xl">📁</div>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Videolar</p>
                      <p className="text-2xl font-bold text-[#003366] mt-1">{mediaList.filter(m => m.type === 'video').length}</p>
                    </div>
                    <div className="text-4xl">🎥</div>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Fotoğraflar</p>
                      <p className="text-2xl font-bold text-[#003366] mt-1">{mediaList.filter(m => m.type === 'photo').length}</p>
                    </div>
                    <div className="text-4xl">📸</div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Documents Management Section */}
          {activeSection === 'documents' && (
            <div className="space-y-6">
              {/* Header */}
              <div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
                <div>
                  <h3 className="text-2xl font-bold text-[#003366]">Belgeler Yönetimi</h3>
                  <p className="text-gray-600 mt-1">Proje belgelerini ve dökümanları yönetin</p>
                </div>
                <button className="bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2">
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                  </svg>
                  <span>Yeni Belge Ekle</span>
                </button>
              </div>

              {/* Category Filter */}
              <div className="bg-white rounded-xl shadow-sm p-6">
                <div className="flex flex-wrap gap-3">
                  {documentCategories.map((category) => (
                    <button
                      key={category.id}
                      onClick={() => setSelectedDocCategory(category.id)}
                      className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
                        selectedDocCategory === category.id
                          ? 'bg-[#00B4D8] text-white shadow-md'
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                    >
                      {category.icon} {category.name}
                    </button>
                  ))}
                </div>
              </div>

              {/* Documents Table */}
              <div className="bg-white rounded-xl shadow-sm overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gray-50 border-b border-gray-200">
                      <tr>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          Belge
                        </th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          Kategori
                        </th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          Tarih
                        </th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          Boyut
                        </th>
                        <th className="px-6 py-4 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
                          İşlemler
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200">
                      {filteredDocsList.map((doc) => (
                        <tr key={doc.id} className="hover:bg-gray-50 transition-colors">
                          <td className="px-6 py-4">
                            <div className="flex items-center space-x-3">
                              <div className="text-3xl">{getFileIcon(doc.type)}</div>
                              <div>
                                <p className="font-semibold text-[#003366]">{doc.title}</p>
                                <p className="text-sm text-gray-500 line-clamp-1">{doc.description}</p>
                              </div>
                            </div>
                          </td>
                          <td className="px-6 py-4">
                            <span className="px-3 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-700">
                              {documentCategories.find(c => c.id === doc.category)?.name}
                            </span>
                          </td>
                          <td className="px-6 py-4 text-sm text-gray-600">
                            {doc.date}
                          </td>
                          <td className="px-6 py-4 text-sm text-gray-600">
                            {doc.size}
                          </td>
                          <td className="px-6 py-4 text-right">
                            <div className="flex items-center justify-end space-x-2">
                              <button className="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors" title="İndir">
                                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                </svg>
                              </button>
                              <button className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors" title="Düzenle">
                                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                </svg>
                              </button>
                              <button className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors" title="Sil">
                                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>

              {/* Stats */}
              <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex flex-col items-center text-center">
                    <div className="text-3xl mb-2">📋</div>
                    <p className="text-sm text-gray-600">Toplam</p>
                    <p className="text-xl font-bold text-[#003366]">{documentsList.length}</p>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex flex-col items-center text-center">
                    <div className="text-3xl mb-2">📄</div>
                    <p className="text-sm text-gray-600">İhale</p>
                    <p className="text-xl font-bold text-[#003366]">{documentsList.filter(d => d.category === 'ihale').length}</p>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex flex-col items-center text-center">
                    <div className="text-3xl mb-2">📐</div>
                    <p className="text-sm text-gray-600">Teknik</p>
                    <p className="text-xl font-bold text-[#003366]">{documentsList.filter(d => d.category === 'teknik').length}</p>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex flex-col items-center text-center">
                    <div className="text-3xl mb-2">🌱</div>
                    <p className="text-sm text-gray-600">Çevresel</p>
                    <p className="text-xl font-bold text-[#003366]">{documentsList.filter(d => d.category === 'cevresel').length}</p>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex flex-col items-center text-center">
                    <div className="text-3xl mb-2">📊</div>
                    <p className="text-sm text-gray-600">Raporlar</p>
                    <p className="text-xl font-bold text-[#003366]">{documentsList.filter(d => d.category === 'raporlar').length}</p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Metro Line Management Section */}
          {activeSection === 'metro-line' && (
            <div className="space-y-6">
              {/* Header */}
              <div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
                <div>
                  <h3 className="text-2xl font-bold text-[#003366]">Metro Hattı İstasyonları</h3>
                  <p className="text-gray-600 mt-1">İstasyon durumlarını ve ilerlemeyi yönetin</p>
                </div>
                <button className="bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2">
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                  </svg>
                  <span>Yeni İstasyon Ekle</span>
                </button>
              </div>

              {/* Status Filter */}
              <div className="bg-white rounded-xl shadow-sm p-6">
                <div className="flex flex-wrap gap-3">
                  <button
                    onClick={() => setSelectedStationStatus('all')}
                    className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
                      selectedStationStatus === 'all'
                        ? 'bg-[#00B4D8] text-white shadow-md'
                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    }`}
                  >
                    📋 Tümü
                  </button>
                  <button
                    onClick={() => setSelectedStationStatus('completed')}
                    className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
                      selectedStationStatus === 'completed'
                        ? 'bg-green-500 text-white shadow-md'
                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    }`}
                  >
                    ✅ Tamamlandı
                  </button>
                  <button
                    onClick={() => setSelectedStationStatus('in-progress')}
                    className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
                      selectedStationStatus === 'in-progress'
                        ? 'bg-blue-500 text-white shadow-md'
                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    }`}
                  >
                    🔄 Devam Ediyor
                  </button>
                  <button
                    onClick={() => setSelectedStationStatus('planned')}
                    className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
                      selectedStationStatus === 'planned'
                        ? 'bg-yellow-500 text-white shadow-md'
                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    }`}
                  >
                    📅 Planlanıyor
                  </button>
                </div>
              </div>

              {/* Stations Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {filteredStationsList.map((station) => (
                  <div key={station.id} className="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-all">
                    {station.image && (
                      <div className="h-40 overflow-hidden">
                        <img src={station.image} alt={station.name} className="w-full h-full object-cover" />
                      </div>
                    )}
                    <div className="p-6">
                      <div className="flex items-start justify-between mb-4">
                        <div>
                          <h4 className="text-xl font-bold text-[#003366] mb-1">{station.name}</h4>
                          <span className={`inline-block px-3 py-1 text-xs font-semibold rounded-full text-white ${getStatusColor(station.status)}`}>
                            {getStatusText(station.status)}
                          </span>
                        </div>
                        <div className="flex space-x-2">
                          <button className="p-2 text-[#00B4D8] hover:bg-blue-50 rounded-lg transition-colors">
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                            </svg>
                          </button>
                        </div>
                      </div>

                      {/* Progress Bar */}
                      <div className="mb-4">
                        <div className="flex justify-between mb-2">
                          <span className="text-sm font-medium text-gray-700">İlerleme</span>
                          <span className="text-sm font-bold text-[#003366]">{station.progress}%</span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-3">
                          <div 
                            className={`h-3 rounded-full ${getStatusColor(station.status)}`}
                            style={{ width: `${station.progress}%` }}
                          ></div>
                        </div>
                      </div>

                      {/* Details */}
                      <div className="space-y-2 text-sm">
                        <div className="flex items-center space-x-2">
                          <span className="text-gray-600">📅 Başlangıç:</span>
                          <span className="font-semibold">{station.startDate}</span>
                        </div>
                        <div className="flex items-center space-x-2">
                          <span className="text-gray-600">🎯 Bitiş:</span>
                          <span className="font-semibold">{station.expectedCompletion}</span>
                        </div>
                        <div className="flex items-center space-x-2">
                          <span className="text-gray-600">👥 Günlük Kapasite:</span>
                          <span className="font-semibold">{station.dailyCapacity} yolcu</span>
                        </div>
                        {station.connections && station.connections.length > 0 && (
                          <div className="flex items-center space-x-2">
                            <span className="text-gray-600">🔄 Aktarma:</span>
                            <div className="flex gap-1">
                              {station.connections.map((conn, i) => (
                                <span key={i} className="px-2 py-1 bg-[#00B4D8] text-white text-xs rounded-full">
                                  {conn}
                                </span>
                              ))}
                            </div>
                          </div>
                        )}
                      </div>

                      {/* Features */}
                      <div className="mt-4 pt-4 border-t">
                        <p className="text-xs font-semibold text-gray-600 mb-2">ÖZELLİKLER:</p>
                        <div className="flex flex-wrap gap-2">
                          {station.features.map((feature, i) => (
                            <span key={i} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
                              {feature}
                            </span>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Stats */}
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Toplam İstasyon</p>
                      <p className="text-2xl font-bold text-[#003366] mt-1">{stationsList.length}</p>
                    </div>
                    <div className="text-4xl">🚇</div>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Tamamlanan</p>
                      <p className="text-2xl font-bold text-green-600 mt-1">{stationsList.filter(s => s.status === 'completed').length}</p>
                    </div>
                    <div className="text-4xl">✅</div>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Devam Eden</p>
                      <p className="text-2xl font-bold text-blue-600 mt-1">{stationsList.filter(s => s.status === 'in-progress').length}</p>
                    </div>
                    <div className="text-4xl">🔄</div>
                  </div>
                </div>
                <div className="bg-white rounded-xl shadow-sm p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-gray-600">Planlanan</p>
                      <p className="text-2xl font-bold text-yellow-600 mt-1">{stationsList.filter(s => s.status === 'planned').length}</p>
                    </div>
                    <div className="text-4xl">📅</div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Settings Section */}
          {activeSection === 'settings' && (
            <div className="space-y-6">
              <div className="bg-white rounded-xl shadow-sm p-6">
                <h3 className="text-2xl font-bold text-[#003366] mb-6">Sistem Ayarları</h3>
                
                <div className="space-y-6">
                  {/* Site Settings */}
                  <div className="border-b pb-6">
                    <h4 className="text-lg font-semibold text-[#004B87] mb-4 flex items-center space-x-2">
                      <span>🌐</span>
                      <span>Site Ayarları</span>
                    </h4>
                    <div className="space-y-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">Site Başlığı</label>
                        <input type="text" defaultValue="A2 Metro Hattı Projesi" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent" />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">Site Açıklaması</label>
                        <textarea rows={3} defaultValue="Ankara Büyükşehir Belediyesi A2 Metro Hattı İnşaat Projesi" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent"></textarea>
                      </div>
                    </div>
                  </div>

                  {/* Admin Settings */}
                  <div className="border-b pb-6">
                    <h4 className="text-lg font-semibold text-[#004B87] mb-4 flex items-center space-x-2">
                      <span>👤</span>
                      <span>Admin Ayarları</span>
                    </h4>
                    <div className="space-y-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">Kullanıcı Adı</label>
                        <input type="text" defaultValue="admin" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent" />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">Yeni Şifre</label>
                        <input type="password" placeholder="Boş bırakın değiştirmek istemiyorsanız" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent" />
                      </div>
                    </div>
                  </div>

                  {/* Notification Settings */}
                  <div className="border-b pb-6">
                    <h4 className="text-lg font-semibold text-[#004B87] mb-4 flex items-center space-x-2">
                      <span>🔔</span>
                      <span>Bildirim Ayarları</span>
                    </h4>
                    <div className="space-y-3">
                      <label className="flex items-center space-x-3">
                        <input type="checkbox" defaultChecked className="w-5 h-5 text-[#00B4D8] rounded focus:ring-[#00B4D8]" />
                        <span className="text-sm text-gray-700">Yeni haber eklendiğinde bildir</span>
                      </label>
                      <label className="flex items-center space-x-3">
                        <input type="checkbox" defaultChecked className="w-5 h-5 text-[#00B4D8] rounded focus:ring-[#00B4D8]" />
                        <span className="text-sm text-gray-700">Belge yüklendiğinde bildir</span>
                      </label>
                      <label className="flex items-center space-x-3">
                        <input type="checkbox" className="w-5 h-5 text-[#00B4D8] rounded focus:ring-[#00B4D8]" />
                        <span className="text-sm text-gray-700">Günlük rapor gönder</span>
                      </label>
                    </div>
                  </div>

                  {/* Save Button */}
                  <div className="flex justify-end space-x-3">
                    <button className="px-6 py-3 border border-gray-300 rounded-lg font-semibold text-gray-700 hover:bg-gray-50 transition-all">
                      İptal
                    </button>
                    <button className="px-6 py-3 bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white rounded-lg font-semibold hover:shadow-lg transition-all">
                      Değişiklikleri Kaydet
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeSection !== 'overview' && activeSection !== 'slider' && activeSection !== 'news' && activeSection !== 'media' && activeSection !== 'documents' && activeSection !== 'metro-line' && activeSection !== 'settings' && (
            <div className="bg-white rounded-xl shadow-sm p-8 text-center">
              <div className="text-6xl mb-4">
                {menuItems.find(item => item.id === activeSection)?.icon}
              </div>
              <h3 className="text-2xl font-bold text-[#003366] mb-2">
                {menuItems.find(item => item.id === activeSection)?.label}
              </h3>
              <p className="text-gray-600">Bu bölüm yakında geliştirilecek...</p>
            </div>
          )}
        </main>
      </div>

      {/* Mobile Overlay */}
      {menuOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
          onClick={() => setMenuOpen(false)}
        ></div>
      )}
    </div>
  );
}