import { createSignal, onMount, Show } from "solid-js";
import { generatePassword } from "../../shared/generate";
import type { PasswordPolicy } from "../../shared/types";
import { sendMessage, triggerPipPulse, triggerRing } from "../App";

interface GeneratorProps {
  onBack: () => void;
  onUse: (password: string) => void;
  policy?: PasswordPolicy;
}

export function GeneratorView(props: GeneratorProps) {
  const [password, setPassword] = createSignal("");
  const [length, setLength] = createSignal(24);
  const [upper, setUpper] = createSignal(true);
  const [lower, setLower] = createSignal(true);
  const [numbers, setNumbers] = createSignal(true);
  const [symbols, setSymbols] = createSignal(true);
  const [copied, setCopied] = createSignal(false);
  const [detectedPolicy, setDetectedPolicy] = createSignal<PasswordPolicy | null>(null);

  function initFromPolicy(policy: PasswordPolicy) {
    if (policy.minLength) setLength(Math.max(length(), policy.minLength));
    if (policy.maxLength) setLength(Math.min(length(), policy.maxLength));
    if (policy.forbidsSymbols) setSymbols(false);
    if (policy.requiresSymbols) setSymbols(true);
  }

  onMount(async () => {
    if (props.policy) {
      setDetectedPolicy(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) {
        setDetectedPolicy(data);
        initFromPolicy(data);
      }
    }
    regenerate();
  });

  function regenerate(nextLength = length()) {
    setPassword(
      generatePassword({
        length: nextLength,
        includeUppercase: upper(),
        includeLowercase: lower(),
        includeNumbers: numbers(),
        includeSymbols: symbols(),
      })
    );
  }

  async function copyPassword(button?: HTMLButtonElement) {
    const response = await sendMessage({
      type: "COPY",
      payload: { text: password(), label: "password" },
    });
    if ((response as { ok: boolean }).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);
    }
  }

  return (
    <div class="peach-overlay-view ov-enter-right" style="display:flex">
      <div class="peach-overlay-header">
        <button
          class="peach-btn peach-btn--subtle peach-btn--sm peach-overlay-action"
          onClick={props.onBack}
        >
          cancel
        </button>
        <span class="peach-overlay-title">password generator</span>
        <button
          class="peach-btn peach-btn--accent peach-btn--sm peach-overlay-action"
          onClick={() => props.onUse(password())}
        >
          use
        </button>
      </div>

      <div class="peach-pwgen-body">
        <Show when={detectedPolicy()}>
          <div class="peach-policy-badge">
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1" style="margin-right:4px;opacity:0.7;">
              <circle cx="5" cy="5" r="4" />
              <path d="M5 3v3M5 7h.01" />
            </svg>
            site requirements detected
          </div>
        </Show>
        <div class="peach-pwgen-display">
          <p class="peach-pwgen-output">{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"
            >
              <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>
            </button>
            <button
              class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() ? "is-copied" : ""}`}
              onClick={(e) =>
                void copyPassword(e.currentTarget as HTMLButtonElement)
              }
              aria-label="Copy password"
            >
              <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>
              <span class="peach-copy-sheen"></span>
            </button>
          </div>
        </div>

        <div class="peach-pwgen-settings">
          <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
              class="peach-pwgen-slider"
              type="range"
              min="8"
              max="128"
              value={length()}
              onInput={(e) => {
                const nextLength = parseInt((e.currentTarget as HTMLInputElement).value, 10);
                setLength(nextLength);
                regenerate(nextLength);
              }}
            />
          </div>

          <div class="peach-pwgen-toggles">
            {[
              ["Uppercase A-Z", upper, setUpper],
              ["Lowercase a-z", lower, setLower],
              ["Numbers 0-9", numbers, setNumbers],
              ["Symbols !@#$", symbols, setSymbols],
            ].map(([label, getter, setter]) => (
              <div class="peach-pwgen-toggle-row">
                <span class="peach-pwgen-toggle-label">{label as string}</span>
                <button
                  class={`peach-toggle ${(getter as () => boolean)() ? "is-on" : ""}`}
                  onClick={() => {
                    (setter as (value: boolean) => void)(!(getter as () => boolean)());
                    regenerate();
                  }}
                >
                  <span class="peach-toggle-knob"></span>
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}