import Link from 'next/link';
import type { Metadata } from 'next';
import { api } from '@/lib/api';
import { Breadcrumbs } from '@/components/Breadcrumbs';
import { ClaimForm } from '@/components/ClaimForm';
import { BadgeCheckIcon, InfoIcon, LockIcon, MailIcon, ShieldCheckIcon } from '@/components/Icons';

export const dynamic = 'force-dynamic';

type L = { slug: string; name: string; title: string | null; claimed: boolean };

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const l = await api<L>(`/claims/lawyer/${encodeURIComponent(slug)}`, { revalidate: 0 });
  // A form, not content: keep it out of search results
  return { title: `Claim the profile of ${l.name}`, robots: { index: false, follow: false } };
}

const STEPS = [
  { Icon: MailIcon, t: 'Confirm your email', d: 'We send a one-time link to the address you give.' },
  { Icon: ShieldCheckIcon, t: 'We verify it’s you', d: 'Matching firm email or licence number, or a document you upload.' },
  { Icon: BadgeCheckIcon, t: 'Manage your profile', d: 'Set your password and open your free dashboard.' },
];

export default async function ClaimProfile({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const l = await api<L>(`/claims/lawyer/${encodeURIComponent(slug)}`, { revalidate: 0 });
  return (
    <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 sm:py-10">
      <Breadcrumbs
        items={[
          { label: 'Home', href: '/' },
          { label: l.name, href: `/lawyers/${l.slug}/` },
          { label: 'Claim profile', href: `/claim/${l.slug}/` },
        ]}
      />
      <h1 className="mt-6 font-serif text-3xl font-semibold tracking-tight sm:text-4xl">Is this you, {l.name}?</h1>
      <p className="mt-3 max-w-2xl text-ink-2">Claiming is free. It lets you correct your details, add verified credentials and answer enquiries. It never changes your ranking by itself — rankings use verified evidence only.</p>

      <ol className="mt-8 grid gap-3 sm:grid-cols-3">
        {STEPS.map(({ Icon, t, d }, i) => (
          <li key={t} className="card flex gap-3 p-4">
            <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-ledger-soft text-ledger">
              <Icon className="h-4 w-4" />
            </span>
            <span className="text-sm">
              <span className="block font-semibold">
                {i + 1}. {t}
              </span>
              <span className="text-ink-2">{d}</span>
            </span>
          </li>
        ))}
      </ol>

      <div className="mt-8">
        {l.claimed ? (
          <div className="card flex items-start gap-3 p-6 text-sm text-ink-2">
            <InfoIcon className="mt-0.5 h-5 w-5 text-muted" />
            <span>
              This profile is already managed by a verified account. If that’s wrong, use <strong>Report inaccurate information</strong> on the{' '}
              <Link href={`/lawyers/${l.slug}/`} className="link">
                profile
              </Link>{' '}
              and tick “I am this professional”.
            </span>
          </div>
        ) : (
          <ClaimForm slug={l.slug} name={l.name} />
        )}
      </div>
      <p className="mt-6 flex items-start gap-2 text-xs text-muted">
        <LockIcon className="mt-0.5 h-3.5 w-3.5" /> We use your details only to verify the claim. Documents you upload are seen only by our verification team.
      </p>
    </div>
  );
}