"use client";

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { useCartStore } from '@/lib/cart-store';
import { formatCurrency } from '@/lib/utils';
import { Minus, Plus, Trash2, Wrench } from 'lucide-react';

export function CartItems() {
  const { items, removeItem, updateQuantity, toggleInstall } = useCartStore();

  if (items.length === 0) {
    return (
      <div className="bg-white p-12 rounded-2xl border border-border text-center">
        <div className="w-20 h-20 bg-slate-50 text-slate-300 rounded-full flex items-center justify-center mx-auto mb-6">
          <Trash2 className="w-10 h-10" />
        </div>
        <h2 className="text-2xl font-bold text-primary font-heading mb-4">Twój koszyk jest pusty</h2>
        <p className="text-text-muted mb-8">Nie dodałeś jeszcze żadnych produktów do koszyka.</p>
        <Link href="/sklep" className="inline-flex bg-cta hover:bg-cta-hover text-white font-bold py-3 px-8 rounded-xl transition-colors">
          Przejdź do sklepu
        </Link>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {items.map((item) => {
        const itemPrice = item.withInstall ? item.priceWithInstall : item.price;
        const totalGross = itemPrice * item.quantity;

        return (
          <div key={item.id} className="bg-white p-6 rounded-2xl border border-border flex flex-col sm:flex-row gap-6 relative">
            {/* Usuń pozycję */}
            <button 
              onClick={() => removeItem(item.id)}
              className="absolute top-4 right-4 p-2 text-text-muted hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
              aria-label="Usuń z koszyka"
            >
              <Trash2 className="w-5 h-5" />
            </button>

            {/* Obraz */}
            <div className="relative w-24 h-24 sm:w-32 sm:h-32 shrink-0 bg-slate-50 rounded-xl p-2 border border-border">
              <Image
                src={item.image}
                alt={item.name}
                fill
                className="object-contain"
              />
            </div>

            {/* Treść */}
            <div className="flex flex-col flex-grow justify-between">
              <div>
                <div className="text-xs font-bold text-text-muted uppercase tracking-wider mb-1">
                  {item.brand}
                </div>
                <h3 className="text-lg font-bold text-primary font-heading leading-tight mb-2 pr-10">
                  <Link href={`/sklep/${item.slug}`} className="hover:text-accent transition-colors">
                    {item.name}
                  </Link>
                </h3>
                {/* Wariant mocowy */}
                {(item.label || item.power) && (
                  <div className="text-sm text-text-muted mb-3">
                    Wariant: <span className="font-semibold text-primary">{item.label || `${item.power} kW`}</span>
                  </div>
                )}
              </div>

              {/* Opcja Montażu i Cena jednostkowa */}
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mt-4">
                <label className="flex items-center gap-2 cursor-pointer group">
                  <div className="relative flex items-center">
                    <input
                      type="checkbox"
                      checked={item.withInstall}
                      onChange={() => toggleInstall(item.id)}
                      className="w-5 h-5 rounded border-border text-green-600 focus:ring-green-600"
                    />
                  </div>
                  <span className={`text-sm font-semibold flex items-center gap-1.5 ${item.withInstall ? 'text-green-700' : 'text-text-muted group-hover:text-primary'}`}>
                    <Wrench className="w-4 h-4" />
                    Z montażem
                  </span>
                </label>

                {/* Ilość i Cena */}
                <div className="flex items-center gap-6">
                  <div className="flex items-center border border-border rounded-lg bg-slate-50">
                    <button 
                      onClick={() => updateQuantity(item.id, item.quantity - 1)}
                      disabled={item.quantity <= 1}
                      className="w-8 h-8 flex items-center justify-center text-text-muted hover:text-primary disabled:opacity-50"
                    >
                      <Minus className="w-4 h-4" />
                    </button>
                    <span className="w-8 text-center text-sm font-bold">{item.quantity}</span>
                    <button 
                      onClick={() => updateQuantity(item.id, item.quantity + 1)}
                      className="w-8 h-8 flex items-center justify-center text-text-muted hover:text-primary"
                    >
                      <Plus className="w-4 h-4" />
                    </button>
                  </div>
                  <div className="text-xl font-extrabold text-primary font-heading w-24 text-right">
                    {formatCurrency(totalGross)}
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}