import type { ReactNode } from 'react';
import {
  qualitativeMeta,
  scoreColor,
  statusMeta,
  type AcademicStatus,
  type QualitativeLevel,
} from '@/lib/reportCard';
import { persianDigits } from '@/lib/persianDate';

/** ردیف خلاصه‌ی نتیجه — معدل / رتبه کلاسی / وضعیت. مشترک بین هر سه مقطع. */
export function ResultSummaryRow({
  average,
  rank,
  classSize,
  status,
}: {
  average: number | null;
  rank: number | null;
  classSize: number | null;
  status: AcademicStatus;
}) {
  return (
    <div className="rc-summary-row">
      <SummaryCell label="معدل کل" accent>
        <ScoreValue value={average} strong />
        <span className="rc-summary-cell-scale"> / ۲۰</span>
      </SummaryCell>
      {rank != null && classSize != null && (
        <SummaryCell label="رتبه کلاسی">
          {persianDigits(rank)} <span className="rc-summary-cell-scale">از {persianDigits(classSize)}</span>
        </SummaryCell>
      )}
      <SummaryCell label="وضعیت">
        <StatusBadge status={status} />
      </SummaryCell>
    </div>
  );
}

/** پیل ارزیابی کیفی — «خیلی خوب / خوب / قابل قبول / نیاز به تلاش». */
export function QualitativePill({ level }: { level: QualitativeLevel }) {
  const meta = qualitativeMeta(level);
  return (
    <span
      className="rc-pill"
      style={{ color: meta.color, background: meta.bg, borderColor: `${meta.color}33` }}
    >
      {meta.label}
    </span>
  );
}

/** نشان وضعیت تحصیلی — «قبول / مشروط / مردود» با آیکون. */
export function StatusBadge({ status }: { status: AcademicStatus }) {
  const meta = statusMeta(status);
  const icon =
    status === 'pass' ? 'bi-check-circle-fill' : status === 'pending' ? 'bi-hourglass-split' : 'bi-x-circle-fill';
  return (
    <span
      className="rc-status-badge"
      style={{ color: meta.color, background: meta.bg, borderColor: `${meta.color}33` }}
    >
      <i className={`bi ${icon}`} aria-hidden="true" />
      {meta.label}
    </span>
  );
}

/** نمره‌ی روی مقیاس ۲۰ با رنگ‌بندی؛ خط تیره برای مقدار نامشخص. */
export function ScoreValue({ value, strong = false }: { value: number | null; strong?: boolean }) {
  if (value == null) return <span style={{ color: 'var(--color-text-muted)' }}>—</span>;
  const text = persianDigits(value.toFixed(value % 1 === 0 ? 0 : 2));
  return (
    <span style={{ color: scoreColor(value), fontWeight: strong ? 800 : 600 }}>{text}</span>
  );
}

/** کارت بخش با عنوان و آیکون — نسخه‌ی سبک‌تر panel-card برای درون کارنامه. */
export function SectionCard({
  title,
  icon,
  action,
  children,
  className,
  bodyPad = true,
}: {
  title: string;
  icon?: string;
  action?: ReactNode;
  children: ReactNode;
  className?: string;
  bodyPad?: boolean;
}) {
  return (
    <section className={`rc-section${className ? ` ${className}` : ''}`}>
      <header className="rc-section-head">
        <h3>
          {icon && <i className={`bi ${icon}`} aria-hidden="true" />}
          {title}
        </h3>
        {action}
      </header>
      <div className={bodyPad ? 'rc-section-body' : 'rc-section-body rc-section-body--flush'}>
        {children}
      </div>
    </section>
  );
}

/** سلول خلاصه (معدل کل / رتبه / حضور / وضعیت) — ردیف بالای کارنامه‌ی متوسطه. */
export function SummaryCell({
  label,
  children,
  accent = false,
}: {
  label: string;
  children: ReactNode;
  accent?: boolean;
}) {
  return (
    <div className={`rc-summary-cell${accent ? ' rc-summary-cell--accent' : ''}`}>
      <span className="rc-summary-cell-label">{label}</span>
      <span className="rc-summary-cell-value">{children}</span>
    </div>
  );
}

/** ردیف امضاها — معلم و مدیر (با جای مهر رسمی مدرسه). */
export function SignatureRow() {
  return (
    <div className="rc-signatures">
      <div className="rc-signature">
        <span className="rc-signature-line" />
        <span className="rc-signature-label">امضای معلم</span>
      </div>
      <div className="rc-signature rc-signature--stamp">
        <span className="rc-stamp-circle" aria-hidden="true">
          <i className="bi bi-patch-check" />
        </span>
        <span className="rc-signature-line" />
        <span className="rc-signature-label">مهر و امضای مدیر</span>
      </div>
    </div>
  );
}