"use client";

import { invoke } from "@tauri-apps/api/core";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { LoadingButton } from "@/components/loading-button";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ProBadge } from "@/components/ui/pro-badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import type {
  WayfernConfig,
  WayfernFingerprintConfig,
  WayfernOS,
} from "@/types";

interface WayfernConfigFormProps {
  config: WayfernConfig;
  onConfigChange: (key: keyof WayfernConfig, value: unknown) => void;
  className?: string;
  isCreating?: boolean;
  forceAdvanced?: boolean;
  readOnly?: boolean;
  crossOsUnlocked?: boolean;
  limitedMode?: boolean;
  profileVersion?: string;
  profileBrowser?: string;
}

const isFingerprintEditingDisabled = (config: WayfernConfig): boolean => {
  return config.randomize_fingerprint_on_launch === true;
};

/** What `generate_sample_fingerprint` returns. Identity fields are null on a
 * browser version that predates the Wayfern identity API. */
interface GeneratedFingerprint {
  fingerprint: string;
  identity_id: string | null;
  identity_baseline: string | null;
}

const getCurrentOS = (): WayfernOS => {
  if (typeof navigator === "undefined") return "linux";
  const platform = navigator.platform.toLowerCase();
  if (platform.includes("win")) return "windows";
  if (platform.includes("mac")) return "macos";
  return "linux";
};

const osLabels: Record<WayfernOS, string> = {
  windows: "Windows",
  macos: "macOS",
  linux: "Linux",
  android: "Android",
  ios: "iOS",
};

export function WayfernConfigForm({
  config,
  onConfigChange,
  className = "",
  isCreating = false,
  forceAdvanced = false,
  readOnly = false,
  crossOsUnlocked = false,
  limitedMode = false,
  profileVersion,
  profileBrowser,
}: WayfernConfigFormProps) {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState(
    forceAdvanced ? "manual" : "automatic",
  );
  const [fingerprintConfig, setFingerprintConfig] =
    useState<WayfernFingerprintConfig>({});
  const [currentOS] = useState<WayfernOS>(getCurrentOS);
  const [isGeneratingFingerprint, setIsGeneratingFingerprint] = useState(false);

  const handleGenerateFingerprint = async () => {
    if (!profileVersion) return;
    setIsGeneratingFingerprint(true);
    try {
      const configJson = JSON.stringify(config);
      const result = await invoke<GeneratedFingerprint>(
        "generate_sample_fingerprint",
        {
          browser: profileBrowser ?? "wayfern",
          version: profileVersion,
          configJson,
        },
      );
      onConfigChange("fingerprint", result.fingerprint);
      // The identity travels with the fingerprint it produced. Storing one
      // without the other leaves a device the launch path cannot reproduce, so
      // it would be discarded and re-minted on the next launch.
      onConfigChange("identity_id", result.identity_id ?? undefined);
      onConfigChange(
        "identity_baseline",
        result.identity_baseline ?? undefined,
      );
    } catch (error) {
      console.error("Failed to generate fingerprint:", error);
    } finally {
      setIsGeneratingFingerprint(false);
    }
  };

  const selectedOS = config.os || currentOS;

  useEffect(() => {
    if (isCreating && typeof window !== "undefined") {
      const screenWidth = window.screen.width;
      const screenHeight = window.screen.height;

      if (!config.screen_max_width) {
        onConfigChange("screen_max_width", screenWidth);
      }
      if (!config.screen_max_height) {
        onConfigChange("screen_max_height", screenHeight);
      }
    }
  }, [
    isCreating,
    config.screen_max_width,
    config.screen_max_height,
    onConfigChange,
  ]);

  useEffect(() => {
    if (config.fingerprint) {
      try {
        const parsed = JSON.parse(
          config.fingerprint,
        ) as WayfernFingerprintConfig;
        setFingerprintConfig(parsed);
      } catch (error) {
        console.error("Failed to parse fingerprint config:", error);
        setFingerprintConfig({});
      }
    } else {
      setFingerprintConfig({});
    }
  }, [config.fingerprint]);

  const updateFingerprintConfig = (
    key: keyof WayfernFingerprintConfig,
    value: unknown,
  ) => {
    const newConfig = { ...fingerprintConfig };

    if (
      value === undefined ||
      value === "" ||
      (Array.isArray(value) && value.length === 0)
    ) {
      delete newConfig[key];
    } else {
      (newConfig as Record<string, unknown>)[key] = value;
    }

    setFingerprintConfig(newConfig);

    try {
      const jsonString = JSON.stringify(newConfig);
      onConfigChange("fingerprint", jsonString);
    } catch (error) {
      console.error("Failed to serialize fingerprint config:", error);
    }
  };

  const isAutoLocationEnabled = config.geoip !== false;

  const handleAutoLocationToggle = (enabled: boolean) => {
    if (enabled) {
      onConfigChange("geoip", true);
    } else {
      onConfigChange("geoip", false);
    }
  };

  const isEditingDisabled = isFingerprintEditingDisabled(config) || readOnly;

  /** For an identity-backed profile these fields have no stored value to show,
   * and editing them by hand produces an inconsistent device. Hidden rather
   * than rendered blank-and-disabled, because a blank box reads as data loss
   * whereas their absence is the truth. */
  const isIdentityDerived = config.identity_id != null;

  const renderAdvancedForm = () => (
    <div className="space-y-6">
      {/* Operating System Selection */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <Label>{t("fingerprint.osLabel")}</Label>
          {profileVersion && (!isCreating || crossOsUnlocked) && (
            <LoadingButton
              isLoading={isGeneratingFingerprint}
              onClick={handleGenerateFingerprint}
              disabled={readOnly}
              variant="outline"
              size="sm"
            >
              {isCreating
                ? t("fingerprint.generateFingerprint")
                : t("fingerprint.refreshFingerprint")}
            </LoadingButton>
          )}
        </div>
        <Select
          value={selectedOS}
          onValueChange={(value: WayfernOS) => {
            onConfigChange("os", value);
          }}
          disabled={readOnly}
        >
          <SelectTrigger>
            <SelectValue placeholder={t("fingerprint.selectOSPlaceholder")} />
          </SelectTrigger>
          <SelectContent>
            {(
              ["windows", "macos", "linux", "android", "ios"] as WayfernOS[]
            ).map((os) => {
              const isDisabled = os !== currentOS && !crossOsUnlocked;
              return (
                <SelectItem key={os} value={os} disabled={isDisabled}>
                  <span className="flex items-center gap-2">
                    {osLabels[os]}
                    {isDisabled && <ProBadge />}
                  </span>
                </SelectItem>
              );
            })}
          </SelectContent>
        </Select>
        {selectedOS !== currentOS && crossOsUnlocked && (
          <Alert className="mt-2">
            <AlertDescription>
              {t("fingerprint.crossOsWarning")}
            </AlertDescription>
          </Alert>
        )}
      </div>

      {/* Randomize Fingerprint Option */}
      <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
        <div className="flex items-center gap-x-2">
          <Checkbox
            id="randomize-fingerprint"
            checked={config.randomize_fingerprint_on_launch ?? false}
            onCheckedChange={(checked) => {
              onConfigChange("randomize_fingerprint_on_launch", checked);
            }}
            disabled={readOnly}
          />
          <Label htmlFor="randomize-fingerprint" className="font-medium">
            {t("fingerprint.generateRandomOnLaunch")}
          </Label>
        </div>
        <p className="ml-6 text-sm text-muted-foreground">
          {t("fingerprint.generateRandomDescription")}
        </p>
      </div>

      {/* Automatic Location Configuration */}
      <div className="space-y-3">
        <div className="flex items-center gap-x-2">
          <Checkbox
            id="auto-location-advanced"
            checked={isAutoLocationEnabled}
            onCheckedChange={handleAutoLocationToggle}
            disabled={readOnly}
          />
          <Label htmlFor="auto-location-advanced">
            {t("fingerprint.autoLocationDescription")}
          </Label>
        </div>
      </div>

      <div
        className={
          limitedMode ? "relative overflow-hidden rounded-lg" : undefined
        }
      >
        {!limitedMode &&
          (isEditingDisabled ? (
            <Alert>
              <AlertDescription>
                {readOnly
                  ? t("fingerprint.editingDisabledRunning")
                  : t("fingerprint.editingDisabledRandomized")}
              </AlertDescription>
            </Alert>
          ) : (
            <Alert>
              <AlertDescription>
                {t("fingerprint.basicWarning")}
              </AlertDescription>
            </Alert>
          ))}

        <fieldset
          disabled={isEditingDisabled || limitedMode}
          className="space-y-6"
        >
          {/* User Agent and Platform */}
          <div className="space-y-3">
            <Label>{t("fingerprint.userAgentAndPlatform")}</Label>
            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
              <div className="col-span-full space-y-2">
                <Label htmlFor="user-agent">{t("fingerprint.userAgent")}</Label>
                <Input
                  id="user-agent"
                  value={fingerprintConfig.userAgent ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "userAgent",
                      e.target.value || undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "Mozilla/5.0...",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="platform">{t("fingerprint.platform")}</Label>
                <Input
                  id="platform"
                  value={fingerprintConfig.platform ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "platform",
                      e.target.value || undefined,
                    );
                  }}
                  placeholder={t(
                    "config.wayfern.fingerprint.platformPlaceholder",
                  )}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="platform-version">
                  {t("fingerprint.platformVersion")}
                </Label>
                <Input
                  id="platform-version"
                  value={fingerprintConfig.platformVersion ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "platformVersion",
                      e.target.value || undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "10.0.0",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="brand">{t("fingerprint.brand")}</Label>
                <Input
                  id="brand"
                  value={fingerprintConfig.brand ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "brand",
                      e.target.value || undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "Google Chrome",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="brand-version">
                  {t("fingerprint.brandVersion")}
                </Label>
                <Input
                  id="brand-version"
                  value={fingerprintConfig.brandVersion ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "brandVersion",
                      e.target.value || undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "143",
                  })}
                />
              </div>
            </div>
          </div>

          {/* Hardware Properties */}
          <div className="space-y-3">
            <Label>{t("fingerprint.hardwareProperties")}</Label>
            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
              <div className="space-y-2">
                <Label htmlFor="hardware-concurrency">
                  {t("fingerprint.hardwareConcurrency")}
                </Label>
                <Input
                  id="hardware-concurrency"
                  type="number"
                  value={fingerprintConfig.hardwareConcurrency ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "hardwareConcurrency",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", { value: "8" })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="max-touch-points">
                  {t("fingerprint.maxTouchPoints")}
                </Label>
                <Input
                  id="max-touch-points"
                  type="number"
                  value={fingerprintConfig.maxTouchPoints ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "maxTouchPoints",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", { value: "0" })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="device-memory">
                  {t("fingerprint.deviceMemory")}
                </Label>
                <Input
                  id="device-memory"
                  type="number"
                  value={fingerprintConfig.deviceMemory ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "deviceMemory",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", { value: "8" })}
                />
              </div>
            </div>
          </div>

          {/* Screen Properties */}
          <div className="space-y-3">
            <Label>{t("fingerprint.screenProperties")}</Label>
            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
              <div className="space-y-2">
                <Label htmlFor="screen-width">
                  {t("fingerprint.screenWidth")}
                </Label>
                <Input
                  id="screen-width"
                  type="number"
                  value={fingerprintConfig.screenWidth ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "screenWidth",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "1920",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="screen-height">
                  {t("fingerprint.screenHeight")}
                </Label>
                <Input
                  id="screen-height"
                  type="number"
                  value={fingerprintConfig.screenHeight ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "screenHeight",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "1080",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="device-pixel-ratio">
                  {t("fingerprint.devicePixelRatio")}
                </Label>
                <Input
                  id="device-pixel-ratio"
                  type="number"
                  step="0.1"
                  value={fingerprintConfig.devicePixelRatio ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "devicePixelRatio",
                      e.target.value ? parseFloat(e.target.value) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "1.0",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="screen-avail-width">
                  {t("fingerprint.availableWidth")}
                </Label>
                <Input
                  id="screen-avail-width"
                  type="number"
                  value={fingerprintConfig.screenAvailWidth ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "screenAvailWidth",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "1920",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="screen-avail-height">
                  {t("fingerprint.availableHeight")}
                </Label>
                <Input
                  id="screen-avail-height"
                  type="number"
                  value={fingerprintConfig.screenAvailHeight ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "screenAvailHeight",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "1040",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="screen-color-depth">
                  {t("fingerprint.colorDepth")}
                </Label>
                <Input
                  id="screen-color-depth"
                  type="number"
                  value={fingerprintConfig.screenColorDepth ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "screenColorDepth",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "24",
                  })}
                />
              </div>
            </div>
          </div>

          {/* Window Properties */}
          <div className="space-y-3">
            <Label>{t("fingerprint.windowProperties")}</Label>
            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
              <div className="space-y-2">
                <Label htmlFor="window-outer-width">
                  {t("fingerprint.outerWidth")}
                </Label>
                <Input
                  id="window-outer-width"
                  type="number"
                  value={fingerprintConfig.windowOuterWidth ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "windowOuterWidth",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "1920",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="window-outer-height">
                  {t("fingerprint.outerHeight")}
                </Label>
                <Input
                  id="window-outer-height"
                  type="number"
                  value={fingerprintConfig.windowOuterHeight ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "windowOuterHeight",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "1040",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="window-inner-width">
                  {t("fingerprint.innerWidth")}
                </Label>
                <Input
                  id="window-inner-width"
                  type="number"
                  value={fingerprintConfig.windowInnerWidth ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "windowInnerWidth",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "1920",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="window-inner-height">
                  {t("fingerprint.innerHeight")}
                </Label>
                <Input
                  id="window-inner-height"
                  type="number"
                  value={fingerprintConfig.windowInnerHeight ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "windowInnerHeight",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "940",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="screen-x">{t("fingerprint.screenX")}</Label>
                <Input
                  id="screen-x"
                  type="number"
                  value={fingerprintConfig.screenX ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "screenX",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", { value: "0" })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="screen-y">{t("fingerprint.screenY")}</Label>
                <Input
                  id="screen-y"
                  type="number"
                  value={fingerprintConfig.screenY ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "screenY",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", { value: "0" })}
                />
              </div>
            </div>
          </div>

          {/* Language & Locale */}
          <div className="space-y-3">
            <Label>{t("fingerprint.languageAndLocale")}</Label>
            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="language">
                  {t("fingerprint.primaryLanguage")}
                </Label>
                <Input
                  id="language"
                  value={fingerprintConfig.language ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "language",
                      e.target.value || undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "en-US",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="languages">{t("fingerprint.languages")}</Label>
                <Input
                  id="languages"
                  value={
                    Array.isArray(fingerprintConfig.languages)
                      ? JSON.stringify(fingerprintConfig.languages)
                      : ""
                  }
                  onChange={(e) => {
                    if (!e.target.value) {
                      updateFingerprintConfig("languages", undefined);
                      return;
                    }
                    try {
                      const parsed = JSON.parse(e.target.value);
                      if (Array.isArray(parsed)) {
                        updateFingerprintConfig("languages", parsed);
                      }
                    } catch {
                      // Invalid JSON, keep current value
                    }
                  }}
                  placeholder='["en-US", "en"]'
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="do-not-track">
                  {t("fingerprint.doNotTrack")}
                </Label>
                <Select
                  value={fingerprintConfig.doNotTrack ?? ""}
                  onValueChange={(value) => {
                    updateFingerprintConfig("doNotTrack", value || undefined);
                  }}
                >
                  <SelectTrigger>
                    <SelectValue
                      placeholder={t("fingerprint.selectDntPlaceholder")}
                    />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="0">
                      {t("fingerprint.dntAllowed")}
                    </SelectItem>
                    <SelectItem value="1">
                      {t("fingerprint.dntNotAllowed")}
                    </SelectItem>
                    <SelectItem value="unspecified">
                      {t("fingerprint.dntUnspecified")}
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>

          {/* Timezone and Geolocation */}
          <div className="space-y-3">
            <Label>{t("fingerprint.timezoneAndGeolocation")}</Label>
            <p className="text-sm text-muted-foreground">
              {t("fingerprint.timezoneGeolocationDescription")}
            </p>
            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
              <div className="space-y-2">
                <Label htmlFor="timezone">
                  {t("fingerprint.timezoneIana")}
                </Label>
                <Input
                  id="timezone"
                  value={fingerprintConfig.timezone ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "timezone",
                      e.target.value || undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "America/New_York",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="timezone-offset">
                  {t("fingerprint.timezoneOffset")}
                </Label>
                <Input
                  id="timezone-offset"
                  type="number"
                  value={fingerprintConfig.timezoneOffset ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "timezoneOffset",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t(
                    "config.wayfern.fingerprint.timezoneOffsetPlaceholder",
                  )}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="latitude">{t("fingerprint.latitude")}</Label>
                <Input
                  id="latitude"
                  type="number"
                  step="any"
                  value={fingerprintConfig.latitude ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "latitude",
                      e.target.value ? parseFloat(e.target.value) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "40.7128",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="longitude">{t("fingerprint.longitude")}</Label>
                <Input
                  id="longitude"
                  type="number"
                  step="any"
                  value={fingerprintConfig.longitude ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "longitude",
                      e.target.value ? parseFloat(e.target.value) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "-74.0060",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="accuracy">{t("fingerprint.accuracy")}</Label>
                <Input
                  id="accuracy"
                  type="number"
                  value={fingerprintConfig.accuracy ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "accuracy",
                      e.target.value ? parseFloat(e.target.value) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "100",
                  })}
                />
              </div>
            </div>
          </div>

          {/* WebGL Properties */}
          <div className="space-y-3">
            <Label>{t("fingerprint.webglProperties")}</Label>
            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="webgl-vendor">
                  {t("fingerprint.webglVendor")}
                </Label>
                <Input
                  id="webgl-vendor"
                  value={fingerprintConfig.webglVendor ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "webglVendor",
                      e.target.value || undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "Intel",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="webgl-renderer">
                  {t("fingerprint.webglRenderer")}
                </Label>
                <Input
                  id="webgl-renderer"
                  value={fingerprintConfig.webglRenderer ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "webglRenderer",
                      e.target.value || undefined,
                    );
                  }}
                  placeholder={t(
                    "config.wayfern.fingerprint.webglRendererPlaceholder",
                  )}
                />
              </div>
            </div>
          </div>

          {/* WebGL Parameters (JSON) */}
          {!isIdentityDerived && (
            <div className="space-y-3">
              <Label>{t("fingerprint.webglParametersJson")}</Label>
              <Textarea
                value={fingerprintConfig.webglParameters ?? ""}
                onChange={(e) => {
                  updateFingerprintConfig(
                    "webglParameters",
                    e.target.value || undefined,
                  );
                }}
                placeholder='{"7936": "Intel", "7937": "Intel(R) HD Graphics"}'
                className="font-mono text-sm"
                rows={4}
              />
            </div>
          )}

          {/* Canvas Noise Seed */}
          <div className="space-y-3">
            <Label>{t("fingerprint.canvasFingerprint")}</Label>
            <div className="space-y-2">
              <Label htmlFor="canvas-noise-seed">
                {t("fingerprint.canvasNoiseSeed")}
              </Label>
              <Input
                id="canvas-noise-seed"
                value={fingerprintConfig.canvasNoiseSeed ?? ""}
                onChange={(e) => {
                  updateFingerprintConfig(
                    "canvasNoiseSeed",
                    e.target.value || undefined,
                  );
                }}
                placeholder={t("fingerprint.canvasNoiseSeedPlaceholder")}
              />
              <p className="text-sm text-muted-foreground">
                {t("fingerprint.canvasNoiseSeedDescription")}
              </p>
            </div>
          </div>

          {/* Fonts (JSON) */}
          <div className="space-y-3">
            <Label>{t("fingerprint.fontsJson")}</Label>
            <Textarea
              value={fingerprintConfig.fonts ?? ""}
              onChange={(e) => {
                updateFingerprintConfig("fonts", e.target.value || undefined);
              }}
              placeholder='["Arial", "Verdana", "Times New Roman"]'
              className="font-mono text-sm"
              rows={3}
            />
          </div>

          {/* Audio */}
          <div className="space-y-3">
            <Label>{t("fingerprint.audioProperties")}</Label>
            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="audio-sample-rate">
                  {t("fingerprint.sampleRate")}
                </Label>
                <Input
                  id="audio-sample-rate"
                  type="number"
                  value={fingerprintConfig.audioSampleRate ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "audioSampleRate",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "48000",
                  })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="audio-max-channel-count">
                  {t("fingerprint.maxChannelCount")}
                </Label>
                <Input
                  id="audio-max-channel-count"
                  type="number"
                  value={fingerprintConfig.audioMaxChannelCount ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "audioMaxChannelCount",
                      e.target.value ? parseInt(e.target.value, 10) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", { value: "2" })}
                />
              </div>
            </div>
          </div>

          {/* Battery */}
          <div className="space-y-3">
            <Label>{t("fingerprint.battery")}</Label>
            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
              <div className="space-y-2">
                <div className="flex items-center gap-x-2">
                  <Checkbox
                    id="battery-charging"
                    checked={fingerprintConfig.batteryCharging ?? false}
                    onCheckedChange={(checked) => {
                      updateFingerprintConfig(
                        "batteryCharging",
                        checked || undefined,
                      );
                    }}
                  />
                  <Label htmlFor="battery-charging">
                    {t("fingerprint.charging")}
                  </Label>
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="battery-level">
                  {t("fingerprint.batteryLevel")}
                </Label>
                <Input
                  id="battery-level"
                  type="number"
                  step="0.01"
                  min="0"
                  max="1"
                  value={fingerprintConfig.batteryLevel ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "batteryLevel",
                      e.target.value ? parseFloat(e.target.value) : undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "0.85",
                  })}
                />
              </div>
            </div>
          </div>

          {/* Vendor Info */}
          <div className="space-y-3">
            <Label>{t("fingerprint.vendorInfo")}</Label>
            <div
              className={
                isIdentityDerived
                  ? "grid grid-cols-1 gap-4"
                  : "grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3"
              }
            >
              {!isIdentityDerived && (
                <>
                  <div className="space-y-2">
                    <Label htmlFor="vendor">{t("fingerprint.vendor")}</Label>
                    <Input
                      id="vendor"
                      value={fingerprintConfig.vendor ?? ""}
                      onChange={(e) => {
                        updateFingerprintConfig(
                          "vendor",
                          e.target.value || undefined,
                        );
                      }}
                      placeholder={t("common.placeholders.example", {
                        value: "Google Inc.",
                      })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="vendor-sub">
                      {t("fingerprint.vendorSub")}
                    </Label>
                    <Input
                      id="vendor-sub"
                      value={fingerprintConfig.vendorSub ?? ""}
                      onChange={(e) => {
                        updateFingerprintConfig(
                          "vendorSub",
                          e.target.value || undefined,
                        );
                      }}
                      placeholder=""
                    />
                  </div>
                </>
              )}
              <div className="space-y-2">
                <Label htmlFor="product-sub">
                  {t("fingerprint.productSub")}
                </Label>
                <Input
                  id="product-sub"
                  value={fingerprintConfig.productSub ?? ""}
                  onChange={(e) => {
                    updateFingerprintConfig(
                      "productSub",
                      e.target.value || undefined,
                    );
                  }}
                  placeholder={t("common.placeholders.example", {
                    value: "20030107",
                  })}
                />
              </div>
            </div>
          </div>
        </fieldset>
        {limitedMode && (
          <>
            <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
            <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
            <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
            <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
            <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
            <div className="absolute inset-0 z-3 flex items-center justify-center">
              <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                <ProBadge />
                <span className="text-sm font-medium text-muted-foreground">
                  {t("fingerprint.proFeature")}
                </span>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );

  return (
    <div className={`@container space-y-6 ${className}`}>
      {forceAdvanced ? (
        renderAdvancedForm()
      ) : (
        <Tabs
          value={activeTab}
          onValueChange={readOnly ? undefined : setActiveTab}
          className="w-full"
        >
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="automatic" disabled={readOnly}>
              {t("fingerprint.automatic")}
            </TabsTrigger>
            <TabsTrigger value="manual" disabled={readOnly}>
              {t("fingerprint.manual")}
            </TabsTrigger>
          </TabsList>

          <TabsContent value="automatic" className="space-y-6">
            {/* Operating System Selection */}
            <div className="mt-4 space-y-3">
              <Label>{t("fingerprint.osLabel")}</Label>
              <Select
                value={selectedOS}
                onValueChange={(value: WayfernOS) => {
                  onConfigChange("os", value);
                }}
                disabled={readOnly}
              >
                <SelectTrigger>
                  <SelectValue
                    placeholder={t("fingerprint.selectOSPlaceholder")}
                  />
                </SelectTrigger>
                <SelectContent>
                  {(
                    [
                      "windows",
                      "macos",
                      "linux",
                      "android",
                      "ios",
                    ] as WayfernOS[]
                  ).map((os) => {
                    const isDisabled = os !== currentOS && !crossOsUnlocked;
                    return (
                      <SelectItem key={os} value={os} disabled={isDisabled}>
                        <span className="flex items-center gap-2">
                          {osLabels[os]}
                          {isDisabled && <ProBadge />}
                        </span>
                      </SelectItem>
                    );
                  })}
                </SelectContent>
              </Select>
              {selectedOS !== currentOS && crossOsUnlocked && (
                <Alert className="mt-2">
                  <AlertDescription>
                    {t("fingerprint.crossOsLimitations")}
                  </AlertDescription>
                </Alert>
              )}
            </div>

            {/* Randomize Fingerprint Option */}
            <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
              <div className="flex items-center gap-x-2">
                <Checkbox
                  id="randomize-fingerprint-auto"
                  checked={config.randomize_fingerprint_on_launch ?? false}
                  onCheckedChange={(checked) => {
                    onConfigChange("randomize_fingerprint_on_launch", checked);
                  }}
                  disabled={readOnly}
                />
                <Label
                  htmlFor="randomize-fingerprint-auto"
                  className="font-medium"
                >
                  {t("fingerprint.generateRandomOnLaunch")}
                </Label>
              </div>
              <p className="ml-6 text-sm text-muted-foreground">
                {t("fingerprint.generateRandomDescription")}
              </p>
            </div>

            {/* Automatic Location Configuration */}
            <div className="space-y-3">
              <div className="flex items-center gap-x-2">
                <Checkbox
                  id="auto-location"
                  checked={isAutoLocationEnabled}
                  onCheckedChange={handleAutoLocationToggle}
                  disabled={isEditingDisabled}
                />
                <Label htmlFor="auto-location">
                  {t("fingerprint.autoLocationDescription")}
                </Label>
              </div>
            </div>

            {/* Screen Resolution */}
            <div
              className={
                limitedMode ? "relative overflow-hidden rounded-lg" : undefined
              }
            >
              <fieldset
                disabled={isEditingDisabled || limitedMode}
                className="space-y-3"
              >
                <Label>{t("fingerprint.screenResolution")}</Label>
                <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="screen-max-width">
                      {t("fingerprint.maxWidth")}
                    </Label>
                    <Input
                      id="screen-max-width"
                      type="number"
                      value={config.screen_max_width ?? ""}
                      onChange={(e) => {
                        onConfigChange(
                          "screen_max_width",
                          e.target.value
                            ? parseInt(e.target.value, 10)
                            : undefined,
                        );
                      }}
                      placeholder={t("common.placeholders.example", {
                        value: "1920",
                      })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="screen-max-height">
                      {t("fingerprint.maxHeight")}
                    </Label>
                    <Input
                      id="screen-max-height"
                      type="number"
                      value={config.screen_max_height ?? ""}
                      onChange={(e) => {
                        onConfigChange(
                          "screen_max_height",
                          e.target.value
                            ? parseInt(e.target.value, 10)
                            : undefined,
                        );
                      }}
                      placeholder={t("common.placeholders.example", {
                        value: "1080",
                      })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="screen-min-width">
                      {t("fingerprint.minWidth")}
                    </Label>
                    <Input
                      id="screen-min-width"
                      type="number"
                      value={config.screen_min_width ?? ""}
                      onChange={(e) => {
                        onConfigChange(
                          "screen_min_width",
                          e.target.value
                            ? parseInt(e.target.value, 10)
                            : undefined,
                        );
                      }}
                      placeholder={t("common.placeholders.example", {
                        value: "800",
                      })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="screen-min-height">
                      {t("fingerprint.minHeight")}
                    </Label>
                    <Input
                      id="screen-min-height"
                      type="number"
                      value={config.screen_min_height ?? ""}
                      onChange={(e) => {
                        onConfigChange(
                          "screen_min_height",
                          e.target.value
                            ? parseInt(e.target.value, 10)
                            : undefined,
                        );
                      }}
                      placeholder={t("common.placeholders.example", {
                        value: "600",
                      })}
                    />
                  </div>
                </div>
              </fieldset>
              {limitedMode && (
                <>
                  <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
                  <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
                  <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
                  <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
                  <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
                  <div className="absolute inset-0 z-3 flex items-center justify-center">
                    <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                      <ProBadge />
                      <span className="text-sm font-medium text-muted-foreground">
                        {t("fingerprint.proFeature")}
                      </span>
                    </div>
                  </div>
                </>
              )}
            </div>
          </TabsContent>

          <TabsContent value="manual" className="space-y-6">
            {renderAdvancedForm()}
          </TabsContent>
        </Tabs>
      )}
    </div>
  );
}
