import Link from 'next/link';
import { accountApi } from '@/lib/session';
import { closeEnquiry } from '../../actions';
import { fmt, Notice, PageTitle, StatusPill } from '@/components/AccountUi';

type E = {
  reference: string;
  status: string;
  outcome: string | null;
  createdAt: string;
  city: string | null;
  practiceArea: string | null;
  direct: boolean;
  description: string;
  lawyers: { name: string; slug: string; status: string; respondedAt: string | null }[];
};

const OPEN = ['new', 'routed', 'accepted'];

export default async function Enquiries({ searchParams }: { searchParams: Promise<{ ok?: string; err?: string }> }) {
  const sp = await searchParams;
  const d = await accountApi<{ emailVerified: boolean; items: E[] }>('/client/enquiries', { next: '/account/enquiries/' });
  return (
    <>
      <PageTitle title="My enquiries" intro="Enquiries you sent from your confirmed email address, and what each lawyer did with them. Lawyers contact you directly by email or phone." />
      <Notice ok={sp.ok} err={sp.err} />
      {!d.emailVerified && <p className="mb-5 rounded-lg bg-brass-soft px-4 py-3 text-sm text-ink-2">Confirm your email first — only enquiries from a confirmed address are shown.</p>}
      {d.items.length ? (
        <ul className="space-y-4">
          {d.items.map((e) => (
            <li key={e.reference} className="card p-5 text-sm">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <p>
                  <strong className="font-semibold">{e.practiceArea ?? (e.direct ? 'Direct enquiry' : 'Enquiry')}</strong>
                  {e.city && <span className="text-muted"> · {e.city}</span>}
                  <span className="text-muted"> · sent {fmt(e.createdAt)}</span>
                </p>
                <StatusPill value={e.status} />
              </div>
              <p className="mt-2 line-clamp-3 whitespace-pre-line text-ink-2">{e.description}</p>
              {e.lawyers.length > 0 && (
                <ul className="mt-3 divide-y divide-rule rounded-lg border border-rule">
                  {e.lawyers.map((l) => (
                    <li key={l.slug} className="flex items-center justify-between gap-2 px-3 py-2">
                      <Link href={`/lawyers/${l.slug}/`} className="link">
                        {l.name}
                      </Link>
                      <StatusPill value={l.status} />
                    </li>
                  ))}
                </ul>
              )}
              {e.outcome && <p className="mt-2 text-xs text-muted">{e.outcome}</p>}
              <p className="mt-3 text-xs text-muted">Reference {e.reference}</p>
              {OPEN.includes(e.status) && (
                <details className="mt-3">
                  <summary className="cursor-pointer text-sm font-medium text-ink-2 hover:text-ink">Close this enquiry</summary>
                  <form action={closeEnquiry} className="mt-2 flex flex-wrap items-center gap-2">
                    <input type="hidden" name="ref" value={e.reference} />
                    <select name="reason" className="field h-9 w-auto" defaultValue="found_lawyer">
                      <option value="found_lawyer">I found a lawyer</option>
                      <option value="no_longer_needed">I no longer need help</option>
                      <option value="other">Other reason</option>
                    </select>
                    <button className="btn btn-quiet btn-sm">Close enquiry</button>
                  </form>
                  <p className="mt-1 text-xs text-muted">Lawyers who haven’t replied yet are told it’s closed.</p>
                </details>
              )}
            </li>
          ))}
        </ul>
      ) : (
        <p className="card p-5 text-sm text-muted">
          No enquiries yet.{' '}
          <Link href="/search/" className="link">
            Find a lawyer
          </Link>
        </p>
      )}
    </>
  );
}