import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Sparkles, Info } from "lucide-react";
import { useSettings } from "@/hooks/useSettings";
import { ipc } from "@/ipc/types";
import { hasDyadProKey, type UserSettings } from "@/lib/schemas";

export function ProModeSelector() {
  const { settings, updateSettings } = useSettings();

  const toggleWebSearch = () => {
    updateSettings({
      enableProWebSearch: !settings?.enableProWebSearch,
    });
  };

  const handleTurboEditsChange = (newValue: "off" | "v1" | "v2") => {
    updateSettings({
      enableProLazyEditsMode: newValue !== "off",
      proLazyEditsMode: newValue,
    });
  };

  const handleSmartContextChange = (newValue: "off" | "deep" | "balanced") => {
    if (newValue === "off") {
      updateSettings({
        enableProSmartFilesContextMode: false,
        proSmartContextOption: undefined,
      });
    } else if (newValue === "deep") {
      updateSettings({
        enableProSmartFilesContextMode: true,
        proSmartContextOption: "deep",
      });
    } else if (newValue === "balanced") {
      updateSettings({
        enableProSmartFilesContextMode: true,
        proSmartContextOption: "balanced",
      });
    }
  };

  const toggleProEnabled = () => {
    updateSettings({
      enableDyadPro: !settings?.enableDyadPro,
    });
  };

  const hasProKey = settings ? hasDyadProKey(settings) : false;
  const proModeTogglable = hasProKey && Boolean(settings?.enableDyadPro);

  return (
    <Popover>
      <PopoverTrigger
        className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-primary/50 bg-background shadow-sm hover:bg-primary/10 h-8 px-1.5 gap-1.5 shadow-primary/10 hover:shadow-md hover:shadow-primary/15"
        title="Configure Dyad Pro settings"
      >
        <Sparkles className="h-4 w-4 text-primary" />
        <span className="text-primary font-medium text-xs-sm">Pro</span>
      </PopoverTrigger>
      <PopoverContent className="w-80 border-primary/20">
        <div className="space-y-4">
          <div className="space-y-1">
            <h4 className="font-medium flex items-center gap-1.5">
              <Sparkles className="h-4 w-4 text-primary" />
              <span className="text-primary font-medium">Dyad Pro</span>
            </h4>
            <div className="h-px bg-gradient-to-r from-primary/50 via-primary/20 to-transparent" />
          </div>
          {!hasProKey && (
            <div className="text-sm text-center text-muted-foreground">
              <a
                className="inline-flex items-center justify-center gap-2 rounded-md border border-primary/30 bg-primary/10 px-3 py-2 text-sm font-medium text-primary shadow-sm transition-colors hover:bg-primary/20 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer"
                onClick={() => {
                  ipc.system.openExternalUrl("https://dyad.sh/pro#ai");
                }}
                title="Visit dyad.sh/pro to unlock Pro features"
              >
                Unlock Pro modes
              </a>
            </div>
          )}
          <div className="flex flex-col gap-5">
            <SelectorRow
              id="pro-enabled"
              label="Enable Dyad Pro"
              tooltip="Uses Dyad Pro AI credits for the main AI model and Pro modes."
              isTogglable={hasProKey}
              settingEnabled={Boolean(settings?.enableDyadPro)}
              toggle={toggleProEnabled}
            />
            <SelectorRow
              id="web-search"
              label="Web Access"
              tooltip="Allows Dyad to access the web (e.g. search for information)"
              isTogglable={proModeTogglable}
              settingEnabled={Boolean(settings?.enableProWebSearch)}
              toggle={toggleWebSearch}
            />

            <TurboEditsSelector
              isTogglable={proModeTogglable}
              settings={settings}
              onValueChange={handleTurboEditsChange}
            />
            <SmartContextSelector
              isTogglable={proModeTogglable}
              settings={settings}
              onValueChange={handleSmartContextChange}
            />
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}

function SelectorRow({
  id,
  label,
  tooltip,
  isTogglable,
  settingEnabled,
  toggle,
}: {
  id: string;
  label: string;
  tooltip: string;
  isTogglable: boolean;
  settingEnabled: boolean;
  toggle: () => void;
}) {
  return (
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-1.5">
        <Label
          htmlFor={id}
          className={!isTogglable ? "text-muted-foreground/50" : ""}
        >
          {label}
        </Label>
        <span title={tooltip}>
          <Info
            className={`h-4 w-4 cursor-help ${!isTogglable ? "text-muted-foreground/50" : "text-muted-foreground"}`}
          />
        </span>
      </div>
      <Switch
        id={id}
        aria-label={label}
        checked={isTogglable ? settingEnabled : false}
        onCheckedChange={toggle}
        disabled={!isTogglable}
      />
    </div>
  );
}

function TurboEditsSelector({
  isTogglable,
  settings,
  onValueChange,
}: {
  isTogglable: boolean;
  settings: UserSettings | null;
  onValueChange: (value: "off" | "v1" | "v2") => void;
}) {
  // Determine current value based on settings
  const getCurrentValue = (): "off" | "v1" | "v2" => {
    if (!settings?.enableProLazyEditsMode) {
      return "off";
    }
    if (settings?.proLazyEditsMode === "v1") {
      return "v1";
    }
    if (settings?.proLazyEditsMode === "v2") {
      return "v2";
    }
    // Keep in sync with getModelClient in get_model_client.ts
    // If enabled but no option set (undefined/falsey), it's v1
    return "v1";
  };

  const currentValue = getCurrentValue();

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-1.5">
        <Label className={!isTogglable ? "text-muted-foreground/50" : ""}>
          Turbo Edits
        </Label>
        <span title="Edits files efficiently without full rewrites. Classic: Uses a smaller model to complete edits. Search & replace: Find and replaces specific text blocks.">
          <Info
            className={`h-4 w-4 cursor-help ${!isTogglable ? "text-muted-foreground/50" : "text-muted-foreground"}`}
          />
        </span>
      </div>
      <div
        className="inline-flex rounded-md border border-input"
        data-testid="turbo-edits-selector"
      >
        <Button
          variant={currentValue === "off" ? "default" : "ghost"}
          size="sm"
          onClick={() => onValueChange("off")}
          disabled={!isTogglable}
          className="rounded-r-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
          title="Disable Turbo Edits"
        >
          Off
        </Button>
        <Button
          variant={currentValue === "v1" ? "default" : "ghost"}
          size="sm"
          onClick={() => onValueChange("v1")}
          disabled={!isTogglable}
          className="rounded-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
          title="Uses a smaller model to complete edits"
        >
          Classic
        </Button>
        <Button
          variant={currentValue === "v2" ? "default" : "ghost"}
          size="sm"
          onClick={() => onValueChange("v2")}
          disabled={!isTogglable}
          className="rounded-l-none h-8 px-3 text-xs flex-shrink-0"
          title="Find and replaces specific text blocks"
        >
          Search & replace
        </Button>
      </div>
    </div>
  );
}

function SmartContextSelector({
  isTogglable,
  settings,
  onValueChange,
}: {
  isTogglable: boolean;
  settings: UserSettings | null;
  onValueChange: (value: "off" | "balanced" | "deep") => void;
}) {
  // Determine current value based on settings
  const getCurrentValue = (): "off" | "conservative" | "balanced" | "deep" => {
    if (!settings?.enableProSmartFilesContextMode) {
      return "off";
    }
    if (settings?.proSmartContextOption === "deep") {
      return "deep";
    }
    if (settings?.proSmartContextOption === "balanced") {
      return "balanced";
    }
    // Keep logic in sync with isDeepContextEnabled in chat_stream_handlers.ts
    return "deep";
  };

  const currentValue = getCurrentValue();

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-1.5">
        <Label className={!isTogglable ? "text-muted-foreground/50" : ""}>
          Smart Context
        </Label>
        <span title="Selects the most relevant files as context to save credits working on large codebases.">
          <Info
            className={`h-4 w-4 cursor-help ${!isTogglable ? "text-muted-foreground/50" : "text-muted-foreground"}`}
          />
        </span>
      </div>
      <div
        className="inline-flex rounded-md border border-input"
        data-testid="smart-context-selector"
      >
        <Button
          variant={currentValue === "off" ? "default" : "ghost"}
          size="sm"
          onClick={() => onValueChange("off")}
          disabled={!isTogglable}
          className="rounded-r-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
          title="Disable Smart Context"
        >
          Off
        </Button>
        <Button
          variant={currentValue === "balanced" ? "default" : "ghost"}
          size="sm"
          onClick={() => onValueChange("balanced")}
          disabled={!isTogglable}
          className="rounded-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
          title="Selects most relevant files with balanced context size"
        >
          Balanced
        </Button>
        <Button
          variant={currentValue === "deep" ? "default" : "ghost"}
          size="sm"
          onClick={() => onValueChange("deep")}
          disabled={!isTogglable}
          className="rounded-l-none h-8 px-3 text-xs flex-shrink-0"
          title="Experimental: Keeps full conversation history for maximum context and cache-optimized to control costs"
        >
          Deep
        </Button>
      </div>
    </div>
  );
}
