"use client";

import { invoke } from "@tauri-apps/api/core";
import { useCallback, useEffect, useState } from "react";
import { LoadingButton } from "@/components/loading-button";
import { SharedCamoufoxConfigForm } from "@/components/shared-camoufox-config-form";
import { Button } from "@/components/ui/button";
import { Combobox } from "@/components/ui/combobox";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useBrowserDownload } from "@/hooks/use-browser-download";
import { getBrowserIcon, getCurrentOS } from "@/lib/browser-utils";
import type { BrowserReleaseTypes, CamoufoxConfig, StoredProxy } from "@/types";

type BrowserTypeString =
  | "mullvad-browser"
  | "firefox"
  | "firefox-developer"
  | "chromium"
  | "brave"
  | "zen"
  | "tor-browser"
  | "camoufox";

interface CreateProfileDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onCreateProfile: (profileData: {
    name: string;
    browserStr: BrowserTypeString;
    version: string;
    releaseType: string;
    proxyId?: string;
    camoufoxConfig?: CamoufoxConfig;
  }) => Promise<void>;
}

interface BrowserOption {
  value: BrowserTypeString;
  label: string;
  description: string;
}

const browserOptions: BrowserOption[] = [
  {
    value: "firefox",
    label: "Firefox",
    description: "Mozilla's main web browser",
  },
  {
    value: "firefox-developer",
    label: "Firefox Developer Edition",
    description: "Browser for developers with cutting-edge features",
  },
  {
    value: "chromium",
    label: "Chromium",
    description: "Open-source version of Chrome",
  },
  {
    value: "brave",
    label: "Brave",
    description: "Privacy-focused browser with ad blocking",
  },
  {
    value: "zen",
    label: "Zen Browser",
    description: "Beautiful, customizable Firefox-based browser",
  },
  {
    value: "mullvad-browser",
    label: "Mullvad Browser",
    description: "TOR Browser fork by Mullvad VPN",
  },
  {
    value: "tor-browser",
    label: "Tor Browser",
    description: "Browse anonymously through the Tor network",
  },
];

export function CreateProfileDialog({
  isOpen,
  onClose,
  onCreateProfile,
}: CreateProfileDialogProps) {
  const [profileName, setProfileName] = useState("");
  const [activeTab, setActiveTab] = useState("regular");

  // Regular browser states
  const [selectedBrowser, setSelectedBrowser] = useState<BrowserTypeString>();
  const [selectedProxyId, setSelectedProxyId] = useState<string>();

  // Camoufox anti-detect states
  const [camoufoxConfig, setCamoufoxConfig] = useState<CamoufoxConfig>({
    enable_cache: true, // Cache enabled by default
    os: [getCurrentOS()], // Default to current OS
  });

  // Common states
  const [availableReleaseTypes, setAvailableReleaseTypes] =
    useState<BrowserReleaseTypes>({});
  const [camoufoxReleaseTypes, setCamoufoxReleaseTypes] =
    useState<BrowserReleaseTypes>({});
  const [supportedBrowsers, setSupportedBrowsers] = useState<string[]>([]);
  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
  const [isCreating, setIsCreating] = useState(false);

  // Use the browser download hook
  const {
    isBrowserDownloading,
    downloadBrowser,
    loadDownloadedVersions,
    isVersionDownloaded,
  } = useBrowserDownload();

  const loadSupportedBrowsers = useCallback(async () => {
    try {
      const browsers = await invoke<string[]>("get_supported_browsers");
      setSupportedBrowsers(browsers);
    } catch (error) {
      console.error("Failed to load supported browsers:", error);
    }
  }, []);

  const loadStoredProxies = useCallback(async () => {
    try {
      const proxies = await invoke<StoredProxy[]>("get_stored_proxies");
      setStoredProxies(proxies);
    } catch (error) {
      console.error("Failed to load stored proxies:", error);
    }
  }, []);

  const loadReleaseTypes = useCallback(
    async (browser: string) => {
      try {
        const releaseTypes = await invoke<BrowserReleaseTypes>(
          "get_browser_release_types",
          { browserStr: browser },
        );

        if (browser === "camoufox") {
          setCamoufoxReleaseTypes(releaseTypes);
        } else {
          setAvailableReleaseTypes(releaseTypes);
        }

        // Load downloaded versions for this browser
        await loadDownloadedVersions(browser);
      } catch (error) {
        console.error(`Failed to load release types for ${browser}:`, error);
      }
    },
    [loadDownloadedVersions],
  );

  // Load data when dialog opens
  useEffect(() => {
    if (isOpen) {
      void loadSupportedBrowsers();
      void loadStoredProxies();
      // Load camoufox release types when dialog opens
      void loadReleaseTypes("camoufox");
    }
  }, [isOpen, loadSupportedBrowsers, loadStoredProxies, loadReleaseTypes]);

  // Load release types when browser selection changes
  useEffect(() => {
    if (selectedBrowser) {
      void loadReleaseTypes(selectedBrowser);
    }
  }, [selectedBrowser, loadReleaseTypes]);

  // Helper function to get the best available version and release type
  const getBestAvailableVersion = useCallback(
    (releaseTypes: BrowserReleaseTypes) => {
      if (releaseTypes.stable) {
        return { version: releaseTypes.stable, releaseType: "stable" as const };
      }
      if (releaseTypes.nightly) {
        return {
          version: releaseTypes.nightly,
          releaseType: "nightly" as const,
        };
      }
      return null;
    },
    [],
  );

  const handleDownload = async (browserStr: string) => {
    const releaseTypes =
      browserStr === "camoufox" ? camoufoxReleaseTypes : availableReleaseTypes;
    const bestVersion = getBestAvailableVersion(releaseTypes);

    if (!bestVersion) {
      console.error("No version available for download");
      return;
    }

    try {
      await downloadBrowser(browserStr, bestVersion.version);
    } catch (error) {
      console.error("Failed to download browser:", error);
    }
  };

  const handleCreate = async () => {
    if (!profileName.trim()) return;

    setIsCreating(true);
    try {
      if (activeTab === "regular") {
        if (!selectedBrowser) {
          console.error("Missing required browser selection");
          return;
        }

        // Use the best available version (stable preferred, nightly as fallback)
        const bestVersion = getBestAvailableVersion(availableReleaseTypes);
        if (!bestVersion) {
          console.error("No version available");
          return;
        }

        await onCreateProfile({
          name: profileName.trim(),
          browserStr: selectedBrowser,
          version: bestVersion.version,
          releaseType: bestVersion.releaseType,
          proxyId: selectedProxyId,
        });
      } else {
        // Anti-detect tab - always use Camoufox with best available version
        const bestCamoufoxVersion =
          getBestAvailableVersion(camoufoxReleaseTypes);
        if (!bestCamoufoxVersion) {
          console.error("No Camoufox version available");
          return;
        }

        await onCreateProfile({
          name: profileName.trim(),
          browserStr: "camoufox" as BrowserTypeString,
          version: bestCamoufoxVersion.version,
          releaseType: bestCamoufoxVersion.releaseType,
          proxyId: selectedProxyId,
          camoufoxConfig,
        });
      }

      handleClose();
    } catch (error) {
      console.error("Failed to create profile:", error);
    } finally {
      setIsCreating(false);
    }
  };

  const handleClose = () => {
    // Reset all states
    setProfileName("");
    setSelectedBrowser(undefined);
    setSelectedProxyId(undefined);
    setCamoufoxConfig({
      enable_cache: true,
      os: [getCurrentOS()], // Reset to current OS
    });
    setActiveTab("regular");
    onClose();
  };

  const isCreateDisabled = () => {
    if (!profileName.trim()) return true;

    if (activeTab === "regular") {
      return (
        !selectedBrowser || !getBestAvailableVersion(availableReleaseTypes)
      );
    } else {
      // For anti-detect, we need camoufox to be available
      return !getBestAvailableVersion(camoufoxReleaseTypes);
    }
  };

  const updateCamoufoxConfig = (key: keyof CamoufoxConfig, value: unknown) => {
    setCamoufoxConfig((prev) => ({ ...prev, [key]: value }));
  };

  // Check if browser version is downloaded and available
  const isBrowserVersionAvailable = (browserStr: string) => {
    const releaseTypes =
      browserStr === "camoufox" ? camoufoxReleaseTypes : availableReleaseTypes;
    const bestVersion = getBestAvailableVersion(releaseTypes);
    return bestVersion && isVersionDownloaded(bestVersion.version);
  };

  // Get the selected OS for warning
  const selectedOS = camoufoxConfig.os?.[0];
  const currentOS = getCurrentOS();
  const _showOSWarning =
    selectedOS && selectedOS !== currentOS && currentOS !== "unknown";

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle>Create New Profile</DialogTitle>
        </DialogHeader>

        <Tabs
          value={activeTab}
          onValueChange={setActiveTab}
          className="flex flex-col flex-1 w-full min-h-0"
        >
          <TabsList className="grid flex-shrink-0 grid-cols-2 w-full">
            <TabsTrigger value="regular">Regular Browsers</TabsTrigger>
            <TabsTrigger value="anti-detect">Anti-Detect</TabsTrigger>
          </TabsList>

          <ScrollArea className="flex-1 pr-6 h-[320px]">
            <div className="py-4 space-y-6">
              {/* Profile Name - Common to both tabs */}
              <div className="space-y-2">
                <Label htmlFor="profile-name">Profile Name</Label>
                <Input
                  id="profile-name"
                  value={profileName}
                  onChange={(e) => setProfileName(e.target.value)}
                  placeholder="Enter profile name"
                />
              </div>

              <TabsContent value="regular" className="mt-0 space-y-6">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label>Browser</Label>
                    <Combobox
                      options={browserOptions
                        .filter((browser) =>
                          supportedBrowsers.includes(browser.value),
                        )
                        .map((browser) => {
                          const IconComponent = getBrowserIcon(browser.value);
                          return {
                            value: browser.value,
                            label: browser.label,
                            icon: IconComponent,
                          };
                        })}
                      value={selectedBrowser || ""}
                      onValueChange={(value) =>
                        setSelectedBrowser(value as BrowserTypeString)
                      }
                      placeholder="Select a browser..."
                      searchPlaceholder="Search browsers..."
                    />
                  </div>

                  {selectedBrowser && (
                    <div className="space-y-3">
                      {!isBrowserVersionAvailable(selectedBrowser) &&
                        getBestAvailableVersion(availableReleaseTypes) && (
                          <div className="flex gap-3 items-center">
                            <p className="text-sm text-muted-foreground">
                              {(() => {
                                const bestVersion = getBestAvailableVersion(
                                  availableReleaseTypes,
                                );
                                return `${bestVersion?.releaseType === "stable" ? "Latest stable" : "Latest nightly"} version (${bestVersion?.version}) needs to be downloaded`;
                              })()}
                            </p>
                            <LoadingButton
                              onClick={() => handleDownload(selectedBrowser)}
                              isLoading={isBrowserDownloading(selectedBrowser)}
                              size="sm"
                              disabled={isBrowserDownloading(selectedBrowser)}
                            >
                              Download
                            </LoadingButton>
                          </div>
                        )}
                      {isBrowserVersionAvailable(selectedBrowser) && (
                        <div className="text-sm text-green-600">
                          {(() => {
                            const bestVersion = getBestAvailableVersion(
                              availableReleaseTypes,
                            );
                            return `✓ ${bestVersion?.releaseType === "stable" ? "Latest stable" : "Latest nightly"} version (${bestVersion?.version}) is available`;
                          })()}
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </TabsContent>

              <TabsContent value="anti-detect" className="mt-0 space-y-6">
                {/* Anti-Detect Description */}
                <div className="p-3 text-center bg-blue-50 rounded-md border border-blue-200 dark:bg-blue-950 dark:border-blue-800">
                  <p className="text-sm text-blue-800 dark:text-blue-200">
                    Powered by Camoufox
                  </p>
                </div>

                <div className="space-y-6">
                  {/* Camoufox Download Status */}
                  {!isBrowserVersionAvailable("camoufox") &&
                    getBestAvailableVersion(camoufoxReleaseTypes) && (
                      <div className="flex gap-3 items-center p-3 bg-amber-50 rounded-md border border-amber-200">
                        <p className="text-sm text-amber-800">
                          {(() => {
                            const bestVersion =
                              getBestAvailableVersion(camoufoxReleaseTypes);
                            return `Camoufox ${bestVersion?.releaseType} version (${bestVersion?.version}) needs to be downloaded`;
                          })()}
                        </p>
                        <LoadingButton
                          onClick={() => handleDownload("camoufox")}
                          isLoading={isBrowserDownloading("camoufox")}
                          size="sm"
                          disabled={isBrowserDownloading("camoufox")}
                        >
                          Download
                        </LoadingButton>
                      </div>
                    )}
                  {isBrowserVersionAvailable("camoufox") && (
                    <div className="p-3 text-sm text-green-600 bg-green-50 rounded-md border border-green-200">
                      {(() => {
                        const bestVersion =
                          getBestAvailableVersion(camoufoxReleaseTypes);
                        return `✓ Camoufox ${bestVersion?.releaseType} version (${bestVersion?.version}) is available`;
                      })()}
                    </div>
                  )}

                  <SharedCamoufoxConfigForm
                    config={camoufoxConfig}
                    onConfigChange={updateCamoufoxConfig}
                  />
                </div>
              </TabsContent>

              {/* Proxy Selection - Common to both tabs - Compact without card */}
              {storedProxies.length > 0 && (
                <div className="space-y-3">
                  <Label>Proxy</Label>
                  <Select
                    value={selectedProxyId || "none"}
                    onValueChange={(value) =>
                      setSelectedProxyId(value === "none" ? undefined : value)
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="No proxy" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">No proxy</SelectItem>
                      {storedProxies.map((proxy) => (
                        <SelectItem key={proxy.id} value={proxy.id}>
                          {proxy.name} ({proxy.proxy_settings.proxy_type}://
                          {proxy.proxy_settings.host}:
                          {proxy.proxy_settings.port})
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}
            </div>
          </ScrollArea>

          <DialogFooter className="flex-shrink-0 pt-4 border-t">
            <Button variant="outline" onClick={handleClose}>
              Cancel
            </Button>
            <LoadingButton
              onClick={handleCreate}
              isLoading={isCreating}
              disabled={isCreateDisabled()}
            >
              Create Profile
            </LoadingButton>
          </DialogFooter>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
}
