"use client";

import { useCartStore } from "@/store/cart";
import { Trash2, Minus, Plus, ArrowRight, ShieldCheck } from "lucide-react";
import Link from "next/link";
import { useEffect, useState } from "react";

export default function CartPage() {
  const { items, removeItem, updateQuantity, getTotalPrice, getTotalItems } = useCartStore();
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient) return null;

  return (
    <div className="min-h-screen bg-muted/30 pt-32 pb-24">
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        
        <h1 className="text-3xl font-black text-foreground mb-8">Votre Panier</h1>

        {items.length === 0 ? (
          <div className="bg-card p-12 text-center rounded-xl border border-border/50 shadow-sm">
            <h2 className="text-2xl font-bold mb-4">Votre panier K-Creation est vide.</h2>
            <p className="text-gray-500 mb-8">Vérifiez vos articles enregistrés ci-dessous ou continuez vos achats.</p>
            <Link 
              href="/#products" 
              className="bg-brand-accent text-white px-8 py-3 rounded-full font-bold hover:bg-brand-accent/90 transition-colors inline-block"
            >
              Continuer vos achats
            </Link>
          </div>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            {/* Cart Items List */}
            <div className="lg:col-span-2 space-y-4">
              <div className="bg-card rounded-xl border border-border/50 p-6 shadow-sm">
                <div className="flex justify-between items-end border-b border-border/50 pb-4 mb-6">
                  <span className="text-xl font-bold text-black">Articles</span>
                  <span className="text-sm text-black">Prix</span>
                </div>

                <div className="space-y-8">
                  {items.map((item) => (
                    <div key={item.id} className="flex flex-col sm:flex-row gap-6 border-b border-border/50 pb-8 last:border-0 last:pb-0">
                      <div className="w-full sm:w-48 h-48 bg-white rounded-md p-4 flex items-center justify-center flex-shrink-0">
                        <img src={item.image} alt={item.name} className="max-h-full max-w-full object-contain mix-blend-multiply" />
                      </div>
                      
                      <div className="flex-grow flex flex-col">
                        <div className="flex justify-between items-start">
                          <div>
                            <h3 className="text-xl font-bold text-foreground mb-1">{item.name}</h3>
                            <p className="text-sm text-green-600 font-bold mb-1">En Stock</p>
                            <p className="text-xs text-gray-500 mb-4">Éligible à la livraison GRATUITE</p>
                            
                            <div className="flex items-center gap-1 text-sm text-gray-500 mb-4">
                              <ShieldCheck className="w-4 h-4 text-brand-accent" /> Garantie 5 ans incluse
                            </div>
                          </div>
                          <div className="text-xl font-black">
                            {item.price.toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2})} DZD
                          </div>
                        </div>

                        <div className="mt-auto flex items-center gap-6">
                          {/* Quantity Selector */}
                          <div className="flex items-center border border-border rounded-full overflow-hidden bg-background">
                            <button 
                              onClick={() => updateQuantity(item.id, Math.max(1, item.quantity - 1))}
                              className="px-3 py-1.5 hover:bg-muted text-gray-600 transition-colors"
                            >
                              <Minus className="w-4 h-4" />
                            </button>
                            <span className="px-4 font-bold text-sm">{item.quantity}</span>
                            <button 
                              onClick={() => updateQuantity(item.id, item.quantity + 1)}
                              className="px-3 py-1.5 hover:bg-muted text-gray-600 transition-colors"
                            >
                              <Plus className="w-4 h-4" />
                            </button>
                          </div>

                          <div className="w-px h-4 bg-border"></div>

                          <button 
                            onClick={() => removeItem(item.id)}
                            className="text-sm text-red-500 hover:underline flex items-center gap-1"
                          >
                            <Trash2 className="w-4 h-4" /> Supprimer
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Order Summary Sidebar */}
            <div className="lg:col-span-1">
              <div className="bg-card rounded-xl border border-border/50 p-6 shadow-sm sticky top-32">
                <h3 className="text-xl font-bold mb-6 text-black">Résumé de la commande</h3>
                
                <div className="space-y-4 mb-6 text-sm text-black">
                  <div className="flex justify-between">
                    <span className="text-black">Articles ({getTotalItems()}):</span>
                    <span className="font-semibold text-black">{getTotalPrice().toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2})} DZD</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-black">Frais de livraison:</span>
                    <span className="font-semibold text-black">Gratuit</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-black">Total hors taxes:</span>
                    <span className="font-semibold text-black">{getTotalPrice().toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2})} DZD</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-black">Taxes estimées:</span>
                    <span className="font-semibold text-black">0,00 DZD</span>
                  </div>
                </div>

                <div className="border-t border-border/50 pt-4 mb-8">
                  <div className="flex justify-between items-center text-xl text-brand-black">
                    <span className="font-bold">Total TTC:</span>
                    <span className="font-black">{getTotalPrice().toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2})} DZD</span>
                  </div>
                </div>

                <Link 
                  href="/checkout"
                  className="w-full bg-brand-accent hover:bg-red-700 text-white py-3.5 rounded-md font-bold text-base flex justify-center items-center gap-2 transition-colors shadow-sm mb-4"
                >
                  Passer la commande ({getTotalItems()} articles)
                </Link>

                <div className="bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 p-3 rounded-md text-xs flex items-start gap-2">
                  <ShieldCheck className="w-4 h-4 flex-shrink-0 mt-0.5" />
                  <span>Transaction sécurisée. Nous ne stockons pas vos coordonnées bancaires. Le paiement à la livraison est disponible.</span>
                </div>
              </div>
            </div>

          </div>
        )}

      </div>
    </div>
  );
}