'use client';

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

export default function MediaGallery() {
  const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
  const [selectedTab, setSelectedTab] = useState<'all' | 'video' | 'photo'>('all');
  const [selectedMedia, setSelectedMedia] = useState<number | null>(null);

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

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

  const selectedMediaItem = selectedMedia !== null 
    ? mediaItems.find(item => item.id === selectedMedia) 
    : null;

  return (
    <div className="min-h-screen bg-[#003366]">
      <Header />
      
      <main className="pt-24 md: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">
              Medya Galerisi
            </h1>
            <p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
              A2 Metro Hattı projesi ile ilgili videolar ve fotoğraflar
            </p>
          </div>

          {/* Tab Menü */}
          <div className="flex flex-wrap justify-center gap-2 md:gap-4 mb-8">
            <button
              onClick={() => setSelectedTab('all')}
              className={`px-4 py-2 md:px-6 md:py-3 rounded-lg font-semibold text-sm md:text-base transition-all duration-300 ${
                selectedTab === 'all'
                  ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                  : 'bg-white text-[#004B87] hover:bg-gray-100'
              }`}
            >
              Tümü
            </button>
            <button
              onClick={() => setSelectedTab('video')}
              className={`px-4 py-2 md:px-6 md:py-3 rounded-lg font-semibold text-sm md:text-base transition-all duration-300 flex items-center space-x-1 md:space-x-2 ${
                selectedTab === 'video'
                  ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                  : 'bg-white text-[#004B87] hover:bg-gray-100'
              }`}
            >
              <svg className="w-4 h-4 md:w-5 md: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={() => setSelectedTab('photo')}
              className={`px-4 py-2 md:px-6 md:py-3 rounded-lg font-semibold text-sm md:text-base transition-all duration-300 flex items-center space-x-1 md:space-x-2 ${
                selectedTab === 'photo'
                  ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                  : 'bg-white text-[#004B87] hover:bg-gray-100'
              }`}
            >
              <svg className="w-4 h-4 md:w-5 md: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 */}
          {!selectedMediaItem ? (
            <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-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl 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>
                    )}
                    {/* Duration Badge */}
                    {item.type === 'video' && (
                      <div className="absolute bottom-3 right-3 px-2 py-1 bg-black/75 text-white text-xs rounded">
                        {item.duration}
                      </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="bg-white rounded-2xl shadow-2xl overflow-hidden animate-fadeIn">
              <div className="p-6 lg:p-8">
                {/* 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 */}
                {selectedMediaItem?.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={selectedMediaItem.videoUrl}
                      title={selectedMediaItem.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={selectedMediaItem?.thumbnail || ''}
                      alt={selectedMediaItem?.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>{selectedMediaItem?.date}</span>
                  {selectedMediaItem?.type === 'video' && (
                    <>
                      <span className="text-gray-300">•</span>
                      <span>{selectedMediaItem?.duration}</span>
                    </>
                  )}
                </div>

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

                <p className="text-gray-700 text-lg leading-relaxed">
                  {selectedMediaItem?.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>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </main>

      <Footer />
    </div>
  );
}