'use client';
import { Bell, Trash2 } from 'lucide-react';
import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react';
import { EventList } from '@/components/events/event-row';
import { EventTypeBadge } from '@/components/ui/badges';
import { LiveAgo } from '@/components/ui/live';
import { Empty, Note, Section } from '@/components/ui/section';
import { SkeletonRows } from '@/components/ui/skeleton';
import { ownerApi } from '@/lib/client-api';
import { EVENT_TYPES } from '@/lib/event-styles';
import { readWatched, setOwnerToken, useOwnerToken, writeWatched } from '@/lib/owner';
import { routes } from '@/lib/site';
import type { Alert, AlertDelivery, WatchlistPayload } from '@/lib/types';
import { CompanyTable } from './company-table';

/** /watchlist: watched companies with their latest events, alert rules and recent deliveries — all keyed by the owner token. */
export function WatchlistClient() {
  const token = useOwnerToken(true);
  const [data, setData] = useState<WatchlistPayload | null>(null);
  const [alerts, setAlerts] = useState<Alert[]>([]);
  const [deliveries, setDeliveries] = useState<AlertDelivery[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [showToken, setShowToken] = useState(false);
  const [importDraft, setImportDraft] = useState('');
  const [form, setForm] = useState<{ name: string; company: string; event_types: string[]; min_importance: string; channel: 'web' | 'webhook'; target: string }>({ name: '', company: '', event_types: [], min_importance: '', channel: 'web', target: '' });

  const load = useCallback(async () => {
    if (!token) return;
    const api = ownerApi(token);
    setLoading(true);
    try {
      const [w, a, d] = await Promise.all([api.watchlist(), api.alerts().catch(() => ({ items: [] })), api.deliveries(30).catch(() => ({ items: [] }))]);
      setData(w);
      setAlerts(a.items ?? []);
      setDeliveries(d.items ?? []);
      setError(null);
      // reconcile the local mirror with the server truth
      writeWatched(w.items.map((c) => c.slug));
    } catch (e) {
      setError((e as Error).message);
      // fall back to the local mirror for names only
      if (!data) setData({ items: [], events: [] });
    } finally {
      setLoading(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);
  useEffect(() => {
    load();
  }, [load]);

  const remove = async (slug: string) => {
    if (!token) return;
    writeWatched(readWatched().filter((s) => s !== slug));
    setData((d) => (d ? { ...d, items: d.items.filter((c) => c.slug !== slug) } : d));
    try {
      await ownerApi(token).unwatch(slug);
    } catch {
      /* reload will reconcile */
    }
  };
  const createAlert = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!token || !form.name.trim()) return;
    try {
      const a = await ownerApi(token).createAlert({ name: form.name.trim(), company: form.company || undefined, condition: { event_types: form.event_types.length ? form.event_types : undefined, min_importance: form.min_importance ? Number(form.min_importance) : undefined }, channel: form.channel, target: form.channel === 'webhook' ? form.target : undefined });
      setAlerts((l) => [...l, a]);
      setForm({ name: '', company: '', event_types: [], min_importance: '', channel: 'web', target: '' });
    } catch (err) {
      setError((err as Error).message);
    }
  };
  const deleteAlert = async (id: string) => {
    if (!token) return;
    setAlerts((l) => l.filter((a) => a.id !== id));
    try {
      await ownerApi(token).deleteAlert(id);
    } catch {
      /* ignore */
    }
  };

  const localOnly = readWatched();
  return (
    <div data-watchlist>
      {error && (
        <p className="mb-4 border border-warning/40 bg-warning-soft px-3 py-2 text-sm text-warning" role="status">
          Watchlist service: {error}. Your locally saved list ({localOnly.length}) is kept and will sync when the API answers.
        </p>
      )}
      <Section eyebrow="Watched companies" title={data ? `${data.items.length} ${data.items.length === 1 ? 'company' : 'companies'}` : 'Loading…'} hairline={false} action={{ href: routes.companies(), label: 'Find companies' }}>
        {loading && !data ? (
          <SkeletonRows />
        ) : data && data.items.length ? (
          <>
            <CompanyTable items={data.items} />
            <ul className="mt-2 flex flex-wrap gap-1.5">
              {data.items.map((c) => (
                <li key={c.slug}>
                  <button type="button" onClick={() => remove(c.slug)} className="chip-btn" aria-label={`Stop watching ${c.display_name}`}>
                    <Trash2 className="size-3" aria-hidden /> {c.display_name}
                  </button>
                </li>
              ))}
            </ul>
            {data.items.length >= 2 && (
              <p className="mt-3 text-sm">
                <Link href={routes.compare(data.items.slice(0, 6).map((c) => c.slug))} className="link">
                  Compare watched companies →
                </Link>
              </p>
            )}
          </>
        ) : (
          <Empty title="Your watchlist is empty.">
            Use the <span className="font-medium text-ink-2">Watch</span> button on any company page. No account is needed — the list is tied to a token stored in this browser.
          </Empty>
        )}
      </Section>

      <Section eyebrow="Latest events" title="Across watched companies">
        {data ? <EventList events={data.events} variant="table" emptyLabel="No events yet for the companies you watch." /> : <SkeletonRows />}
      </Section>

      <Section eyebrow="Alerts" title="Rules" lede="Get notified in the web feed or by webhook when watched companies produce matching events. Rules are evaluated on the server against new structured events.">
        <form onSubmit={createAlert} className="grid gap-2 border border-rule p-3 md:grid-cols-[1.5fr_1fr_1fr_1fr_auto]" data-alert-form>
          <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Rule name (required)" className="field" aria-label="Rule name" required />
          <select value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} className="field" aria-label="Company">
            <option value="">Any watched company</option>
            {(data?.items ?? []).map((c) => (
              <option key={c.slug} value={c.slug}>
                {c.display_name}
              </option>
            ))}
          </select>
          <select value={form.min_importance} onChange={(e) => setForm({ ...form, min_importance: e.target.value })} className="field" aria-label="Minimum importance">
            <option value="">Any importance</option>
            <option value="0.5">Importance ≥ 50</option>
            <option value="0.7">Importance ≥ 70</option>
            <option value="0.85">Importance ≥ 85</option>
          </select>
          <select value={form.channel} onChange={(e) => setForm({ ...form, channel: e.target.value as 'web' | 'webhook' })} className="field" aria-label="Channel">
            <option value="web">Web</option>
            <option value="webhook">Webhook</option>
          </select>
          <button type="submit" className="btn btn-primary">
            <Bell className="size-4" aria-hidden /> Add rule
          </button>
          {form.channel === 'webhook' && <input value={form.target} onChange={(e) => setForm({ ...form, target: e.target.value })} placeholder="https://your-endpoint.example/hook" className="field md:col-span-5" aria-label="Webhook URL" type="url" required />}
          <div className="flex flex-wrap gap-1 md:col-span-5">
            {EVENT_TYPES.map((t) => {
              const on = form.event_types.includes(t);
              return (
                <button key={t} type="button" onClick={() => setForm({ ...form, event_types: on ? form.event_types.filter((x) => x !== t) : [...form.event_types, t] })} className="chip-btn" data-on={on} aria-pressed={on}>
                  {t}
                </button>
              );
            })}
            <span className="self-center text-[11px] text-ink-3">no selection = all types</span>
          </div>
        </form>
        {alerts.length > 0 ? (
          <ul className="mt-4 divide-y divide-rule border-y border-rule text-sm">
            {alerts.map((a) => (
              <li key={a.id} className="flex flex-wrap items-center gap-2 py-2">
                <span className="font-medium text-ink">{a.name}</span>
                <span className="text-xs text-ink-3">{a.company ? `company ${a.company}` : 'any watched company'}</span>
                {(a.condition.event_types ?? []).map((t) => (
                  <EventTypeBadge key={t} type={t} small />
                ))}
                {a.condition.min_importance !== undefined && <span className="tnum text-xs text-ink-3">importance ≥ {Math.round(a.condition.min_importance * 100)}</span>}
                <span className="mono text-[11px] text-ink-3">{a.channel}</span>
                <button type="button" onClick={() => deleteAlert(a.id)} className="ml-auto flex size-9 items-center justify-center text-ink-3 hover:text-danger" aria-label={`Delete rule ${a.name}`}>
                  <Trash2 className="size-4" aria-hidden />
                </button>
              </li>
            ))}
          </ul>
        ) : (
          <Note className="mt-3">No rules yet.</Note>
        )}
        {deliveries.length > 0 && (
          <div className="mt-6">
            <p className="eyebrow mb-1">Recent deliveries</p>
            <ul className="divide-y divide-rule border-y border-rule text-sm">
              {deliveries.map((d) => (
                <li key={d.id} className="flex flex-wrap items-center gap-2 py-2">
                  <span className="text-xs text-ink-3">{d.alert_name ?? d.alert_id}</span>
                  {d.event ? (
                    <Link href={routes.event(d.event.id)} className="min-w-0 flex-1 truncate hover:text-accent">
                      {d.event.title}
                    </Link>
                  ) : (
                    <span className="mono text-xs">{d.event_id}</span>
                  )}
                  <span className="mono text-[11px] text-ink-3">
                    {d.channel} · {d.status}
                  </span>
                  <LiveAgo at={d.delivered_at} tick={30000} className="text-xs text-ink-3" />
                </li>
              ))}
            </ul>
          </div>
        )}
      </Section>

      <Section eyebrow="Your token" title="No account, one token">
        <p className="text-sm text-ink-2">Watchlists and alerts belong to a random token generated by this browser and stored in localStorage; the server keeps only a hash. Clearing site data loses the list — copy the token to move it to another device.</p>
        <div className="mt-3 flex flex-wrap items-center gap-2">
          <button type="button" onClick={() => setShowToken((v) => !v)} className="btn btn-sm">
            {showToken ? 'Hide token' : 'Show token'}
          </button>
          {showToken && token && <code className="mono break-all border border-rule bg-surface-2 px-2 py-1 text-xs">{token}</code>}
        </div>
        <form
          className="mt-3 flex max-w-lg gap-2"
          onSubmit={(e) => {
            e.preventDefault();
            if (setOwnerToken(importDraft)) {
              setImportDraft('');
              load();
            }
          }}
        >
          <input value={importDraft} onChange={(e) => setImportDraft(e.target.value)} placeholder="Paste a token from another device" className="field flex-1 text-xs" aria-label="Import token" />
          <button type="submit" className="btn btn-sm" disabled={importDraft.trim().length < 24}>
            Import
          </button>
        </form>
      </Section>
    </div>
  );
}