import { useEffect, useState, useMemo, useDeferredValue } from "react";
import { useTranslation } from "react-i18next";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { getInstalledApps, AppInfo } from "vpn-plugin";
import { useSettingsStore } from "@/store/useSettingsStore";
import { isAndroid } from "@/lib/platform";
import { Loader2 } from "lucide-react";

export function AppExclusions() {
  const { t } = useTranslation();
  const [apps, setApps] = useState<AppInfo[]>([]);
  const [search, setSearch] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const excludedApps = useSettingsStore((state) => state.excludedApps);
  const setExcludedApps = useSettingsStore((state) => state.setExcludedApps);

  const deferredSearch = useDeferredValue(search);

  useEffect(() => {
    if (isOpen && apps.length === 0) {
      setIsLoading(true);
      if (isAndroid) {
        getInstalledApps()
          .then(setApps)
          .catch(console.error)
          .finally(() => setIsLoading(false));
      } else {
        setTimeout(() => {
          setApps([
            { appName: "Google Chrome", packageName: "com.android.chrome" },
            { appName: "Telegram", packageName: "org.telegram.messenger" },
            { appName: "YouTube", packageName: "com.google.android.youtube" },
          ]);
          setIsLoading(false);
        }, 500);
      }
    }
  }, [isOpen, apps.length]);

  const filteredApps = useMemo(() => {
    const term = deferredSearch.toLowerCase();
    return apps.filter(
      (app) =>
        app.appName.toLowerCase().includes(term) ||
        app.packageName.toLowerCase().includes(term),
    );
  }, [apps, deferredSearch]);

  const toggleApp = (pkg: string) => {
    if (excludedApps.includes(pkg)) {
      setExcludedApps(excludedApps.filter((p) => p !== pkg));
    } else {
      setExcludedApps([...excludedApps, pkg]);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button
          variant="outline"
          className="w-full flex justify-between items-center h-12 rounded-xl bg-white/5 border-white/10 hover:bg-white/10 transition-all"
        >
          <span className="font-medium text-foreground">
            {t("excluded_apps")}
          </span>
          <span className="bg-primary/20 text-primary px-2.5 py-0.5 rounded-full text-xs font-bold">
            {excludedApps.length}
          </span>
        </Button>
      </DialogTrigger>

      <DialogContent className="max-h-[85vh] flex flex-col p-0 overflow-hidden border-white/10 bg-background/95 backdrop-blur-2xl">
        <DialogHeader className="p-6 pb-2">
          <DialogTitle>{t("select_apps")}</DialogTitle>
        </DialogHeader>

        <div className="px-6 pb-4">
          <input
            type="text"
            placeholder={t("search_apps_placeholder")}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full p-3 rounded-xl bg-white/5 border border-white/10 text-sm outline-none focus:border-primary transition-colors text-foreground"
          />
        </div>

        <div className="flex-1 overflow-y-auto px-6 pb-6 custom-scrollbar">
          {isLoading ? (
            <div className="flex flex-col items-center justify-center py-20 gap-3 text-muted-foreground">
              <Loader2 className="size-8 animate-spin text-primary" />
              <p className="text-sm font-medium">{t("loading_apps")}</p>
            </div>
          ) : (
            <div className="space-y-2">
              {filteredApps.map((app) => (
                <div
                  key={app.packageName}
                  className="flex items-center justify-between p-3 rounded-xl bg-white/5 hover:bg-white/10 border border-transparent transition-all cursor-pointer group"
                  onClick={() => toggleApp(app.packageName)}
                >
                  <div className="flex flex-col overflow-hidden pr-4">
                    <span className="text-sm font-medium truncate text-foreground group-hover:text-primary transition-colors">
                      {app.appName}
                    </span>
                    <span className="text-[10px] text-muted-foreground truncate font-mono">
                      {app.packageName}
                    </span>
                  </div>
                  <Switch
                    checked={excludedApps.includes(app.packageName)}
                    onCheckedChange={() => toggleApp(app.packageName)}
                    onClick={(e) => e.stopPropagation()}
                  />
                </div>
              ))}

              {!isLoading && filteredApps.length === 0 && (
                <p className="text-center text-muted-foreground text-sm py-12">
                  {t("no_apps_found")}
                </p>
              )}
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}
