'use client';

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

export default function LiveStream() {
  const [selectedCamera, setSelectedCamera] = useState(1);
  const [cameras, setCameras] = useState<Camera[]>([]);

  useEffect(() => {
    dataStore.getCameras().then(loadedCameras => {
      const onlineCameras = loadedCameras
        .filter(cam => cam.status === 'online')
        .sort((a, b) => a.order - b.order);
      setCameras(onlineCameras);
      if (onlineCameras.length > 0) {
        setSelectedCamera(onlineCameras[0].id);
      }
    });
  }, []);

  const selectedCam = cameras.find(cam => cam.id === selectedCamera) || cameras[0];

  if (!selectedCam) {
    return (
      <div className="min-h-screen bg-[#003366]">
        <Header />
        <main className="pt-32 pb-16">
          <div className="max-w-7xl mx-auto px-4 text-center">
            <p className="text-white text-xl">Şu anda aktif kamera bulunmamaktadır.</p>
          </div>
        </main>
        <Footer />
      </div>
    );
  }

  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">
            <div className="flex items-center justify-center space-x-3 mb-4">
              <div className="w-4 h-4 bg-red-500 rounded-full animate-pulse"></div>
              <h1 className="text-4xl font-bold text-white">Canlı Yayın</h1>
            </div>
            <p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
              A2 Metro Hattı inşaat çalışmalarını 7/24 canlı izleyin
            </p>
          </div>

          {/* Ana Video Player */}
          <div className="bg-white rounded-2xl shadow-2xl overflow-hidden mb-8">
            {/* Video */}
            <div className="relative w-full bg-black" style={{ paddingBottom: '56.25%' }}>
              <iframe
                className="absolute top-0 left-0 w-full h-full"
                src={selectedCam.videoUrl}
                title={selectedCam.name}
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              ></iframe>
            </div>

            {/* Video Bilgileri */}
            <div className="p-6 lg:p-8">
              <div className="flex items-start justify-between mb-4">
                <div className="flex-1">
                  <div className="flex items-center space-x-2 mb-2">
                    <span className="px-3 py-1 bg-red-500 text-white text-xs font-semibold rounded-full flex items-center space-x-1">
                      <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                      <span>CANLI</span>
                    </span>
                    <span className="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-semibold rounded-full">
                      📍 {selectedCam.location}
                    </span>
                  </div>
                  <h2 className="text-2xl font-bold text-[#004B87] mb-2">
                    {selectedCam.name}
                  </h2>
                  <div className="flex items-center space-x-4 text-sm text-gray-600">
                    {selectedCam.viewers && (
                      <div className="flex items-center space-x-1">
                        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                          <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                          <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
                        </svg>
                        <span>{selectedCam.viewers.toLocaleString('tr-TR')} izleyici</span>
                      </div>
                    )}
                    <div className="flex items-center space-x-1">
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                      </svg>
                      <span>24/7 Yayında</span>
                    </div>
                  </div>
                </div>

                {/* Paylaş Butonu */}
                <button className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center space-x-2">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
                  </svg>
                  <span className="font-semibold">Paylaş</span>
                </button>
              </div>

              {/* Açıklama */}
              <div className="bg-gray-50 rounded-lg p-4">
                <h3 className="font-semibold text-[#004B87] mb-2">Canlı Yayın Hakkında</h3>
                <p className="text-gray-700 text-sm leading-relaxed">
                  A2 Metro Hattı inşaat çalışmalarını şeffaflık ilkesi doğrultusunda 7/24 canlı olarak yayınlıyoruz. 
                  İnşaat ilerlemesini takip edebilir, çalışmaların her aşamasını görebilirsiniz.
                </p>
              </div>
            </div>
          </div>

          {/* Diğer Kameralar */}
          <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
            <h3 className="text-2xl font-bold text-[#004B87] mb-6">Diğer Kameralar</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {cameras.map((camera) => (
                <button
                  key={camera.id}
                  onClick={() => setSelectedCamera(camera.id)}
                  className={`relative rounded-xl overflow-hidden transition-all duration-300 ${
                    selectedCamera === camera.id
                      ? 'ring-4 ring-[#00B4D8] shadow-xl scale-105'
                      : 'hover:shadow-lg hover:scale-102'
                  }`}
                >
                  {/* Thumbnail */}
                  <div className="aspect-video bg-gray-900 relative">
                    <Image
                      src={`https://picsum.photos/400/225?random=${camera.id}`}
                      alt={camera.name}
                      width={400}
                      height={225}
                      className="w-full h-full object-cover opacity-80"
                    />
                    {/* CANLI Badge */}
                    <div className="absolute top-2 left-2 px-2 py-1 bg-red-500 text-white text-xs font-semibold rounded flex items-center space-x-1">
                      <div className="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></div>
                      <span>CANLI</span>
                    </div>
                    {/* İzleyici Sayısı */}
                    <div className="absolute bottom-2 right-2 px-2 py-1 bg-black/75 text-white text-xs rounded flex items-center space-x-1">
                      <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                        <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
                      </svg>
                      <span>{camera.viewers}</span>
                    </div>
                  </div>

                  {/* Bilgi */}
                  <div className="p-3 bg-white">
                    <h4 className="font-semibold text-[#004B87] text-sm mb-1 line-clamp-2">
                      {camera.name}
                    </h4>
                    <p className="text-xs text-gray-500 flex items-center">
                      <svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
                      </svg>
                      {camera.location}
                    </p>
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* İstatistikler */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
            <div className="bg-white rounded-xl p-6 text-center">
              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
                </svg>
              </div>
              <h3 className="text-3xl font-bold text-[#004B87] mb-2">4</h3>
              <p className="text-gray-600">Aktif Kamera</p>
            </div>

            <div className="bg-white rounded-xl p-6 text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                  <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
                </svg>
              </div>
              <h3 className="text-3xl font-bold text-[#004B87] mb-2">4,767</h3>
              <p className="text-gray-600">Toplam İzleyici</p>
            </div>

            <div className="bg-white rounded-xl p-6 text-center">
              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                </svg>
              </div>
              <h3 className="text-3xl font-bold text-[#004B87] mb-2">24/7</h3>
              <p className="text-gray-600">Kesintisiz Yayın</p>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  );
}