import React, { useMemo, useState, useEffect } from 'react';
import {
  AlertCircle,
  AlertTriangle,
  Wifi,
  WifiOff,
  Check,
  User,
} from 'lucide-react';
import { useEditorStore } from '@/core/store';
import type { LanguageMode } from '@/core/types';
import { useAuth } from '@/contexts/AuthContext';
import { languages } from '@/editor/languages';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

const languageKeys = Object.keys(languages) as Array<keyof typeof languages>;

export const StatusBar: React.FC = () => {
  const { openTabs, activeTabId, files, settings, updateTab, updateFile, isLoading } = useEditorStore();
  const { user } = useAuth();
  const [isOnline, setIsOnline] = useState(
    typeof navigator !== 'undefined' ? navigator.onLine : true
  );

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  const activeTab = useMemo(
    () => openTabs.find((t) => t.id === activeTabId),
    [openTabs, activeTabId]
  );

  const activeFile = useMemo(
    () => (activeTab ? files.find((f) => f.id === activeTab.fileId) : null),
    [activeTab, files]
  );

  const languageInfo = useMemo(() => {
    if (!activeTab) return null;
    return languages[activeTab.language as keyof typeof languages] || languages.plaintext;
  }, [activeTab]);

  const currentLanguage = activeTab?.language ?? 'plaintext';

  const handleLanguageChange = (value: string) => {
    if (!activeTab || !activeFile) return;
    updateTab(activeTab.id, { language: value });
    updateFile(activeFile.id, { language: value as LanguageMode });
  };

  return (
    <div className="min-h-[22px] py-1.5 bg-statusbar flex items-center justify-between px-2 text-statusbar-foreground border-t border-sidebar-border">
      <div className="flex items-center gap-2">
        {isLoading && (
          <div className="statusbar-item flex items-center gap-1.5 text-muted-foreground" title="Syncing with server">
            <div className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin" />
            <span className="text-xs">Syncing...</span>
          </div>
        )}
        {user && (
          <div className="statusbar-item flex items-center gap-1">
            <User className="w-3 h-3" />
            <span>{user.name || user.email}</span>
          </div>
        )}

        {/* <div className="statusbar-item flex items-center gap-1">
          <Check className="w-3 h-3 text-success" />
        </div>

        <div className="statusbar-item flex items-center gap-2">
          <span className="flex items-center gap-0.5">
            <AlertCircle className="w-3 h-3" />
            <span>0</span>
          </span>
          <span className="flex items-center gap-0.5">
            <AlertTriangle className="w-3 h-3" />
            <span>0</span>
          </span>
        </div>*/}
      </div>

      <div className="flex items-center gap-2">
        {activeTab && <div className="statusbar-item">Ln 1, Col 1</div>}

        <div className="statusbar-item">Spaces: {settings.tabSize}</div>

        <div className="statusbar-item">UTF-8</div>

        {/* Language selector - change file language (Plain Text, HTML, etc.) */}
        {activeTab && (
          <Select value={currentLanguage} onValueChange={handleLanguageChange}>
            <SelectTrigger className="h-5 w-auto min-w-0 border-0 bg-transparent px-1.5 text-statusbar-foreground shadow-none hover:bg-white/5 focus:ring-0 [&>span]:flex [&>span]:items-center [&>span]:gap-1">
              {/* <span
                className="w-2 h-2 rounded-full flex-shrink-0"
                style={{
                  backgroundColor:
                    languageInfo?.color ?? languages.plaintext.color,
                }}
              /> */}
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {languageKeys.map((key) => {
                const lang = languages[key];
                return (
                  <SelectItem key={key} value={key} className="gap-2">
                    {/* <span
                      className="w-2 h-2 rounded-full flex-shrink-0"
                      style={{ backgroundColor: lang.color }}
                    /> */}
                    {lang.name}
                  </SelectItem>
                );
              })}
            </SelectContent>
          </Select>
        )}

        {/* Online: green WiFi. Offline: red WiFi slash */}
        <div
          className="statusbar-item flex items-center gap-1"
          title={isOnline ? "Online" : "No internet"}
        >
          {isOnline ? (
            <Wifi className="w-3 h-3 text-green-500" />
          ) : (
            <WifiOff className="w-3 h-3 text-red-500" />
          )}
        </div>
      </div>
    </div>
  );
};

export default StatusBar;