'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { Trash2, ArrowRight, ShieldCheck, ShoppingBag } from 'lucide-react';

export default function CartPage() {
  const [items, setItems] = useState([
    {
      id: 1,
      name: 'Voltix Pro 48V 30Ah LiFePO4 Scooter Battery',
      sku: 'BAT-48V-30AH-LFP',
      price: 19999,
      quantity: 1,
      voltage: '48V',
      chemistry: 'LFP'
    }
  ]);

  const updateQuantity = (id: number, delta: number) => {
    setItems((prev) =>
      prev
        .map((item) => {
          if (item.id === id) {
            const newQty = item.quantity + delta;
            return newQty > 0 ? { ...item, quantity: newQty } : null;
          }
          return item;
        })
        .filter(Boolean) as typeof items
    );
  };

  const removeItem = (id: number) => {
    setItems((prev) => prev.filter((item) => item.id !== id));
  };

  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const gst = Math.round(subtotal * 0.18);
  const shipping = items.length > 0 ? 250 : 0;
  const total = subtotal + gst + shipping;

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
      <h1 className="text-3xl font-extrabold text-slate-900 tracking-tight mb-8">Shopping Cart</h1>

      {items.length === 0 ? (
        <div className="bg-white border border-slate-200 rounded-2xl p-12 text-center max-w-lg mx-auto">
          <ShoppingBag className="w-16 h-16 text-slate-300 mx-auto mb-4" />
          <h2 className="text-lg font-bold text-slate-900">Your cart is currently empty</h2>
          <p className="text-sm text-slate-500 mt-1 mb-6">
            Find the right battery pack for your electric vehicle model.
          </p>
          <Link
            href="/products"
            className="inline-flex items-center bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-sm px-6 py-3 rounded-xl transition"
          >
            Browse EV Batteries
          </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">
            {items.map((item) => (
              <div
                key={item.id}
                className="bg-white border border-slate-200 rounded-xl p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4"
              >
                <div>
                  <span className="text-[10px] font-bold uppercase tracking-wider text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full">
                    {item.chemistry} • {item.voltage}
                  </span>
                  <h3 className="font-bold text-slate-900 text-sm mt-1">{item.name}</h3>
                  <p className="text-xs text-slate-500 font-mono mt-0.5">SKU: {item.sku}</p>
                  <p className="text-sm font-extrabold text-slate-900 mt-2">
                    ₹{item.price.toLocaleString('en-IN')}
                  </p>
                </div>

                <div className="flex items-center justify-between sm:justify-end space-x-6">
                  {/* Quantity Counter */}
                  <div className="flex items-center border border-slate-200 rounded-lg overflow-hidden bg-slate-50">
                    <button
                      onClick={() => updateQuantity(item.id, -1)}
                      className="px-3 py-1.5 text-slate-600 hover:bg-slate-200 font-bold text-sm"
                    >
                      -
                    </button>
                    <span className="px-3 py-1.5 text-xs font-bold text-slate-900">
                      {item.quantity}
                    </span>
                    <button
                      onClick={() => updateQuantity(item.id, 1)}
                      className="px-3 py-1.5 text-slate-600 hover:bg-slate-200 font-bold text-sm"
                    >
                      +
                    </button>
                  </div>

                  <button
                    onClick={() => removeItem(item.id)}
                    className="text-slate-400 hover:text-rose-600 transition"
                    title="Remove item"
                  >
                    <Trash2 className="w-5 h-5" />
                  </button>
                </div>
              </div>
            ))}

            <div className="p-4 bg-slate-100 rounded-xl text-xs text-slate-600 flex items-center space-x-3">
              <ShieldCheck className="w-5 h-5 text-emerald-600 shrink-0" />
              <span>Prices and real-time inventory reservation are re-verified by the backend during checkout.</span>
            </div>
          </div>

          {/* Order Summary */}
          <div className="bg-white border border-slate-200 rounded-xl p-6 h-fit space-y-4 shadow-sm">
            <h2 className="font-bold text-slate-900 text-base pb-3 border-b border-slate-100">
              Order Summary
            </h2>

            <div className="space-y-2 text-sm text-slate-600">
              <div className="flex justify-between">
                <span>Cart Subtotal</span>
                <span className="font-semibold text-slate-900">₹{subtotal.toLocaleString('en-IN')}</span>
              </div>
              <div className="flex justify-between">
                <span>Applicable GST (18%)</span>
                <span className="font-semibold text-slate-900">₹{gst.toLocaleString('en-IN')}</span>
              </div>
              <div className="flex justify-between">
                <span>Specialized EV Battery Logistics</span>
                <span className="font-semibold text-slate-900">₹{shipping.toLocaleString('en-IN')}</span>
              </div>
            </div>

            <div className="pt-3 border-t border-slate-200 flex justify-between items-baseline">
              <span className="text-base font-bold text-slate-900">Final Total</span>
              <span className="text-2xl font-black text-emerald-700">₹{total.toLocaleString('en-IN')}</span>
            </div>

            <Link
              href="/checkout"
              className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3.5 px-4 rounded-xl transition flex items-center justify-center space-x-2 text-sm shadow-md shadow-emerald-600/20"
            >
              <span>Proceed to Checkout</span>
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      )}
    </div>
  );
}