import { createSignal, createMemo, createEffect, For, Show, onMount } from "solid-js";
import type { VaultEntry } from "../../shared/types";
import { sendMessage } from "../App";
import { parseOtpauthURI } from "../../crypto/totp";
import { NoteEditorInline, Toolbar } from "./NoteEditor";
import { GeneratorDrawer } from "../components/GeneratorDrawer";

interface AddProps {
  entry?: VaultEntry;
  entries?: VaultEntry[];
  autoOpenGenerator?: boolean;
  onBack: () => void;
  onSave: (entry?: VaultEntry) => void | Promise<void>;
}

export function AddView(props: AddProps) {
  const [title, setTitle] = createSignal(props.entry?.title ?? "");
  const [username, setUsername] = createSignal(props.entry?.username ?? "");
  const [password, setPassword] = createSignal(props.entry?.password ?? "");
  const [url, setUrl] = createSignal(props.entry?.url ?? "");
  const [totp, setTotp] = createSignal(props.entry?.totp ?? "");
  const [notes, setNotes] = createSignal(props.entry?.notes ?? "");
  const [saving, setSaving] = createSignal(false);
  const [error, setError] = createSignal("");
  const [passwordStrength, setPasswordStrength] = createSignal<number | null>(null);
  const [zxcvbnFn, setZxcvbnFn] = createSignal<((pwd: string) => { score: number }) | null>(null);
  const [tags, setTags] = createSignal<string[]>(props.entry?.tags ?? []);
  const [tagInput, setTagInput] = createSignal("");
  const [showTagSuggestions, setShowTagSuggestions] = createSignal(false);
  const [showGenerator, setShowGenerator] = createSignal(props.autoOpenGenerator ?? false);
  const [showPassword, setShowPassword] = createSignal(false);
  const [showTotp, setShowTotp] = createSignal(!!(props.entry?.totp));
  const [showNotes, setShowNotes] = createSignal(!!(props.entry?.notes));

  const isNoteEntry = () => props.entry?.type === "note";
  const [selectedType, setSelectedType] = createSignal<"login" | "note">(isNoteEntry() ? "note" : "login");
  const [noteEditorEl, setNoteEditorEl] = createSignal<HTMLDivElement | null>(null);

  function noteExec(cmd: string, val?: string) {
    document.execCommand(cmd, false, val);
    noteEditorEl()?.focus();
  }

  const canSave = () => {
    if (!title().trim()) return false;
    if (selectedType() === "login" && !password().trim()) return false;
    return true;
  };

  const allTags = createMemo(() => {
    const tagSet = new Set<string>();
    for (const entry of props.entries ?? []) {
      for (const tag of entry.tags ?? []) tagSet.add(tag);
    }
    return Array.from(tagSet).sort();
  });

  const tagSuggestions = createMemo(() => {
    const input = tagInput().toLowerCase().trim();
    if (!input) return [];
    return allTags().filter(t =>
      t.toLowerCase().includes(input) && !tags().includes(t)
    ).slice(0, 5);
  });

  function addTag(tag: string) {
    const n = tag.toLowerCase().trim();
    if (!n || n.length > 32 || tags().includes(n) || tags().length >= 10) return;
    setTags([...tags(), n]);
  }

  function removeTag(tag: string) {
    setTags(tags().filter(t => t !== tag));
  }

  function handleTagKeyDown(e: KeyboardEvent) {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      if (tagInput()) { addTag(tagInput()); setTagInput(""); setShowTagSuggestions(false); }
    } else if (e.key === "Backspace" && !tagInput() && tags().length > 0) {
      removeTag(tags()[tags().length - 1]);
    }
  }

  // Strength check
  createEffect(async () => {
    const pwd = password();
    if (pwd.length < 4) { setPasswordStrength(null); return; }
    try {
      if (!zxcvbnFn()) {
        const mod = await import("zxcvbn");
        setZxcvbnFn(() => mod.default);
      }
      const fn = zxcvbnFn();
      if (fn) setPasswordStrength(fn(pwd).score);
    } catch {
      setPasswordStrength(pwd.length >= 16 ? 3 : pwd.length >= 12 ? 2 : 1);
    }
  });

  onMount(() => {
    const el = document.querySelector(".peach-new-title-input") as HTMLInputElement | null;
    if (el) el.focus();
  });

  function getNormalizedTotp(): string | undefined {
    const value = totp().trim();
    if (!value) return undefined;
    if (value.startsWith("otpauth://")) {
      const parsed = parseOtpauthURI(value);
      return parsed?.secret ?? value;
    }
    return value;
  }

  async function handleSave() {
    if (!canSave()) {
      setError(selectedType() === "note" ? "title is required" : "title and password are required");
      return;
    }

    setSaving(true);
    setError("");

    const payload: Record<string, unknown> = {
      type: selectedType(),
      title: title().trim(),
      notes: notes().trim() || undefined,
      tags: tags().length > 0 ? tags() : undefined,
    };

    if (selectedType() === "login") {
      payload.username = username().trim();
      payload.password = password();
      payload.url = url().trim();
      payload.totp = getNormalizedTotp();
    }

    if (props.entry) {
      const res = await sendMessage({ type: "UPDATE_ENTRY", payload: { id: props.entry.id, patch: payload } });
      const result = res as { ok: boolean; error?: string };
      if (!result.ok) { setError(result.error ?? "could not update entry"); setSaving(false); return; }
      await props.onSave({ ...props.entry, ...payload } as VaultEntry);
      return;
    }

    const res = await sendMessage({ type: "ADD_ENTRY", payload });
    const result = res as { ok: boolean; data?: VaultEntry; error?: string };
    if (!result.ok) { setError(result.error ?? "could not save entry"); setSaving(false); return; }
    await props.onSave(result.data);
  }

  const strengthLabel = () => {
    const s = passwordStrength();
    if (s === null) return null;
    return ["weak", "weak", "fair", "good", "strong"][s] as string;
  };

  return (
    <div class="peach-overlay-view ov-enter-right" style="display:flex">
      <div class="peach-overlay-header">
        <button
          class="peach-btn peach-btn--ghost peach-btn--sm peach-overlay-action"
          onClick={props.onBack}
        >
          cancel
        </button>
        <span class="peach-overlay-title">
          {props.entry ? "edit entry" : "new entry"}
        </span>
        <button
          class="peach-btn peach-btn--accent peach-btn--sm peach-overlay-action"
          onClick={() => void handleSave()}
          disabled={saving() || !canSave()}
        >
          {saving() ? "saving…" : props.entry ? "save" : "create"}
        </button>
      </div>

      {/* ── Body — mirrors Entry.tsx field-card structure ── */}
      <div class="peach-entry-body peach-entry-body--new">

        {/* Type toggle + inline note formatting toolbar */}
        <Show when={!props.entry || selectedType() === "note"}>
          <div class="peach-new-type-row">
            <Show when={!props.entry}>
              <button
                class={`peach-new-type-btn ${selectedType() === "login" ? "is-active" : ""}`}
                onClick={() => setSelectedType("login")}
              >login</button>
              <button
                class={`peach-new-type-btn ${selectedType() === "note" ? "is-active" : ""}`}
                onClick={() => setSelectedType("note")}
              >note</button>
            </Show>
            <Show when={selectedType() === "note"}>
              <Toolbar exec={noteExec} class="peach-note-toolbar-inline" />
            </Show>
          </div>
        </Show>

        {/* Title */}
        <div class="peach-new-title-wrap">
          <input
            class="peach-new-title-input"
            placeholder={selectedType() === "note" ? "note title" : "entry name"}
            autocomplete="off"
            value={title()}
            onInput={(e) => setTitle((e.currentTarget as HTMLInputElement).value)}
            onKeyDown={(e) => { if (e.key === "Enter") void handleSave(); }}
          />
        </div>

        {/* ── Login fields ── */}
        <Show when={selectedType() === "login"}>
          <div class="peach-domain">
            <input
              class="peach-domain-value peach-domain-value--edit"
              placeholder="domain.com"
              autocomplete="off"
              value={url()}
              onInput={(e) => setUrl((e.currentTarget as HTMLInputElement).value)}
            />
          </div>

          <section class="peach-fields">
            {/* Username */}
            <div class="peach-field-card">
              <span class="peach-label">username</span>
              <div class="peach-field-value-row">
                <input
                  class="peach-field-value peach-field-value--edit"
                  placeholder="username or email"
                  autocomplete="off"
                  value={username()}
                  onInput={(e) => setUsername((e.currentTarget as HTMLInputElement).value)}
                />
              </div>
            </div>

            {/* Password */}
            <div class="peach-field-card">
              <span class="peach-label">password</span>
              <div class="peach-password-edit-row">
                <input
                  class="peach-field-value peach-field-value--edit"
                  type={showPassword() ? "text" : "password"}
                  placeholder="password"
                  autocomplete="new-password"
                  value={password()}
                  onInput={(e) => setPassword((e.currentTarget as HTMLInputElement).value)}
                />
                <button
                  class="peach-inline-action peach-password-toggle-btn"
                  type="button"
                  onClick={() => setShowPassword(!showPassword())}
                  aria-label={showPassword() ? "Hide password" : "Show password"}
                >
                  <Show
                    when={showPassword()}
                    fallback={
                      <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">
                        <path d="M1 5C1 5 2.8 1 7 1C11.2 1 13 5 13 5C13 5 11.2 9 7 9C2.8 9 1 5 1 5Z" />
                        <circle cx="7" cy="5" r="1.75" />
                      </svg>
                    }
                  >
                    <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">
                      <path d="M1 2C3 4.5 5 6 7 6C9 6 11 4.5 13 2" />
                      <path d="M3.5 5.5L2.5 7.5" />
                      <path d="M7 6.5V8.5" />
                      <path d="M10.5 5.5L11.5 7.5" />
                    </svg>
                  </Show>
                </button>
              </div>

              {/* Strength */}
              <Show when={strengthLabel() !== null}>
                <div class="peach-strength-hairline">
                  <div class="peach-strength-hairline-track">
                    <div
                      class="peach-strength-hairline-fill"
                      style={{
                        width: ["25%","40%","60%","80%","100%"][passwordStrength()!],
                        background: ["rgba(220,80,60,0.65)","rgba(220,80,60,0.65)","rgba(200,140,60,0.6)","rgba(180,162,100,0.55)","rgba(150,175,110,0.6)"][passwordStrength()!],
                      }}
                    />
                  </div>
                  <span class="peach-strength-label">{strengthLabel()}</span>
                </div>
              </Show>

              {/* Generator toggle */}
              <button
                class="peach-generate-toggle-link"
                type="button"
                onClick={() => { setShowGenerator(!showGenerator()); }}
              >
                {showGenerator() ? "☰ hide generator" : "⚙ generate"}
              </button>
              <GeneratorDrawer
                compact
                open={showGenerator()}
                onUse={(pw) => { setPassword(pw); setShowGenerator(false); }}
              />
            </div>

            {/* 2FA — optional */}
            <Show when={showTotp() || totp()}>
              <div class="peach-field-card">
                <span class="peach-label">2fa secret</span>
                <div class="peach-field-value-row">
                  <input
                    class="peach-field-value peach-field-value--edit"
                    placeholder="BASE32 or otpauth:// URI"
                    autocomplete="off"
                    value={totp()}
                    onInput={(e) => setTotp((e.currentTarget as HTMLInputElement).value)}
                  />
                </div>
              </div>
            </Show>
          </section>
        </Show>

        {/* ── Note content ── */}
        <Show when={selectedType() === "note"}>
          <div class="peach-note-body">
            <NoteEditorInline
              initialContent={notes()}
              onContentChange={setNotes}
              onReady={(el) => setNoteEditorEl(el)}
            />
          </div>
        </Show>

        {/* ── Login notes ── */}
        <Show when={selectedType() === "login" && (showNotes() || notes())}>
          <div class="peach-field-card" style="margin:0 12px">
            <span class="peach-label">notes</span>
            <textarea
              class="peach-new-textarea"
              placeholder="anything worth remembering"
              value={notes()}
              onInput={(e) => setNotes((e.currentTarget as HTMLTextAreaElement).value)}
            />
          </div>
        </Show>

        {/* ── "+ add" optional field links ── */}
        <div class="peach-entry-add-links">
          <Show when={selectedType() === "login" && !showTotp() && !totp()}>
            <button class="peach-add-field-link" type="button" onClick={() => setShowTotp(true)}>
              + add 2FA
            </button>
          </Show>
          <Show when={selectedType() === "login" && !showNotes() && !notes()}>
            <button class="peach-add-field-link" type="button" onClick={() => setShowNotes(true)}>
              + add notes
            </button>
          </Show>
        </div>

        {/* ── Tags ── */}
        <div class="peach-field-card" style="margin:4px 12px 12px">
          <span class="peach-label">tags</span>
          <div class="peach-tag-input-wrap">
            <For each={tags()}>
              {(tag) => (
                <span class="peach-tag-chip">
                  {tag}
                  <button class="peach-tag-chip-remove" onClick={() => removeTag(tag)} aria-label={`Remove ${tag}`}>×</button>
                </span>
              )}
            </For>
            <input
              class="peach-tag-input"
              placeholder={tags().length === 0 ? "add tags…" : ""}
              value={tagInput()}
              onInput={(e) => { setTagInput((e.currentTarget as HTMLInputElement).value); setShowTagSuggestions(true); }}
              onKeyDown={handleTagKeyDown}
              onFocus={() => setShowTagSuggestions(true)}
              onBlur={() => setTimeout(() => setShowTagSuggestions(false), 150)}
              style="flex:1;min-width:80px;background:transparent;border:none;outline:none;color:var(--t1);font-size:12px;padding:2px;"
            />
          </div>
          <Show when={showTagSuggestions() && tagSuggestions().length > 0}>
            <div class="peach-tag-suggestions" style="margin-top:4px;">
              <For each={tagSuggestions()}>
                {(s) => (
                  <button
                    class="peach-tag-suggestion"
                    onMouseDown={() => { addTag(s); setTagInput(""); setShowTagSuggestions(false); }}
                  >{s}</button>
                )}
              </For>
            </div>
          </Show>
        </div>

        <Show when={error()}>
          <p class="peach-hint peach-hint-error" style="margin:0 16px 12px">{error()}</p>
        </Show>

      </div>
    </div>
  );
}