'use client';
import { Bookmark, BookmarkCheck } from 'lucide-react';
import { useState } from 'react';
import { ownerApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { ensureOwnerToken, readWatched, useWatched, writeWatched } from '@/lib/owner';

/** Watch / unwatch a company (owner token generated on first use). Optimistic; mirrors the slug locally. */
export function WatchButton({ slug, name, className, size = 'md' }: { slug: string; name?: string; className?: string; size?: 'sm' | 'md' }) {
  const watched = useWatched();
  const on = watched.includes(slug);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const toggle = async () => {
    setBusy(true);
    setErr(null);
    const token = ensureOwnerToken();
    const api = ownerApi(token);
    const cur = readWatched();
    try {
      if (on) {
        writeWatched(cur.filter((s) => s !== slug));
        await api.unwatch(slug);
      } else {
        writeWatched([...cur, slug]);
        await api.watch(slug);
      }
    } catch (e) {
      writeWatched(cur);
      setErr((e as Error).message || 'Could not update watchlist');
    } finally {
      setBusy(false);
    }
  };
  return (
    <span className={cn('inline-flex flex-col items-start', className)}>
      <button type="button" onClick={toggle} disabled={busy} aria-pressed={on} className={cn('btn', size === 'sm' && 'btn-sm', on && 'border-accent bg-accent-soft text-accent')} data-watch={slug} title={on ? `Stop watching ${name ?? slug}` : `Watch ${name ?? slug}`}>
        {on ? <BookmarkCheck className="size-4" aria-hidden /> : <Bookmark className="size-4" aria-hidden />}
        {on ? 'Watching' : 'Watch'}
      </button>
      {err && <span className="mt-1 text-[11px] text-danger">{err}</span>}
    </span>
  );
}