import React from 'react';
import { cn } from '@/lib/utils';
import { ChevronUp, Info } from 'lucide-react';
import { useDisplayMode } from '@/context/DisplayModeContext';

interface StickyTotalsProps {
  total_ht_calcule: number;
  total_taxes_calcule: number;
  total_ttc_calcule: number;
}

const formatCurrency = (amount: number): string => {
  return new Intl.NumberFormat('fr-FR', {
    style: 'currency',
    currency: 'EUR',
  }).format(amount || 0);
};

const StickyTotals: React.FC<StickyTotalsProps> = ({
  total_ht_calcule,
  total_taxes_calcule,
  total_ttc_calcule,
}) => {
  const { displayMode } = useDisplayMode();
  const isCompact = displayMode === 'compact';

  return (
    <div
      className={cn(
        'sticky bottom-0 z-40 bg-white/95 backdrop-blur-sm dark:bg-gray-950/95 border-t border-gray-200 dark:border-gray-800 shadow-[0_-4px_20px_-5px_rgba(0,0,0,0.1)] transition-all duration-300',
        'shrink-0',
        isCompact ? 'py-2' : 'py-4'
      )}
    >
      <div className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
          
          {/* Left: Conditions & Notes */}
          <div className="hidden md:flex items-center gap-6 flex-1">
            <div className="flex flex-col gap-1 w-[200px]">
              <label className="text-[10px] uppercase font-bold text-gray-400 tracking-wider">
                Conditions de paiement
              </label>
              <select className="bg-transparent border-b border-gray-200 dark:border-gray-700 text-sm py-1 focus:outline-none focus:border-[#2A6F4F] transition-colors text-gray-700 dark:text-gray-300">
                <option>30 jours fin de mois</option>
                <option>45 jours fin de mois</option>
                <option>Comptant à la commande</option>
                <option>A réception de facture</option>
              </select>
            </div>

            <div className="flex flex-col gap-1 flex-1 max-w-[300px]">
              <label className="text-[10px] uppercase font-bold text-gray-400 tracking-wider">
                Note rapide
              </label>
              <input
                type="text"
                placeholder="Ajouter une mention sur la facture..."
                className="bg-transparent border-b border-gray-200 dark:border-gray-700 text-sm py-1 focus:outline-none focus:border-[#2A6F4F] transition-colors w-full"
              />
            </div>
          </div>

          {/* Right: Totals */}
          <div className="flex items-center gap-8 ml-auto">
            
            {/* Breakdown */}
            <div className="flex items-center gap-6 text-gray-500 dark:text-gray-400 border-r border-gray-200 dark:border-gray-800 pr-6 mr-2">
              <div className="flex flex-col items-end">
                <span className="text-[10px] uppercase font-bold tracking-wider text-gray-400">
                  Total HT
                </span>
                <span className="font-mono font-medium text-gray-900 dark:text-gray-200 text-base">
                  {formatCurrency(total_ht_calcule)}
                </span>
              </div>

              <div className="flex flex-col items-end">
                <span className="text-[10px] uppercase font-bold tracking-wider text-gray-400">
                  TVA (20%)
                </span>
                <span className="font-mono font-medium text-gray-900 dark:text-gray-200 text-base">
                  {formatCurrency(total_taxes_calcule)}
                </span>
              </div>
            </div>

            {/* Grand Total */}
            <div className="flex flex-col items-end">
              <span className="text-[10px] uppercase font-bold tracking-wider text-[#2A6F4F]">
                Net à Payer TTC
              </span>
              <span
                className={cn(
                  'font-mono font-bold text-[#1F2937] dark:text-white leading-none mt-1',
                  isCompact ? 'text-xl' : 'text-2xl'
                )}
              >
                {formatCurrency(total_ttc_calcule)}
              </span>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
};

export default StickyTotals;