"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import type { PreRegistrationBucket } from "@/lib/pre-registration-dashboard";
import { BUCKET_ACCENTS, PRE_REGISTRATION_BUCKETS } from "@/lib/pre-registration-dashboard";
import { STATUS_LABELS } from "@/lib/labels";
import type { DeskApplication } from "@/lib/api";

export function PreRegistrationStatCards({
  stats,
  loading,
}: {
  stats: Record<string, number>;
  loading?: boolean;
}) {
  const buckets = Object.keys(PRE_REGISTRATION_BUCKETS) as PreRegistrationBucket[];

  return (
    <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-4 sm:gap-3">
      {buckets.map((bucket) => (
        <Link
          key={bucket}
          href={`/pre-registration/admissions?group=${bucket}`}
          className={`rounded-xl border p-3 shadow-card transition hover:brightness-[0.98] sm:rounded-2xl sm:p-4 ${BUCKET_ACCENTS[bucket]}`}
        >
          <p className="text-xs font-semibold opacity-80">{PRE_REGISTRATION_BUCKETS[bucket]}</p>
          <p className="mt-1.5 text-2xl font-bold sm:mt-2 sm:text-3xl">
            {loading ? "…" : stats[bucket] ?? 0}
          </p>
          <p className="mt-2 text-xs opacity-80">مشاهده و مدیریت</p>
        </Link>
      ))}
      <Link
        href="/pre-registration/admissions"
        className="rounded-xl border border-slate-200 bg-white p-3 shadow-card transition hover:bg-slate-50 sm:rounded-2xl sm:p-4"
      >
        <p className="text-xs font-semibold text-[var(--muted)]">همه درخواست‌ها</p>
        <p className="mt-1.5 text-2xl font-bold text-slate-900 sm:mt-2 sm:text-3xl">
          {loading ? "…" : stats.total ?? 0}
        </p>
        <p className="mt-2 text-xs text-[var(--muted)]">میز پذیرش کامل</p>
      </Link>
    </div>
  );
}

export function PreRegistrationRecentList({
  items,
  loading,
}: {
  items: DeskApplication[];
  loading?: boolean;
}) {
  const router = useRouter();

  if (loading) {
    return <p className="text-sm text-[var(--muted)]">در حال بارگذاری…</p>;
  }

  if (!items.length) {
    return <p className="text-sm text-[var(--muted)]">درخواستی ثبت نشده است.</p>;
  }

  return (
    <ul className="divide-y divide-[var(--border)] rounded-2xl border border-[var(--border)] bg-white shadow-card">
      {items.map((item) => {
        const name =
          item.student_name
          || `${String(item.form_data?.first_name ?? "")} ${String(item.form_data?.last_name ?? "")}`.trim()
          || item.applicant_national_code;

        return (
          <li key={item.id}>
            <button
              type="button"
              onClick={() => router.push(`/pre-registration/admissions/${item.id}`)}
              className="flex w-full items-center justify-between gap-3 px-4 py-3 text-right hover:bg-slate-50"
            >
              <div className="min-w-0">
                <p className="truncate text-sm font-semibold">{name}</p>
                <p className="mt-1 truncate text-xs text-[var(--muted)]">
                  {item.branch?.name} · {item.grade_level?.name}
                </p>
              </div>
              <span className="shrink-0 rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-700">
                {STATUS_LABELS[item.status] ?? item.status}
              </span>
            </button>
          </li>
        );
      })}
    </ul>
  );
}