"use client";

import { Bookmark as BookmarkIcon, Plus, Trash2 } from "lucide-react";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { EventRow } from "@/components/event-row";
import { Chip, Empty, Panel, SkeletonRows } from "@/components/ui";
import type { Bookmark } from "@/lib/api";
import { relTime, SAVED_VIEWS, utcDateTime } from "@/lib/format";
import { ownerFetch } from "@/lib/owner";

interface SavedView {
  id: string;
  name: string;
  query: string;
  created_at?: string;
}

function normalizeQuery(q: string): string {
  const s = q.trim().replace(/^\/?live/, "").replace(/^\?/, "");
  return s;
}

export function Bookmarks() {
  const [items, setItems] = useState<Bookmark[] | null>(null);
  const [views, setViews] = useState<SavedView[] | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [viewErr, setViewErr] = useState<string | null>(null);
  const [form, setForm] = useState({ name: "", query: "" });

  const load = useCallback(
    () =>
      ownerFetch<{ items: Bookmark[] }>("/api/v1/bookmarks?limit=200")
        .then((r) => setItems(r.items))
        .catch((e: Error) => {
          setErr(e.message);
          setItems([]);
        }),
    [],
  );
  const loadViews = useCallback(
    () =>
      ownerFetch<{ items: SavedView[] }>("/api/v1/views")
        .then((r) => setViews(r.items))
        .catch((e: Error) => {
          setViewErr(e.message);
          setViews([]);
        }),
    [],
  );
  useEffect(() => {
    void load();
    void loadViews();
  }, [load, loadViews]);

  const remove = async (id: string): Promise<void> => {
    setItems((prev) => prev?.filter((b) => b.id !== id) ?? prev);
    try {
      await ownerFetch(`/api/v1/bookmarks/${encodeURIComponent(id)}`, { method: "DELETE" });
    } catch (e) {
      setErr((e as Error).message);
      await load();
    }
  };

  const createView = async (): Promise<void> => {
    const query = normalizeQuery(form.query);
    if (!query) {
      setViewErr("Paste a live-feed query string, e.g. group=security&signal_min=70");
      return;
    }
    setViewErr(null);
    try {
      await ownerFetch("/api/v1/views", { method: "POST", body: JSON.stringify({ name: form.name.trim() || "My view", query }) });
      setForm({ name: "", query: "" });
      await loadViews();
    } catch (e) {
      setViewErr((e as Error).message);
    }
  };
  const removeView = async (id: string): Promise<void> => {
    setViews((prev) => prev?.filter((v) => v.id !== id) ?? prev);
    try {
      await ownerFetch(`/api/v1/views/${encodeURIComponent(id)}`, { method: "DELETE" });
    } catch (e) {
      setViewErr((e as Error).message);
      await loadViews();
    }
  };

  return (
    <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_340px]">
      <Panel title={<span>Saved events <span className="font-mono text-fg-subtle">{items?.length ?? "…"}</span></span>} dense>
        {items === null ? (
          <SkeletonRows rows={6} />
        ) : items.length ? (
          <ul className="divide-y divide-line">
            {items.map((b) => (
              <li key={b.id} className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2 pr-2">
                <div className="min-w-0 [&>article]:border-b-0">
                  <EventRow ev={b} showDate />
                </div>
                <div className="flex flex-col items-end gap-1 pt-2">
                  <button type="button" aria-label="Remove bookmark" title="Remove bookmark" onClick={() => remove(b.id)} className="inline-flex size-7 items-center justify-center rounded-md border border-line text-fg-subtle hover:border-line-strong hover:text-danger">
                    <Trash2 className="size-3.5" />
                  </button>
                  <span className="inline-flex items-center gap-1 whitespace-nowrap font-mono text-[10.5px] text-fg-subtle" title={`Saved ${utcDateTime(b.bookmarked_at)}${b.note ? ` · ${b.note}` : ""}`}>
                    <BookmarkIcon className="size-3 text-signal" /> {relTime(b.bookmarked_at)}
                  </span>
                </div>
              </li>
            ))}
          </ul>
        ) : (
          <Empty icon={<BookmarkIcon className="size-5 text-fg-subtle" />}>
            No saved events yet — use the bookmark icon in the intelligence panel.
            <div className="mt-2">
              <Link href="/live" className="text-info hover:underline">Open the live feed →</Link>
            </div>
          </Empty>
        )}
        {err && <p className="border-t border-line px-3 py-2 text-[11px] text-danger">{err}</p>}
      </Panel>

      <aside className="flex min-w-0 flex-col gap-4">
        <Panel title={<span>Saved views <span className="font-mono text-fg-subtle">{views?.length ?? "…"}</span></span>} dense>
          {views === null ? (
            <SkeletonRows rows={3} />
          ) : views.length ? (
            <ul className="divide-y divide-line">
              {views.map((v) => (
                <li key={v.id} className="flex items-start gap-2 px-3 py-2 text-[13px]">
                  <div className="min-w-0 flex-1">
                    <Link href={`/live?${v.query}`} className="block truncate font-medium hover:underline">{v.name}</Link>
                    <div className="mt-0.5 truncate font-mono text-[11px] text-fg-subtle" title={v.query}>?{v.query}</div>
                  </div>
                  <button type="button" aria-label={`Delete view ${v.name}`} onClick={() => removeView(v.id)} className="mt-0.5 text-fg-subtle hover:text-danger">
                    <Trash2 className="size-3.5" />
                  </button>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No saved views yet. Filter the live feed, then paste its query string below.</Empty>
          )}
          <form
            className="flex flex-col gap-1.5 border-t border-line p-2 text-[12.5px]"
            onSubmit={(e) => {
              e.preventDefault();
              void createView();
            }}
          >
            <label className="sr-only" htmlFor="view-name">View name</label>
            <input id="view-name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="View name" maxLength={60} className="h-8 rounded-md border border-line bg-panel px-2 text-[12.5px]" />
            <label className="sr-only" htmlFor="view-query">Query string</label>
            <input id="view-query" value={form.query} onChange={(e) => setForm({ ...form, query: e.target.value })} placeholder="group=security&signal_min=70" maxLength={600} className="h-8 rounded-md border border-line bg-panel px-2 font-mono text-[12px]" />
            <div className="flex items-center justify-between gap-2">
              <button type="button" onClick={() => setForm({ ...form, query: typeof window !== "undefined" && window.location.pathname.startsWith("/live") ? normalizeQuery(window.location.search) : form.query })} className="text-[11px] text-fg-subtle hover:text-fg" title="Only works from a /live page">use current query</button>
              <button type="submit" className="inline-flex h-8 items-center gap-1 rounded-md border border-line bg-panel-2 px-2 text-[12px] hover:border-line-strong">
                <Plus className="size-3.5" /> Save view
              </button>
            </div>
            {viewErr && <p className="text-[11px] text-danger">{viewErr}</p>}
          </form>
        </Panel>
        <Panel title="Built-in views" dense>
          <ul className="divide-y divide-line">
            {SAVED_VIEWS.map((v) => {
              const q = new URLSearchParams(Object.entries(v.query).map(([k, val]) => [k, String(val)])).toString();
              return (
                <li key={v.key} className="flex items-center justify-between gap-2 px-3 py-1.5 text-[12.5px]">
                  <Link href={`/live?${q}`} className="min-w-0 truncate hover:underline">{v.label}</Link>
                  <button type="button" onClick={() => setForm({ name: v.label, query: q })} className="shrink-0" title="Copy into the form">
                    <Chip className="hover:border-line-strong">copy</Chip>
                  </button>
                </li>
              );
            })}
          </ul>
        </Panel>
      </aside>
    </div>
  );
}