import React from 'react';
import { Globe, Wallet, Plus, Trash2, Save, CheckCircle2 } from 'lucide-react';
import { GlobalConfig, CardConfig } from '../types';
import { formatNumber } from '../utils/math';

interface Props {
  globalConfig: GlobalConfig;
  setGlobalConfig: (c: GlobalConfig) => void;
  cards: CardConfig[];
  setCards: (c: CardConfig[]) => void;
  activeCardId: string;
  setActiveCardId: (id: string) => void;
  onSave: () => void;
  isSaving: boolean;
  saveStatus: 'success' | null;
}

export const ConfigTab: React.FC<Props> = ({
  globalConfig,
  setGlobalConfig,
  cards,
  setCards,
  activeCardId,
  setActiveCardId,
  onSave,
  isSaving,
  saveStatus
}) => {
  const handleAddCard = () => {
    const newCard: CardConfig = {
      id: Date.now().toString(),
      name: 'Thẻ mới',
      networkRate: '1.58',
      usdRate: '26000',
    };
    setCards([...cards, newCard]);
  };

  const handleRemoveCard = (id: string) => {
    if (cards.length <= 1) return;
    const newCards = cards.filter(c => c.id !== id);
    setCards(newCards);
    if (activeCardId === id) setActiveCardId(newCards[0].id);
  };

  const updateCard = (id: string, field: keyof CardConfig, value: any) => {
    setCards(cards.map(c => c.id === id ? { ...c, [field]: value } : c));
  };

  return (
    <div className="flex flex-col gap-6 animate-in fade-in duration-500 pb-12">
      {/* Vĩ mô */}
      <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div className="bg-indigo-50/50 p-4 border-b border-indigo-100 flex items-center gap-2">
          <Globe className="w-4 h-4 text-indigo-500" />
          <h2 className="font-bold text-sm text-slate-800">Tỷ Giá & Thanh Khoản</h2>
        </div>
        <div className="p-4 space-y-4">
          <div className="flex justify-between items-center p-2 rounded-xl hover:bg-slate-50 transition-colors">
            <div>
              <p className="text-sm font-bold text-slate-700">Giá vốn mua USD tại VN</p>
              <p className="text-[10px] text-slate-400 font-medium">VND → USD (Giá bạn mua ở tiệm vàng)</p>
            </div>
            <input 
              type="text" inputMode="numeric"
              value={formatNumber(globalConfig.cashVndUsd)}
              onChange={(e) => setGlobalConfig({ ...globalConfig, cashVndUsd: parseInt(e.target.value.replace(/\D/g, '')) || 0 })}
              className="w-28 bg-white border border-slate-200 rounded-xl p-2 text-sm font-bold text-right focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/10 outline-none transition-all shadow-sm"
            />
          </div>
          <div className="flex justify-between items-center p-2 rounded-xl hover:bg-slate-50 transition-colors">
            <div>
              <p className="text-sm font-bold text-slate-700">Tỷ giá Bali (USD → IDR)</p>
              <p className="text-[10px] text-slate-400 font-medium">Dùng cho cả tiền mặt & thẻ ngân hàng</p>
            </div>
            <input 
              type="text" inputMode="numeric"
              value={formatNumber(globalConfig.bcaBeli)}
              onChange={(e) => setGlobalConfig({ ...globalConfig, bcaBeli: parseInt(e.target.value.replace(/\D/g, '')) || 0 })}
              className="w-28 bg-white border border-slate-200 rounded-xl p-2 text-sm font-bold text-right focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/10 outline-none transition-all shadow-sm"
            />
          </div>
          <div className="bg-emerald-50/50 p-4 rounded-xl border border-emerald-100 mt-2">
            <div className="flex justify-between items-center">
              <div>
                <p className="text-sm font-bold text-emerald-800">Thanh khoản USD ($)</p>
                <p className="text-[10px] text-emerald-600 font-medium font-mono">CASH ON HAND</p>
              </div>
              <input 
                type="text" inputMode="numeric"
                value={formatNumber(globalConfig.usdAvailable)}
                onChange={(e) => setGlobalConfig({ ...globalConfig, usdAvailable: parseInt(e.target.value.replace(/\D/g, '')) || 0 })}
                className="w-20 bg-white border border-emerald-200 rounded-lg p-2 text-base font-black text-emerald-700 text-right focus:border-emerald-500 shadow-sm outline-none"
              />
            </div>
          </div>
        </div>
      </div>

      {/* Danh mục thẻ */}
      <div>
        <div className="flex items-center justify-between mb-4 px-1">
          <h2 className="font-bold text-slate-800 flex items-center gap-2">
            <Wallet className="w-5 h-5 text-indigo-600" /> Danh mục Thẻ
          </h2>
          <button 
            onClick={handleAddCard}
            className="text-xs font-bold text-indigo-600 bg-indigo-50 px-3 py-1.5 rounded-xl flex items-center gap-1.5 hover:bg-indigo-100 active:scale-95 transition-all shadow-sm cursor-pointer"
          >
            <Plus className="w-3.5 h-3.5" /> Thêm thẻ
          </button>
        </div>

        <div className="space-y-4">
          {cards.map((card) => (
            <div 
              key={card.id} 
              className={`bg-white rounded-2xl border-2 p-4 transition-all relative ${
                activeCardId === card.id ? 'border-indigo-500 shadow-lg ring-4 ring-indigo-500/5' : 'border-slate-200'
              }`}
            >
              <div className="flex items-center justify-between mb-4 border-b border-slate-50 pb-3">
                <label className="flex items-center gap-3 cursor-pointer flex-1">
                  <input 
                    type="radio" 
                    name="activeCard" 
                    checked={activeCardId === card.id}
                    onChange={() => setActiveCardId(card.id)}
                    className="w-5 h-5 text-indigo-600 focus:ring-indigo-500 border-slate-300"
                  />
                  <input 
                    type="text" 
                    value={card.name}
                    onChange={(e) => updateCard(card.id, 'name', e.target.value)}
                    placeholder="Tên thẻ..."
                    className="font-bold text-slate-900 bg-transparent outline-none focus:border-b-2 focus:border-indigo-200 w-full text-lg"
                  />
                </label>
                {cards.length > 1 && (
                  <button 
                    onClick={() => handleRemoveCard(card.id)} 
                    className="p-2 text-slate-300 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-all cursor-pointer"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                )}
              </div>
              
              <div className="space-y-3">
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5">
                    <label className="block text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                      USD→VND
                    </label>
                    <input 
                      type="text" inputMode="numeric"
                      value={formatNumber(card.usdRate)}
                      onChange={(e) => updateCard(card.id, 'usdRate', e.target.value.replace(/\D/g, ''))}
                      className="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-sm font-bold text-slate-700 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/5 transition-all"
                    />
                  </div>
                  <div className="space-y-1.5">
                    <label className="block text-[10px] font-bold text-indigo-400 uppercase tracking-widest">
                      IDR→VND
                    </label>
                    <input 
                      type="text" inputMode="decimal"
                      value={card.networkRate}
                      onChange={(e) => {
                        const val = e.target.value.replace(/,/g, '.');
                        if (val === '' || val === '.' || !isNaN(parseFloat(val))) {
                          updateCard(card.id, 'networkRate', val);
                        }
                      }}
                      className="w-full bg-indigo-50 border border-indigo-200 rounded-xl px-3 py-2 text-sm font-bold text-indigo-700 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/5 transition-all"
                    />
                  </div>
                </div>
                <p className="text-[10px] text-slate-400 leading-relaxed bg-slate-50 p-2 rounded-lg border border-slate-100">
                  <span className="font-bold text-slate-500">Mẹo:</span> Nhập tỉ giá cuối cùng từ <a href="https://www.visa.com/currencyconverter" target="_blank" rel="noreferrer" className="text-indigo-500 underline">Visa</a> hoặc <a href="https://www.mastercard.com/global/en/personal/get-support/convert-currency.html" target="_blank" rel="noreferrer" className="text-indigo-500 underline">Mastercard</a>. 
                  (Nhớ nhập Bank Fee vào trang web đó trước rồi mới copy kết quả vào đây).
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="mt-8 relative pt-2">
        <button 
          onClick={(e) => {
            e.preventDefault();
            onSave();
          }}
          disabled={isSaving}
          className={`w-full bg-indigo-600 hover:bg-indigo-700 active:scale-[0.98] text-white font-bold py-4 rounded-2xl shadow-xl shadow-indigo-100 transition-all flex items-center justify-center gap-3 disabled:opacity-50 cursor-pointer z-20 relative`}
        >
          {isSaving ? (
            <div className="flex items-center gap-2">
              <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
              <span className="animate-pulse">ĐANG LƯU...</span>
            </div>
          ) : saveStatus === 'success' ? (
            <>
              <CheckCircle2 className="w-5 h-5 text-emerald-300" />
              <span className="text-white">ĐÃ LƯU THÀNH CÔNG</span>
            </>
          ) : (
            <>
              <Save className="w-5 h-5" />
              <span>LƯU CẤU HÌNH & ÁP DỤNG</span>
            </>
          )}
        </button>
      </div>
    </div>
  );
};