import {
  adminInputCls,
  adminLabelCls,
  statusBadgeClass,
  statusLabel,
} from "@/app/admin/_components/utils";

export function PageHeader({
  title,
  description,
  action,
}: {
  title: string;
  description?: string;
  action?: React.ReactNode;
}) {
  return (
    <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-[#132b87]">
          {title}
        </h1>
        {description && (
          <p className="mt-1 text-sm text-[#5a688d]">{description}</p>
        )}
      </div>
      {action}
    </div>
  );
}

export function StatCard({
  label,
  value,
  hint,
}: {
  label: string;
  value: number | string;
  hint?: string;
}) {
  return (
    <div className="rounded-2xl border border-[#d9e2f7] bg-white p-5 shadow-[0_8px_24px_rgba(31,63,184,0.05)]">
      <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[#5a688d]">
        {label}
      </p>
      <p className="mt-3 text-3xl font-bold text-[#132b87]">{value}</p>
      {hint && <p className="mt-1 text-xs text-[#7a88ad]">{hint}</p>}
    </div>
  );
}

export function StatusBadge({ status }: { status: string }) {
  return (
    <span
      className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-semibold ${statusBadgeClass(status)}`}
    >
      {statusLabel(status)}
    </span>
  );
}

export function EmptyState({ message }: { message: string }) {
  return (
    <div className="rounded-2xl border border-dashed border-[#d9e2f7] bg-white px-6 py-14 text-center text-sm text-[#5a688d]">
      {message}
    </div>
  );
}

export function FieldError({ message }: { message?: string }) {
  if (!message) return null;
  return (
    <p className="mt-1 text-xs text-red-600" role="alert">
      {message}
    </p>
  );
}

export function AdminField({
  label,
  name,
  children,
  error,
}: {
  label: string;
  name?: string;
  children: React.ReactNode;
  error?: string;
}) {
  return (
    <label className="block" htmlFor={name}>
      <span className={adminLabelCls}>{label}</span>
      {children}
      <FieldError message={error} />
    </label>
  );
}

export { adminInputCls };
