import { publicApi } from '@/lib/api';
import { AuthShell, InvalidLink } from '@/components/AuthShell';
import { ClaimConfirmForm, ClaimUploadForm } from '@/components/AccountForms';
import { CheckCircleIcon, ClockIcon } from '@/components/Icons';

export const metadata = { title: 'Your profile claim' };
export const dynamic = 'force-dynamic';

type Check = { valid: boolean; status?: string; emailVerified?: boolean; lawyer?: string; email?: string; documents?: number; decisionNote?: string | null };

/** Landing page for the link emailed to someone claiming a lawyer profile */
export default async function ClaimPage({ searchParams }: { searchParams: Promise<{ token?: string }> }) {
  const { token = '' } = await searchParams;
  const c: Check = token ? (await publicApi<Check>('/claims/token/check', { token })).data : { valid: false };
  if (!c.valid)
    return (
      <AuthShell title="Profile claim" backToLogin={false}>
        <InvalidLink what="claim" />
        <p className="mt-4 text-sm text-muted">Open the lawyer’s public profile and choose “Claim this profile” to start again.</p>
      </AuthShell>
    );
  return (
    <AuthShell title={`Claim: ${c.lawyer}`} description={<>Claim made by <strong className="text-ink">{c.email}</strong>.</>} backToLogin={false}>
      {!c.emailVerified ? (
        <div className="space-y-4">
          <p className="text-sm text-ink-2">Confirm this email address to send your claim to our verification team.</p>
          <ClaimConfirmForm token={token} />
        </div>
      ) : (
        <div className="space-y-5">
          <p className="flex items-start gap-2 rounded-lg bg-ledger-soft px-3 py-2.5 text-sm text-ledger">
            {c.status === 'documents_required' ? <ClockIcon className="mt-0.5 h-4 w-4" /> : <CheckCircleIcon className="mt-0.5 h-4 w-4" />}
            {c.status === 'documents_required'
              ? 'Our team needs proof that this profile is yours. Please upload a document below.'
              : 'Your email is confirmed and the claim is with our verification team. We’ll email you when it’s decided — usually within two working days.'}
          </p>
          {c.decisionNote && <p className="rounded-md bg-paper px-3 py-2 text-sm text-ink-2">Note from the team: {c.decisionNote}</p>}
          <p className="text-sm text-muted">
            {c.documents ? `${c.documents} document${c.documents > 1 ? 's' : ''} uploaded.` : 'Uploading proof (optional) makes the review faster.'}
          </p>
          <ClaimUploadForm token={token} />
        </div>
      )}
    </AuthShell>
  );
}