'use client';

import { useState, useEffect } from 'react';
import { dataStore } from '@/lib/dataStore';
import type { Document } from '@/data/documents';

interface DocumentCategory {
  id: string;
  name: string;
  icon: string;
}

interface DocumentsSectionProps {
  onClose: () => void;
}

export default function DocumentsSection({ onClose }: DocumentsSectionProps) {
  const [documents, setDocuments] = useState<Document[]>([]);
  const [selectedCategory, setSelectedCategory] = useState('all');

  const categories: DocumentCategory[] = [
    { 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: '📊' },
    { id: 'guvenlik', name: 'Güvenlik', icon: '🛡️' },
  ];

  useEffect(() => {
    setDocuments(dataStore.getDocuments());
  }, []);

  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 '📊';
      case 'DOCX': return '📝';
      default: return '📄';
    }
  };

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-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="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
              </svg>
            </div>
            <h2 className="text-2xl font-bold text-[#004B87]">Proje Belgeleri</h2>
          </div>
          <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>

        {/* Kategori Filtreleri */}
        <div className="mb-6">
          <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-4 py-2 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-lg">{cat.icon}</span>
                <span className="text-sm">{cat.name}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Belgeler Grid - 3 sütunlu */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-h-[600px] overflow-y-auto pr-2">
          {filteredDocs.map((doc) => (
            <div
              key={doc.id}
              className="bg-gray-50 rounded-xl p-5 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group flex flex-col"
            >
              {/* Dosya İkonu - Üstte ortalı */}
              <div className="flex justify-center mb-4">
                <div className="w-16 h-16 bg-linear-to-br from-[#00B4D8] to-[#004B87] rounded-xl flex items-center justify-center text-3xl group-hover:scale-110 transition-transform duration-300 shadow-lg">
                  {getFileIcon(doc.type)}
                </div>
              </div>

              {/* Belge Bilgileri */}
              <div className="flex-1">
                <h3 className="text-base font-bold text-[#004B87] mb-2 group-hover:text-[#00B4D8] transition-colors line-clamp-2 text-center">
                  {doc.title}
                </h3>
                <p className="text-gray-600 text-sm mb-3 line-clamp-2 text-center">
                  {doc.description}
                </p>
                <div className="flex flex-wrap justify-center gap-2 text-xs text-gray-500 mb-4">
                  <span className="px-2 py-1 bg-white rounded-full">📅 {doc.date}</span>
                  <span className="px-2 py-1 bg-white rounded-full">📄 {doc.type}</span>
                  <span className="px-2 py-1 bg-white rounded-full">💾 {doc.size}</span>
                </div>
              </div>

              {/* İndirme Butonu - Alt kısımda */}
              <button className="w-full py-2.5 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors shadow-md hover:shadow-lg flex items-center justify-center space-x-2 text-sm font-semibold">
                <svg className="w-4 h-4" 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>İndir</span>
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}