'use client';

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

export default function BelgelerPage() {
  const [selectedCategory, setSelectedCategory] = useState<string>('all');

  const categories = [
    { id: 'all', name: 'Tümü', icon: '📋' },
    { id: 'ihale', name: 'İhale Belgeleri', icon: '📄' },
    { id: 'teknik', name: 'Teknik Dökümanlar', icon: '📐' },
    { id: 'cevresel', name: 'Çevresel Etki', icon: '🌱' },
    { id: 'raporlar', name: 'İlerleme Raporları', icon: '📊' },
  ];

  const documents = [
    {
      id: 1,
      title: "A2 Metro Hattı İhale Şartnamesi",
      category: 'ihale',
      date: "15 Ocak 2025",
      size: "2.4 MB",
      type: "PDF",
      description: "Metro inşaatı için teknik şartname ve ihale koşulları"
    },
    {
      id: 2,
      title: "Proje Teknik Çizimleri",
      category: 'teknik',
      date: "10 Şubat 2025",
      size: "15.8 MB",
      type: "DWG",
      description: "Tüm istasyonların teknik mimari çizimleri"
    },
    {
      id: 3,
      title: "Çevresel Etki Değerlendirme Raporu",
      category: 'cevresel',
      date: "5 Mart 2025",
      size: "4.2 MB",
      type: "PDF",
      description: "Proje çevresel etki analizi ve önlemler"
    },
    {
      id: 4,
      title: "2025 Mart Ayı İlerleme Raporu",
      category: 'raporlar',
      date: "1 Nisan 2025",
      size: "1.8 MB",
      type: "PDF",
      description: "Aylık proje ilerleme ve istatistikler"
    },
    {
      id: 5,
      title: "Güvenlik Planı ve Prosedürleri",
      category: 'teknik',
      date: "20 Ocak 2025",
      size: "3.1 MB",
      type: "PDF",
      description: "İnşaat sahası güvenlik protokolleri"
    },
    {
      id: 6,
      title: "İstasyon Tasarım Detayları",
      category: 'teknik',
      date: "8 Şubat 2025",
      size: "8.5 MB",
      type: "PDF",
      description: "İstasyon iç ve dış mekan tasarım detayları"
    },
    {
      id: 7,
      title: "Finansman Planı",
      category: 'ihale',
      date: "12 Ocak 2025",
      size: "1.2 MB",
      type: "XLSX",
      description: "Proje bütçe ve finansman dağılımı"
    },
    {
      id: 8,
      title: "2025 Nisan Ayı İlerleme Raporu",
      category: 'raporlar',
      date: "1 Mayıs 2025",
      size: "2.1 MB",
      type: "PDF",
      description: "Aylık proje ilerleme ve istatistikler"
    },
    {
      id: 9,
      title: "Gürültü ve Titreşim Analizi",
      category: 'cevresel',
      date: "18 Mart 2025",
      size: "3.8 MB",
      type: "PDF",
      description: "Çevre gürültü ve titreşim ölçüm sonuçları"
    },
  ];

  const filteredDocs = selectedCategory === 'all' 
    ? documents 
    : documents.filter(doc => doc.category === selectedCategory);

  const getFileIcon = (type: string) => {
    switch (type) {
      case 'PDF': return '📕';
      case 'DWG': return '📐';
      case 'XLSX': return '📊';
      default: return '📄';
    }
  };

  return (
    <div className="min-h-screen bg-[#F8F9FA]">
      <Header />

      {/* Hero Section */}
      <div className="bg-linear-to-r from-[#003366] via-[#004B87] to-[#003366] py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center space-x-2 text-white/80 text-sm mb-4">
            <Link href="/" className="hover:text-white transition-colors">Ana Sayfa</Link>
            <span>/</span>
            <span>Belgeler</span>
          </div>
          <h1 className="text-4xl font-bold text-white mb-4">Proje Belgeleri</h1>
          <p className="text-lg text-white/90 max-w-3xl">
            A2 Metro Hattı inşaat projesine ait tüm resmi belgeler, teknik dökümanlar ve raporlar.
          </p>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Kategori Filtreleri */}
        <div className="bg-white rounded-2xl shadow-lg p-6 mb-8">
          <h2 className="text-xl font-bold text-[#004B87] mb-4">Kategoriler</h2>
          <div className="flex flex-wrap gap-3">
            {categories.map((cat) => (
              <button
                key={cat.id}
                onClick={() => setSelectedCategory(cat.id)}
                className={`flex items-center space-x-2 px-5 py-3 rounded-lg font-medium transition-all duration-300 ${
                  selectedCategory === cat.id
                    ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                <span className="text-xl">{cat.icon}</span>
                <span>{cat.name}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Belgeler Listesi */}
        <div className="grid grid-cols-1 gap-6">
          {filteredDocs.map((doc) => (
            <div
              key={doc.id}
              className="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden group"
            >
              <div className="p-6 flex items-start space-x-4">
                {/* Dosya İkonu */}
                <div className="w-16 h-16 bg-linear-to-br from-[#00B4D8] to-[#004B87] rounded-xl flex items-center justify-center text-3xl shrink-0 group-hover:scale-110 transition-transform duration-300">
                  {getFileIcon(doc.type)}
                </div>

                {/* Belge Bilgileri */}
                <div className="flex-1 min-w-0">
                  <h3 className="text-lg font-bold text-[#004B87] mb-2 group-hover:text-[#00B4D8] transition-colors">
                    {doc.title}
                  </h3>
                  <p className="text-gray-600 text-sm mb-3">
                    {doc.description}
                  </p>
                  <div className="flex flex-wrap gap-4 text-sm text-gray-500">
                    <div className="flex items-center space-x-1">
                      <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>{doc.date}</span>
                    </div>
                    <div className="flex items-center space-x-1">
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
                      </svg>
                      <span>{doc.type}</span>
                    </div>
                    <div className="flex items-center space-x-1">
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
                        <path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
                        <path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
                      </svg>
                      <span>{doc.size}</span>
                    </div>
                  </div>
                </div>

                {/* İndirme Butonu */}
                <button className="px-5 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors shadow-md hover:shadow-lg flex items-center space-x-2 shrink-0">
                  <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>
                  <span className="font-medium">İndir</span>
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* Boş Sonuç */}
        {filteredDocs.length === 0 && (
          <div className="bg-white rounded-xl shadow-md p-12 text-center">
            <div className="text-6xl mb-4">📭</div>
            <h3 className="text-xl font-bold text-gray-700 mb-2">Belge Bulunamadı</h3>
            <p className="text-gray-500">Bu kategoride henüz belge bulunmamaktadır.</p>
          </div>
        )}

        {/* Bilgilendirme */}
        <div className="mt-8 bg-blue-50 border-l-4 border-[#00B4D8] p-6 rounded-lg">
          <div className="flex items-start space-x-3">
            <svg className="w-6 h-6 text-[#00B4D8] shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
            </svg>
            <div>
              <h3 className="font-bold text-[#004B87] mb-1">Önemli Not</h3>
              <p className="text-gray-700 text-sm">
                Tüm belgeler resmi kaynaklardan alınmıştır. Belgelerin kullanımı ile ilgili sorularınız için 
                <a href="https://www.ankara.bel.tr/" target="_blank" rel="noopener noreferrer" className="text-[#00B4D8] hover:underline ml-1">
                  Ankara Büyükşehir Belediyesi
                </a> ile iletişime geçebilirsiniz.
              </p>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}