import Link from 'next/link';
import { accountApi } from '@/lib/session';
import { unsave } from '../../actions';
import { LawyerListItem } from '@/components/LawyerItems';
import { CompareToggle } from '@/components/AccountWidgets';
import { Notice, PageTitle } from '@/components/AccountUi';
import type { LawyerCard } from '@/lib/types';

type Saved = { lawyers: LawyerCard[]; firms: { id: number; name: string; slug: string; city: string | null }[] };

export default async function SavedPage({ searchParams }: { searchParams: Promise<{ ok?: string; err?: string }> }) {
  const sp = await searchParams;
  const d = await accountApi<Saved>('/client/saved', { next: '/account/saved/' });
  return (
    <>
      <PageTitle title="Saved" intro="Your shortlist. Add lawyers to the comparison to see them side by side." />
      <Notice ok={sp.ok} err={sp.err} />
      <h2 className="font-serif text-xl font-semibold">Lawyers</h2>
      {d.lawyers.length ? (
        <div className="mt-2">
          {d.lawyers.map((l) => (
            <div key={l.id} className="relative">
              <ul>
                <LawyerListItem l={l} />
              </ul>
              <div className="relative z-10 -mt-3 mb-3 flex gap-2 pl-16">
                <CompareToggle slug={l.slug} name={l.name} />
                <form action={unsave}>
                  <input type="hidden" name="kind" value="lawyers" />
                  <input type="hidden" name="slug" value={l.slug} />
                  <button className="btn btn-ghost btn-sm">Remove</button>
                </form>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <p className="card mt-3 p-5 text-sm text-muted">
          No saved lawyers.{' '}
          <Link href="/search/" className="link">
            Search the directory
          </Link>
        </p>
      )}
      <h2 className="mt-8 font-serif text-xl font-semibold">Firms</h2>
      {d.firms.length ? (
        <ul className="card mt-3 divide-y divide-rule text-sm">
          {d.firms.map((f) => (
            <li key={f.id} className="flex items-center justify-between gap-2 p-4">
              <Link href={`/firms/${f.slug}/`} className="link font-medium">
                {f.name}
              </Link>
              <span className="flex items-center gap-3 text-xs text-muted">
                {f.city}
                <form action={unsave}>
                  <input type="hidden" name="kind" value="firms" />
                  <input type="hidden" name="slug" value={f.slug} />
                  <button className="btn btn-ghost btn-sm">Remove</button>
                </form>
              </span>
            </li>
          ))}
        </ul>
      ) : (
        <p className="card mt-3 p-5 text-sm text-muted">No saved firms.</p>
      )}
    </>
  );
}