import * as ActionIcons from '@/components/Icons';
import Link from 'next/link';
import { api, me } from '@/lib/api';
import { date, PUBLIC_SITE } from '@/lib/format';
import { Card, Empty, Kpi, PageHeader, Pill, type SP } from '@/components/ui';
import { MessageIcon, StarIcon } from '@/components/Icons';

type R = {
  summary: { total: number; published: number; average: number | null };
  page: number;
  items: { id: number; rating: number; text: string | null; date: string; verified: boolean; published: boolean; author: string | null; source: string }[];
};

export default async function Reviews({ searchParams }: { searchParams: SP }) {
  const sp = await searchParams;
  const user = await me();
  const page = Math.max(1, Number(sp.page) || 1);
  const d = await api<R>(`/me/reviews?page=${page}`);
  return (
    <>
      <PageHeader
        title="Reviews"
        icon={<StarIcon className="h-5 w-5" />}
        description="Reviews appear after moderation. You can’t edit or remove reviews; if one is false or breaks our rules, report it from your public profile."
      />
      <div className="mb-6 grid grid-cols-2 gap-3 md:grid-cols-3">
        <Kpi label="Average rating" icon={<StarIcon className="h-4 w-4" />} value={d.summary.average != null ? d.summary.average.toFixed(2) : '—'} hint="published reviews" />
        <Kpi label="Published" icon={<MessageIcon className="h-4 w-4" />} value={d.summary.published} hint={`${d.summary.total} received`} />
        <Kpi label="Awaiting moderation" icon={<MessageIcon className="h-4 w-4" />} value={d.summary.total - d.summary.published} hint="text hidden until published" tone="muted" />
      </div>
      <Card
        actions={
          user.lawyer && (
            <a href={`${PUBLIC_SITE}/lawyers/${user.lawyer.slug}/#reviews`} target="_blank" rel="noopener" className="btn btn-quiet btn-xs">
              Share your review link
            </a>
          )
        }
        title="All reviews"
      >
        {d.items.length ? (
          <ul className="divide-y divide-rule">
            {d.items.map((r) => (
              <li key={r.id} className="p-4 text-sm">
                <p className="flex flex-wrap items-center gap-2">
                  <span className="num font-semibold text-brass">{'★'.repeat(Math.round(r.rating))}{'☆'.repeat(5 - Math.round(r.rating))}</span>
                  <span className="font-medium">{r.author ?? 'Anonymous'}</span>
                  {r.verified && <Pill value="verified client" tone="good" />}
                  {!r.published && <Pill value="awaiting moderation" tone="warn" />}
                  <span className="text-xs text-muted">
                    {r.source} · {date(r.date)}
                  </span>
                </p>
                {r.text && <p className="mt-2 leading-relaxed text-ink-2">{r.text}</p>}
              </li>
            ))}
          </ul>
        ) : (
          <Empty icon={<StarIcon className="h-6 w-6" />}>No reviews yet.</Empty>
        )}
        <div className="flex justify-between border-t border-rule px-4 py-2.5 text-sm">
          {page > 1 ? <Link href={`?page=${page - 1}`} className="btn btn-quiet btn-sm"><ActionIcons.ChevronLeftIcon />Newer</Link> : <span />}
          {d.items.length === 20 && <Link href={`?page=${page + 1}`} className="btn btn-quiet btn-sm"><ActionIcons.ChevronRightIcon />Older</Link>}
        </div>
      </Card>
    </>
  );
}