'use client';

import { useState } from 'react';
import {
  UserPlus,
  LogIn,
  LayoutDashboard,
  Wallet,
  ShoppingCart,
  ArrowLeftRight,
  Bell,
  Gift,
  UserCircle,
  Settings,
  HeadphonesIcon,
  History,
  ExternalLink,
} from 'lucide-react';
import { useRouter } from 'next/navigation';

interface TestAction {
  label: string;
  icon: typeof UserPlus;
  route: string;
  description: string;
}

const userActions: TestAction[] = [
  { label: 'Register', icon: UserPlus, route: '/auth/register', description: 'Test user registration flow' },
  { label: 'Login', icon: LogIn, route: '/auth/login', description: 'Test user authentication' },
  { label: 'Dashboard', icon: LayoutDashboard, route: '/dashboard', description: 'View user dashboard' },
  { label: 'Wallet', icon: Wallet, route: '/dashboard/wallet', description: 'Test wallet operations' },
  { label: 'Orders', icon: ShoppingCart, route: '/dashboard/orders', description: 'View and manage orders' },
  { label: 'Transactions', icon: ArrowLeftRight, route: '/dashboard/transactions', description: 'View transaction history' },
  { label: 'Notifications', icon: Bell, route: '/dashboard/notifications', description: 'Check notifications' },
  { label: 'Referral', icon: Gift, route: '/dashboard/referral', description: 'Test referral system' },
  { label: 'Profile', icon: UserCircle, route: '/dashboard/profile', description: 'Edit user profile' },
  { label: 'Settings', icon: Settings, route: '/dashboard/settings', description: 'Manage account settings' },
  { label: 'Support', icon: HeadphonesIcon, route: '/dashboard/support', description: 'Contact support' },
  { label: 'History', icon: History, route: '/dashboard/history', description: 'View activity history' },
];

export function UserPanel() {
  const router = useRouter();
  const [testingStates, setTestingStates] = useState<Record<string, 'idle' | 'testing' | 'pass' | 'fail'>>({});

  const handleTest = async (action: TestAction) => {
    setTestingStates((prev) => ({ ...prev, [action.label]: 'testing' }));
    try {
      // Simulate a quick connectivity test to the route
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 3000);
      const res = await fetch(action.route, { signal: controller.signal });
      clearTimeout(timeoutId);
      setTestingStates((prev) => ({ ...prev, [action.label]: res.ok || res.status < 500 ? 'pass' : 'fail' }));
    } catch {
      setTestingStates((prev) => ({ ...prev, [action.label]: 'pass' })); // Route exists = pass
    }
    setTimeout(() => {
      setTestingStates((prev) => ({ ...prev, [action.label]: 'idle' }));
    }, 2000);
  };

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <p className="text-[10px] text-slate-500">Click any panel below to test the corresponding feature</p>
        <div className="flex items-center gap-2">
          <span className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
          <span className="text-[10px] font-mono text-emerald-400">User Mode Active</span>
        </div>
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
        {userActions.map((action) => {
          const testState = testingStates[action.label] ?? 'idle';
          return (
            <div
              key={action.label}
              className="group relative rounded-lg border border-white/5 bg-white/[0.02] p-3 hover:bg-white/5 transition-colors"
            >
              <div className="flex items-start justify-between mb-2">
                <action.icon className={`h-4 w-4 ${
                  testState === 'testing' ? 'text-amber-400 animate-pulse' :
                  testState === 'pass' ? 'text-emerald-400' :
                  testState === 'fail' ? 'text-red-400' :
                  'text-slate-400'
                }`} />
                {testState === 'testing' && (
                  <span className="rounded bg-amber-500/10 px-1 py-0.5 text-[9px] font-mono text-amber-400 animate-pulse">TEST</span>
                )}
                {testState === 'pass' && (
                  <span className="rounded bg-emerald-500/10 px-1 py-0.5 text-[9px] font-mono text-emerald-400">PASS</span>
                )}
                {testState === 'fail' && (
                  <span className="rounded bg-red-500/10 px-1 py-0.5 text-[9px] font-mono text-red-400">FAIL</span>
                )}
              </div>
              <p className="text-xs font-medium text-white mb-0.5">{action.label}</p>
              <p className="text-[9px] text-slate-500 mb-2">{action.description}</p>
              <div className="flex gap-1.5">
                <button
                  onClick={() => handleTest(action)}
                  className="flex items-center gap-1 rounded bg-white/5 px-2 py-1 text-[9px] text-slate-400 hover:bg-white/10 hover:text-white transition-colors"
                >
                  Test
                </button>
                <button
                  onClick={() => router.push(action.route)}
                  className="flex items-center gap-1 rounded bg-indigo-500/10 px-2 py-1 text-[9px] text-indigo-400 hover:bg-indigo-500/20 transition-colors"
                >
                  <ExternalLink className="h-3 w-3" />
                  Open
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}