import React, { useRef, useMemo, useCallback, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useLockFn } from 'ahooks';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

import { useProfiles } from '@/hooks/use-profiles';
import { ProfileViewer, ProfileViewerRef } from '@/components/profile/profile-viewer';
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
  DropdownMenuSeparator, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { ChevronsUpDown, Check, PlusCircle, Menu, Wrench, AlertTriangle, Loader2 } from 'lucide-react';
import { useVerge } from '@/hooks/use-verge';
import { useSystemState } from '@/hooks/use-system-state';
import { useServiceInstaller } from '@/hooks/useServiceInstaller';
import { Switch } from "@/components/ui/switch";
import { ProxySelectors } from '@/components/home/proxy-selectors';
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { closeAllConnections } from '@/services/api';


const MinimalHomePage: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [isToggling, setIsToggling] = useState(false);
  const { profiles, patchProfiles, activateSelected, mutateProfiles } = useProfiles();
  const viewerRef = useRef<ProfileViewerRef>(null);

  const profileItems = useMemo(() => {
    const items = profiles && Array.isArray(profiles.items) ? profiles.items : [];
    const allowedTypes = ["local", "remote"];
    return items.filter((i: any) => i && allowedTypes.includes(i.type!));
  }, [profiles]);

  const currentProfileName = useMemo(() => {
    return profileItems.find(p => p.uid === profiles?.current)?.name || profiles?.current;
  }, [profileItems, profiles?.current]);
  const activateProfile = useCallback(async (uid: string, notifySuccess: boolean) => {
    try {
      await patchProfiles({ current: uid });
      await closeAllConnections();
      await activateSelected();
      if (notifySuccess) {
        toast.success(t("Profile Switched"));
      }
    } catch (err: any) {
      toast.error(err.message || err.toString());
      mutateProfiles();
    }
  }, [patchProfiles, activateSelected, mutateProfiles, t]);

  const handleProfileChange = useLockFn(async (uid: string) => {
    if (profiles?.current === uid) return;
    await activateProfile(uid, true);
  });

  const { verge, patchVerge, mutateVerge } = useVerge();
  const { isAdminMode, isServiceMode } = useSystemState();
  const { installServiceAndRestartCore } = useServiceInstaller();
  const isTunAvailable = isServiceMode || isAdminMode;
  const isProxyEnabled = verge?.enable_system_proxy || verge?.enable_tun_mode;

  const handleToggleProxy = useLockFn(async () => {
    const turningOn = !isProxyEnabled;
    setIsToggling(true);
    try {
      if (turningOn) {
        await patchVerge({ enable_tun_mode: true, enable_system_proxy: false });
        toast.success(t('Proxy enabled'));
      } else {
        await patchVerge({ enable_tun_mode: false, enable_system_proxy: false });
        toast.success(t('Proxy disabled'));
      }
      mutateVerge();
    } catch (error: any) {
      toast.error(t('Failed to toggle proxy'), { description: error.message });
    } finally {
      setIsToggling(false);
    }
  });

  const navMenuItems = [
    { label: 'Profiles', path: '/profile' },
    { label: 'Settings', path: '/settings' },
    { label: 'Logs', path: '/logs' },
    { label: 'Proxies', path: '/proxies' },
    { label: 'Connections', path: '/connections' },
    { label: 'Rules', path: '/rules' },
  ];

  return (
    <div className="flex flex-col h-screen p-5">
      <header className="absolute top-0 left-0 right-0 p-5 flex items-center justify-between z-20">
        <div className="w-10"></div>

        {profileItems.length > 0 && (
          <div className="flex-shrink-0">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" className="w-full max-w-[250px] sm:max-w-xs">
                  <span className="truncate">{currentProfileName}</span>
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width]">
                <DropdownMenuLabel>{t("Profiles")}</DropdownMenuLabel>
                <DropdownMenuSeparator />
                {profileItems.map((p) => (
                  <DropdownMenuItem key={p.uid} onSelect={() => handleProfileChange(p.uid)}>
                    <span className="flex-1 truncate">{p.name}</span>
                    {profiles?.current === p.uid && <Check className="ml-4 h-4 w-4" />}
                  </DropdownMenuItem>
                ))}
                <DropdownMenuSeparator />
                <DropdownMenuItem onSelect={() => viewerRef.current?.create()}>
                  <PlusCircle className="mr-2 h-4 w-4" />
                  <span>{t("Add New Profile")}</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        )}

        <div className="w-10">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="icon">
                  <Menu className="h-5 w-5" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>{t("Menu")}</DropdownMenuLabel>
                <DropdownMenuSeparator />
                {navMenuItems.map((item) => (
                  <DropdownMenuItem key={item.path} onSelect={() => navigate(item.path)}>
                    {t(item.label)}
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
        </div>
      </header>

      <div className="flex items-center justify-center flex-grow w-full">
        <div className="flex flex-col items-center gap-8 pt-10">

          <div className="text-center">
            <h1 className="text-4xl mb-2 font-semibold" style={{ color: isProxyEnabled ? '#22c55e' : '#ef4444' }}>
              {isProxyEnabled ? t('Connected') : t('Disconnected')}
            </h1>
            <p className="h-6 text-sm text-muted-foreground transition-opacity duration-300">
              {isToggling && (isProxyEnabled ? t('Disconnecting...') : t('Connecting...'))}
            </p>
          </div>

          <div className="scale-[7] my-16">
            <Switch
              disabled={!isTunAvailable || isToggling}
              checked={!!isProxyEnabled}
              onCheckedChange={handleToggleProxy}
              aria-label={t("Toggle Proxy")}
            />
          </div>

          {!isTunAvailable && (
            <div className="w-full max-w-sm">
                <Alert variant="destructive" className="flex flex-col items-center gap-2 text-center">
                    <AlertTriangle className="h-4 w-4" />
                    <AlertTitle>{t("Attention Required")}</AlertTitle>
                    <AlertDescription className="text-xs">
                        {t("TUN requires Service Mode or Admin Mode")}
                    </AlertDescription>
                    {!isServiceMode && !isAdminMode && (
                        <Button size="sm" className="mt-2" onClick={installServiceAndRestartCore}>
                            <Wrench className="mr-2 h-4 w-4" />
                            {t("Install Service")}
                        </Button>
                    )}
                </Alert>
            </div>
          )}

          <div className="w-full mt-4 flex justify-center">
            {profileItems.length > 0 ? (
              <ProxySelectors />
            ) : (
              <Alert className="flex flex-col items-center gap-2 text-center">
                <PlusCircle className="h-4 w-4" />
                <AlertTitle>{t("Get Started")}</AlertTitle>
                <AlertDescription className="whitespace-pre-wrap">
                  {t("You don't have any profiles yet. Add your first one to begin.")}
                </AlertDescription>
                <Button className="mt-2" onClick={() => viewerRef.current?.create()}>
                  {t("Add Profile")}
                </Button>
              </Alert>
            )}
          </div>

        </div>
      </div>

      <ProfileViewer ref={viewerRef} onChange={() => mutateProfiles()} />
    </div>
  );
};

export default MinimalHomePage;