import * as ActionIcons from '@/components/Icons';
import Link from 'next/link';
import { api } from '@/lib/api';
import { Card, Flash, PageHeader, type SP } from '@/components/ui';
import { SubmitButton } from '@/components/Actions';
import { ArrowLeftIcon, PlusIcon, UserIcon } from '@/components/Icons';
import { createLawyer } from '../../../actions';

type Ref = { cities: { id: number; name: string }[]; practiceAreas: { id: number; name: string }[] };

export default async function NewLawyer({ searchParams }: { searchParams: SP }) {
  const sp = await searchParams;
  const ref = await api<Ref>('/admin/reference');
  return (
    <>
      <PageHeader
        title="Add a lawyer"
        icon={<UserIcon className="h-5 w-5" />}
        description="New profiles start as drafts. Publish after a licence has been verified."
        actions={
          <Link href="/lawyers" className="btn btn-quiet btn-sm">
            <ArrowLeftIcon className="h-4 w-4" /> All lawyers
          </Link>
        }
      />
      <Flash err={sp.err} />
      <Card className="max-w-2xl">
        <form action={createLawyer} className="grid gap-4 p-5 sm:grid-cols-2">
          <label className="block">
            <span className="field-label">
              First name <span className="text-danger">*</span>
            </span>
            <input name="firstName" required maxLength={100} autoComplete="off" className="field" />
          </label>
          <label className="block">
            <span className="field-label">
              Last name <span className="text-danger">*</span>
            </span>
            <input name="lastName" required maxLength={100} autoComplete="off" className="field" />
          </label>
          <label className="block">
            <span className="field-label"><ActionIcons.FileTextIcon />Title</span>
            <input name="title" maxLength={150} placeholder="e.g. Partner" className="field" />
          </label>
          <label className="block">
            <span className="field-label"><ActionIcons.MailIcon />Email</span>
            <input name="email" type="email" maxLength={255} className="field" />
          </label>
          <label className="block">
            <span className="field-label">
              City <span className="text-danger">*</span>
            </span>
            <select name="cityId" required defaultValue="" className="field">
              <option value="" disabled>
                Choose a city…
              </option>
              {ref.cities.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name}
                </option>
              ))}
            </select>
          </label>
          <label className="block">
            <span className="field-label"><ActionIcons.ScaleIcon />Primary practice area</span>
            <select name="practiceAreaId" defaultValue="" className="field">
              <option value="">None yet</option>
              {ref.practiceAreas.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name}
                </option>
              ))}
            </select>
          </label>
          <label className="block">
            <span className="field-label"><ActionIcons.ScaleIcon />Years in practice</span>
            <input name="yearsExperience" type="number" inputMode="numeric" min={0} max={70} className="field" />
          </label>
          <div className="flex items-center gap-3 border-t border-rule pt-4 sm:col-span-2">
            <SubmitButton pendingLabel="Creating…">
              <PlusIcon className="h-4 w-4" /> Create draft profile
            </SubmitButton>
            <span className="text-xs text-muted">Fields marked * are required.</span>
          </div>
        </form>
      </Card>
    </>
  );
}