'use client';

import Image from 'next/image';
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';
import { Card, CardContent } from '@/components/ui/card';
import { History } from 'lucide-react';
import type { Shoe } from '@/lib/shoe-database';

interface HistorySidebarProps {
  history: Shoe[];
  isOpen: boolean;
  onOpenChange: (isOpen: boolean) => void;
  onItemClick: (shoe: Shoe) => void;
}

export default function HistorySidebar({ history, isOpen, onOpenChange, onItemClick }: HistorySidebarProps) {
  return (
    <Sheet open={isOpen} onOpenChange={onOpenChange}>
      <SheetContent className="flex flex-col h-full bg-black/80 backdrop-blur-xl border-l border-white/20 text-white">
        <SheetHeader className="border-b border-white/10 pb-6">
          <SheetTitle className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full flex items-center justify-center border border-white/30">
              <History size={20} className="text-blue-400" />
            </div>
            Historial de Escaneos
          </SheetTitle>
        </SheetHeader>
        <div className="flex-1 mt-6 space-y-3 py-2 overflow-y-auto">
          {history.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-64 text-center">
              <div className="w-16 h-16 bg-gradient-to-br from-gray-500/20 to-gray-600/20 rounded-full flex items-center justify-center mb-4 border border-white/10">
                <History size={24} className="text-gray-400" />
              </div>
              <p className="text-white/60 text-lg mb-2">Sin historial</p>
              <p className="text-white/40 text-sm">Los zapatos escaneados aparecerán aquí</p>
            </div>
          ) : (
            history.map((shoe, index) => (
              <div
                key={`${shoe.id}-${index}`}
                className="group cursor-pointer"
                onClick={() => onItemClick(shoe)}
              >
                <div className="bg-white/5 hover:bg-white/10 backdrop-blur-sm border border-white/10 hover:border-white/20 rounded-xl p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl">
                  <div className="flex items-center space-x-4">
                    <div className="relative">
                      <div className="w-14 h-14 rounded-lg overflow-hidden border border-white/20 group-hover:border-white/30 transition-colors">
                        <Image
                          src={shoe.imageUrl}
                          alt={shoe.name}
                          width={56}
                          height={56}
                          className="object-cover w-full h-full group-hover:scale-110 transition-transform duration-300"
                        />
                      </div>
                      {shoe.promotions && shoe.promotions.length > 0 && (
                        <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border border-white/50"></div>
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <h4 className="font-semibold text-white text-sm leading-tight truncate group-hover:text-blue-300 transition-colors">
                        {shoe.name}
                      </h4>
                      <div className="flex items-center space-x-2 mt-1">
                        <p className="text-green-400 font-bold text-sm">${shoe.price.toFixed(2)}</p>
                        {shoe.promotions?.find(p => p.originalPrice) && (
                          <p className="text-gray-500 text-xs line-through">
                            ${shoe.promotions.find(p => p.originalPrice)?.originalPrice?.toFixed(2)}
                          </p>
                        )}
                      </div>
                      <p className="text-white/50 text-xs mt-1 truncate">{shoe.description}</p>
                    </div>
                    <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                      <div className="w-6 h-6 bg-blue-500/30 rounded-full flex items-center justify-center">
                        <span className="text-blue-300 text-xs">→</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
      </SheetContent>
    </Sheet>
  );
}