"use client";

/**
 * save-panel.tsx
 *
 * The "Save this for later" dialog opened from the link chooser. Save to the
 * default list in one tap, pick an existing custom list, or create a new one.
 *
 * (OSS build — the hosted Entpoind build adds an optional "synced to your
 * dashboard when logged in" tooltip + a server SyncAdapter; this build is pure
 * local-first.)
 */

import { useState } from "react";
import { Bookmark, FolderPlus, Plus, X, Check } from "lucide-react";
import { useSaveForLater } from "./store";

const muted = "text-[color:var(--color-paper-mute)] dark:text-[color:var(--color-ink-mute)]";
const line = "border-[color:var(--color-paper-line)] dark:border-[color:var(--color-ink-line)]";

export function SavePanel({
  href,
  title,
  source,
  onClose,
}: {
  href: string;
  title: string;
  source: string;
  onClose: () => void;
}) {
  const { lists, saveLink, createList } = useSaveForLater();
  const [creating, setCreating] = useState(false);
  const [newName, setNewName] = useState("");
  const [savedTo, setSavedTo] = useState<string | null>(null);

  const customLists = lists.filter((l) => !l.isDefault);
  const defaultList = lists.find((l) => l.isDefault);

  function save(listId: string, listName: string) {
    saveLink({ url: href, title, listId, source });
    setSavedTo(listName);
    window.setTimeout(onClose, 850);
  }

  function createAndSave() {
    const name = newName.trim();
    if (!name) return;
    const list = createList(name);
    save(list.id, list.name);
  }

  return (
    <div
      data-sfl-ui
      className="fixed inset-0 z-[2147483000] flex items-center justify-center p-4"
      onClick={onClose}
      role="dialog"
      aria-modal="true"
      aria-label="Save for later"
    >
      <div className="absolute inset-0 bg-black/40 backdrop-blur-[1px]" aria-hidden />
      <div
        onClick={(e) => e.stopPropagation()}
        className={`relative w-full max-w-md rounded-xl border ${line} bg-[color:var(--color-paper)] dark:bg-[color:var(--color-ink-elev-1)] shadow-2xl`}
      >
        <header className={`flex items-center gap-2 px-5 py-3.5 border-b ${line}`}>
          <Bookmark size={16} aria-hidden className="text-[color:var(--color-entpoind)]" />
          <h2 className="text-sm font-medium text-[color:var(--color-paper-ink)] dark:text-[color:var(--color-paper)]">Save this for later</h2>
          <button type="button" onClick={onClose} aria-label="Close" className={`ml-auto ${muted} hover:text-[color:var(--color-paper-ink)] dark:hover:text-[color:var(--color-paper)]`}>
            <X size={16} aria-hidden />
          </button>
        </header>

        <div className="px-5 py-4 space-y-4">
          {/* The page being saved */}
          <div className={`rounded-md border ${line} bg-[color:var(--color-paper-2)] dark:bg-[color:var(--color-ink-elev-2)] px-3 py-2.5`}>
            <p className="text-sm text-[color:var(--color-paper-ink)] dark:text-[color:var(--color-paper)] line-clamp-2">{title}</p>
            <p className={`mt-0.5 font-mono text-[11px] ${muted} truncate`}>{source || href}</p>
          </div>

          {savedTo ? (
            <p className="flex items-center gap-2 text-sm text-emerald-600 dark:text-emerald-400">
              <Check size={16} aria-hidden /> Saved to {savedTo}
            </p>
          ) : (
            <>
              {/* Default list — one tap */}
              {defaultList ? (
                <button type="button" onClick={() => save(defaultList.id, defaultList.name)} className="btn btn-entpoind w-full justify-center">
                  <Bookmark size={16} aria-hidden /> Save to “{defaultList.name}”
                </button>
              ) : null}

              {/* Custom lists */}
              {customLists.length > 0 ? (
                <div className="space-y-1.5">
                  <p className={`font-mono text-[10px] uppercase tracking-wider ${muted}`}>or add to a list</p>
                  <ul className="space-y-1">
                    {customLists.map((l) => (
                      <li key={l.id}>
                        <button
                          type="button"
                          onClick={() => save(l.id, l.name)}
                          className={`flex w-full items-center gap-2 rounded-md border ${line} px-3 py-2 text-left text-sm hover:bg-[color:var(--color-paper-2)] dark:hover:bg-[color:var(--color-ink-elev-2)]`}
                        >
                          <span className={muted}>›</span> {l.name}
                        </button>
                      </li>
                    ))}
                  </ul>
                </div>
              ) : null}

              {/* New list */}
              {creating ? (
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    createAndSave();
                  }}
                  className="flex items-center gap-2"
                >
                  <input
                    autoFocus
                    value={newName}
                    onChange={(e) => setNewName(e.target.value)}
                    placeholder="New list name"
                    aria-label="New list name"
                    className={`w-full rounded-md border ${line} bg-[color:var(--color-paper)] dark:bg-[color:var(--color-ink)] px-3 py-2 text-sm`}
                  />
                  <button type="submit" className="btn btn-sm btn-entpoind" disabled={!newName.trim()}>
                    <Plus size={14} aria-hidden /> Add
                  </button>
                </form>
              ) : (
                <button type="button" onClick={() => setCreating(true)} className={`inline-flex items-center gap-1.5 text-sm ${muted} hover:text-[color:var(--color-paper-ink)] dark:hover:text-[color:var(--color-paper)]`}>
                  <FolderPlus size={15} aria-hidden /> New list
                </button>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}