import { createSignal, onMount, Show } from "solid-js";
import { generatePassword } 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;
  /** Compact two-row layout for use inside entry edit mode */
  compact?: boolean;
}

export function GeneratorDrawer(props: GeneratorDrawerProps) {
  const [password, setPassword] = createSignal("");
  const [length, setLength] = createSignal(20);
  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);

  function initFromPolicy(policy: PasswordPolicy) {
    let nextLength = length();
    let nextSymbols = symbols();

    if (policy.minLength) nextLength = Math.max(nextLength, policy.minLength);
    if (policy.maxLength) nextLength = Math.min(nextLength, policy.maxLength);
    if (policy.forbidsSymbols) nextSymbols = false;
    if (policy.requiresSymbols) nextSymbols = true;

    setLength(nextLength);
    setSymbols(nextSymbols);
    setForbiddenChars(policy.forbiddenChars ?? "");
  }

  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();
  });

  function regenerate(options?: {
    length?: number;
    upper?: boolean;
    lower?: boolean;
    numbers?: boolean;
    symbols?: boolean;
  }) {
    setPassword(
      generatePassword({
        length: options?.length ?? length(),
        includeUppercase: options?.upper ?? upper(),
        includeLowercase: options?.lower ?? lower(),
        includeNumbers: options?.numbers ?? numbers(),
        includeSymbols: options?.symbols ?? symbols(),
        forbiddenChars: forbiddenChars(),
      })
    );
  }

  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 });
  }

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

  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}>
            <div class="peach-pwgen-compact-display-row">
              <span class="peach-pwgen-compact-output">{password()}</span>
              <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="8"
                max="128"
                value={length()}
                onInput={(e) => {
                  const n = parseInt((e.target as HTMLInputElement).value, 10);
                  setLength(n);
                  regenerate({ length: n });
                }}
              />
              <span class="peach-pwgen-len-num">{length()}</span>
              <div class="peach-pwgen-compact-pills">
                <button class={`peach-pwgen-pill ${upper() ? "is-on" : ""}`} onClick={toggleUppercase} type="button">A-Z</button>
                <button class={`peach-pwgen-pill ${lower() ? "is-on" : ""}`} onClick={toggleLowercase} type="button">a-z</button>
                <button class={`peach-pwgen-pill ${numbers() ? "is-on" : ""}`} onClick={toggleNumbers} type="button">0-9</button>
                <button class={`peach-pwgen-pill ${symbols() ? "is-on" : ""}`} onClick={toggleSymbols} type="button">!@#</button>
              </div>
              <button
                class="peach-btn peach-btn--accent peach-btn--sm peach-pwgen-compact-use"
                onClick={() => props.onUse(password())}
              >
                use
              </button>
            </div>
          </Show>

          {/* ── Full layout ─────────────────────────────────── */}
          <Show when={!props.compact}>
            <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">length</span>
                <span class="peach-pwgen-len-num">{length()}</span>
              </div>
              <input
                type="range"
                class="peach-pwgen-slider"
                min="8"
                max="128"
                value={length()}
                onInput={(event) => {
                  const nextLength = parseInt(
                    (event.target as HTMLInputElement).value,
                    10
                  );
                  setLength(nextLength);
                  regenerate({ length: nextLength });
                }}
              />
            </div>

            <div class="peach-pwgen-charset-pills">
              <button class={`peach-pwgen-pill ${upper() ? "is-on" : ""}`} onClick={toggleUppercase} type="button">A-Z</button>
              <button class={`peach-pwgen-pill ${lower() ? "is-on" : ""}`} onClick={toggleLowercase} type="button">a-z</button>
              <button class={`peach-pwgen-pill ${numbers() ? "is-on" : ""}`} onClick={toggleNumbers} type="button">0-9</button>
              <button class={`peach-pwgen-pill ${symbols() ? "is-on" : ""}`} onClick={toggleSymbols} type="button">!@#</button>
            </div>

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

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