import { Component, createSignal, onMount, Show } from 'solid-js';
import RulesList from './components/RulesList';
import CommandQueue from './components/CommandQueue';
import Login from './components/Login';
import ChangePassword from './components/ChangePassword';
import RequestLog from './components/RequestLog';
import { authStore } from './api/auth';

const App: Component = () => {
  const [activeTab, setActiveTab] = createSignal<'rules' | 'commands' | 'logs'>('rules');
  const [isAuthenticated, setIsAuthenticated] = createSignal(false);
  const [showChangePassword, setShowChangePassword] = createSignal(false);

  onMount(() => {
    // Check if user is already authenticated
    setIsAuthenticated(authStore.isAuthenticated());
  });

  const handleLoginSuccess = (token: string) => {
    authStore.setToken(token);
    setIsAuthenticated(true);
  };

  const handleLogout = () => {
    authStore.clearToken();
    setIsAuthenticated(false);
  };

  return (
    <Show when={isAuthenticated()} fallback={<Login onLoginSuccess={handleLoginSuccess} />}>
      <div class="min-h-screen bg-gray-100">
        <header class="bg-white shadow">
          <div class="max-w-7xl mx-auto px-4 py-6 flex justify-between items-center">
            <h1 class="text-3xl font-bold text-gray-900">
              My Linspirer Control Panel
            </h1>
            <div class="flex space-x-3">
              <button
                onClick={() => setShowChangePassword(true)}
                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                Change Password
              </button>
              <button
                onClick={handleLogout}
                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                Logout
              </button>
            </div>
          </div>
        </header>

        <nav class="bg-white border-b">
          <div class="max-w-7xl mx-auto px-4">
            <div class="flex space-x-8">
              <button
                onClick={() => setActiveTab('rules')}
                class={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab() === 'rules'
                    ? 'border-indigo-500 text-indigo-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700'
                }`}
              >
                Interception Rules
              </button>
              <button
                onClick={() => setActiveTab('commands')}
                class={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab() === 'commands'
                    ? 'border-indigo-500 text-indigo-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700'
                }`}
              >
                Command Queue
              </button>
              <button
                onClick={() => setActiveTab('logs')}
                class={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab() === 'logs'
                    ? 'border-indigo-500 text-indigo-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700'
                }`}
              >
                Request Log
              </button>
            </div>
          </div>
        </nav>

        <main class="max-w-7xl mx-auto px-4 py-6">
          {activeTab() === 'rules' && <RulesList />}
          {activeTab() === 'commands' && <CommandQueue />}
          {activeTab() === 'logs' && <RequestLog />}
        </main>

        <Show when={showChangePassword()}>
          <ChangePassword
            onClose={() => setShowChangePassword(false)}
            onLogout={handleLogout}
          />
        </Show>
      </div>
    </Show>
  );
};

export default App;