'use client';

import React, { useState, useEffect } from 'react';
import { ShoppingCart, ChevronUp, Truck, Check } from 'lucide-react';
import { useFoodMartStore } from '@/store/foodmart';
import { motion, AnimatePresence } from 'framer-motion';

interface StickyCartBarProps {
  freeShippingThreshold?: number;
  shippingRate?: number;
  onOpenCart: () => void;
  onOpenCheckout: () => void;
}

function formatPrice(price: number): string {
  return new Intl.NumberFormat('id-ID').format(price);
}

export default function StickyCartBar({ freeShippingThreshold = 50000, shippingRate = 2000, onOpenCart, onOpenCheckout }: StickyCartBarProps) {
  const cart = useFoodMartStore((s) => s.cart);
  const getCartTotal = useFoodMartStore((s) => s.getCartTotal);
  const getCartCount = useFoodMartStore((s) => s.getCartCount);
  const [visible, setVisible] = useState(false);
  const [expanded, setExpanded] = useState(false);

  const total = getCartTotal();
  const count = getCartCount();
  const remaining = freeShippingThreshold - total;
  const isFreeShipping = remaining <= 0;
  const progress = Math.min((total / freeShippingThreshold) * 100, 100);
  const shipping = isFreeShipping ? 0 : shippingRate;

  useEffect(() => { setVisible(count > 0); }, [count]);

  if (!visible) return null;

  return (
    <AnimatePresence>
      <motion.div initial={{ y: 100, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: 100, opacity: 0 }}
        transition={{ type: 'spring', damping: 25, stiffness: 300 }} className="fixed bottom-0 left-0 right-0 z-40">
        <AnimatePresence>
          {expanded && (
            <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.2 }}
              className="overflow-hidden border-t border-[var(--border-hover)] bg-[var(--bg-card)]/95 backdrop-blur-md">
              <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
                <div className="mb-4">
                  <div className="mb-2 flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Truck className="h-4 w-4 text-emerald-400" />
                      <span className="text-xs font-medium text-[var(--text-secondary)]">
                        {isFreeShipping ? (
                          <span className="flex items-center gap-1 text-emerald-400"><Check className="h-3.5 w-3.5" />Gratis Ongkir!</span>
                        ) : (<>Tambah <span className="font-bold text-[var(--accent-400)]">Rp {formatPrice(remaining)}</span> lagi untuk gratis ongkir</>)}
                      </span>
                    </div>
                  </div>
                  <div className="h-2 overflow-hidden rounded-full bg-[var(--bg-hover)]">
                    <motion.div initial={{ width: 0 }} animate={{ width: `${progress}%` }} transition={{ duration: 0.5, ease: 'easeOut' }}
                      className={`h-full rounded-full ${isFreeShipping ? 'bg-gradient-to-r from-emerald-500 to-emerald-400' : 'bg-gradient-to-r from-[var(--accent-500)] to-[var(--accent-400)]'}`} />
                  </div>
                </div>
                <div className="space-y-2">
                  {cart.slice(0, 3).map((item, i) => (
                    <div key={i} className="flex items-center justify-between text-sm">
                      <span className="text-[var(--text-secondary)] truncate max-w-[60%]">{item.name} x{item.quantity}</span>
                      <span className="text-[var(--text-primary)]/80">Rp {formatPrice(item.price * item.quantity)}</span>
                    </div>
                  ))}
                  {cart.length > 3 && <p className="text-xs text-[var(--text-tertiary)]">+{cart.length - 3} item lainnya</p>}
                  <div className="flex items-center justify-between border-t border-[var(--border-default)] pt-2">
                    <span className="text-sm text-[var(--text-secondary)]">Total ({count} item)</span>
                    <div className="flex items-center gap-2">
                      {!isFreeShipping && <span className="text-xs text-[var(--text-tertiary)] line-through">+Ongkir Rp {formatPrice(shipping)}</span>}
                      <span className="text-lg font-bold text-[var(--accent-400)]">Rp {formatPrice(total + (isFreeShipping ? 0 : shipping))}</span>
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        <div className="border-t border-[var(--border-hover)] bg-[var(--bg-secondary)]/95 backdrop-blur-md">
          <div className="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between gap-3">
              <button onClick={() => setExpanded(!expanded)} className="flex items-center gap-3 transition-colors">
                <div className="relative">
                  <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--accent-500)] to-[var(--accent-400)] shadow-lg">
                    <ShoppingCart className="h-5 w-5 text-white" />
                  </div>
                  <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white ring-2" style={{ ringColor: 'var(--bg-secondary)' }}>
                    {count}
                  </span>
                </div>
                <div className="hidden sm:block text-left">
                  <p className="text-sm font-semibold text-[var(--text-primary)]">{count} Item di Keranjang</p>
                  <p className="text-xs text-[var(--text-secondary)]">{isFreeShipping ? '🚚 Gratis ongkir!' : `🚚 +Ongkir Rp ${formatPrice(shipping)}`}</p>
                </div>
                <ChevronUp className={`hidden sm:block h-4 w-4 text-[var(--text-quaternary)] transition-transform ${expanded ? 'rotate-180' : ''}`} />
              </button>
              <div className="flex-1 mx-3 sm:hidden">
                <div className="h-1.5 overflow-hidden rounded-full bg-[var(--bg-hover)]">
                  <div className={`h-full rounded-full transition-all duration-500 ${isFreeShipping ? 'bg-gradient-to-r from-emerald-500 to-emerald-400' : 'bg-gradient-to-r from-[var(--accent-500)] to-[var(--accent-400)]'}`}
                    style={{ width: `${progress}%` }} />
                </div>
              </div>
              <button onClick={onOpenCheckout}
                className="flex items-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 transition-all hover:shadow-xl hover:shadow-emerald-500/40 active:scale-95 sm:px-6">
                <span className="hidden sm:inline">Checkout</span><span className="sm:hidden">Pesan</span>
                <span className="font-bold">Rp {formatPrice(total + (isFreeShipping ? 0 : shipping))}</span>
              </button>
            </div>
          </div>
        </div>
      </motion.div>
    </AnimatePresence>
  );
}