import { api, canEdit, me } from '@/lib/api';
import { date, PUBLIC_SITE } from '@/lib/format';
import { Card, Empty, Flash, PageHeader, Pill, Tabs, type SP } from '@/components/ui';
import { SubmitButton } from '@/components/Actions';
import { CheckIcon, StarIcon, XIcon } from '@/components/Icons';
import { moderateReview } from '../../actions';

type R = { id: number; rating: string; text: string | null; date: string; verified: boolean; isPublished: boolean; author: string | null; source: string; lawyer: string; lawyerSlug: string };

const STATUSES = ['pending', 'published'];

function StarsRow({ value }: { value: number }) {
  return (
    <span className="inline-flex items-center gap-0.5 text-brass" aria-label={`${value.toFixed(1)} out of 5`}>
      {[1, 2, 3, 4, 5].map((i) => (
        <StarIcon key={i} className={`h-3.5 w-3.5 ${i <= Math.round(value) ? 'fill-current' : 'text-rule-strong'}`} />
      ))}
    </span>
  );
}

export default async function Reviews({ searchParams }: { searchParams: SP }) {
  const sp = await searchParams;
  const status = STATUSES.includes(sp.status ?? '') ? sp.status! : 'pending';
  const [rows, user] = await Promise.all([api<R[]>(`/admin/reviews?status=${status}`), me()]);
  const editable = canEdit(user.role);
  return (
    <>
      <PageHeader
        title="Review moderation"
        icon={<StarIcon className="h-5 w-5" />}
        description="Nothing is published automatically. Mark a review verified only when the engagement has been confirmed."
        actions={<Tabs current={status} items={STATUSES.map((s) => ({ value: s, label: s, href: `?status=${s}` }))} />}
      />
      <Flash ok={sp.ok} err={sp.err} />
      <Card>
        {rows.length ? (
          <ul className="divide-y divide-rule">
            {rows.map((r) => (
              <li key={r.id} className="grid gap-4 p-4 lg:grid-cols-[1fr_auto] lg:items-start">
                <div className="min-w-0 text-sm">
                  <p className="flex flex-wrap items-center gap-2">
                    <StarsRow value={Number(r.rating)} />
                    <span className="num font-semibold">{Number(r.rating).toFixed(1)}</span>
                    <span className="text-muted">for</span>
                    <a href={`${PUBLIC_SITE}/lawyers/${r.lawyerSlug}/`} target="_blank" rel="noopener" className="font-semibold hover:text-ledger hover:underline">
                      {r.lawyer}
                    </a>
                    {r.verified && <Pill value="verified" />}
                  </p>
                  <p className="mt-0.5 text-xs text-muted">
                    by {r.author ?? 'anonymous'} · {date(r.date)} · {r.source}
                  </p>
                  {r.text && <blockquote className="mt-2 border-l-2 border-rule pl-3 leading-relaxed text-ink-2">{r.text}</blockquote>}
                </div>
                {!r.isPublished && editable && (
                  <form className="flex flex-wrap items-center gap-2">
                    <input type="hidden" name="id" value={r.id} />
                    <label className="flex items-center gap-1.5 rounded-md border border-rule px-2 py-1.5 text-xs">
                      <input type="checkbox" name="verified" /> engagement confirmed
                    </label>
                    <SubmitButton formAction={moderateReview.bind(null, 'publish')} className="btn btn-primary btn-sm">
                      <CheckIcon className="h-4 w-4" /> Publish
                    </SubmitButton>
                    <SubmitButton formAction={moderateReview.bind(null, 'reject')} confirm="Reject this review? It will not be published." className="btn btn-danger-quiet btn-sm">
                      <XIcon className="h-4 w-4" /> Reject
                    </SubmitButton>
                  </form>
                )}
              </li>
            ))}
          </ul>
        ) : (
          <Empty icon={<StarIcon className="h-6 w-6" />}>No {status} reviews.</Empty>
        )}
      </Card>
    </>
  );
}