import React, { useState, useEffect, useMemo } from 'react';
import { Calculator, Settings2, Zap, CreditCard, LogIn, LogOut } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { supabase } from './lib/supabase';
import { User } from '@supabase/supabase-js';

import { GlobalConfig, CardConfig, VendorState, UserSettings } from './types';
import { calculateCosts, formatNumber } from './utils/math';
import { VendorCard } from './components/VendorCard';
import { ConfigTab } from './components/ConfigTab';

const initialGlobal: GlobalConfig = {
  cashVndUsd: 26800, // Realistic VND/USD rate in VN
  bcaBeli: 16775,    // Bali Money Changer rate (IDR/USD)
  usdAvailable: 600
};

const initialCards: CardConfig[] = [
  // Final rates including fees (using strings for precision preservation in UI)
  { id: 'tcb-master-credit', name: 'TCB MasterC. Credit',  networkRate: '1.5881862', usdRate: '27333' },
  { id: 'tcb-visa-debit',   name: 'TCB Visa Debit',      networkRate: '1.580256',  usdRate: '27280' }
];

export default function App() {
  const [activeTab, setActiveTab] = useState<'calc' | 'config'>('calc');
  const [user, setUser] = useState<User | null>(null);
  const [isReady, setIsReady] = useState(false);

  // App State
  const [globalConfig, setGlobalConfig] = useState<GlobalConfig>(initialGlobal);
  const [cards, setCards] = useState<CardConfig[]>(initialCards);
  const [activeCardId, setActiveCardId] = useState('tcb-master-credit');

  // UI State
  const [isSaving, setIsSaving] = useState(false);
  const [saveStatus, setSaveStatus] = useState<'success' | null>(null);

  // Vendor States — Option A defaults to USD, Option B defaults to IDR
  const [optionA, setOptionA] = useState<VendorState>({ price: '', currency: 'USD', surcharge: false });
  const [optionB, setOptionB] = useState<VendorState>({ price: '', currency: 'IDR', surcharge: false });

  // 1. Auth
  useEffect(() => {
    // Check initial session
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null);
      setIsReady(true);
    });

    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
      setUser(session?.user ?? null);
      if (event === 'INITIAL_SESSION' || event === 'SIGNED_IN' || event === 'SIGNED_OUT') {
        setIsReady(true);
      }
      if (event === 'SIGNED_IN' && window.location.hash) {
        window.history.replaceState(null, '', window.location.pathname);
      }
    });
    return () => subscription.unsubscribe();
  }, []);

  const handleGoogleLogin = async () => {
    try {
      const { error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: { redirectTo: window.location.origin }
      });
      if (error) throw error;
    } catch (error) {
      console.error('Google Login failed:', error);
    }
  };

  const handleGuestLogin = async () => {
    try {
      const { error } = await supabase.auth.signInAnonymously();
      if (error) throw error;
    } catch (error) {
      console.error('Guest Login failed:', error);
      alert("Guest login failed. Please ensure 'Allow Anonymous Sign-ins' is enabled in Supabase.");
    }
  };

  // 2. Data Sync
  useEffect(() => {
    if (!user) return;

    const fetchData = async () => {
      try {
        const { data, error } = await supabase
          .from('user_configs')
          .select('settings')
          .eq('user_id', user.id)
          .single();

        if (error && error.code !== 'PGRST116') throw error;

        if (data?.settings) {
          const settings = data.settings as UserSettings;
          
          // Data Migration / Safety Check: spread defaults first, then override with saved data
          const loadedGlobal: GlobalConfig = {
            ...initialGlobal,
            ...settings.globalConfig
          };
          // Remove legacy visaRate field if it crept in from old saves
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          delete (loadedGlobal as any).visaRate;

          // Data migration: ensure new fields exist in old saves and remove deprecated ones
          const loadedCards = (settings.cards || initialCards).map((c: any) => {
            // Force legacy cards to new defaults
            if (c.id === '1' || c.id === '2') {
              return c.id === '1' 
                ? initialCards.find(ic => ic.id === 'tcb-master-credit')!
                : initialCards.find(ic => ic.id === 'tcb-visa-debit')!;
            }

            const { fxRate, bankSellRate, ...rest } = c; // remove deprecated fields
            const initialMatch = initialCards.find(ic => ic.id === c.id);
            
            return {
              ...(initialMatch || initialCards[0]),
              ...rest,
              networkRate: String(c.networkRate ?? (initialMatch?.networkRate || '1.58')),
              usdRate: String(c.usdRate ?? bankSellRate ?? (initialMatch?.usdRate || '26000')),
            };
          });
          
          // If the saved activeCardId is legacy, update it
          let newActiveId = settings.activeCardId || 'tcb-master-credit';
          if (newActiveId === '1') newActiveId = 'tcb-master-credit';
          if (newActiveId === '2') newActiveId = 'tcb-visa-debit';

          setGlobalConfig(loadedGlobal);
          setCards(loadedCards);
          setActiveCardId(newActiveId);
        }
      } catch (err) {
        console.error('Fetch error:', err);
      } finally {
        setIsReady(true);
      }
    };

    fetchData();
  }, [user]);

  const handleSave = async () => {
    if (!user) return;
    setIsSaving(true);
    try {
      // Sanitize cards to ensure numbers are stored as numbers
      const sanitizedCards = cards.map(c => ({
        ...c,
        networkRate: typeof c.networkRate === 'string' ? parseFloat(c.networkRate) || 0 : c.networkRate,
        usdRate: typeof c.usdRate === 'string' ? parseFloat(c.usdRate) || 0 : c.usdRate
      }));

      const { error } = await supabase
        .from('user_configs')
        .upsert({
          user_id: user.id,
          settings: { globalConfig, cards: sanitizedCards, activeCardId },
          updated_at: new Date().toISOString()
        });
      if (error) throw error;
      setSaveStatus('success');
      setTimeout(() => setSaveStatus(null), 3000);
    } catch (error) {
      console.error('Save failed:', error);
    } finally {
      setIsSaving(false);
    }
  };

  // 3. Engine
  const activeCard = useMemo(() =>
    cards.find(c => c.id === activeCardId) || cards[0],
    [cards, activeCardId]
  );

  const resultA = useMemo(() =>
    calculateCosts(optionA, globalConfig, activeCard),
    [optionA, globalConfig, activeCard]
  );

  const resultB = useMemo(() =>
    calculateCosts(optionB, globalConfig, activeCard),
    [optionB, globalConfig, activeCard]
  );

  // 4. Best Option
  const bestOptionId = useMemo(() => {
    const options = [
      { id: 'A-cash', val: resultA.cashVnd, possible: resultA.isCashPossible },
      { id: 'A-online', val: resultA.onlineVnd, possible: true },
      { id: 'A-pos', val: resultA.posVnd, possible: true },
      { id: 'B-cash', val: resultB.cashVnd, possible: resultB.isCashPossible },
      { id: 'B-online', val: resultB.onlineVnd, possible: true },
      { id: 'B-pos', val: resultB.posVnd, possible: true },
    ].filter(o => o.val > 0 && o.possible);

    if (options.length === 0) return null;
    return options.reduce((prev, curr) => (prev.val < curr.val ? prev : curr)).id;
  }, [resultA, resultB]);

  const bestText = useMemo(() => {
    if (!bestOptionId) return null;
    const [vendor, method] = bestOptionId.split('-');
    const vendorName = vendor === 'A' ? 'Tùy chọn A' : 'Tùy chọn B';
    const methodName = method === 'cash' ? 'Tiền mặt' : method === 'online' ? 'Online Transaction' : 'Quẹt POS';
    return { vendorName, methodName };
  }, [bestOptionId]);

  // --- Screens ---

  if (!isReady) {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
        <div className="flex flex-col items-center gap-4">
          <div className="w-12 h-12 border-4 border-indigo-500/20 border-t-indigo-500 rounded-full animate-spin" />
          <p className="text-slate-400 font-medium animate-pulse">Đang chuẩn bị...</p>
        </div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-6">
        <div className="w-full max-w-sm bg-white p-8 rounded-3xl shadow-xl shadow-slate-200 text-center flex flex-col gap-6">
          <div className="w-16 h-16 bg-indigo-100 rounded-2xl flex items-center justify-center self-center">
            <Zap className="w-8 h-8 text-indigo-600" />
          </div>
          <div>
            <h1 className="text-2xl font-black text-slate-900 mb-2">Travel Optimizer</h1>
            <p className="text-slate-500 text-sm">Vui lòng đăng nhập để lưu trữ hồ sơ vốn và danh mục thẻ của bạn.</p>
          </div>
          <div className="flex flex-col gap-3">
            <button
              onClick={handleGoogleLogin}
              className="flex items-center justify-center gap-3 w-full bg-indigo-600 text-white font-bold py-4 rounded-2xl shadow-lg shadow-indigo-100 hover:bg-indigo-700 active:scale-95 transition-all"
            >
              <LogIn className="w-5 h-5" />
              Đăng nhập với Google
            </button>
            <button
              onClick={handleGuestLogin}
              className="w-full text-slate-400 font-bold py-2 text-sm hover:text-slate-600 transition-all"
            >
              Tiếp tục với tư cách khách
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans flex justify-center pb-8 overflow-x-hidden">
      <div className="w-full max-w-md bg-slate-50 flex flex-col relative px-4">

        {/* Navigation Bar */}
        <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200 pt-6 flex justify-between items-end mx-[-1rem] px-4">
          <div className="flex gap-6">
            <button
              onClick={() => setActiveTab('calc')}
              className={`pb-3 px-1 font-bold text-sm transition-all border-b-2 flex items-center gap-2 ${
                activeTab === 'calc' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-400 hover:text-slate-600'
              }`}
            >
              <Calculator className="w-4 h-4" /> POS
            </button>
            <button
              onClick={() => setActiveTab('config')}
              className={`pb-3 px-1 font-bold text-sm transition-all border-b-2 flex items-center gap-2 ${
                activeTab === 'config' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-400 hover:text-slate-600'
              }`}
            >
              <Settings2 className="w-4 h-4" /> Cấu hình
            </button>
          </div>
          
          <div className="flex items-center gap-4 pb-3">
            <div className="text-[10px] font-black text-slate-300 tracking-[0.2em] uppercase hidden sm:block">
              v2.1
            </div>
            <button 
              onClick={() => supabase.auth.signOut()}
              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-700 transition-all text-[10px] font-bold uppercase tracking-wider"
              title={user?.is_anonymous ? 'Đăng nhập Google' : 'Đăng xuất'}
            >
              <LogOut className="w-3 h-3" />
              {user?.is_anonymous ? 'Đăng nhập' : 'Đăng xuất'}
            </button>
          </div>
        </header>

        <main className="py-6 flex flex-col gap-6">
          {activeTab === 'calc' ? (
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.4 }}
              className="flex flex-col gap-5"
            >
              {/* HUD: Asset Summary */}
              <div className="bg-slate-900 rounded-[2.5rem] p-6 text-white shadow-2xl shadow-indigo-100 flex flex-col gap-5 overflow-hidden relative">
                <div className="absolute top-0 right-0 w-40 h-40 bg-indigo-500/20 rounded-full blur-3xl -mr-20 -mt-20" />

                <div className="flex justify-between items-center relative z-10">
                  <div className="flex flex-col gap-1.5">
                    <span className="text-[10px] uppercase text-slate-500 font-black tracking-widest">Thẻ đang dùng</span>
                    <div className="relative group">
                      <select
                        value={activeCardId}
                        onChange={(e) => setActiveCardId(e.target.value)}
                        className="bg-slate-800 border border-slate-700 text-blue-300 font-bold text-xs rounded-xl focus:ring-2 focus:ring-indigo-500 py-2 pl-3 pr-9 outline-none appearance-none cursor-pointer transition-all hover:bg-slate-750"
                        style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2360a5fa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 0.75rem center', backgroundSize: '1rem' }}
                      >
                        {cards.map(c => (
                          <option key={c.id} value={c.id} className="bg-slate-900 text-white">{c.name}</option>
                        ))}
                      </select>
                    </div>
                  </div>
                  <div className="h-12 w-px bg-slate-800 mx-4" />
                  <div className="flex flex-col items-end gap-1.5">
                    <span className="text-[10px] uppercase text-slate-500 font-black tracking-widest">Tiền mặt khả dụng</span>
                    <div className="text-emerald-400 font-black text-3xl flex items-baseline gap-1">
                      {formatNumber(globalConfig.usdAvailable)}
                      <span className="text-xs text-emerald-600 font-bold">USD</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Recommendation Alert */}
              <AnimatePresence>
                {bestText && (
                  <motion.div
                    initial={{ opacity: 0, scale: 0.95 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.95 }}
                    className="bg-indigo-600 rounded-3xl p-5 text-white shadow-xl shadow-indigo-200 flex items-center gap-5 border border-indigo-500/50"
                  >
                    <div className="w-12 h-12 bg-white/10 rounded-2xl flex items-center justify-center shrink-0 border border-white/10">
                      <Zap className="w-7 h-7 text-indigo-100" />
                    </div>
                    <div>
                      <p className="text-[10px] text-indigo-200 font-black uppercase tracking-widest mb-1">GỢI Ý TỐI ƯU</p>
                      <p className="text-sm font-semibold leading-snug">
                        Dùng <span className="text-white bg-indigo-500/50 px-2 rounded-lg">{bestText.vendorName}</span> qua <span className="text-white underline decoration-indigo-300 underline-offset-4">{bestText.methodName}</span> tiết kiệm nhất.
                      </p>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>

              <VendorCard
                id="A"
                title="Tùy chọn A"
                state={optionA}
                onChange={setOptionA}
                result={resultA}
                bestOptionId={bestOptionId}
                usdAvailable={globalConfig.usdAvailable}
              />

              <VendorCard
                id="B"
                title="Tùy chọn B"
                state={optionB}
                onChange={setOptionB}
                result={resultB}
                bestOptionId={bestOptionId}
                usdAvailable={globalConfig.usdAvailable}
              />
            </motion.div>
          ) : (
            <ConfigTab
              globalConfig={globalConfig}
              setGlobalConfig={setGlobalConfig}
              cards={cards}
              setCards={setCards}
              activeCardId={activeCardId}
              setActiveCardId={setActiveCardId}
              onSave={handleSave}
              isSaving={isSaving}
              saveStatus={saveStatus}
            />
          )}
        </main>
      </div>
    </div>
  );
}