import * as ActionIcons from '@/components/Icons';
import { api } from '@/lib/api';
import { date } from '@/lib/format';
import { Card, Empty, Flash, PageHeader, Pill, type SP } from '@/components/ui';
import { SubmitButton } from '@/components/Actions';
import { CredentialRequestForm } from '@/components/CredentialRequestForm';
import { AwardIcon, BadgeCheckIcon, BookOpenIcon, GavelIcon, PlusIcon, ScrollIcon } from '@/components/Icons';
import { withdrawRequest } from '../../actions';

type Profile = {
  credentials: {
    licenses: { id: number; jurisdiction: string; issuingBody: string; licenseNumber: string | null; admittedYear: number | null; status: string; verification: string }[];
    education: { id: number; institution: string; degree: string; graduationYear: number | null; verified: boolean }[];
    awards: { name: string; issuer: string; year: number; verified: boolean; isPayToPlay: boolean }[];
    trackRecords: { id: number; title: string; forum: string | null; year: number; verified: boolean }[];
  };
  changeRequests: { id: number; kind: string; payload: Record<string, string | number>; status: string; decisionNote: string | null; createdAt: string; decidedAt: string | null }[];
};

const verified = (ok: boolean) => <Pill value={ok ? 'verified' : 'unverified'} tone={ok ? 'good' : 'muted'} />;
const summary = (p: Record<string, string | number>) => Object.values(p).filter(Boolean).join(' · ');

export default async function Credentials({ searchParams }: { searchParams: SP }) {
  const sp = await searchParams;
  const d = await api<Profile>('/me/profile');
  const c = d.credentials;
  return (
    <>
      <PageHeader
        title="Credentials"
        icon={<BadgeCheckIcon className="h-5 w-5" />}
        description="Credentials make up a large part of your organic ranking, so each one is checked by our verification team before it appears. Approved items count from the next ranking run. Paying for a plan never changes this."
      />
      <Flash ok={sp.ok} err={sp.err} />
      <div className="grid gap-6 xl:grid-cols-[1.4fr_1fr]">
        <div className="space-y-6">
          <Card title="Licences" icon={<ScrollIcon className="h-4 w-4" />}>
            {c.licenses.length ? (
              <ul className="divide-y divide-rule text-sm">
                {c.licenses.map((l) => (
                  <li key={l.id} className="flex flex-wrap items-center justify-between gap-2 px-4 py-2.5">
                    <span>
                      <strong>{l.jurisdiction}</strong> · {l.issuingBody} {l.licenseNumber && <code className="text-xs">#{l.licenseNumber}</code>} {l.admittedYear && <span className="text-muted">· since {l.admittedYear}</span>}
                    </span>
                    <span className="flex gap-1">
                      <Pill value={l.status} /> <Pill value={l.verification} />
                    </span>
                  </li>
                ))}
              </ul>
            ) : (
              <Empty>No licence on file — without an active, verified licence you can’t be ranked.</Empty>
            )}
          </Card>
          <Card title="Education" icon={<BookOpenIcon className="h-4 w-4" />}>
            {c.education.length ? (
              <ul className="divide-y divide-rule text-sm">
                {c.education.map((e) => (
                  <li key={e.id} className="flex items-center justify-between gap-2 px-4 py-2.5">
                    <span>
                      {e.degree}, {e.institution} {e.graduationYear && <span className="text-muted">· {e.graduationYear}</span>}
                    </span>
                    {verified(e.verified)}
                  </li>
                ))}
              </ul>
            ) : (
              <p className="p-4 text-sm text-muted">None on file.</p>
            )}
          </Card>
          <Card title="Awards" icon={<AwardIcon className="h-4 w-4" />}>
            {c.awards.length ? (
              <ul className="divide-y divide-rule text-sm">
                {c.awards.map((a, i) => (
                  <li key={i} className="flex items-center justify-between gap-2 px-4 py-2.5">
                    <span>
                      {a.name} · {a.issuer} <span className="text-muted">· {a.year}</span> {a.isPayToPlay && <Pill value="pay-to-play — scores 0" tone="warn" />}
                    </span>
                    {verified(a.verified)}
                  </li>
                ))}
              </ul>
            ) : (
              <p className="p-4 text-sm text-muted">None on file.</p>
            )}
          </Card>
          <Card title="Track record" icon={<GavelIcon className="h-4 w-4" />}>
            {c.trackRecords.length ? (
              <ul className="divide-y divide-rule text-sm">
                {c.trackRecords.map((tr) => (
                  <li key={tr.id} className="flex items-center justify-between gap-2 px-4 py-2.5">
                    <span>
                      {tr.title} {tr.forum && <span className="text-muted">· {tr.forum}</span>} <span className="text-muted">· {tr.year}</span>
                    </span>
                    {verified(tr.verified)}
                  </li>
                ))}
              </ul>
            ) : (
              <p className="p-4 text-sm text-muted">None on file.</p>
            )}
          </Card>
        </div>

        <div className="space-y-6">
          <Card title="Add a credential" icon={<PlusIcon className="h-4 w-4" />}>
            <CredentialRequestForm />
          </Card>
          <Card title="Your requests">
            {d.changeRequests.length ? (
              <ul className="divide-y divide-rule text-sm">
                {d.changeRequests.map((r) => (
                  <li key={r.id} className="px-4 py-3">
                    <p className="flex flex-wrap items-center gap-2">
                      <Pill value={r.status === 'pending' ? 'in review' : r.status} tone={r.status === 'approved' ? 'good' : r.status === 'rejected' ? 'bad' : 'info'} />
                      <span className="font-medium capitalize">{r.kind.replace('_', ' ')}</span>
                      <span className="text-xs text-muted">{date(r.createdAt)}</span>
                    </p>
                    <p className="mt-1 text-xs text-ink-2">{summary(r.payload)}</p>
                    {r.decisionNote && <p className="mt-1 rounded bg-paper px-2 py-1 text-xs text-ink-2">Reviewer: {r.decisionNote}</p>}
                    {r.status === 'pending' && (
                      <form action={withdrawRequest} className="mt-2">
                        <input type="hidden" name="id" value={r.id} />
                        <SubmitButton className="btn btn-quiet btn-xs" confirm="Withdraw this request?">
                          <ActionIcons.XCircleIcon />Withdraw
                        </SubmitButton>
                      </form>
                    )}
                  </li>
                ))}
              </ul>
            ) : (
              <p className="p-4 text-sm text-muted">No requests yet.</p>
            )}
          </Card>
        </div>
      </div>
    </>
  );
}