"use client";

import React, { useState } from 'react';
import { useCartStore } from '@/lib/cart-store';
import { formatCurrency } from '@/lib/utils';
import Link from 'next/link';
import { ShieldCheck, ArrowRight, Tag } from 'lucide-react';

export function CartSummary() {
  const { items, getTotal } = useCartStore();
  const [promoCode, setPromoCode] = useState('');
  
  if (items.length === 0) return null;

  const total = getTotal();
  const subtotal = total / 1.23;
  const vat = total - subtotal;

  return (
    <div className="bg-slate-50 p-6 md:p-8 rounded-2xl border border-border sticky top-24">
      <h3 className="text-xl font-bold text-primary font-heading mb-6">Podsumowanie zamówienia</h3>

      {/* Kod rabatowy */}
      <div className="mb-8">
        <label htmlFor="promo" className="text-sm font-semibold text-text-muted mb-2 block">Posiadasz kod rabatowy?</label>
        <div className="flex gap-2">
          <div className="relative flex-grow">
            <Tag className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
            <input 
              id="promo"
              type="text" 
              value={promoCode}
              onChange={(e) => setPromoCode(e.target.value)}
              placeholder="Wprowadź kod"
              className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-border focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all text-sm"
            />
          </div>
          <button className="btn btn-outline btn-primary bg-white shrink-0">Zastosuj</button>
        </div>
      </div>

      {/* Kwoty */}
      <div className="space-y-4 mb-6 border-b border-border/50 pb-6">
        <div className="flex justify-between text-sm text-text-muted">
          <span>Suma netto</span>
          <span className="font-semibold text-primary">{formatCurrency(subtotal)}</span>
        </div>
        <div className="flex justify-between text-sm text-text-muted">
          <span>Podatek VAT (23%)</span>
          <span className="font-semibold text-primary">{formatCurrency(vat)}</span>
        </div>
      </div>

      {/* Total */}
      <div className="flex justify-between items-end mb-8">
        <span className="text-lg font-bold text-primary">Do zapłaty brutto</span>
        <span className="text-3xl font-extrabold text-primary font-heading text-right">{formatCurrency(total)}</span>
      </div>

      {/* Przycisk */}
      <Link href="/zamowienie" className="block w-full">
        <button className="btn btn-primary w-full font-bold group cursor-pointer text-white">
          Przejdź do zamówienia
          <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
        </button>
      </Link>

      {/* Zaufanie */}
      <div className="mt-6 flex flex-col gap-3">
        <div className="flex items-center gap-2 text-xs text-text-muted font-medium justify-center">
          <ShieldCheck className="w-4 h-4 text-green-600" />
          Bezpieczne zakupy z certyfikatem SSL
        </div>
      </div>
    </div>
  );
}