'use client';

import Link from 'next/link';
import { useActionState, useState } from 'react';
import { saveSearch, type FormState } from '@/app/account/actions';
import { BellIcon, CheckCircleIcon, Spinner } from './Icons';

/** "Save this search" with optional email alerts for newly matching lawyers */
export function SaveSearch({ query, defaultName }: { query: Record<string, string | number | boolean | undefined>; defaultName: string }) {
  const [open, setOpen] = useState(false);
  const [state, action, pending] = useActionState<FormState, FormData>(saveSearch, {});
  const clean = Object.fromEntries(Object.entries(query).filter(([, v]) => v !== undefined && v !== '' && v !== false));
  if (state.done)
    return (
      <p className="inline-flex items-center gap-1.5 text-sm text-ledger">
        <CheckCircleIcon className="h-4 w-4" /> {state.message}{' '}
        <Link href="/account/searches/" className="link">
          Manage
        </Link>
      </p>
    );
  if (!open)
    return (
      <button type="button" onClick={() => setOpen(true)} className="btn btn-quiet btn-sm">
        <BellIcon className="h-4 w-4" /> Save this search
      </button>
    );
  return (
    <form action={action} className="flex flex-wrap items-center gap-2 text-sm">
      <input type="hidden" name="query" value={JSON.stringify(clean)} />
      <input name="name" defaultValue={defaultName} maxLength={120} required aria-label="Name for this search" className="field h-9 w-56" />
      <label className="inline-flex items-center gap-1.5 text-ink-2">
        <input type="checkbox" name="alert" defaultChecked /> Email me new matches
      </label>
      <button className="btn btn-primary btn-sm" disabled={pending}>
        {pending ? <Spinner /> : 'Save'}
      </button>
      {state.error === 'login' ? (
        <span className="text-xs text-muted">
          <Link href="/account/login/?next=/search/" className="link">
            Sign in
          </Link>{' '}
          or{' '}
          <Link href="/account/register/" className="link">
            create a free account
          </Link>{' '}
          to save searches.
        </span>
      ) : (
        state.error && <span className="text-xs text-danger">{state.error}</span>
      )}
    </form>
  );
}