import { createSignal } from "solid-js";
import type { VaultEntry } from "../../shared/types";

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

function toRoman(n: number): string {
  const VALS: [number, string][] = [
    [1000,"M"],[900,"CM"],[500,"D"],[400,"CD"],[100,"C"],[90,"XC"],
    [50,"L"],[40,"XL"],[10,"X"],[9,"IX"],[5,"V"],[4,"IV"],[1,"I"],
  ];
  let result = "";
  for (const [val, sym] of VALS) {
    while (n >= val) { result += sym; n -= val; }
  }
  return result;
}

function formatNoteDate(ts: number): string {
  const now = Date.now();
  const diff = now - ts;
  const DAY = 86_400_000;
  if (diff < DAY) return "Today";
  if (diff < 2 * DAY) return "Yesterday";
  const d = new Date(ts);
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
}

const SWIPE_THRESHOLD = 80;
const SWIPE_CONFIRM_THRESHOLD = 120;

interface NoteRowProps {
  note: VaultEntry;
  index: number;
  searchQuery?: string;
  onTap: (note: VaultEntry, el: HTMLElement) => void;
  onDelete: (note: VaultEntry) => void;
  onArchive: (note: VaultEntry) => void;
  fadingClass?: string;
}

export function NoteRow(props: NoteRowProps) {
  let rowEl!: HTMLDivElement;
  const [swipeX, setSwipeX] = createSignal(0);
  const [swiping, setSwping] = createSignal(false);
  const [confirmDelete, setConfirmDelete] = createSignal(false);

  let touchStartX = 0;
  let touchStartY = 0;
  let captured = false;
  let suppressNextClick = false;
  let touchTapPending = false;

  function handleTouchStart(e: TouchEvent) {
    const t = e.touches[0];
    if (!t) return;
    touchStartX = t.clientX;
    touchStartY = t.clientY;
    captured = false;
    suppressNextClick = false;
    touchTapPending = false;
  }

  function handleTouchMove(e: TouchEvent) {
    const t = e.touches[0];
    if (!t) return;
    const dx = t.clientX - touchStartX;
    const dy = Math.abs(t.clientY - touchStartY);

    if (!captured) {
      if (dy > 8 && dy > Math.abs(dx)) {
        // vertical scroll — abort
        return;
      }
      if (Math.abs(dx) > 8) {
        captured = true;
        setSwping(true);
      }
      return;
    }

    setSwipeX(dx);
  }

  function handleTouchEnd(_e: TouchEvent) {
    if (!captured) {
      // Let the browser's click event handle taps and mouse input alike.
      touchTapPending = true;
      setSwping(false);
      return;
    }

    suppressNextClick = true;
    const dx = swipeX();
    setSwping(false);

    if (dx < -SWIPE_CONFIRM_THRESHOLD) {
      // Committed delete swipe
      vibrate(40);
      setConfirmDelete(true);
      setSwipeX(0);
      setTimeout(() => setConfirmDelete(false), 4000);
    } else if (dx > SWIPE_CONFIRM_THRESHOLD) {
      // Archive
      vibrate(12);
      props.onArchive(props.note);
      setSwipeX(0);
    } else {
      // Snap back
      setSwipeX(0);
    }
    captured = false;
  }

  function handleTouchCancel() {
    setSwipeX(0);
    setSwping(false);
    captured = false;
    suppressNextClick = false;
    touchTapPending = false;
  }

  // Highlight search match in title
  function renderTitle() {
    const title = props.note.title || "Untitled";
    const q = props.searchQuery?.trim().toLowerCase();
    if (!q) return <span class="peach-note-title">{title}</span>;
    const idx = title.toLowerCase().indexOf(q);
    if (idx === -1) return <span class="peach-note-title">{title}</span>;
    return (
      <span class="peach-note-title">
        {title.slice(0, idx)}
        <span class="peach-note-title-match">{title.slice(idx, idx + q.length)}</span>
        {title.slice(idx + q.length)}
      </span>
    );
  }

  return (
    <div
      ref={rowEl}
      class={`peach-note-row${props.fadingClass ? " " + props.fadingClass : ""}`}
      style={(() => {
        const dx = swipeX();
        if (dx === 0) return undefined;
        return { transform: `translateX(${dx}px)`, transition: swiping() ? "none" : "transform 250ms ease" };
      })()}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      onTouchCancel={handleTouchCancel}
      onClick={() => {
        if (suppressNextClick) {
          suppressNextClick = false;
          return;
        }
        props.onTap(props.note, rowEl);
        if (touchTapPending) {
          touchTapPending = false;
          vibrate(12);
        }
      }}
    >
      {/* Delete underlay */}
      <div class="peach-note-row-underlay peach-note-row-underlay--delete" style={{ opacity: Math.min(1, Math.max(0, -swipeX() / SWIPE_THRESHOLD)) }}>
        DELETE
      </div>
      {/* Archive underlay */}
      <div class="peach-note-row-underlay peach-note-row-underlay--archive" style={{ opacity: Math.min(1, Math.max(0, swipeX() / SWIPE_THRESHOLD)) }}>
        ARCHIVE
      </div>

      <span class="peach-note-numeral">{toRoman(props.index + 1)}.</span>
      <span class="peach-note-title-gap" />
      {renderTitle()}
      <span class="peach-note-date">{formatNoteDate(props.note.modifiedAt)}</span>

      {confirmDelete() && (
        <div class="peach-note-delete-confirm">
          <span>Move to trash?</span>
          <button class="peach-note-delete-confirm-btn" onClick={(e) => {
            e.stopPropagation();
            vibrate(60);
            props.onDelete(props.note);
            setConfirmDelete(false);
          }}>Delete</button>
          <button class="peach-note-delete-cancel-btn" onClick={(e) => {
            e.stopPropagation();
            setConfirmDelete(false);
          }}>Cancel</button>
        </div>
      )}
    </div>
  );
}