"use client";

/**
 * components/save-for-later/saved-links-fab.tsx
 *
 * The small floating button pinned to the LEFT-MIDDLE of marketing pages. Click
 * to open a left drawer with all saved links (or the empty-state note). Shows a
 * count badge. Lives behind `data-sfl-ui` so its own links aren't intercepted.
 */

import { useEffect, useState } from "react";
import { Bookmark, X } from "lucide-react";
import { useSaveForLater } from "./store";
import { SavedLinksView } from "./saved-links-view";

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

export function SavedLinksFab() {
  const { count } = useSaveForLater();
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <div data-sfl-ui>
      {/* The pinned button — left edge, vertically centred. */}
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label={`Saved for later${count ? ` (${count})` : ""}`}
        className="fixed left-0 top-1/2 z-[2147482000] -translate-y-1/2 inline-flex items-center gap-1.5 rounded-r-lg border border-l-0 border-[color:var(--color-paper-line)] dark:border-[color:var(--color-ink-line)] bg-[color:var(--color-paper)] dark:bg-[color:var(--color-ink-elev-1)] py-3 pl-2 pr-2.5 shadow-lg hover:bg-[color:var(--color-paper-2)] dark:hover:bg-[color:var(--color-ink-elev-2)] transition-colors"
      >
        <Bookmark size={18} aria-hidden className="text-[color:var(--color-entpoind)]" />
        {count > 0 ? (
          <span className="min-w-[18px] rounded-full bg-[color:var(--color-entpoind)] px-1.5 text-center text-[11px] font-medium tabular-nums text-white">{count}</span>
        ) : null}
      </button>

      {/* Drawer */}
      {open ? (
        <div className="fixed inset-0 z-[2147482500]" role="dialog" aria-modal="true" aria-label="Saved for later">
          <div className="absolute inset-0 bg-black/40" onClick={() => setOpen(false)} aria-hidden />
          <div className={`absolute left-0 top-0 h-full w-full max-w-sm border-r ${line} bg-[color:var(--color-paper)] dark:bg-[color:var(--color-ink-elev-1)] shadow-2xl flex flex-col`}>
            <header className={`flex items-center gap-2 px-5 py-3.5 border-b ${line} flex-shrink-0`}>
              <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)]">Saved for later</h2>
              {count > 0 ? <span className="font-mono text-[10px] uppercase tracking-wider text-[color:var(--color-paper-mute)] dark:text-[color:var(--color-ink-mute)]">{count} saved</span> : null}
              <button type="button" onClick={() => setOpen(false)} aria-label="Close" className="ml-auto text-[color:var(--color-paper-mute)] dark:text-[color:var(--color-ink-mute)] hover:text-[color:var(--color-paper-ink)] dark:hover:text-[color:var(--color-paper)]">
                <X size={16} aria-hidden />
              </button>
            </header>
            <div className="flex-1 overflow-y-auto px-5 py-4">
              <SavedLinksView onNavigate={() => setOpen(false)} />
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}