'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import { dataStore } from '@/lib/dataStore';
import type { MediaItem } from '@/data/media';

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

export default function MediaGallery({ onClose }: MediaGalleryProps) {
  const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
  const [selectedMediaTab, setSelectedMediaTab] = useState<'all' | 'video' | 'photo'>('all');
  const [selectedMedia, setSelectedMedia] = useState<number | null>(null);

  useEffect(() => {
    dataStore.getMedia().then(setMediaItems);
  }, []);

  const filteredMedia = selectedMediaTab === 'all'
    ? mediaItems
    : mediaItems.filter(item => item.type === selectedMediaTab);

  const handleClose = () => {
    setSelectedMedia(null);
    setSelectedMediaTab('all');
    onClose();
  };

  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="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"/>
              </svg>
            </div>
            <h2 className="text-2xl font-bold text-[#004B87]">Medya Galerisi</h2>
          </div>
          <button 
            onClick={handleClose}
            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>

        {/* Medya Grid veya Detay */}
        {selectedMedia === null ? (
          <>
            {/* Tab Menü */}
            <div className="flex justify-center space-x-4 mb-8">
              <button
                onClick={() => setSelectedMediaTab('all')}
                className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 ${
                  selectedMediaTab === 'all'
                    ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                    : 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
                }`}
              >
                Tümü
              </button>
              <button
                onClick={() => setSelectedMediaTab('video')}
                className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
                  selectedMediaTab === 'video'
                    ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                    : 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
                }`}
              >
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                </svg>
                <span>Videolar</span>
              </button>
              <button
                onClick={() => setSelectedMediaTab('photo')}
                className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
                  selectedMediaTab === 'photo'
                    ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                    : 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
                }`}
              >
                <svg className="w-5 h-5" 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>
                <span>Fotoğraflar</span>
              </button>
            </div>

            {/* Medya Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredMedia.map((item) => (
                <div
                  key={item.id}
                  onClick={() => setSelectedMedia(item.id)}
                  className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-2 cursor-pointer group"
                >
                  {/* Thumbnail */}
                  <div className="relative h-56 overflow-hidden">
                    <Image
                      src={item.thumbnail}
                      alt={item.title}
                      width={400}
                      height={224}
                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                    />
                    {/* Video Badge */}
                    {item.type === 'video' && (
                      <div className="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/40 transition-colors">
                        <div className="w-16 h-16 rounded-full bg-[#00B4D8] flex items-center justify-center group-hover:scale-110 transition-transform">
                          <svg className="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8 5v14l11-7z"/>
                          </svg>
                        </div>
                      </div>
                    )}
                    {/* Photo Badge */}
                    {item.type === 'photo' && (
                      <div className="absolute top-3 right-3 px-3 py-1 bg-[#00B4D8] text-white text-xs rounded-full font-semibold">
                        FOTO
                      </div>
                    )}
                  </div>

                  {/* Content */}
                  <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>{item.date}</span>
                    </div>
                    <h3 className="text-lg font-bold text-[#004B87] mb-2 line-clamp-2 group-hover:text-[#00B4D8] transition-colors">
                      {item.title}
                    </h3>
                    <p className="text-gray-600 text-sm line-clamp-2">
                      {item.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </>
        ) : (
          /* Medya Detayı */
          <div className="animate-fadeIn">
            {mediaItems.filter(m => m.id === selectedMedia).map((item) => (
              <div key={item.id}>
                {/* Geri Butonu */}
                <button
                  onClick={() => setSelectedMedia(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>Galeriye Dön</span>
                </button>

                {/* Video Player veya Büyük Fotoğraf */}
                {item.type === 'video' ? (
                  <div className="relative w-full mb-6" style={{ paddingBottom: '56.25%' }}>
                    <iframe
                      className="absolute top-0 left-0 w-full h-full rounded-lg"
                      src={item.videoUrl}
                      title={item.title}
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowFullScreen
                    ></iframe>
                  </div>
                ) : (
                  <div className="mb-6 rounded-lg overflow-hidden">
                    <Image
                      src={item.thumbnail}
                      alt={item.title}
                      width={800}
                      height={600}
                      className="w-full h-auto"
                    />
                  </div>
                )}

                {/* Bilgiler */}
                <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>{item.date}</span>
                </div>

                <h1 className="text-3xl font-bold text-[#004B87] mb-4">
                  {item.title}
                </h1>

                <p className="text-gray-700 text-lg leading-relaxed">
                  {item.description}
                </p>

                {/* Paylaş */}
                <div className="mt-8 pt-6 border-t border-gray-200">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-4">
                      <span className="text-sm text-gray-500">Paylaş:</span>
                      <button className="text-[#00B4D8] hover:text-[#004B87] transition-colors">
                        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                          <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
                        </svg>
                      </button>
                    </div>
                    <button 
                      onClick={() => setSelectedMedia(null)}
                      className="px-6 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors"
                    >
                      Kapat
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}