import { persianDigits } from '@/lib/persianDate';
import { avatarColor, initials } from '@/lib/roles';
import type { EducationLevel, ReportCardStudent } from '@/lib/reportCard';

type Props = {
  student: ReportCardStudent;
  level: EducationLevel;
  /** برای ابتدایی، تراشه‌های حضور کنار مشخصات نمایش داده می‌شوند. */
  attendanceChips?: { presentPercent: number; excusedAbsence: number; unexcusedAbsence: number };
};

/** کارت مشخصات دانش‌آموز — آواتار، نام، پایه/رشته، کلاس، سال تحصیلی. */
export function StudentSummaryCard({ student, level, attendanceChips }: Props) {
  const gradeLine = [student.gradeLabel, student.fieldOfStudy].filter(Boolean).join(' — ');

  return (
    <section className="rc-student-card">
      <div className="rc-student-main">
        <div className="rc-avatar">
          {student.avatarUrl ? (
            <img src={student.avatarUrl} alt={student.fullName} />
          ) : (
            <span style={{ background: avatarColor(student.fullName) }}>
              {initials(student.fullName)}
            </span>
          )}
        </div>
        <div className="rc-student-meta">
          <strong className="rc-student-name">{student.fullName}</strong>
          <span className="rc-student-grade">{gradeLine}</span>
          <div className="rc-student-tags">
            {student.className && (
              <span className="rc-student-tag">
                <i className="bi bi-mortarboard" aria-hidden="true" /> کلاس {student.className}
              </span>
            )}
            {student.academicYear && (
              <span className="rc-student-tag">
                <i className="bi bi-calendar3" aria-hidden="true" /> سال تحصیلی {student.academicYear}
              </span>
            )}
            {student.studentCode !== '—' && (
              <span className="rc-student-tag">
                <i className="bi bi-hash" aria-hidden="true" /> کد {persianDigits(student.studentCode)}
              </span>
            )}
          </div>
        </div>
      </div>

      {level === 'elementary' && attendanceChips && (
        <div className="rc-attendance-chips">
          <AttendanceChip
            icon="bi-calendar-check"
            tone="#0EA678"
            label="حضور"
            value={`${persianDigits(attendanceChips.presentPercent)}٪`}
          />
          <AttendanceChip
            icon="bi-shield-check"
            tone="#F59E0B"
            label="غیبت موجه"
            value={`${persianDigits(attendanceChips.excusedAbsence)} روز`}
          />
          <AttendanceChip
            icon="bi-x-octagon"
            tone="#DC2626"
            label="غیبت غیرموجه"
            value={`${persianDigits(attendanceChips.unexcusedAbsence)} روز`}
          />
        </div>
      )}
    </section>
  );
}

function AttendanceChip({
  icon,
  tone,
  label,
  value,
}: {
  icon: string;
  tone: string;
  label: string;
  value: string;
}) {
  return (
    <div className="rc-attendance-chip">
      <span className="rc-attendance-chip-icon" style={{ color: tone, background: `${tone}18` }}>
        <i className={`bi ${icon}`} aria-hidden="true" />
      </span>
      <span className="rc-attendance-chip-body">
        <small>{label}</small>
        <strong>{value}</strong>
      </span>
    </div>
  );
}