"use client";

import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Slider } from "@/components/ui/slider";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { useTranslation } from "@/lib/i18n/client";
import { useReaderSettings } from "@/lib/readerSettings";
import {
  Globe,
  Laptop,
  Minus,
  Plus,
  RotateCcw,
  Settings,
  Type,
  X,
} from "lucide-react";

import {
  formatFontSize,
  formatLineHeight,
  READER_DEFAULTS,
  READER_SETTING_CONSTRAINTS,
} from "@karakeep/shared/types/readers";

interface ReaderSettingsPopoverProps {
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  variant?: "outline" | "ghost";
}

export default function ReaderSettingsPopover({
  open,
  onOpenChange,
  variant = "outline",
}: ReaderSettingsPopoverProps) {
  const { t } = useTranslation();
  const {
    settings,
    serverSettings,
    localOverrides,
    sessionOverrides,
    hasSessionChanges,
    hasLocalOverrides,
    isSaving,
    updateSession,
    clearSession,
    saveToDevice,
    clearLocalOverride,
    saveToServer,
  } = useReaderSettings();

  // Helper to get the effective server value (server setting or default)
  const getServerValue = <K extends keyof typeof serverSettings>(key: K) => {
    return serverSettings[key] ?? READER_DEFAULTS[key];
  };

  // Helper to check if a setting has a local override
  const hasLocalOverride = (key: keyof typeof localOverrides) => {
    return localOverrides[key] !== undefined;
  };

  // Build tooltip message for the settings button
  const getSettingsTooltip = () => {
    if (hasSessionChanges && hasLocalOverrides) {
      return t("settings.info.reader_settings.tooltip_preview_and_local");
    }
    if (hasSessionChanges) {
      return t("settings.info.reader_settings.tooltip_preview");
    }
    if (hasLocalOverrides) {
      return t("settings.info.reader_settings.tooltip_local");
    }
    return t("settings.info.reader_settings.tooltip_default");
  };

  return (
    <Popover open={open} onOpenChange={onOpenChange}>
      <Tooltip>
        <TooltipTrigger asChild>
          <PopoverTrigger asChild>
            <Button variant={variant} size="icon" className="relative">
              <Settings className="h-4 w-4" />
              {(hasSessionChanges || hasLocalOverrides) && (
                <span className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-primary" />
              )}
            </Button>
          </PopoverTrigger>
        </TooltipTrigger>
        <TooltipContent side="bottom">
          <p>{getSettingsTooltip()}</p>
        </TooltipContent>
      </Tooltip>
      <PopoverContent
        side="bottom"
        align="center"
        collisionPadding={32}
        className="flex w-80 flex-col overflow-hidden p-0"
        style={{
          maxHeight: "var(--radix-popover-content-available-height)",
        }}
      >
        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-4">
          <div className="flex items-center justify-between pb-2">
            <div className="flex items-center gap-2">
              <Type className="h-4 w-4" />
              <h3 className="font-semibold">
                {t("settings.info.reader_settings.title")}
              </h3>
            </div>
            {hasSessionChanges && (
              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary">
                {t("settings.info.reader_settings.preview")}
              </span>
            )}
          </div>

          <div className="space-y-4">
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium">
                  {t("settings.info.reader_settings.font_family")}
                </label>
                <div className="flex items-center gap-1">
                  {sessionOverrides.fontFamily !== undefined && (
                    <span className="text-xs text-muted-foreground">
                      {t("settings.info.reader_settings.preview_inline")}
                    </span>
                  )}
                  {hasLocalOverride("fontFamily") &&
                    sessionOverrides.fontFamily === undefined && (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-5 w-5 text-muted-foreground hover:text-foreground"
                            onClick={() => clearLocalOverride("fontFamily")}
                          >
                            <X className="h-3 w-3" />
                          </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>
                            {t(
                              "settings.info.reader_settings.clear_override_hint",
                              {
                                value: t(
                                  `settings.info.reader_settings.${getServerValue("fontFamily")}` as const,
                                ),
                              },
                            )}
                          </p>
                        </TooltipContent>
                      </Tooltip>
                    )}
                </div>
              </div>
              <Select
                value={settings.fontFamily}
                onValueChange={(value) =>
                  updateSession({
                    fontFamily: value as "serif" | "sans" | "mono",
                  })
                }
              >
                <SelectTrigger
                  className={
                    hasLocalOverride("fontFamily") &&
                    sessionOverrides.fontFamily === undefined
                      ? "border-primary/50"
                      : ""
                  }
                >
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="serif">
                    {t("settings.info.reader_settings.serif")}
                  </SelectItem>
                  <SelectItem value="sans">
                    {t("settings.info.reader_settings.sans")}
                  </SelectItem>
                  <SelectItem value="mono">
                    {t("settings.info.reader_settings.mono")}
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium">
                  {t("settings.info.reader_settings.font_size")}
                </label>
                <div className="flex items-center gap-1">
                  <span className="text-sm text-muted-foreground">
                    {formatFontSize(settings.fontSize)}
                    {sessionOverrides.fontSize !== undefined && (
                      <span className="ml-1 text-xs">
                        {t("settings.info.reader_settings.preview_inline")}
                      </span>
                    )}
                  </span>
                  {hasLocalOverride("fontSize") &&
                    sessionOverrides.fontSize === undefined && (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-5 w-5 text-muted-foreground hover:text-foreground"
                            onClick={() => clearLocalOverride("fontSize")}
                          >
                            <X className="h-3 w-3" />
                          </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>
                            {t(
                              "settings.info.reader_settings.clear_override_hint",
                              {
                                value: formatFontSize(
                                  getServerValue("fontSize"),
                                ),
                              },
                            )}
                          </p>
                        </TooltipContent>
                      </Tooltip>
                    )}
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="icon"
                  className="h-7 w-7 bg-transparent"
                  onClick={() =>
                    updateSession({
                      fontSize: Math.max(
                        READER_SETTING_CONSTRAINTS.fontSize.min,
                        settings.fontSize -
                          READER_SETTING_CONSTRAINTS.fontSize.step,
                      ),
                    })
                  }
                >
                  <Minus className="h-3 w-3" />
                </Button>
                <Slider
                  value={[settings.fontSize]}
                  onValueChange={([value]) =>
                    updateSession({ fontSize: value })
                  }
                  max={READER_SETTING_CONSTRAINTS.fontSize.max}
                  min={READER_SETTING_CONSTRAINTS.fontSize.min}
                  step={READER_SETTING_CONSTRAINTS.fontSize.step}
                  className={`flex-1 ${
                    hasLocalOverride("fontSize") &&
                    sessionOverrides.fontSize === undefined
                      ? "[&_[role=slider]]:border-primary/50"
                      : ""
                  }`}
                />
                <Button
                  variant="outline"
                  size="icon"
                  className="h-7 w-7 bg-transparent"
                  onClick={() =>
                    updateSession({
                      fontSize: Math.min(
                        READER_SETTING_CONSTRAINTS.fontSize.max,
                        settings.fontSize +
                          READER_SETTING_CONSTRAINTS.fontSize.step,
                      ),
                    })
                  }
                >
                  <Plus className="h-3 w-3" />
                </Button>
              </div>
            </div>

            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium">
                  {t("settings.info.reader_settings.line_height")}
                </label>
                <div className="flex items-center gap-1">
                  <span className="text-sm text-muted-foreground">
                    {formatLineHeight(settings.lineHeight)}
                    {sessionOverrides.lineHeight !== undefined && (
                      <span className="ml-1 text-xs">
                        {t("settings.info.reader_settings.preview_inline")}
                      </span>
                    )}
                  </span>
                  {hasLocalOverride("lineHeight") &&
                    sessionOverrides.lineHeight === undefined && (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-5 w-5 text-muted-foreground hover:text-foreground"
                            onClick={() => clearLocalOverride("lineHeight")}
                          >
                            <X className="h-3 w-3" />
                          </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>
                            {t(
                              "settings.info.reader_settings.clear_override_hint",
                              {
                                value: formatLineHeight(
                                  getServerValue("lineHeight"),
                                ),
                              },
                            )}
                          </p>
                        </TooltipContent>
                      </Tooltip>
                    )}
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="icon"
                  className="h-7 w-7 bg-transparent"
                  onClick={() =>
                    updateSession({
                      lineHeight: Math.max(
                        READER_SETTING_CONSTRAINTS.lineHeight.min,
                        Math.round(
                          (settings.lineHeight -
                            READER_SETTING_CONSTRAINTS.lineHeight.step) *
                            10,
                        ) / 10,
                      ),
                    })
                  }
                >
                  <Minus className="h-3 w-3" />
                </Button>
                <Slider
                  value={[settings.lineHeight]}
                  onValueChange={([value]) =>
                    updateSession({ lineHeight: value })
                  }
                  max={READER_SETTING_CONSTRAINTS.lineHeight.max}
                  min={READER_SETTING_CONSTRAINTS.lineHeight.min}
                  step={READER_SETTING_CONSTRAINTS.lineHeight.step}
                  className={`flex-1 ${
                    hasLocalOverride("lineHeight") &&
                    sessionOverrides.lineHeight === undefined
                      ? "[&_[role=slider]]:border-primary/50"
                      : ""
                  }`}
                />
                <Button
                  variant="outline"
                  size="icon"
                  className="h-7 w-7 bg-transparent"
                  onClick={() =>
                    updateSession({
                      lineHeight: Math.min(
                        READER_SETTING_CONSTRAINTS.lineHeight.max,
                        Math.round(
                          (settings.lineHeight +
                            READER_SETTING_CONSTRAINTS.lineHeight.step) *
                            10,
                        ) / 10,
                      ),
                    })
                  }
                >
                  <Plus className="h-3 w-3" />
                </Button>
              </div>
            </div>

            {hasSessionChanges && (
              <>
                <Separator />

                <div className="space-y-2">
                  <Button
                    variant="outline"
                    size="sm"
                    className="w-full"
                    onClick={() => clearSession()}
                  >
                    <RotateCcw className="mr-2 h-4 w-4" />
                    {t("settings.info.reader_settings.reset_preview")}
                  </Button>

                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex-1"
                      disabled={isSaving}
                      onClick={() => saveToDevice()}
                    >
                      <Laptop className="mr-2 h-4 w-4" />
                      {t("settings.info.reader_settings.save_to_device")}
                    </Button>
                    <Button
                      variant="default"
                      size="sm"
                      className="flex-1"
                      disabled={isSaving}
                      onClick={() => saveToServer()}
                    >
                      <Globe className="mr-2 h-4 w-4" />
                      {t("settings.info.reader_settings.save_to_all_devices")}
                    </Button>
                  </div>

                  <p className="text-center text-xs text-muted-foreground">
                    {t("settings.info.reader_settings.save_hint")}
                  </p>
                </div>
              </>
            )}

            {!hasSessionChanges && (
              <p className="text-center text-xs text-muted-foreground">
                {t("settings.info.reader_settings.adjust_hint")}
              </p>
            )}
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}