import React from 'react';
import { Banknote, Globe, CreditCard, Info } from 'lucide-react';
import { VendorState, CalculationResult } from '../types';
import { formatNumber } from '../utils/math';

interface Props {
  id: string;
  title: string;
  state: VendorState;
  onChange: (state: VendorState) => void;
  result: CalculationResult;
  bestOptionId: string | null;
  usdAvailable: number;
}

export const VendorCard: React.FC<Props> = ({
  id,
  title,
  state,
  onChange,
  result,
  bestOptionId,
  usdAvailable
}) => {
  const hasPrice = parseFloat(state.price) > 0;

  const options = [
    { key: 'cash', label: 'Tiền mặt', icon: Banknote, value: result.cashVnd, possible: result.isCashPossible, formula: result.formulas.cash },
    { key: 'online', label: 'Online Transaction', icon: Globe, value: result.onlineVnd, possible: true, formula: result.formulas.online },
    { key: 'pos', label: 'Quẹt POS', icon: CreditCard, value: result.posVnd, possible: true, formula: result.formulas.pos },
  ];

  const handlePriceChange = (value: string) => {
    // Nếu là USD, cho phép nhập dấu chấm và tối đa 2 số thập phân
    if (state.currency === 'USD') {
      const cleaned = value.replace(/[^0-9.]/g, '');
      const parts = cleaned.split('.');
      if (parts.length > 2) return; // Không cho nhập 2 dấu chấm
      onChange({ ...state, price: cleaned });
    } else {
      const numericStr = value.replace(/\D/g, '');
      onChange({ ...state, price: numericStr });
    }
  };

  const getDisplayPrice = () => {
    if (state.currency === 'USD') return state.price;
    return formatNumber(state.price);
  };

  return (
    <div className={`p-4 rounded-2xl border-2 transition-all duration-300 ${hasPrice ? 'bg-white border-slate-200 shadow-sm' : 'bg-slate-50 border-slate-100'}`}>
      <h3 className="font-bold text-slate-800 mb-3">{title}</h3>
      
      <div className="flex gap-2 mb-4">
        <input 
          type="text"
          inputMode={state.currency === 'USD' ? 'decimal' : 'numeric'}
          value={getDisplayPrice()}
          onChange={(e) => handlePriceChange(e.target.value)}
          placeholder="Nhập giá..."
          className="flex-1 w-full min-w-0 bg-white border border-slate-300 rounded-xl px-3 py-2.5 font-bold text-slate-800 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 text-lg shadow-sm"
        />
        <div className="flex bg-slate-100 rounded-xl p-1 border border-slate-200 shrink-0">
          {['USD', 'IDR'].map((cur) => (
            <button
              key={cur}
              onClick={() => onChange({ ...state, currency: cur as 'USD' | 'IDR' })}
              className={`px-3 py-1.5 rounded-lg text-sm font-bold transition-all ${state.currency === cur ? 'bg-white shadow text-indigo-600' : 'text-slate-500'}`}
            >
              {cur}
            </button>
          ))}
        </div>
      </div>

      <div className="space-y-2">
        {options.map((opt) => {
          const optionId = `${id}-${opt.key}`;
          const isBest = bestOptionId === optionId;
          const isIlliquid = opt.key === 'cash' && !opt.possible && hasPrice;

          return (
            <div 
              key={opt.key}
              className={`flex flex-col p-3 rounded-xl border transition-all ${
                isBest 
                  ? 'bg-indigo-50 border-indigo-300 shadow-sm' 
                  : isIlliquid 
                    ? 'bg-red-50/30 border-red-100 opacity-60' 
                    : 'bg-slate-50/50 border-slate-100'
              }`}
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <opt.icon className={`w-4 h-4 ${isBest ? 'text-indigo-600' : isIlliquid ? 'text-red-400' : 'text-slate-400'}`} />
                  <span className={`text-xs font-semibold ${isBest ? 'text-indigo-700' : isIlliquid ? 'text-red-500 line-through' : 'text-slate-600'}`}>
                    {opt.label}
                  </span>
                  {hasPrice && opt.formula && (
                    <div className="group/tooltip relative flex items-center ml-1">
                      <Info className={`w-3.5 h-3.5 cursor-help transition-colors ${isBest ? 'text-indigo-400 hover:text-indigo-700' : 'text-slate-400 hover:text-slate-700'}`} />
                      <div className="absolute bottom-full left-1/2 -translate-x-[20%] sm:-translate-x-1/2 mb-2 w-max max-w-[240px] opacity-0 invisible group-hover/tooltip:opacity-100 group-hover/tooltip:visible transition-all duration-200 z-50 pointer-events-none">
                        <div className="bg-slate-900 text-white text-[10px] sm:text-xs p-2.5 rounded-xl shadow-xl whitespace-pre-wrap leading-relaxed">
                          {opt.formula}
                        </div>
                        <div className="w-2.5 h-2.5 bg-slate-900 rotate-45 absolute -bottom-1 left-[20%] sm:left-1/2 sm:-translate-x-1/2"></div>
                      </div>
                    </div>
                  )}
                </div>
                <div className={`font-bold ${isBest ? 'text-indigo-600 text-base' : isIlliquid ? 'text-red-500 text-sm line-through' : 'text-slate-700 text-sm'}`}>
                  {opt.value > 0 ? `${formatNumber(opt.value)} ₫` : '---'}
                </div>
              </div>
              
              {opt.key === 'pos' && (
                <label className="flex items-center gap-2 mt-2 self-start cursor-pointer group">
                  <input 
                    type="checkbox" 
                    checked={state.surcharge}
                    onChange={(e) => onChange({ ...state, surcharge: e.target.checked })}
                    className="w-3.5 h-3.5 rounded text-indigo-600 focus:ring-indigo-500 border-slate-300"
                  />
                  <span className={`text-[10px] font-medium transition-colors ${isBest ? 'text-indigo-600' : 'text-slate-500 group-hover:text-indigo-600'}`}>
                    +3% phí quẹt POS
                  </span>
                </label>
              )}

              {isIlliquid && (
                <div className="text-[10px] text-red-500 font-medium mt-1">
                  Vượt thanh khoản! (Cần {result.usdNeeded.toFixed(1)}$ / Có {usdAvailable}$)
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};