'use client';

import { useState } from 'react';
import Image from "next/image";
import { cn } from "@/lib/utils";
import { motion, AnimatePresence } from "framer-motion";
import { X, Phone, MessageCircle } from "lucide-react";
import { siteConfig } from "@/lib/data";

interface FleetItem {
  name: string;
  description: string;
  capacity: string;
  reach: string;
  image: string;
  status: string;
  category: string;
}

interface FleetListProps {
  items: FleetItem[];
  categories: string[];
}

export function FleetList({ items, categories }: FleetListProps) {
  const [activeCategory, setActiveCategory] = useState("Hepsi");
  const [selectedItem, setSelectedItem] = useState<FleetItem | null>(null);

  const filteredItems = activeCategory === "Hepsi" 
    ? items 
    : items.filter(item => item.category === activeCategory);

  const handleWhatsApp = (itemName: string) => {
    const message = encodeURIComponent(`Merhaba, ${itemName} hakkında bilgi almak istiyorum.`);
    window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
  };

  return (
    <>
      {/* Filter System */}
      <section className="bg-surface-container border-y border-outline-variant/10">
        <div className="max-w-7xl mx-auto px-8 py-6">
          <div className="flex flex-wrap items-center gap-4">
            <span className="text-on-surface-variant font-headline text-xs uppercase tracking-widest mr-4">Filtrele:</span>
            {categories.map((category) => (
              <button 
                key={category}
                onClick={() => setActiveCategory(category)}
                className={cn(
                  "px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all",
                  activeCategory === category 
                    ? "bg-primary text-on-primary" 
                    : "bg-surface-container-highest text-on-surface-variant hover:text-primary"
                )}
              >
                {category}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Fleet Grid */}
      <section className="max-w-7xl mx-auto px-8 py-20">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/10">
          {filteredItems.map((item, index) => (
            <div 
              key={index}
              className="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col"
            >
              <div className="aspect-[4/3] overflow-hidden relative">
                <Image 
                  src={item.image}
                  alt={item.name}
                  fill
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  className="object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className={cn(
                  "absolute top-4 left-4 px-3 py-1 text-[10px] font-black uppercase tracking-tighter",
                  item.status === "Müsait" ? "bg-primary text-on-primary" : "bg-error text-on-error"
                )}>
                  {item.status}
                </div>
              </div>
              <div className="p-8 flex-1 flex flex-col">
                <h3 className="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">
                  {item.name}
                </h3>
                <p className="text-on-surface-variant text-sm mb-6 font-light">
                  {item.description}
                </p>
                <div className="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
                  <div>
                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
                    <span className="text-on-surface font-headline font-bold text-xl">{item.capacity}</span>
                  </div>
                  <div>
                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
                    <span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
                  </div>
                </div>
                <button 
                  onClick={() => setSelectedItem(item)}
                  className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300"
                >
                  İncele
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Detail Modal */}
      <AnimatePresence>
        {selectedItem && (
          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8">
            <motion.div 
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setSelectedItem(null)}
              className="absolute inset-0 bg-background/95 backdrop-blur-sm"
            />
            <motion.div 
              initial={{ opacity: 0, scale: 0.95, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 20 }}
              className="relative w-full max-w-4xl bg-surface-container-low border border-outline-variant/20 overflow-hidden shadow-2xl"
            >
              <button 
                onClick={() => setSelectedItem(null)}
                className="absolute top-6 right-6 z-10 p-2 bg-background/50 hover:bg-primary hover:text-on-primary transition-colors text-white"
              >
                <X className="w-6 h-6" />
              </button>
              
              <div className="grid grid-cols-1 lg:grid-cols-2">
                <div className="relative aspect-[4/3] lg:aspect-auto h-full min-h-[300px]">
                  <Image 
                    src={selectedItem.image}
                    alt={selectedItem.name}
                    fill
                    sizes="(max-width: 1024px) 100vw, 50vw"
                    className="object-cover"
                  />
                </div>
                <div className="p-8 md:p-12 flex flex-col">
                  <span className="text-primary font-headline text-xs font-bold uppercase tracking-[0.3em] mb-4">
                    {selectedItem.category}
                  </span>
                  <h2 className="text-4xl md:text-5xl font-black text-on-surface uppercase tracking-tighter mb-6">
                    {selectedItem.name}
                  </h2>
                  <p className="text-on-surface-variant text-lg leading-relaxed mb-8">
                    {selectedItem.description}
                  </p>
                  
                  <div className="grid grid-cols-2 gap-px bg-outline-variant/20 mb-12">
                    <div className="bg-surface-container-low p-6">
                      <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
                      <span className="text-on-surface font-headline font-bold text-2xl">{selectedItem.capacity}</span>
                    </div>
                    <div className="bg-surface-container-low p-6">
                      <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
                      <span className="text-on-surface font-headline font-bold text-2xl">{selectedItem.reach}</span>
                    </div>
                  </div>

                  <div className="mt-auto flex flex-col sm:flex-row gap-4">
                    <button 
                      onClick={() => handleWhatsApp(selectedItem.name)}
                      className="flex-1 bg-primary text-on-primary px-8 py-5 font-headline font-bold uppercase tracking-widest flex items-center justify-center gap-3 hover:brightness-110 transition-all"
                    >
                      <MessageCircle className="w-6 h-6" />
                      Hemen Teklif Al
                    </button>
                    <a 
                      href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`}
                      className="flex-1 border border-outline-variant/30 text-white px-8 py-5 font-headline font-bold uppercase tracking-widest flex items-center justify-center gap-3 hover:bg-white/5 transition-all"
                    >
                      <Phone className="w-5 h-5" />
                      Bizi Arayın
                    </a>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </>
  );
}