"use client";

import { Wrench, Video, ArrowRight } from "lucide-react";
import Link from "next/link";
import { motion, useMotionTemplate, useMotionValue, useSpring } from "framer-motion";
import { useState, useRef } from "react";

function ToolCard({ 
  href, 
  title, 
  description, 
  icon: Icon, 
  colorClass, 
  spotlightColor 
}: { 
  href: string, 
  title: string, 
  description: string, 
  icon: any, 
  colorClass: string,
  spotlightColor: string
}) {
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  const rotateX = useSpring(0, { stiffness: 300, damping: 20 });
  const rotateY = useSpring(0, { stiffness: 300, damping: 20 });

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    mouseX.set(x);
    mouseY.set(y);

    const xPct = (x / rect.width) - 0.5;
    const yPct = (y / rect.height) - 0.5;
    
    // Hover üst kenar (yPct negatif) -> top backward (pozitif rotateX)
    rotateX.set(-yPct * 20); 
    // Hover sağ kenar (xPct pozitif) -> right backward (pozitif rotateY)
    rotateY.set(xPct * 20);
  };

  const handleMouseLeave = () => {
    rotateX.set(0);
    rotateY.set(0);
  };

  return (
    <Link href={href} className="block h-full" style={{ perspective: 1200 }}>
      <motion.div
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
        style={{
          rotateX,
          rotateY,
          transformStyle: "preserve-3d",
        }}
        whileHover={{ scale: 1.02 }}
        className="group relative h-full glass p-6 rounded-2xl border border-[var(--color-border-faint)] overflow-hidden"
      >
        {/* Spotlight */}
        <motion.div
          className="pointer-events-none absolute -inset-px opacity-0 transition duration-500 group-hover:opacity-100 mix-blend-screen"
          style={{
            background: useMotionTemplate`
              radial-gradient(
                600px circle at ${mouseX}px ${mouseY}px,
                ${spotlightColor},
                transparent 40%
              )
            `,
          }}
        />

        {/* İçerik, Z-ekseninde hafifçe öne çıkarılır ki 3D efekti belirginleşsin */}
        <div style={{ transform: "translateZ(40px)" }} className="flex flex-col h-full pointer-events-none">
          <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-bl-full -z-10 transition-transform group-hover:scale-110" />
          
          <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-6 shadow-lg ${colorClass}`}>
            <Icon size={24} />
          </div>

          <h3 className="text-xl font-bold text-white mb-3 font-[family-name:var(--font-display)]">
            {title}
          </h3>
          
          <p className="text-[var(--color-text-ghost)] text-sm mb-6 leading-relaxed flex-grow">
            {description}
          </p>

          <div className={`flex items-center text-sm font-medium ${colorClass.split(" ")[1]}`}>
            <span>Aracı Başlat</span>
            <ArrowRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
          </div>
        </div>
      </motion.div>
    </Link>
  );
}

export default function ToolsPage() {
  return (
    <div className="max-w-7xl mx-auto">
      {/* Header */}
      <div className="mb-10">
        <div className="flex items-center gap-3 text-[var(--color-primary)] mb-3">
          <Wrench size={24} className="animate-pulse-subtle" />
          <h2 className="text-sm font-semibold tracking-widest uppercase">Gelişmiş Araçlar</h2>
        </div>
        <h1 className="text-4xl md:text-5xl font-[family-name:var(--font-display)] font-bold text-white mb-4 tracking-tight">
          İçerik Strateji Merkezi
        </h1>
        <p className="text-[var(--color-text-muted)] text-lg max-w-2xl leading-relaxed">
          Yapay zeka destekli analiz araçlarıyla içeriklerinizi optimize edin, kitle analizleri yapın ve rakip stratejilerini çözün.
        </p>
      </div>

      {/* Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <ToolCard 
          href="/dashboard/tools/youtube-analyzer"
          title="YouTube Video & Yorum Analizi"
          description="Uzun format videoların transkriptlerini ve on binlerce yorumu tek tıkla analiz edin. Duygu durumları, özetler ve yepyeni içerik fikirleri elde edin."
          icon={Video}
          colorClass="bg-red-500/20 text-red-400"
          spotlightColor="rgba(239, 68, 68, 0.15)"
        />
        
        <ToolCard 
          href="/dashboard/tools/youtube-seo"
          title="YouTube SEO Power Engine"
          description="Videolarınızı sıralamada zirveye taşıyın. A/B test başlıkları, kanca analizi, long-tail keywordler ve viral kapak görseli promptları elde edin."
          icon={Wrench}
          colorClass="bg-orange-500/20 text-orange-400"
          spotlightColor="rgba(249, 115, 22, 0.15)"
        />
      </div>
    </div>
  );
}
