'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Project } from '@/data/projects';
import { Logo } from '@/components/Logo';
import { CustomCursor } from '@/components/CustomCursor';
import { ParticleBackground } from '@/components/ParticleBackground';
import { ScrollToTop } from '@/components/ScrollToTop';

interface Props {
  project: Project;
  allProjects: Project[];
}

export default function ProjectDetailClient({ project, allProjects }: Props) {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    setIsLoaded(true);
  }, []);

  const otherProjects = allProjects.filter(p => p.id !== project.id).slice(0, 3);

  const statusColors = {
    'Tamamlandı': 'bg-green-500/20 text-green-400 border-green-500/30',
    'Devam Ediyor': 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
    'Bakımda': 'bg-blue-500/20 text-blue-400 border-blue-500/30'
  };

  return (
    <div className="min-h-screen bg-[#0a0f1a] text-white">
      <CustomCursor />
      <ParticleBackground />
      <ScrollToTop />

      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-[#0a0f1a]/80 backdrop-blur-xl border-b border-white/5">
        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
          <Link href="/" className="hover:opacity-80 transition-opacity">
            <Logo size="sm" />
          </Link>
          <Link 
            href="/#projects" 
            className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors font-mono text-sm"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Tüm Projeler
          </Link>
        </div>
      </header>

      {/* Main Content */}
      <main className={`pt-24 pb-20 transition-all duration-700 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
        <div className="max-w-6xl mx-auto px-4">
          
          {/* Hero Section */}
          <div className="mb-16">
            <div className="flex flex-wrap items-center gap-3 mb-6">
              <span className="px-3 py-1 bg-zsl-primary/20 text-zsl-primary border border-zsl-primary/30 rounded text-xs font-mono uppercase tracking-wider">
                {project.category}
              </span>
              <span className={`px-3 py-1 border rounded text-xs font-mono ${statusColors[project.status]}`}>
                {project.status}
              </span>
              <span className="text-slate-500 text-sm font-mono">{project.year}</span>
            </div>
            
            <h1 className="text-4xl md:text-6xl font-mono font-bold text-white mb-6 tracking-tight">
              {project.title}
            </h1>
            
            <p className="text-xl text-slate-400 font-mono leading-relaxed max-w-3xl">
              {project.description}
            </p>
          </div>

          {/* Project Image */}
          <div className="relative aspect-video rounded-2xl overflow-hidden mb-16 bg-linear-to-br from-zsl-primary/20 to-purple-500/20 border border-white/10">
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="text-center">
                <div className="w-24 h-24 mx-auto mb-4 rounded-2xl bg-linear-to-br from-zsl-primary to-purple-500 flex items-center justify-center text-4xl">
                  {project.category === 'Yapay Zeka' && '🤖'}
                  {project.category === 'Blockchain' && '⛓️'}
                  {project.category === 'Cloud' && '☁️'}
                  {project.category === 'Güvenlik' && '🛡️'}
                  {project.category === 'Big Data' && '📊'}
                  {project.category === 'IoT' && '📡'}
                </div>
                <span className="font-mono text-white/60 text-sm">Proje Görseli</span>
              </div>
            </div>
            <div className="absolute inset-0 cyber-grid opacity-20"></div>
          </div>

          {/* Content Grid */}
          <div className="grid md:grid-cols-3 gap-12">
            
            {/* Main Content */}
            <div className="md:col-span-2 space-y-12">
              
              {/* Description */}
              <section>
                <h2 className="text-2xl font-mono font-bold text-white mb-6 flex items-center gap-3">
                  <span className="w-8 h-8 rounded bg-zsl-primary/20 flex items-center justify-center text-zsl-primary text-sm">01</span>
                  Proje Hakkında
                </h2>
                <div className="prose prose-invert max-w-none">
                  {project.longDescription.split('\n\n').map((paragraph, index) => (
                    <p key={index} className="text-slate-400 font-mono leading-relaxed mb-4">
                      {paragraph}
                    </p>
                  ))}
                </div>
              </section>

              {/* Features */}
              <section>
                <h2 className="text-2xl font-mono font-bold text-white mb-6 flex items-center gap-3">
                  <span className="w-8 h-8 rounded bg-zsl-primary/20 flex items-center justify-center text-zsl-primary text-sm">02</span>
                  Özellikler
                </h2>
                <div className="grid sm:grid-cols-2 gap-4">
                  {project.features.map((feature, index) => (
                    <div 
                      key={index}
                      className="flex items-start gap-3 p-4 bg-white/5 border border-white/10 rounded-lg hover:border-zsl-primary/30 transition-colors"
                    >
                      <svg className="w-5 h-5 text-zsl-primary shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                      <span className="text-slate-300 font-mono text-sm">{feature}</span>
                    </div>
                  ))}
                </div>
              </section>

              {/* Technologies */}
              <section>
                <h2 className="text-2xl font-mono font-bold text-white mb-6 flex items-center gap-3">
                  <span className="w-8 h-8 rounded bg-zsl-primary/20 flex items-center justify-center text-zsl-primary text-sm">03</span>
                  Teknolojiler
                </h2>
                <div className="flex flex-wrap gap-3">
                  {project.technologies.map((tech, index) => (
                    <span 
                      key={index}
                      className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-sm font-mono text-slate-300 hover:border-zsl-primary/50 hover:text-zsl-primary transition-colors cursor-default"
                    >
                      {tech}
                    </span>
                  ))}
                </div>
              </section>
            </div>

            {/* Sidebar */}
            <div className="space-y-6">
              
              {/* Project Info Card */}
              <div className="bg-white/5 border border-white/10 rounded-xl p-6 sticky top-24">
                <h3 className="font-mono font-bold text-white mb-6">Proje Detayları</h3>
                
                <div className="space-y-4">
                  <div className="flex justify-between items-center py-3 border-b border-white/5">
                    <span className="text-slate-500 font-mono text-sm">Durum</span>
                    <span className={`px-2 py-1 border rounded text-xs font-mono ${statusColors[project.status]}`}>
                      {project.status}
                    </span>
                  </div>
                  
                  <div className="flex justify-between items-center py-3 border-b border-white/5">
                    <span className="text-slate-500 font-mono text-sm">Yıl</span>
                    <span className="text-white font-mono text-sm">{project.year}</span>
                  </div>
                  
                  {project.duration && (
                    <div className="flex justify-between items-center py-3 border-b border-white/5">
                      <span className="text-slate-500 font-mono text-sm">Süre</span>
                      <span className="text-white font-mono text-sm">{project.duration}</span>
                    </div>
                  )}
                  
                  {project.client && (
                    <div className="flex justify-between items-center py-3 border-b border-white/5">
                      <span className="text-slate-500 font-mono text-sm">İş Ortağı</span>
                      <span className="text-white font-mono text-sm">{project.client}</span>
                    </div>
                  )}
                  
                  <div className="flex justify-between items-center py-3">
                    <span className="text-slate-500 font-mono text-sm">Kategori</span>
                    <span className="text-zsl-primary font-mono text-sm">{project.category}</span>
                  </div>
                </div>

                {/* Action Buttons */}
                <div className="mt-6 space-y-3">
                  {project.link && (
                    <a 
                      href={project.link}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center justify-center gap-2 w-full py-3 bg-linear-to-r from-zsl-primary to-cyan-400 text-black font-mono font-bold rounded-lg hover:shadow-[0_0_20px_rgba(0,212,255,0.4)] transition-all"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                      </svg>
                      Demo İncele
                    </a>
                  )}
                  
                  {project.github && (
                    <a 
                      href={project.github}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center justify-center gap-2 w-full py-3 border border-white/20 text-white font-mono rounded-lg hover:border-zsl-primary/50 hover:text-zsl-primary transition-all"
                    >
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                      </svg>
                      GitHub
                    </a>
                  )}
                  
                  <Link 
                    href="/#contact"
                    className="flex items-center justify-center gap-2 w-full py-3 border border-white/20 text-white font-mono rounded-lg hover:border-zsl-accent/50 hover:text-zsl-accent transition-all"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                    </svg>
                    Benzer Proje İste
                  </Link>
                </div>

                {/* Tags */}
                <div className="mt-6 pt-6 border-t border-white/10">
                  <div className="flex flex-wrap gap-2">
                    {project.tags.map((tag, index) => (
                      <span key={index} className="px-2 py-1 bg-white/5 text-slate-500 text-xs font-mono rounded">
                        #{tag}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Other Projects */}
          <section className="mt-24">
            <h2 className="text-2xl font-mono font-bold text-white mb-8">Diğer Projeler</h2>
            <div className="grid md:grid-cols-3 gap-6">
              {otherProjects.map((p) => (
                <Link 
                  key={p.id}
                  href={`/projects/${p.slug}`}
                  className="group bg-white/5 border border-white/10 rounded-xl overflow-hidden hover:border-zsl-primary/50 transition-all duration-300"
                >
                  <div className="aspect-video bg-linear-to-br from-zsl-primary/10 to-purple-500/10 flex items-center justify-center">
                    <span className="text-4xl">
                      {p.category === 'Yapay Zeka' && '🤖'}
                      {p.category === 'Blockchain' && '⛓️'}
                      {p.category === 'Cloud' && '☁️'}
                      {p.category === 'Güvenlik' && '🛡️'}
                      {p.category === 'Big Data' && '📊'}
                      {p.category === 'IoT' && '📡'}
                    </span>
                  </div>
                  <div className="p-4">
                    <span className="text-xs font-mono text-zsl-primary">{p.category}</span>
                    <h3 className="font-mono font-bold text-white mt-1 group-hover:text-zsl-primary transition-colors">
                      {p.title}
                    </h3>
                    <p className="text-sm text-slate-500 font-mono mt-2 line-clamp-2">
                      {p.description}
                    </p>
                  </div>
                </Link>
              ))}
            </div>
          </section>
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t border-white/5 bg-[#050B14] py-8">
        <div className="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4">
          <Link href="/" className="hover:opacity-80 transition-opacity">
            <Logo size="sm" />
          </Link>
          <p className="font-mono text-slate-500 text-xs">
            © 2024 ZeroSixLab. Tüm Hakları Saklıdır.
          </p>
        </div>
      </footer>
    </div>
  );
}
