import React, { useEffect, useState } from 'react';
import {
  Layers,
  CheckSquare,
  FileText,
  ShoppingCart,
  Webhook,
  Brain,
  LogOut,
  User as UserIcon,
  Sparkles,
} from 'lucide-react';
import { DashboardStats, SharedList, Thought, User } from './lib/types';
import { api, clearToken, getToken } from './lib/api';
import { InstantCaptureBar } from './features/capture/InstantCaptureBar';
import { TriageDeck } from './features/triage/TriageDeck';
import { TasksView } from './features/triage/TasksView';
import { WorkspaceView } from './features/workspace/WorkspaceView';
import { SharedListsView } from './features/lists/SharedListsView';
import { EcosystemView } from './features/settings/EcosystemView';

type ActiveTab = 'triage' | 'tasks' | 'workspace' | 'lists' | 'ecosystem';

export const App: React.FC = () => {
  const [user, setUser] = useState<User | null>(null);
  const [stats, setStats] = useState<DashboardStats>({
    inboxCount: 0,
    tasksOpenCount: 0,
    tasksDoneCount: 0,
    docsCount: 0,
    listsCount: 0,
    discardedCount: 0,
  });
  const [deck, setDeck] = useState<Thought[]>([]);
  const [lists, setLists] = useState<SharedList[]>([]);
  const [activeTab, setActiveTab] = useState<ActiveTab>('triage');
  const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
  const [captureFocusCount, setCaptureFocusCount] = useState(0);

  // Auth Modal State for switching or registering additional family members
  const [showAuthModal, setShowAuthModal] = useState(false);
  const [authMode, setAuthMode] = useState<'login' | 'register'>('login');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [displayName, setDisplayName] = useState('');
  const [authError, setAuthError] = useState('');

  const refreshAll = async () => {
    try {
      const [meRes, deckRes, listsRes] = await Promise.all([
        api.getMe(),
        api.getTriageDeck(),
        api.getAllLists(),
      ]);
      setUser(meRes.user);
      setStats(meRes.stats);
      setDeck(deckRes);
      setLists(listsRes);
    } catch {
      // Fallback to quickStart session
      try {
        const qs = await api.quickStart();
        setUser(qs.user);
        const [st, dk, ls] = await Promise.all([
          api.getStats(),
          api.getTriageDeck(),
          api.getAllLists(),
        ]);
        setStats(st);
        setDeck(dk);
        setLists(ls);
      } catch {
        // Offline or waiting for server
      }
    }
  };

  useEffect(() => {
    const init = async () => {
      if (!getToken()) {
        try {
          await api.quickStart();
        } catch {
          // ignore
        }
      }
      await api.flushOfflineQueue();
      await refreshAll();
    };
    init();

    const onOnline = async () => {
      const synced = await api.flushOfflineQueue();
      if (synced > 0) refreshAll();
    };
    window.addEventListener('online', onOnline);
    return () => window.removeEventListener('online', onOnline);
  }, []);

  const handleCaptured = (thought: Thought) => {
    setDeck((prev) => [thought, ...prev]);
    setStats((prev) => ({ ...prev, inboxCount: prev.inboxCount + 1 }));
    refreshAll();
  };

  const handleOpenDocument = (docId: string) => {
    setSelectedDocId(docId);
    setActiveTab('workspace');
  };

  const handleAuthSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setAuthError('');
    try {
      if (authMode === 'login') {
        await api.login(email, password);
      } else {
        await api.register(email, password, displayName);
      }
      setShowAuthModal(false);
      setEmail('');
      setPassword('');
      setDisplayName('');
      await refreshAll();
    } catch (err: any) {
      setAuthError(err.message || 'Authentifizierung fehlgeschlagen');
    }
  };

  return (
    <div className="min-h-screen bg-[#0b0f19] text-[#e3e3e3] flex flex-col">
      {/* Ambient Top Gemini Glow */}
      <div className="pointer-events-none fixed top-0 left-1/2 -translate-x-1/2 w-[560px] h-[180px] bg-gradient-to-r from-[#8ab4f8]/10 via-[#c58af9]/10 to-[#81c995]/10 blur-3xl -z-10" />

      {/* Header Bar */}
      <header className="sticky top-0 z-30 backdrop-blur-xl bg-[#0b0f19]/85 border-b border-white/[0.06]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
          {/* Brand Logo */}
          <div
            onClick={() => {
              setActiveTab('triage');
              setCaptureFocusCount((c) => c + 1);
            }}
            className="flex items-center gap-2.5 cursor-pointer group"
          >
            <div className="w-9 h-9 rounded-full bg-[#1e1f20] gemini-border flex items-center justify-center group-hover:border-[#8ab4f8]/50 transition-colors">
              <Brain className="w-5 h-5 text-[#8ab4f8]" />
            </div>
            <div>
              <span className="font-bold text-lg tracking-tight gemini-gradient-text">
                MindSift
              </span>
              <span className="hidden md:inline-block ml-2.5 text-xs text-[#9aa0a6]">
                Der Kopf frei in drei Sekunden.
              </span>
            </div>
          </div>

          {/* Right User Pill */}
          <div className="flex items-center gap-2">
            <button
              onClick={() => setShowAuthModal(true)}
              className="h-9 px-3.5 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs font-medium text-[#e3e3e3] flex items-center gap-2 transition-colors"
              title="Benutzer wechseln oder Familienmitglied registrieren"
            >
              <UserIcon className="w-3.5 h-3.5 text-[#8ab4f8]" />
              <span>{user?.displayName || 'Lokal'}</span>
            </button>
          </div>
        </div>
      </header>

      {/* Main Content Container */}
      <main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-24">
        {/* Global Instant Capture Section (Always Ready at Top) */}
        <section className="mb-7">
          <InstantCaptureBar
            onCaptured={handleCaptured}
            autoFocusTrigger={captureFocusCount}
          />
        </section>

        {/* Pill Navigation Tabs */}
        <nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar">
          <button
            onClick={() => setActiveTab('triage')}
            className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'triage'
                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
                : 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
            }`}
          >
            <Layers className="w-4 h-4" />
            <span>Triage-Deck</span>
            {stats.inboxCount > 0 && (
              <span
                className={`px-2 py-0.5 rounded-full text-xs font-bold ${
                  activeTab === 'triage'
                    ? 'bg-[#0b0f19] text-[#8ab4f8]'
                    : 'bg-[#8ab4f8]/20 text-[#8ab4f8]'
                }`}
              >
                {stats.inboxCount}
              </span>
            )}
          </button>

          <button
            onClick={() => setActiveTab('tasks')}
            className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'tasks'
                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
                : 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
            }`}
          >
            <CheckSquare className="w-4 h-4" />
            <span>Aufgaben</span>
            {stats.tasksOpenCount > 0 && (
              <span
                className={`px-2 py-0.5 rounded-full text-xs font-bold ${
                  activeTab === 'tasks'
                    ? 'bg-[#0b0f19] text-[#8ab4f8]'
                    : 'bg-[#81c995]/20 text-[#81c995]'
                }`}
              >
                {stats.tasksOpenCount}
              </span>
            )}
          </button>

          <button
            onClick={() => setActiveTab('workspace')}
            className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'workspace'
                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
                : 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
            }`}
          >
            <FileText className="w-4 h-4" />
            <span>Workspace</span>
            <span
              className={`px-2 py-0.5 rounded-full text-xs ${
                activeTab === 'workspace'
                  ? 'bg-[#0b0f19] text-[#8ab4f8]'
                  : 'bg-[#1e1f20] text-[#9aa0a6]'
              }`}
            >
              {stats.docsCount}
            </span>
          </button>

          <button
            onClick={() => setActiveTab('lists')}
            className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'lists'
                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
                : 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
            }`}
          >
            <ShoppingCart className="w-4 h-4" />
            <span>Geteilte Listen</span>
          </button>

          <button
            onClick={() => setActiveTab('ecosystem')}
            className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'ecosystem'
                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
                : 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
            }`}
          >
            <Webhook className="w-4 h-4" />
            <span>Webhooks & Export</span>
          </button>
        </nav>

        {/* Active View Content */}
        <section>
          {activeTab === 'triage' && (
            <TriageDeck
              deck={deck}
              lists={lists}
              onDeckChange={refreshAll}
              onOpenDocument={handleOpenDocument}
              onFocusCapture={() => setCaptureFocusCount((c) => c + 1)}
            />
          )}

          {activeTab === 'tasks' && (
            <TasksView
              onRefreshStats={refreshAll}
              onOpenDocument={handleOpenDocument}
            />
          )}

          {activeTab === 'workspace' && (
            <WorkspaceView
              initialDocId={selectedDocId}
              onStatsChange={refreshAll}
            />
          )}

          {activeTab === 'lists' && (
            <SharedListsView onRefreshGlobal={refreshAll} />
          )}

          {activeTab === 'ecosystem' && (
            <EcosystemView onIngested={refreshAll} />
          )}
        </section>
      </main>

      {/* Account Switcher / Registration Modal */}
      {showAuthModal && (
        <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="w-full max-w-md p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
            <div className="flex items-center justify-between mb-5">
              <div className="flex items-center gap-2">
                <Sparkles className="w-5 h-5 text-[#8ab4f8]" />
                <h3 className="text-lg font-bold text-[#e3e3e3]">
                  {authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
                </h3>
              </div>
              <button
                onClick={() => setShowAuthModal(false)}
                className="px-3 py-1 rounded-full bg-[#282a2c] text-xs text-[#9aa0a6] hover:text-[#e3e3e3]"
              >
                Schließen
              </button>
            </div>

            {user && (
              <div className="mb-5 p-3.5 rounded-2xl bg-[#131314] gemini-border flex items-center justify-between">
                <div className="text-xs">
                  <span className="text-[#9aa0a6]">Aktuell aktiv: </span>
                  <strong className="text-[#e3e3e3]">{user.displayName}</strong>
                  <span className="text-[#5f6368] ml-1">({user.email})</span>
                </div>
                <button
                  type="button"
                  onClick={async () => {
                    clearToken();
                    await api.quickStart();
                    await refreshAll();
                    setShowAuthModal(false);
                  }}
                  className="text-xs text-[#8ab4f8] hover:underline flex items-center gap-1"
                >
                  <LogOut className="w-3 h-3" /> Standard
                </button>
              </div>
            )}

            <div className="flex gap-2 mb-4">
              <button
                type="button"
                onClick={() => setAuthMode('login')}
                className={`flex-1 h-9 rounded-full text-xs font-semibold ${
                  authMode === 'login'
                    ? 'bg-[#8ab4f8] text-[#0b0f19]'
                    : 'bg-[#131314] text-[#9aa0a6]'
                }`}
              >
                Anmelden
              </button>
              <button
                type="button"
                onClick={() => setAuthMode('register')}
                className={`flex-1 h-9 rounded-full text-xs font-semibold ${
                  authMode === 'register'
                    ? 'bg-[#8ab4f8] text-[#0b0f19]'
                    : 'bg-[#131314] text-[#9aa0a6]'
                }`}
              >
                Registrieren
              </button>
            </div>

            <form onSubmit={handleAuthSubmit} className="space-y-3">
              {authMode === 'register' && (
                <input
                  type="text"
                  value={displayName}
                  onChange={(e) => setDisplayName(e.target.value)}
                  placeholder="Anzeigename (z. B. Lisa)"
                  className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
                  required
                />
              )}
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="E-Mail-Adresse"
                className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
                required
              />
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Passwort (mind. 4 Zeichen)"
                className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
                required
              />

              {authError && <p className="text-xs text-[#f28b82] px-2">{authError}</p>}

              <button
                type="submit"
                className="w-full h-11 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors"
              >
                {authMode === 'login' ? 'Einloggen' : 'Konto erstellen & starten'}
              </button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;