import { createSignal, onMount, Show } from "solid-js";
import type { VaultEntry } from "../../shared/types";
import { sendMessage } from "../../shared/bridge";
import { NotesTOC } from "./NotesTOC";
import { NotesEditor } from "./NotesEditor";

interface NotesModeProps {
  onBack: () => void;
  onNoteListChanged: () => void;
  initialNoteId?: string;
  notes: VaultEntry[];
}

type Phase = "toc" | "editor" | "collapsing";

const FADE_MS = 200;

export function NotesMode(props: NotesModeProps) {
  const [phase, setPhase] = createSignal<Phase>("toc");
  const [activeNote, setActiveNote] = createSignal<VaultEntry | null>(null);
  const [isNewNote, setIsNewNote] = createSignal(false);

  onMount(() => {
    if (props.initialNoteId) {
      const note = props.notes.find((n) => n.id === props.initialNoteId);
      if (note) {
        setActiveNote(note);
        setPhase("editor");
      }
    }
  });

  function vibrate(ms: number) {
    try { navigator.vibrate?.(ms); } catch { /* unsupported */ }
  }

  function handleNoteRowTap(note: VaultEntry, _rowEl: HTMLElement) {
    if (phase() !== "toc") return;
    vibrate(12);
    setActiveNote(note);
    setIsNewNote(false);
    requestAnimationFrame(() => setPhase("editor"));
  }

  function handleNewNote() {
    if (phase() !== "toc") return;
    vibrate(12);
    setActiveNote(null);
    setIsNewNote(true);
    requestAnimationFrame(() => setPhase("editor"));
  }

  function handleEditorBack() {
    if (phase() !== "editor") return;
    vibrate(12);
    setPhase("collapsing");
    setTimeout(() => {
      setActiveNote(null);
      setIsNewNote(false);
      setPhase("toc");
    }, FADE_MS);
  }

  function handleSaved(note: VaultEntry) {
    if (!activeNote() || activeNote()!.id !== note.id) {
      setActiveNote(note);
    }
    props.onNoteListChanged();
  }

  function handleDeleteNote(note: VaultEntry) {
    void sendMessage({ type: "DELETE_NOTE", payload: { id: note.id } });
    props.onNoteListChanged();
    handleEditorBack();
  }

  return (
    <div class="peach-notes-mode" data-phase={phase()}>
      {/* TOC — fades out when editor opens */}
      <div
        class="peach-notes-toc-wrapper"
        classList={{ "is-hidden": phase() === "editor" }}
        aria-hidden={phase() !== "toc"}
      >
        <NotesTOC
          notes={props.notes}
          onBack={props.onBack}
          onOpenNote={handleNoteRowTap}
          onNewNote={handleNewNote}
          onRefresh={props.onNoteListChanged}
        />
      </div>

      {/* Editor — fades in over the TOC */}
      <Show when={activeNote() !== null || isNewNote()}>
        <div
          class="peach-notes-editor-wrapper"
          classList={{ "is-visible": phase() === "editor" }}
        >
          <NotesEditor
            note={activeNote()}
            onBack={handleEditorBack}
            onSaved={handleSaved}
            onDelete={handleDeleteNote}
            autoFocusTitle={isNewNote()}
          />
        </div>
      </Show>
    </div>
  );
}