"use client";

import {
  useCallback,
  type MouseEvent,
  type PointerEvent,
} from "react";
import { useI18n, type TranslationKey } from "@/i18n";

export type MultiAnglePresetId = "custom" | "fisheye" | "tilt" | "frontOverhead" | "frontLow" | "panoramicOverhead" | "back";
export type MultiAngleZoom = 0 | 1 | 2;
export type MultiAngleVertical = -30 | 0 | 30 | 60;

export interface MultiAngleSettings {
  preset: MultiAnglePresetId;
  horizontal: number;
  vertical: MultiAngleVertical;
  zoom: MultiAngleZoom;
  includePrompt: boolean;
  promptText: string;
}

const MULTI_ANGLE_PROMPT_PATTERN = /\n*\u3010多角度\u3011[\s\S]*?\u3010\/多角度\u3011/g;

export const MULTI_ANGLE_PRESETS: Array<{ id: MultiAnglePresetId; label: string; enabled: boolean }> = [
  { id: "custom", label: "自定义", enabled: true },
  { id: "fisheye", label: "鱼眼视角", enabled: true },
  { id: "tilt", label: "倾斜视角", enabled: true },
  { id: "frontOverhead", label: "正面俯拍", enabled: true },
  { id: "frontLow", label: "正面仰拍", enabled: true },
  { id: "panoramicOverhead", label: "全景俯拍", enabled: true },
  { id: "back", label: "背面视角", enabled: true },
];

export const MULTI_ANGLE_HORIZONTAL_MIN = 0;
export const MULTI_ANGLE_HORIZONTAL_MAX = 315;
export const MULTI_ANGLE_VERTICAL_OPTIONS: MultiAngleVertical[] = [-30, 0, 30, 60];
export const FISHEYE_MULTI_ANGLE_PROMPT =
  "超近距离鱼眼镜头，强烈超广角透视，圆形画面边界与黑色暗角，明显桶形畸变，画面中心主体放大，边缘向外弯曲拉伸";
export const TILT_MULTI_ANGLE_PROMPT = "dutch angle, tilted frame";

export const MULTI_ANGLE_ZOOM_LABELS: Record<MultiAngleZoom, string> = {
  0: "全景",
  1: "中景",
  2: "特写",
};

const MULTI_ANGLE_PRESET_LABEL_KEYS: Record<MultiAnglePresetId, TranslationKey> = {
  custom: "multiAngle.preset.custom",
  fisheye: "multiAngle.preset.fisheye",
  tilt: "multiAngle.preset.tilt",
  frontOverhead: "multiAngle.preset.frontOverhead",
  frontLow: "multiAngle.preset.frontLow",
  panoramicOverhead: "multiAngle.preset.panoramicOverhead",
  back: "multiAngle.preset.back",
};

const MULTI_ANGLE_ZOOM_LABEL_KEYS: Record<MultiAngleZoom, TranslationKey> = {
  0: "multiAngle.zoom.wide",
  1: "multiAngle.zoom.medium",
  2: "multiAngle.zoom.close",
};

export const DEFAULT_MULTI_ANGLE_SETTINGS: MultiAngleSettings = {
  preset: "custom",
  horizontal: 0,
  vertical: -30,
  zoom: 1,
  includePrompt: false,
  promptText: "",
};

export const FISHEYE_MULTI_ANGLE_SETTINGS: MultiAngleSettings = {
  preset: "fisheye",
  horizontal: 0,
  vertical: 30,
  zoom: 2,
  includePrompt: true,
  promptText: FISHEYE_MULTI_ANGLE_PROMPT,
};

export const MULTI_ANGLE_PRESET_SETTINGS: Record<MultiAnglePresetId, MultiAngleSettings> = {
  custom: DEFAULT_MULTI_ANGLE_SETTINGS,
  fisheye: FISHEYE_MULTI_ANGLE_SETTINGS,
  tilt: {
    preset: "tilt",
    horizontal: 45,
    vertical: -30,
    zoom: 1,
    includePrompt: true,
    promptText: TILT_MULTI_ANGLE_PROMPT,
  },
  frontOverhead: {
    preset: "frontOverhead",
    horizontal: 0,
    vertical: 60,
    zoom: 1,
    includePrompt: false,
    promptText: "",
  },
  frontLow: {
    preset: "frontLow",
    horizontal: 0,
    vertical: -30,
    zoom: 1,
    includePrompt: false,
    promptText: "",
  },
  panoramicOverhead: {
    preset: "panoramicOverhead",
    horizontal: 45,
    vertical: 30,
    zoom: 0,
    includePrompt: false,
    promptText: "",
  },
  back: {
    preset: "back",
    horizontal: 180,
    vertical: 0,
    zoom: 1,
    includePrompt: false,
    promptText: "",
  },
};

function clamp(value: number, min: number, max: number): number {
  return Math.max(min, Math.min(max, value));
}

function snapMultiAngleVertical(value: number): MultiAngleVertical {
  return MULTI_ANGLE_VERTICAL_OPTIONS.reduce((closest, option) =>
    Math.abs(option - value) < Math.abs(closest - value) ? option : closest
  );
}

function getNextMultiAngleVertical(current: MultiAngleVertical, direction: -1 | 1): MultiAngleVertical {
  const currentIndex = MULTI_ANGLE_VERTICAL_OPTIONS.indexOf(current);
  const nextIndex = Math.max(0, Math.min(MULTI_ANGLE_VERTICAL_OPTIONS.length - 1, currentIndex + direction));
  return MULTI_ANGLE_VERTICAL_OPTIONS[nextIndex] ?? DEFAULT_MULTI_ANGLE_SETTINGS.vertical;
}

function getHorizontalPrompt(horizontal: number): string {
  if (horizontal === 0) return "水平环绕 0°，相机正对主体";
  const visualAngle = 360 - horizontal;
  return `水平环绕 ${horizontal}°，按目标视角等效为主体向右转 ${visualAngle}°，不要生成反向视角`;
}

function getVerticalPrompt(vertical: number): string {
  if (vertical === 0) return "垂直俯仰 0°";
  return vertical > 0
    ? `垂直俯仰 ${vertical}°，正面俯拍视角，相机从上方向下看主体`
    : `垂直俯仰 ${vertical}°，正面仰拍视角，相机从下方向上看主体`;
}

export function buildMultiAnglePrompt(settings: MultiAngleSettings): string {
  const customPrompt = settings.includePrompt ? settings.promptText.trim() : "";
  const customPromptText = customPrompt ? `，提示词：${customPrompt}` : "";
  return `【多角度】基于输入图片生成，保持同一主体和画风。使用${getHorizontalPrompt(settings.horizontal)}，${getVerticalPrompt(settings.vertical)}，景别为${MULTI_ANGLE_ZOOM_LABELS[settings.zoom]}${customPromptText}，构图稳定、画面自然。【/多角度】`;
}

export function stripMultiAnglePrompt(prompt: string): string {
  return prompt.replace(MULTI_ANGLE_PROMPT_PATTERN, "").replace(/\n{3,}/g, "\n\n").trimEnd();
}

export function mergeMultiAnglePrompt(prompt: string, settings: MultiAngleSettings): string {
  const basePrompt = stripMultiAnglePrompt(prompt);
  const anglePrompt = buildMultiAnglePrompt(settings);
  return basePrompt ? `${basePrompt}\n\n${anglePrompt}` : anglePrompt;
}

export function MultiAngleEditor({
  previewImage,
  settings,
  onChange,
  onSelectPreset,
  onTogglePrompt,
  onReset,
}: {
  previewImage: string | null | undefined;
  settings: MultiAngleSettings;
  onChange: (patch: Partial<MultiAngleSettings>) => void;
  onSelectPreset: (preset: MultiAnglePresetId) => void;
  onTogglePrompt: (enabled: boolean) => void;
  onReset: () => void;
}) {
  const { t } = useI18n();
  const selectedPreset = MULTI_ANGLE_PRESETS.find((preset) => preset.id === settings.preset) ?? MULTI_ANGLE_PRESETS[0];
  const selectedPresetLabel = t(MULTI_ANGLE_PRESET_LABEL_KEYS[selectedPreset.id]);
  const currentZoomLabel = t(MULTI_ANGLE_ZOOM_LABEL_KEYS[settings.zoom]);
  const horizontalRadians = (settings.horizontal * Math.PI) / 180;
  const cameraX = 100 + Math.sin(horizontalRadians) * 78;
  const cameraY = 100 - (settings.vertical / 60) * 52;
  const globePitchRotation = -(settings.vertical / 60) * 16;
  const globePitchScaleY = 1 - Math.abs(settings.vertical) / 260;
  const sightTargetY = 100;
  const previewScale = settings.zoom === 0 ? 0.88 : settings.zoom === 1 ? 1 : 1.16;

  const updateHorizontal = (value: number) => {
    onChange({
      horizontal: Math.round(clamp(value, MULTI_ANGLE_HORIZONTAL_MIN, MULTI_ANGLE_HORIZONTAL_MAX)),
    });
  };

  const updateVertical = (value: number) => {
    onChange({ vertical: snapMultiAngleVertical(value) });
  };

  const updateZoom = (value: number) => {
    onChange({ zoom: Math.round(clamp(value, 0, 2)) as MultiAngleZoom });
  };

  const updateFromGlobePoint = useCallback(
    (target: HTMLDivElement, clientX: number, clientY: number) => {
      const rect = target.getBoundingClientRect();
      if (rect.width <= 0 || rect.height <= 0) return;

      const pointerY = clamp(1 - (clientY - rect.top) / rect.height, 0, 1);
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;
      const rawAngle = (Math.atan2(clientY - centerY, clientX - centerX) * 180) / Math.PI;
      const normalizedAngle = (90 - rawAngle + 360) % 360;
      const horizontal = normalizedAngle > MULTI_ANGLE_HORIZONTAL_MAX
        ? MULTI_ANGLE_HORIZONTAL_MIN
        : Math.round(normalizedAngle);

      onChange({
        horizontal,
        vertical: snapMultiAngleVertical(-30 + pointerY * 90),
      });
    },
    [onChange]
  );

  const handleGlobePointerDown = useCallback(
    (event: PointerEvent<HTMLDivElement>) => {
      event.preventDefault();
      event.stopPropagation();
      event.currentTarget.setPointerCapture?.(event.pointerId);
      updateFromGlobePoint(event.currentTarget, event.clientX, event.clientY);
    },
    [updateFromGlobePoint]
  );

  const handleGlobePointerMove = useCallback(
    (event: PointerEvent<HTMLDivElement>) => {
      if ((event.buttons & 1) !== 1) return;
      event.preventDefault();
      event.stopPropagation();
      updateFromGlobePoint(event.currentTarget, event.clientX, event.clientY);
    },
    [updateFromGlobePoint]
  );

  const handleGlobePointerUp = useCallback((event: PointerEvent<HTMLDivElement>) => {
    event.stopPropagation();
    event.currentTarget.releasePointerCapture?.(event.pointerId);
  }, []);

  const handleGlobeMouseDown = useCallback(
    (event: MouseEvent<HTMLDivElement>) => {
      event.preventDefault();
      event.stopPropagation();
      updateFromGlobePoint(event.currentTarget, event.clientX, event.clientY);
    },
    [updateFromGlobePoint]
  );

  const handleGlobeMouseMove = useCallback(
    (event: MouseEvent<HTMLDivElement>) => {
      if ((event.buttons & 1) !== 1) return;
      event.preventDefault();
      event.stopPropagation();
      updateFromGlobePoint(event.currentTarget, event.clientX, event.clientY);
    },
    [updateFromGlobePoint]
  );

  const handleGlobeMouseUp = useCallback((event: MouseEvent<HTMLDivElement>) => {
    event.stopPropagation();
  }, []);

  return (
    <div className="rounded-xl border border-neutral-700/70 bg-neutral-900/35 p-3">
      <div className="mb-3 flex items-center justify-between gap-3">
        <span className="text-sm font-medium text-neutral-100">{t("multiAngle.editorTitle")}</span>
        <span className="text-[11px] text-neutral-500">{selectedPresetLabel}</span>
      </div>

      <div className="nowheel mb-3 flex gap-2 overflow-x-auto pb-1">
        {MULTI_ANGLE_PRESETS.map((preset) => (
          <button
            key={preset.id}
            type="button"
            disabled={!preset.enabled}
            onClick={() => onSelectPreset(preset.id)}
            className={`shrink-0 rounded-md border px-3 py-1.5 text-xs transition-colors ${
              settings.preset === preset.id
                ? "border-neutral-500 bg-neutral-700 text-neutral-100"
                : "border-neutral-700 bg-neutral-800/70 text-neutral-500 hover:border-neutral-500 hover:bg-neutral-700/80 hover:text-neutral-100"
            } disabled:cursor-not-allowed disabled:opacity-60`}
          >
            {t(MULTI_ANGLE_PRESET_LABEL_KEYS[preset.id])}
          </button>
        ))}
      </div>

      <div className="grid gap-4 md:grid-cols-[240px_1fr]">
        <div
          aria-label={t("multiAngle.sightControl")}
          className="relative h-60 touch-none overflow-hidden rounded-xl bg-neutral-800 cursor-grab active:cursor-grabbing"
          data-composer-local-pointer="true"
          data-horizontal={settings.horizontal}
          data-vertical={settings.vertical}
          data-zoom={currentZoomLabel}
          role="application"
          tabIndex={0}
          onPointerDown={handleGlobePointerDown}
          onPointerMove={handleGlobePointerMove}
          onPointerUp={handleGlobePointerUp}
          onMouseDown={handleGlobeMouseDown}
          onMouseMove={handleGlobeMouseMove}
          onMouseUp={handleGlobeMouseUp}
        >
          <svg className="absolute inset-4 z-0 h-[calc(100%-2rem)] w-[calc(100%-2rem)] text-neutral-500/70" viewBox="0 0 200 200" fill="none">
            <defs>
              <radialGradient id="multi-angle-globe-glow" cx="50%" cy="44%" r="52%">
                <stop offset="0%" stopColor="#ffffff" stopOpacity="0.2" />
                <stop offset="100%" stopColor="#ffffff" stopOpacity="0.02" />
              </radialGradient>
            </defs>
            <circle cx="100" cy="100" r="78" fill="url(#multi-angle-globe-glow)" stroke="currentColor" strokeWidth="1" />
            <g transform={`translate(100 100) rotate(${globePitchRotation}) scale(1 ${globePitchScaleY}) translate(-100 -100)`}>
              <ellipse cx="100" cy="100" rx="78" ry="26" stroke="currentColor" strokeWidth="0.8" />
              <ellipse cx="100" cy="100" rx="78" ry="52" stroke="currentColor" strokeWidth="0.8" />
              <ellipse cx="100" cy="100" rx="26" ry="78" stroke="currentColor" strokeWidth="0.8" />
              <ellipse cx="100" cy="100" rx="52" ry="78" stroke="currentColor" strokeWidth="0.8" />
              <path d="M22 100h156M100 22v156" stroke="currentColor" strokeWidth="0.8" />
            </g>
          </svg>

          <button
            type="button"
            aria-label={t("multiAngle.adjustVerticalUp")}
            onPointerDown={(event) => event.stopPropagation()}
            onMouseDown={(event) => event.stopPropagation()}
            onClick={() => updateVertical(getNextMultiAngleVertical(settings.vertical, 1))}
            className="absolute left-1/2 top-3 z-40 -translate-x-1/2 rounded-md px-2 py-1 text-neutral-500 transition-colors hover:bg-neutral-700 hover:text-neutral-200"
          >
            ˄
          </button>
          <button
            type="button"
            aria-label={t("multiAngle.adjustVerticalDown")}
            onPointerDown={(event) => event.stopPropagation()}
            onMouseDown={(event) => event.stopPropagation()}
            onClick={() => updateVertical(getNextMultiAngleVertical(settings.vertical, -1))}
            className="absolute bottom-3 left-1/2 z-40 -translate-x-1/2 rounded-md px-2 py-1 text-neutral-500 transition-colors hover:bg-neutral-700 hover:text-neutral-200"
          >
            ˅
          </button>
          <button
            type="button"
            aria-label={t("multiAngle.adjustHorizontalLeft")}
            onPointerDown={(event) => event.stopPropagation()}
            onMouseDown={(event) => event.stopPropagation()}
            onClick={() => updateHorizontal(settings.horizontal - 1)}
            className="absolute left-3 top-1/2 z-40 -translate-y-1/2 rounded-md px-2 py-1 text-neutral-500 transition-colors hover:bg-neutral-700 hover:text-neutral-200"
          >
            ‹
          </button>
          <button
            type="button"
            aria-label={t("multiAngle.adjustHorizontalRight")}
            onPointerDown={(event) => event.stopPropagation()}
            onMouseDown={(event) => event.stopPropagation()}
            onClick={() => updateHorizontal(settings.horizontal + 1)}
            className="absolute right-3 top-1/2 z-40 -translate-y-1/2 rounded-md px-2 py-1 text-neutral-500 transition-colors hover:bg-neutral-700 hover:text-neutral-200"
          >
            ›
          </button>

          <div className="absolute inset-0 z-10 flex items-center justify-center">
            {previewImage ? (
              <img
                src={previewImage}
                alt=""
                className="h-20 w-20 rounded-md border border-cyan-400/50 object-cover shadow-lg shadow-black/40 transition-transform duration-150"
                style={{ transform: `scale(${previewScale})` }}
              />
            ) : (
              <div className="flex h-20 w-20 items-center justify-center rounded-md border border-dashed border-neutral-600 text-[11px] text-neutral-500">
                {t("multiAngle.noImage")}
              </div>
            )}
          </div>
          <svg className="pointer-events-none absolute inset-4 z-30 h-[calc(100%-2rem)] w-[calc(100%-2rem)]" viewBox="0 0 200 200" fill="none">
            <line x1={cameraX} y1={cameraY} x2="100" y2={sightTargetY} stroke="#22d3ee" strokeWidth="2.4" strokeLinecap="round" />
            <circle cx={cameraX} cy={cameraY} r="3.2" fill="#22d3ee" />
            <g transform={`translate(${cameraX - 9} ${cameraY + 6})`}>
              <rect width="18" height="12" rx="2" fill="#e5e5e5" />
              <circle cx="9" cy="6" r="3" fill="#171717" />
              <path d="M3 3h3" stroke="#171717" strokeWidth="1.2" strokeLinecap="round" />
            </g>
          </svg>
        </div>

        <div className="min-w-0 space-y-4 py-1">
          <label className="grid grid-cols-[72px_1fr_44px] items-center gap-3 text-xs text-neutral-400">
            <span>{t("multiAngle.horizontal")}</span>
            <input
              aria-label={t("multiAngle.horizontal")}
              type="range"
              min={MULTI_ANGLE_HORIZONTAL_MIN}
              max={MULTI_ANGLE_HORIZONTAL_MAX}
              step="1"
              value={settings.horizontal}
              onChange={(event) => updateHorizontal(Number(event.target.value))}
              className="h-1.5 w-full accent-neutral-100"
            />
            <span className="text-right font-medium text-neutral-100">{settings.horizontal}°</span>
          </label>

          <label className="grid grid-cols-[72px_1fr_44px] items-center gap-3 text-xs text-neutral-400">
            <span>{t("multiAngle.vertical")}</span>
            <input
              aria-label={t("multiAngle.vertical")}
              type="range"
              min="-30"
              max="60"
              step="30"
              value={settings.vertical}
              onChange={(event) => updateVertical(Number(event.target.value))}
              className="h-1.5 w-full accent-neutral-100"
            />
            <span className="text-right font-medium text-neutral-100">{settings.vertical}°</span>
          </label>

          <label className="grid grid-cols-[72px_1fr_44px] items-center gap-3 text-xs text-neutral-400">
            <span>{t("multiAngle.zoom")}</span>
            <input
              aria-label={t("multiAngle.zoom")}
              type="range"
              min="0"
              max="2"
              step="1"
              value={settings.zoom}
              onChange={(event) => updateZoom(Number(event.target.value))}
              className="h-1.5 w-full accent-neutral-100"
            />
            <span className="text-right font-medium text-neutral-100">{currentZoomLabel}</span>
          </label>

          <div className="grid grid-cols-[72px_1fr_44px] items-center gap-3 text-xs text-neutral-400">
            <span className="w-[72px]">{t("multiAngle.prompt")}</span>
            <button
              type="button"
              role="switch"
              aria-label={t("multiAngle.prompt")}
              aria-checked={settings.includePrompt}
              onClick={() => onTogglePrompt(!settings.includePrompt)}
              className={`inline-flex h-6 w-11 shrink-0 items-center rounded-full p-0.5 transition-colors ${
                settings.includePrompt ? "bg-cyan-500" : "bg-neutral-700"
              }`}
              title={t("multiAngle.enableCustomPrompt")}
            >
              <span
                className={`h-5 w-5 rounded-full bg-neutral-100 transition-transform ${
                  settings.includePrompt ? "translate-x-5" : "translate-x-0"
                }`}
              />
            </button>
            <span />
          </div>

          {settings.includePrompt && (
            <div role="dialog" aria-label={t("multiAngle.promptDialog")} className="rounded-xl border border-neutral-700 bg-neutral-900/70 p-3">
              <textarea
                aria-label={t("multiAngle.promptInput")}
                value={settings.promptText}
                onChange={(event) => onChange({ promptText: event.target.value })}
                placeholder={t("multiAngle.promptPlaceholder")}
                rows={3}
                className="nowheel min-h-20 w-full resize-none rounded-lg border border-neutral-700 bg-neutral-950/60 px-3 py-2 text-sm text-neutral-100 outline-none placeholder:text-neutral-600 focus:border-cyan-500"
              />
            </div>
          )}

          <div className="flex items-center pt-3">
            <button
              type="button"
              aria-label={t("multiAngle.resetAria")}
              onClick={onReset}
              className="flex items-center gap-1.5 rounded-md px-1.5 py-1 text-xs text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
            >
              <span>↺</span>
              <span>{t("multiAngle.reset")}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}