Vendaweb-portal/components/checkout/CheckoutSummary.tsx

import React from "react";
import {
  Edit,
  Percent,
  FileText,
  CheckCircle,
  ShoppingCart,
  Package,
  Truck,
  DollarSign,
} from "lucide-react";
import DeliveryAvailabilityStatus from "./DeliveryAvailabilityStatus";

interface CheckoutSummaryProps {
  subtotal: number;
  totalWeight: number;
  taxValue: string;
  discountValue: string;
  total: number;
  isLoadingOrder: boolean;
  isLoadingPreOrder: boolean;
  shippingDate: Date | null;
  onTaxChange: (value: string) => void;
  onDiscountChange: (value: string) => void;
  onChangeTax: () => void;
  onApplyDiscount: () => void;
  onCreateOrder: () => void;
  onCreatePreOrder: () => void;
}

const CheckoutSummary: React.FC<CheckoutSummaryProps> = ({
  subtotal,
  totalWeight,
  taxValue,
  discountValue,
  total,
  isLoadingOrder,
  isLoadingPreOrder,
  shippingDate,
  onTaxChange,
  onDiscountChange,
  onChangeTax,
  onApplyDiscount,
  onCreateOrder,
  onCreatePreOrder,
}) => {
  return (
    <div className="bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden h-full flex flex-col">
      {/* Header */}
      <div className="p-6 bg-[#002147] text-white rounded-t-3xl relative overflow-hidden flex-shrink-0">
        <div className="relative z-10">
          <div className="flex items-center gap-3 mb-2">
            <div className="w-12 h-12 bg-orange-500/20 rounded-2xl flex items-center justify-center">
              <ShoppingCart className="w-6 h-6 text-orange-400" />
            </div>
            <div className="flex-1">
              <h3 className="text-xl font-black">Revisar Detalhes do Pedido</h3>
              <p className="text-xs text-orange-400 font-bold uppercase tracking-wider mt-0.5">
                Resumo
              </p>
            </div>
          </div>
        </div>
        <div className="absolute right-[-10%] top-[-10%] w-32 h-32 bg-orange-400/10 rounded-full blur-2xl"></div>
      </div>

      {/* Content */}
      <div className="p-6 flex-1 flex flex-col overflow-hidden">
        <div
          className="space-y-3 flex-1 overflow-y-auto pr-2"
          style={{ scrollbarWidth: "thin", scrollbarColor: "#cbd5e1 #f1f5f9" }}
        >
          {/* Valor do Pedido e Peso do Pedido - Mesma Linha */}
          <div className="grid grid-cols-2 gap-3">
            {/* Valor do Pedido */}
            <div className="bg-slate-50 rounded-2xl p-3 border border-slate-200 hover:border-orange-300 transition-colors">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 bg-blue-500/10 rounded-xl flex items-center justify-center flex-shrink-0">
                    <DollarSign className="w-4 h-4 text-blue-500" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-[10px] font-black uppercase text-slate-400 tracking-wider">
                      Valor do Pedido
                    </p>
                    <p className="text-base font-black text-[#002147] mt-0.5">
                      R$ {subtotal.toFixed(2)}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Peso do Pedido */}
            <div className="bg-slate-50 rounded-2xl p-3 border border-slate-200 hover:border-orange-300 transition-colors">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 bg-purple-500/10 rounded-xl flex items-center justify-center flex-shrink-0">
                    <Package className="w-4 h-4 text-purple-500" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-[10px] font-black uppercase text-slate-400 tracking-wider">
                      Peso do Pedido
                    </p>
                    <p className="text-base font-black text-[#002147] mt-0.5">
                      {totalWeight.toFixed(3)} Kg
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Taxa de Entrega e Desconto */}
          <div className="bg-slate-50 rounded-2xl p-3 border border-slate-200 hover:border-orange-300 transition-colors">
            {/* Taxa de Entrega */}
            <div className="mb-3">
              <div className="flex items-center gap-2 mb-2">
                <div className="w-9 h-9 bg-green-500/10 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Truck className="w-4 h-4 text-green-500" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-[10px] font-black uppercase text-slate-400 tracking-wider">
                    Taxa de Entrega
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <input
                  type="text"
                  value={taxValue}
                  onChange={(e) => onTaxChange(e.target.value)}
                  className="flex-1 bg-white border-2 border-slate-200 rounded-xl px-3 py-2 text-right font-black text-sm text-slate-700 outline-none focus:border-orange-500 transition-all"
                  disabled
                />
                <button
                  onClick={onChangeTax}
                  className="flex items-center gap-1.5 bg-white border-2 border-[#002147] text-[#002147] font-bold py-2 px-3 rounded-xl text-[10px] hover:bg-[#002147] hover:text-white transition-all flex-shrink-0"
                >
                  <Edit className="w-3.5 h-3.5" />
                  Alterar
                </button>
              </div>
            </div>

            {/* Divisor */}
            <div className="my-3 border-t border-slate-200"></div>

            {/* Desconto sobre o Total */}
            <div>
              <div className="flex items-center gap-2 mb-2">
                <div className="w-9 h-9 bg-red-500/10 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Percent className="w-4 h-4 text-red-500" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-[10px] font-black uppercase text-slate-400 tracking-wider">
                    Desconto sobre o Total
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <input
                  type="text"
                  value={discountValue}
                  onChange={(e) => onDiscountChange(e.target.value)}
                  className="flex-1 bg-white border-2 border-slate-200 rounded-xl px-3 py-2 text-right font-black text-sm text-slate-700 outline-none focus:border-orange-500 transition-all"
                />
                <button
                  onClick={onApplyDiscount}
                  className="flex items-center gap-1.5 bg-white border-2 border-[#002147] text-[#002147] font-bold py-2 px-3 rounded-xl text-[10px] hover:bg-[#002147] hover:text-white transition-all flex-shrink-0"
                >
                  <Percent className="w-3.5 h-3.5" />
                  Aplicar
                </button>
              </div>
            </div>
          </div>

          {/* Status de Disponibilidade de Entrega */}
          {shippingDate && (
            <DeliveryAvailabilityStatus
              selectedDate={shippingDate}
              orderWeight={totalWeight / 1000} // Converter de kg para toneladas
            />
          )}
        </div>

        {/* Valor Total e Botões - Fixo no final */}
        <div className="flex-shrink-0 mt-4 space-y-3">
          {/* Valor Total */}
          <div className="bg-gradient-to-br from-orange-50 to-orange-100/50 rounded-2xl p-4 border-2 border-orange-200">
            <div className="flex flex-col items-center text-center">
              <p className="text-[10px] font-black uppercase text-orange-600 tracking-widest mb-1">
                Valor Total
              </p>
              <p className="text-4xl font-black text-[#002147] leading-none">
                R$ {total.toFixed(2)}
              </p>
            </div>
          </div>

          {/* Botões Finais */}
          <div className="space-y-2">
            <button
              onClick={onCreatePreOrder}
              disabled={isLoadingPreOrder || isLoadingOrder}
              className="w-full flex items-center justify-center gap-2 bg-[#2d327d] text-white px-6 py-3 rounded-xl font-black uppercase text-xs tracking-widest hover:bg-[#1e2255] transition-all shadow-lg shadow-[#2d327d]/20 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isLoadingPreOrder ? (
                <>
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                  Processando...
                </>
              ) : (
                <>
                  <FileText className="w-4 h-4" />
                  FECHAR ORÇAMENTO
                </>
              )}
            </button>
            <button
              onClick={onCreateOrder}
              disabled={isLoadingOrder || isLoadingPreOrder}
              className="w-full flex items-center justify-center gap-2 bg-[#f97316] text-white px-6 py-3 rounded-xl font-black uppercase text-xs tracking-widest hover:bg-[#e86a14] transition-all shadow-lg shadow-orange-500/20 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isLoadingOrder ? (
                <>
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                  Processando...
                </>
              ) : (
                <>
                  <CheckCircle className="w-4 h-4" />
                  FECHAR PEDIDO
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CheckoutSummary;