'use client';

import { useState, useEffect, useCallback } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { RefreshCw, Plus, Pencil, Trash2, Save, Settings, ShoppingCart, Percent, Users, Gift, Shield, Sliders, Calculator, History, Layers } from 'lucide-react';
import { useSystemConfig } from '@/hooks/useSystemConfig';
import { cn } from '@/lib/utils';
import GlobalTab from './_tabs/GlobalTab';
import TiersTab from './_tabs/TiersTab';
import CommissionTab from './_tabs/CommissionTab';
import CommissionRangesTab from './_tabs/CommissionRangesTab';
import ReferralTab from './_tabs/ReferralTab';
import ReferralRequirementsTab from './_tabs/ReferralRequirementsTab';
import BonusesTab from './_tabs/BonusesTab';
import MinBalanceTab from './_tabs/MinBalanceTab';
import TradingControlsTab from './_tabs/TradingControlsTab';
import SimulatorTab from './_tabs/SimulatorTab';
import HistoryTab from './_tabs/HistoryTab';

type TabId = 'global' | 'tiers' | 'commission' | 'commission-ranges' | 'referral' | 'referral-requirements' | 'bonuses' | 'min-balance' | 'trading-controls' | 'simulator' | 'history';

const TABS: Array<{ id: TabId; label: string; icon: any }> = [
  { id: 'global', label: 'Global Settings', icon: Settings },
  { id: 'tiers', label: 'Purchase Tiers', icon: ShoppingCart },
  { id: 'trading-controls', label: 'Trading Controls', icon: Sliders },
  { id: 'min-balance', label: 'Min Balance', icon: Shield },
  { id: 'commission', label: 'Commission Rules', icon: Percent },
  { id: 'commission-ranges', label: 'Commission Ranges', icon: Layers },
  { id: 'referral', label: 'Referral Rules', icon: Users },
  { id: 'referral-requirements', label: 'Referral Requirements', icon: Users },
  { id: 'bonuses', label: 'Bonuses & Rewards', icon: Gift },
  { id: 'simulator', label: 'Simulator', icon: Calculator },
  { id: 'history', label: 'History', icon: History },
];

export default function TradingRulesPage() {
  const sysConfig = useSystemConfig();
  const router = useRouter();
  const search = useSearchParams();
  const initialTab = (search?.get('tab') as TabId) || 'global';
  const [tab, setTab] = useState<TabId>(initialTab);

  useEffect(() => {
    const t = (search?.get('tab') as TabId) || 'global';
    setTab(t);
  }, [search]);

  const switchTab = useCallback((id: TabId) => {
    setTab(id);
    const params = new URLSearchParams(Array.from(search?.entries() ?? []));
    params.set('tab', id);
    router.replace(`?${params.toString()}`);
  }, [router, search]);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Trading & Commission Rules</h1>
          <p className="mt-1 text-sm text-slate-400">One place for every rule that controls how the platform trades, charges, and rewards.</p>
        </div>
      </div>

      <nav className="flex flex-wrap gap-1 border-b border-white/10 pb-1">
        {TABS.map((t) => {
          const Icon = t.icon;
          return (
            <button
              key={t.id}
              onClick={() => switchTab(t.id)}
              className={cn(
                'flex items-center gap-2 rounded-t-lg px-4 py-2 text-sm font-medium whitespace-nowrap',
                tab === t.id ? 'bg-blue-600/20 text-blue-300' : 'text-slate-400 hover:text-white',
              )}
            >
              <Icon className="h-4 w-4" />
              {t.label}
            </button>
          );
        })}
      </nav>

      <div>
        {tab === 'global' && <GlobalTab sysConfig={sysConfig} />}
        {tab === 'tiers' && <TiersTab sysConfig={sysConfig} />}
        {tab === 'commission' && <CommissionTab sysConfig={sysConfig} />}
        {tab === 'commission-ranges' && <CommissionRangesTab sysConfig={sysConfig} />}
        {tab === 'referral' && <ReferralTab sysConfig={sysConfig} />}
        {tab === 'referral-requirements' && <ReferralRequirementsTab sysConfig={sysConfig} />}
        {tab === 'bonuses' && <BonusesTab sysConfig={sysConfig} />}
        {tab === 'min-balance' && <MinBalanceTab sysConfig={sysConfig} />}
        {tab === 'trading-controls' && <TradingControlsTab sysConfig={sysConfig} />}
        {tab === 'simulator' && <SimulatorTab sysConfig={sysConfig} />}
        {tab === 'history' && <HistoryTab />}
      </div>
    </div>
  );
}