import { createEffect, createMemo, createSignal, onMount, Show } from "solid-js";
import {
  DEFAULT_PASSPHRASE_WORDS,
  generatePassphrase,
  generatePassword,
  MAX_PASSPHRASE_WORDS,
  MIN_PASSPHRASE_WORDS,
  type PassphraseSeparator,
} from "../../shared/generate";
import type { PasswordPolicy } from "../../shared/types";
import { sendMessage, triggerPipPulse, triggerRing } from "../App";
import { popupCopy } from "../copy";

interface GeneratorDrawerProps {
  open: boolean;
  policy?: PasswordPolicy;
  onUse: (password: string) => void;
  /** Called on every generation so the caller can stay in sync without waiting for onUse */
  onChange?: (password: string) => void;
  /** Compact two-row layout for use inside entry edit mode */
  compact?: boolean;
}

export function GeneratorDrawer(props: GeneratorDrawerProps) {
  const [mode, setMode] = createSignal<"password" | "passphrase">("password");
  const [password, setPassword] = createSignal("");
  const [length, setLength] = createSignal(64);
  const [wordCount, setWordCount] = createSignal(DEFAULT_PASSPHRASE_WORDS);
  const [separator, setSeparator] = createSignal<PassphraseSeparator>("-");
  const [upper, setUpper] = createSignal(true);
  const [lower, setLower] = createSignal(true);
  const [numbers, setNumbers] = createSignal(true);
  const [symbols, setSymbols] = createSignal(true);
  const [forbiddenChars, setForbiddenChars] = createSignal("");
  const [copied, setCopied] = createSignal(false);
  const [editingLength, setEditingLength] = createSignal(false);
  const [lengthDraft, setLengthDraft] = createSignal("");
  const [userHasAdjusted, setUserHasAdjusted] = createSignal(false);
  const [sliderMin, setSliderMin] = createSignal(8);
  const [sliderMax, setSliderMax] = createSignal(256);
  const [sitePolicy, setSitePolicy] = createSignal<PasswordPolicy | null>(null);

  function initFromPolicy(policy: PasswordPolicy) {
    setSitePolicy(policy);

    // Update slider bounds to reflect site constraints (cases 5, 6)
    if (policy.minLength) setSliderMin(Math.max(1, policy.minLength));
    if (policy.maxLength) setSliderMax(Math.min(256, policy.maxLength));

    const currentLength = length();

    if (!userHasAdjusted()) {
      // Case 2: fresh open — snap to site max (strongest password the site accepts)
      const target = policy.maxLength ?? currentLength;
      // Case 5/6: raise to min if max is somehow below it
      setLength(policy.minLength ? Math.max(target, policy.minLength) : target);
    } else {
      // Case 3: user set higher than site max — snap down
      if (policy.maxLength && currentLength > policy.maxLength) {
        setLength(policy.maxLength);
      }
      // Case 5: user set lower than site min — snap up
      if (policy.minLength && currentLength < policy.minLength) {
        setLength(policy.minLength);
      }
      // Case 4: within bounds — keep user's value (no-op)
    }

    let nextSymbols = symbols();
    if (policy.forbidsSymbols) nextSymbols = false;
    if (policy.requiresSymbols) nextSymbols = true;
    setSymbols(nextSymbols);
    setForbiddenChars(policy.forbiddenChars ?? "");
  }

  // Reset adjustment flag each time the drawer opens fresh
  createEffect<boolean>((wasOpen) => {
    const isOpen = props.open;
    if (!wasOpen && isOpen) setUserHasAdjusted(false);
    return isOpen;
  }, false);

  onMount(async () => {
    if (props.policy) {
      initFromPolicy(props.policy);
    } else {
      const res = await sendMessage({ type: "GET_SITE_PASSWORD_POLICY" });
      const data = (res as { ok: boolean; data?: PasswordPolicy }).data;
      if (data && Object.keys(data).length > 0) {
        initFromPolicy(data);
      }
    }
    regenerate();
  });

  const isConstrained = createMemo(() => {
    if (mode() === "passphrase") return false;
    const policy = sitePolicy();
    if (!policy) return false;
    const len = length();
    return (!!policy.maxLength && len >= policy.maxLength) ||
           (!!policy.minLength && len <= policy.minLength);
  });

  const constraintNote = createMemo(() => {
    if (mode() === "passphrase") return "";
    const policy = sitePolicy();
    if (!policy) return "";
    const len = length();
    if (policy.maxLength && len >= policy.maxLength) {
      return `This site allows max ${policy.maxLength} characters`;
    }
    if (policy.minLength && len <= policy.minLength) {
      return `This site requires at least ${policy.minLength} characters`;
    }
    return "";
  });

  function handleLengthChange(n: number) {
    if (mode() === "passphrase") {
      setWordCount(n);
      regenerate({ wordCount: n });
      return;
    }
    setUserHasAdjusted(true);
    setLength(n);
    regenerate({ length: n });
  }

  function regenerate(options?: {
    mode?: "password" | "passphrase";
    length?: number;
    wordCount?: number;
    separator?: PassphraseSeparator;
    upper?: boolean;
    lower?: boolean;
    numbers?: boolean;
    symbols?: boolean;
  }) {
    const nextMode = options?.mode ?? mode();
    const pw = nextMode === "passphrase"
      ? generatePassphrase({
          wordCount: options?.wordCount ?? wordCount(),
          separator: options?.separator ?? separator(),
        })
      : generatePassword({
          length: options?.length ?? length(),
          includeUppercase: options?.upper ?? upper(),
          includeLowercase: options?.lower ?? lower(),
          includeNumbers: options?.numbers ?? numbers(),
          includeSymbols: options?.symbols ?? symbols(),
          forbiddenChars: forbiddenChars(),
        });
    setPassword(pw);
    props.onChange?.(pw);
  }

  async function copyPassword(button?: HTMLButtonElement) {
    const ok = await popupCopy(password(), "password");
    if (ok) {
      triggerRing();
      triggerPipPulse();
      setCopied(true);
      if (button) {
        button.classList.remove("is-retreat");
        const drain = document.createElement("span");
        drain.className = "peach-copy-drain";
        const bar = document.createElement("span");
        bar.className = "peach-copy-drain-bar";
        drain.appendChild(bar);
        button.appendChild(drain);
        window.setTimeout(() => {
          setCopied(false);
          button.classList.remove("is-copied");
          button.classList.add("is-retreat");
          drain.remove();
          window.setTimeout(() => button.classList.remove("is-retreat"), 160);
        }, 1400);
        return;
      }
      window.setTimeout(() => setCopied(false), 1400);
    }
  }

  function toggleUppercase() {
    const next = !upper();
    setUpper(next);
    regenerate({ upper: next });
  }

  function toggleLowercase() {
    const next = !lower();
    setLower(next);
    regenerate({ lower: next });
  }

  function toggleNumbers() {
    const next = !numbers();
    setNumbers(next);
    regenerate({ numbers: next });
  }

  function toggleSymbols() {
    const next = !symbols();
    setSymbols(next);
    regenerate({ symbols: next });
  }

  function startEditingLength() {
    setLengthDraft(String(mode() === "passphrase" ? wordCount() : length()));
    setEditingLength(true);
  }

  function commitLength() {
    const n = parseInt(lengthDraft(), 10);
    if (!Number.isNaN(n)) {
      const min = mode() === "passphrase" ? MIN_PASSPHRASE_WORDS : sliderMin();
      const max = mode() === "passphrase" ? MAX_PASSPHRASE_WORDS : sliderMax();
      const clamped = Math.max(min, Math.min(max, n));
      handleLengthChange(clamped);
    }
    setEditingLength(false);
  }

  const passwordFontSize = () => {
    const value = password();
    if (value.length > 48) return "16px";
    if (value.length > 24) return "20px";
    return "24px";
  };

  function selectMode(nextMode: "password" | "passphrase") {
    setMode(nextMode);
    setEditingLength(false);
    regenerate({ mode: nextMode });
  }

  function selectSeparator(nextSeparator: PassphraseSeparator) {
    setSeparator(nextSeparator);
    regenerate({ separator: nextSeparator });
  }

  const currentAmount = () => mode() === "passphrase" ? wordCount() : length();
  const currentMin = () => mode() === "passphrase" ? MIN_PASSPHRASE_WORDS : sliderMin();
  const currentMax = () => mode() === "passphrase" ? MAX_PASSPHRASE_WORDS : sliderMax();

  const ModeControls = () => (
    <div class="peach-pwgen-mode-pills" aria-label="Generator type">
      <button class={`peach-pwgen-pill ${mode() === "password" ? "is-on" : ""}`} aria-pressed={mode() === "password"} onClick={() => selectMode("password")} type="button">password</button>
      <button class={`peach-pwgen-pill ${mode() === "passphrase" ? "is-on" : ""}`} aria-pressed={mode() === "passphrase"} onClick={() => selectMode("passphrase")} type="button">passphrase</button>
    </div>
  );

  const OptionPills = () => (
    <Show
      when={mode() === "passphrase"}
      fallback={
        <>
          <button class={`peach-pwgen-pill ${upper() ? "is-on" : ""}`} aria-pressed={upper()} onClick={toggleUppercase} type="button">A-Z</button>
          <button class={`peach-pwgen-pill ${lower() ? "is-on" : ""}`} aria-pressed={lower()} onClick={toggleLowercase} type="button">a-z</button>
          <button class={`peach-pwgen-pill ${numbers() ? "is-on" : ""}`} aria-pressed={numbers()} onClick={toggleNumbers} type="button">0-9</button>
          <button class={`peach-pwgen-pill ${symbols() ? "is-on" : ""}`} aria-pressed={symbols()} onClick={toggleSymbols} type="button">!@#</button>
        </>
      }
    >
      {(["-", " ", ".", "_"] as PassphraseSeparator[]).map((value) => (
        <button
          class={`peach-pwgen-pill ${separator() === value ? "is-on" : ""}`}
          aria-label={value === " " ? "Space separator" : `${value} separator`}
          aria-pressed={separator() === value}
          onClick={() => selectSeparator(value)}
          type="button"
        >
          {value === " " ? "space" : value}
        </button>
      ))}
    </Show>
  );

  const RefreshIcon = () => (
    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
      <path d="M11 2.5A5.5 5.5 0 1 0 12.5 7" />
      <path d="M9.5 2.5H11V1" />
    </svg>
  );

  const CopyIcon = () => (
    <span class="peach-copy-icon">
      <svg class="peach-copy-icon-svg" width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
        <rect x="4" y="4" width="8" height="9" rx="1.5" />
        <path d="M10 4V2.5A1.5 1.5 0 0 0 8.5 1h-6A1.5 1.5 0 0 0 1 2.5v7A1.5 1.5 0 0 0 2.5 11H4" />
      </svg>
    </span>
  );

  return (
    <div class={`peach-generator-drawer ${props.open ? "is-open" : ""}`}>
      <div class="peach-generator-drawer-inner">
        <div class={`peach-generator-drawer-content${props.compact ? " peach-generator-drawer-content--compact" : ""}`}>

          {/* ── Compact layout ──────────────────────────────── */}
          <Show when={props.compact}>
            <ModeControls />
            <div class="peach-pwgen-compact-display-row">
              <input
                class="peach-pwgen-compact-output"
                type="text"
                autocomplete="off"
                spellcheck={false}
                value={password()}
                onInput={(e) => {
                  const pw = (e.currentTarget as HTMLInputElement).value;
                  setPassword(pw);
                  if (mode() === "password") setLength(pw.length);
                  props.onChange?.(pw);
                }}
                aria-label="Generated password — click to edit"
              />
              <button
                class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                onClick={() => regenerate()}
                aria-label="Regenerate"
              >
                <RefreshIcon />
              </button>
              <button
                class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() ? "is-copied" : ""}`}
                onClick={(e) => copyPassword(e.currentTarget as HTMLButtonElement)}
                aria-label="Copy"
              >
                <CopyIcon /><span class="peach-copy-sheen" />
              </button>
            </div>
            <div class="peach-pwgen-compact-controls">
              <input
                type="range"
                class="peach-pwgen-slider peach-pwgen-compact-slider"
                min={currentMin()}
                max={currentMax()}
                value={currentAmount()}
                aria-label={mode() === "passphrase" ? "Word count" : "Password length"}
                onInput={(e) => {
                  const n = parseInt((e.target as HTMLInputElement).value, 10);
                  handleLengthChange(n);
                }}
              />
              <Show
                when={editingLength()}
                fallback={
                  <span class="peach-pwgen-len-num peach-pwgen-len-num--edit" onClick={startEditingLength}>{currentAmount()}</span>
                }
              >
                <input
                  class="peach-pwgen-len-input"
                  type="text"
                  inputmode="numeric"
                  value={lengthDraft()}
                  ref={(el) => requestAnimationFrame(() => el.select())}
                  onInput={(e) => setLengthDraft((e.currentTarget as HTMLInputElement).value)}
                  onKeyDown={(e) => { if (e.key === "Enter") commitLength(); else if (e.key === "Escape") setEditingLength(false); }}
                  onBlur={commitLength}
                />
              </Show>
              <div class="peach-pwgen-compact-pills">
                <OptionPills />
              </div>
              <button
                class="peach-btn peach-btn--accent peach-btn--sm peach-pwgen-compact-use"
                onClick={() => props.onUse(password())}
              >
                use
              </button>
            </div>
            <Show when={isConstrained()}>
              <p class="peach-generator-constraint-note">{constraintNote()}</p>
            </Show>
          </Show>

          {/* ── Full layout ─────────────────────────────────── */}
          <Show when={!props.compact}>
            <ModeControls />
            <div class="peach-pwgen-display-row">
              <p
                class="peach-pwgen-output-display"
                style={{ "font-size": passwordFontSize() }}
              >
                {password()}
              </p>
              <div class="peach-pwgen-display-actions">
                <button
                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                  onClick={() => regenerate()}
                  aria-label="Regenerate password"
                >
                  <RefreshIcon />
                </button>
                <button
                  class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() ? "is-copied" : ""}`}
                  onClick={(event) => copyPassword(event.currentTarget as HTMLButtonElement)}
                  aria-label="Copy password"
                >
                  <CopyIcon /><span class="peach-copy-sheen" />
                </button>
              </div>
            </div>

            <div class="peach-pwgen-length-row">
              <div class="peach-pwgen-length-labels">
                <span class="peach-label">{mode() === "passphrase" ? "word count" : "length"}</span>
                <Show
                  when={editingLength()}
                  fallback={
                    <span class="peach-pwgen-len-num peach-pwgen-len-num--edit" onClick={startEditingLength}>{currentAmount()}</span>
                  }
                >
                  <input
                    class="peach-pwgen-len-input"
                    type="text"
                    inputmode="numeric"
                    value={lengthDraft()}
                    ref={(el) => requestAnimationFrame(() => el.select())}
                    onInput={(e) => setLengthDraft((e.currentTarget as HTMLInputElement).value)}
                    onKeyDown={(e) => { if (e.key === "Enter") commitLength(); else if (e.key === "Escape") setEditingLength(false); }}
                    onBlur={commitLength}
                  />
                </Show>
              </div>
              <input
                type="range"
                class="peach-pwgen-slider"
                min={currentMin()}
                max={currentMax()}
                value={currentAmount()}
                aria-label={mode() === "passphrase" ? "Word count" : "Password length"}
                onInput={(event) => {
                  const n = parseInt(
                    (event.target as HTMLInputElement).value,
                    10
                  );
                  handleLengthChange(n);
                }}
              />
              <Show when={isConstrained()}>
                <p class="peach-generator-constraint-note">{constraintNote()}</p>
              </Show>
            </div>

            <div class="peach-pwgen-charset-pills">
              <OptionPills />
            </div>

            <button
              class="peach-btn peach-btn--accent peach-btn--sm peach-pwgen-use-btn"
              onClick={() => props.onUse(password())}
            >
              use this {mode()}
            </button>
          </Show>

        </div>
      </div>
    </div>
  );
}