"use client";

import { useOmni } from "./OmniSyncProvider";

export function OmniToggle({ positionClass = "fixed bottom-6 right-6" }: { positionClass?: string } = {}) {
  const { theme, setTheme, currency, setCurrency, locale, setLocale } = useOmni();

  return (
    <div className={`${positionClass} z-[9999] group`}>
      {/* Sleek Horizontal Pill (Mac/Vercel style) */}
      <div className="flex items-center gap-3 bg-white/10 dark:bg-[#030008]/80 backdrop-blur-2xl border border-black/10 dark:border-white/10 px-3 py-2 rounded-full shadow-[0_8px_30px_rgba(0,0,0,0.3)] hover:shadow-[0_8px_30px_rgba(0,255,136,0.15)] transition-all duration-500">
        
        {/* Theme Toggle (Icon only) */}
        <button 
          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
          className="flex items-center justify-center w-7 h-7 rounded-full bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
          title={`Switch to ${theme === 'dark' ? 'Light' : 'Dark'} Mode`}
        >
          {theme === 'dark' ? (
            <span className="text-amber-400 text-sm drop-shadow-[0_0_5px_rgba(251,191,36,0.8)]">☀️</span>
          ) : (
            <span className="text-fuchsia-600 text-sm drop-shadow-[0_0_5px_rgba(192,38,211,0.8)]">🌙</span>
          )}
        </button>

        <div className="w-px h-4 bg-black/10 dark:bg-white/10" />

        {/* Language Toggle (Compact Pill) */}
        <div className="flex bg-black/5 dark:bg-white/5 rounded-full p-0.5">
          <button 
            onClick={() => setLocale('id')} 
            className={`px-2 py-0.5 text-[9px] font-black tracking-widest rounded-full transition-all ${locale === 'id' ? 'bg-brand text-black shadow-sm' : 'text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white'}`}
          >ID</button>
          <button 
            onClick={() => setLocale('en')} 
            className={`px-2 py-0.5 text-[9px] font-black tracking-widest rounded-full transition-all ${locale === 'en' ? 'bg-brand text-black shadow-sm' : 'text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white'}`}
          >EN</button>
        </div>

        <div className="w-px h-4 bg-black/10 dark:bg-white/10" />

        {/* Currency Toggle (Compact Pill) */}
        <div className="flex bg-black/5 dark:bg-white/5 rounded-full p-0.5">
          <button 
            onClick={() => setCurrency('Rp')} 
            className={`px-2 py-0.5 text-[9px] font-black tracking-widest rounded-full transition-all ${currency === 'Rp' ? 'bg-blue-400 text-black shadow-sm' : 'text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white'}`}
          >Rp</button>
          <button 
            onClick={() => setCurrency('USD')} 
            className={`px-2 py-0.5 text-[9px] font-black tracking-widest rounded-full transition-all ${currency === 'USD' ? 'bg-green-400 text-black shadow-sm' : 'text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white'}`}
          >$</button>
          <button 
            onClick={() => setCurrency('Crypto')} 
            className={`px-2 py-0.5 text-[9px] font-black tracking-widest rounded-full transition-all ${currency === 'Crypto' ? 'bg-fuchsia-500 text-white shadow-[0_0_10px_rgba(217,70,239,0.5)] animate-pulse' : 'text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white'}`}
          >USDT</button>
        </div>

      </div>
    </div>
  );
}