"use client";

/**
 * components/save-for-later/saved-links-view.tsx
 *
 * The saved-links list, grouped by list. Reused by the marketing FAB drawer and
 * the dashboard "Saved for later" area. Renders the empty-state title + note
 * when nothing is saved yet. Wrapped in `data-sfl-ui` so the link interceptor
 * never intercepts the saved links themselves (they open normally).
 */

import { useState } from "react";
import { Bookmark, ExternalLink, FolderPlus, Plus, Trash2, X } 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)]";

function ago(ts: number): string {
  const s = Math.max(0, Math.round((new Date().getTime() - ts) / 1000));
  if (s < 60) return "just now";
  const m = Math.round(s / 60);
  if (m < 60) return `${m}m ago`;
  const h = Math.round(m / 60);
  if (h < 24) return `${h}h ago`;
  return `${Math.round(h / 24)}d ago`;
}

export function SavedLinksView({ onNavigate }: { onNavigate?: () => void }) {
  const { lists, links, removeLink, createList, deleteList } = useSaveForLater();
  const [creating, setCreating] = useState(false);
  const [newName, setNewName] = useState("");

  if (links.length === 0) {
    return (
      <div data-sfl-ui className="px-1 py-8 text-center">
        <div className={`mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-full bg-[color:var(--color-paper-2)] dark:bg-[color:var(--color-ink-elev-2)] ${muted}`}>
          <Bookmark size={20} aria-hidden />
        </div>
        <p className="text-base text-[color:var(--color-paper-ink)] dark:text-[color:var(--color-paper)]">Nothing saved yet</p>
        <p className={`mt-1.5 mx-auto max-w-xs text-sm leading-relaxed ${muted}`}>
          Click any link and choose <span className="text-[color:var(--color-paper-ink)] dark:text-[color:var(--color-paper)]">“Save for later”</span> to add it here — to your default list, an existing custom list, or a new one you create.
        </p>
      </div>
    );
  }

  // Lists that have links, default first, then by creation.
  const ordered = [...lists].sort((a, b) => (a.isDefault ? -1 : b.isDefault ? 1 : a.createdAt - b.createdAt));

  return (
    <div data-sfl-ui className="space-y-5">
      {ordered.map((list) => {
        const items = links.filter((l) => l.listId === list.id);
        if (items.length === 0) return null;
        return (
          <section key={list.id}>
            <header className="mb-2 flex items-center gap-2">
              <h3 className="text-sm font-medium text-[color:var(--color-paper-ink)] dark:text-[color:var(--color-paper)]">{list.name}</h3>
              <span className={`font-mono text-[10px] uppercase tracking-wider ${muted}`}>{items.length}</span>
              {!list.isDefault ? (
                <button type="button" onClick={() => deleteList(list.id)} aria-label={`Delete list ${list.name}`} className={`ml-auto ${muted} hover:text-red-600 dark:hover:text-red-400`}>
                  <Trash2 size={13} aria-hidden />
                </button>
              ) : null}
            </header>
            <ul className="space-y-1.5">
              {items.map((l) => (
                <li key={l.id} className={`group flex items-start gap-2 rounded-md border ${line} px-3 py-2`}>
                  <a
                    href={l.url}
                    onClick={onNavigate}
                    className="min-w-0 flex-1"
                  >
                    <span className="block truncate text-sm text-[color:var(--color-paper-ink)] dark:text-[color:var(--color-paper)] group-hover:text-[color:var(--color-entpoind)]">{l.title}</span>
                    <span className={`mt-0.5 flex items-center gap-1.5 font-mono text-[11px] ${muted}`}>
                      <ExternalLink size={10} aria-hidden /> {l.source || l.url} · {ago(l.savedAt)}
                    </span>
                  </a>
                  <button type="button" onClick={() => removeLink(l.id)} aria-label={`Remove ${l.title}`} className={`mt-0.5 ${muted} hover:text-red-600 dark:hover:text-red-400`}>
                    <X size={14} aria-hidden />
                  </button>
                </li>
              ))}
            </ul>
          </section>
        );
      })}

      {/* New list */}
      <div className={`border-t ${line} pt-3`}>
        {creating ? (
          <form
            onSubmit={(e) => {
              e.preventDefault();
              if (newName.trim()) {
                createList(newName);
                setNewName("");
                setCreating(false);
              }
            }}
            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-1.5 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>
  );
}