import React from "react";
import { Property } from "../types";
import { X, ArrowRightLeft, Minimize2, Plus, ArrowUpRight } from "lucide-react";
import { formatIDR } from "../utils";
import { motion, AnimatePresence } from "motion/react";

interface CompareShelfProps {
  compareList: Property[];
  onRemoveFromCompare: (propertyId: string) => void;
  onClearCompare: () => void;
  onSelectProperty: (property: Property) => void;
  isOpen: boolean;
  onToggleOpen: () => void;
}

export default function CompareShelf({
  compareList,
  onRemoveFromCompare,
  onClearCompare,
  onSelectProperty,
  isOpen,
  onToggleOpen
}: CompareShelfProps) {
  if (compareList.length === 0) return null;

  return (
    <div
      className={`fixed bottom-0 left-0 right-0 z-50 bg-[#FDFCFB] border-t border-[#EEECE6] shadow-2xl transition-transform duration-500 ease-in-out ${
        isOpen ? "translate-y-0" : "translate-y-[calc(100%-52px)]"
      }`}
      id="compare-shelf-container"
    >
      {/* Shelf Header controller */}
      <div 
        className="bg-[#1A1A1A] text-[#FDFCFB] py-4 px-5 md:px-[80px] flex justify-between items-center cursor-pointer select-none border-b border-zinc-800" 
        onClick={onToggleOpen}
      >
        <div className="flex items-center space-x-3.5">
          <ArrowRightLeft className="w-3.5 h-3.5 text-[#C5A572] animate-pulse" />
          <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em]">
            ASSET COMPARISON REPOSITORY ({compareList.length} / 3 SELECTED)
          </span>
        </div>
        <div className="flex items-center space-x-6">
          <button
            onClick={(e) => {
              e.stopPropagation();
              onClearCompare();
            }}
            className="font-sans text-[9px] uppercase tracking-[0.25em] text-zinc-400 hover:text-white transition-colors cursor-pointer font-bold focus:outline-none"
          >
            DISCARD ALL
          </button>
          <button className="text-white hover:text-[#C5A572] transition-all focus:outline-none">
            {isOpen ? <Minimize2 size={13} /> : <span className="material-symbols-outlined text-[16px]">expand_less</span>}
          </button>
        </div>
      </div>

      {/* Comparison table grids */}
      <AnimatePresence>
        {isOpen && (
          <motion.div 
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="max-w-[1440px] mx-auto px-5 md:px-[80px] py-8 max-h-[420px] overflow-y-auto text-left"
          >
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6 items-start">
              
              {/* Headers Guide Column */}
              <div className="hidden md:flex flex-col justify-between py-2 text-zinc-500 space-y-4 border-r border-[#EEECE6] pr-6 self-stretch">
                <div className="h-32 flex flex-col justify-end">
                  <span className="font-serif text-lg font-light tracking-tight text-[#1A1A1A]">Metric Analysis</span>
                  <p className="font-sans text-[11px] text-zinc-400 leading-relaxed mt-1 font-light">
                    Evaluating raw structural configurations and capital layout indexes side-by-side.
                  </p>
                </div>
                <div className="space-y-4 font-sans text-[9px] font-bold uppercase tracking-[0.2em] text-[#C5A572]">
                  <div className="py-2.5 border-b border-[#EEECE6]/60">Format Class</div>
                  <div className="py-2.5 border-b border-[#EEECE6]/60">Geographic Anchor</div>
                  <div className="py-2.5 border-b border-[#EEECE6]/60">Capital Outlay</div>
                  <div className="py-2.5 border-b border-[#EEECE6]/60">Index valuation per sqft</div>
                  <div className="py-2.5 border-b border-[#EEECE6]/60">Chamber Layout</div>
                  <div className="py-2.5 border-b border-[#EEECE6]/60">Archival Age</div>
                </div>
              </div>

              {/* Compared Item Columns (Maximum 3 entries) */}
              <AnimatePresence mode="popLayout">
                {compareList.map((prop) => (
                  <motion.div 
                    layout
                    key={prop.id} 
                    initial={{ opacity: 0, x: -15 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, scale: 0.95 }}
                    className="space-y-4 relative group"
                    id={`compare-column-${prop.id}`}
                  >
                    {/* Discard item trigger */}
                    <button
                      onClick={() => onRemoveFromCompare(prop.id)}
                      className="absolute top-2.5 right-2.5 bg-white/95 text-[#1A1A1A] hover:bg-[#1A1A1A] hover:text-white border border-[#EEECE6] w-6 h-6 rounded-full flex items-center justify-center transition-colors z-25 cursor-pointer focus:outline-none"
                      title="Discard item from comparison"
                    >
                      <X size={11} />
                    </button>

                    {/* Imagery */}
                    <div className="h-32 overflow-hidden rounded-none relative bg-neutral-100 border border-[#EEECE6]/60">
                      <img
                        src={prop.heroImage}
                        alt={prop.title}
                        className="w-full h-full object-cover group-hover:scale-102 transition-transform duration-700"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent pointer-events-none" />
                      
                      <div className="absolute bottom-3.5 left-3.5 right-3.5">
                        <span className="font-sans text-[8px] uppercase tracking-[0.2em] text-[#C5A572] font-semibold block mb-0.5">
                          {prop.location.toUpperCase()}
                        </span>
                        <button
                          onClick={() => onSelectProperty(prop)}
                          className="font-serif text-[13px] text-white font-normal hover:text-[#C5A572] tracking-tight text-left truncate w-full cursor-pointer focus:outline-none flex items-center gap-1"
                        >
                          <span>{prop.title}</span>
                          <ArrowUpRight size={10} className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
                        </button>
                      </div>
                    </div>

                    {/* Values Rows */}
                    <div className="space-y-4 font-sans text-xs">
                      {/* Format category */}
                      <div className="py-2 border-b border-[#EEECE6]/60">
                        <span className="md:hidden font-bold text-zinc-400 block text-[9px] uppercase tracking-[0.15em] mb-1">Format Class</span>
                        <span className="text-[#1A1A1A] uppercase tracking-widest text-[10px] font-semibold">{prop.category}</span>
                      </div>

                      {/* Geographic Anchor */}
                      <div className="py-2 border-b border-[#EEECE6]/60">
                        <span className="md:hidden font-bold text-zinc-400 block text-[9px] uppercase tracking-[0.15em] mb-1">Geographic Anchor</span>
                        <span className="text-zinc-600 font-light">{prop.location}</span>
                      </div>

                      {/* Capital price outlay */}
                      <div className="py-2 border-b border-[#EEECE6]/60">
                        <span className="md:hidden font-bold text-zinc-400 block text-[9px] uppercase tracking-[0.15em] mb-1">Capital Outlay</span>
                        <span className="text-[#C5A572] font-semibold font-serif text-[13px]">{formatIDR(prop.price)}</span>
                      </div>

                      {/* Value per sqft */}
                      <div className="py-2 border-b border-[#EEECE6]/60">
                        <span className="md:hidden font-bold text-zinc-400 block text-[9px] uppercase tracking-[0.15em] mb-1">Valuation per Sq Ft</span>
                        <span className="text-[#1A1A1A] font-mono text-[11px]">
                          {formatIDR(Math.round(prop.price / prop.area))} / SQFT
                        </span>
                      </div>

                      {/* Room Layout specs info */}
                      <div className="py-2 border-b border-[#EEECE6]/60">
                        <span className="md:hidden font-bold text-zinc-400 block text-[9px] uppercase tracking-[0.15em] mb-1">Chamber Layout</span>
                        <span className="text-zinc-700 font-light font-sans">
                          {prop.beds} BHK Rooms • {prop.baths} Baths • {prop.area.toLocaleString()} SQFT
                        </span>
                      </div>

                      {/* Archival Age (Year built) */}
                      <div className="py-2 border-b border-[#EEECE6]/60">
                        <span className="md:hidden font-bold text-zinc-400 block text-[9px] uppercase tracking-[0.15em] mb-1">Archival Age</span>
                        <span className="text-[#1A1A1A] font-mono font-light text-[11px]">{prop.yearBuilt} AD</span>
                      </div>
                    </div>
                  </motion.div>
                ))}
              </AnimatePresence>

              {/* Empty slots blueprint grids */}
              {compareList.length < 3 &&
                Array.from({ length: 3 - compareList.length }).map((_, i) => (
                  <div
                    key={`empty-${i}`}
                    className="hidden md:flex flex-col items-center justify-center h-[360px] border border-dashed border-[#EEECE6] rounded-none text-center bg-[#F5F3EF]/30 p-6 relative overflow-hidden"
                  >
                    {/* Architectural Grid pattern */}
                    <div className="absolute inset-0 grid grid-cols-6 grid-rows-6 opacity-[0.02] pointer-events-none">
                      {Array.from({ length: 36 }).map((_, idx) => (
                        <div key={idx} className="border border-[#1A1A1A]" />
                      ))}
                    </div>
                    <div className="w-8 h-8 rounded-full border border-zinc-200 flex items-center justify-center text-zinc-400 z-10 mb-2">
                      <Plus size={14} />
                    </div>
                    <span className="font-sans text-[9px] font-bold uppercase tracking-[0.2em] text-[#C5A572] z-10">AVAILABLE MATRIX SLOT</span>
                    <p className="font-sans text-[10px] text-zinc-400 mt-1 font-light leading-relaxed max-w-[180px] z-10">
                      Target an asset card on the listings page to perform instant evaluations.
                    </p>
                  </div>
                ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}