import { persianDigits } from '@/lib/persianDate';
import type { ReportCardModel } from '@/lib/reportCard';
import { QualitativePill, ResultSummaryRow, SectionCard, SignatureRow } from './shared';
import { AttendanceSummary } from './AttendanceSummary';
import { TeacherComment } from './TeacherComment';
import { PerformanceChart } from './PerformanceChart';

/** کارنامه‌ی ابتدایی — ارزیابی توصیفی (خیلی خوب/خوب/قابل قبول/نیاز به تلاش) + مهارت‌های فردی. */
export function ElementaryReportCard({ model }: { model: ReportCardModel }) {
  const showTerm1 = model.term == null || model.term === 1;
  const showTerm2 = model.term == null || model.term === 2;
  const showFinal = model.term == null;

  return (
    <div className="rc-card">
      <ResultSummaryRow average={model.average} rank={model.rank} classSize={model.classSize} status={model.status} />

      <SectionCard title="ارزیابی توصیفی دروس" icon="bi-journal-bookmark-fill" bodyPad={false}>
        {model.qualitativeSubjects.length === 0 ? (
          <p className="rc-empty">هنوز نمره‌ای برای این نوبت ثبت نشده است.</p>
        ) : (
          <div className="rc-table-scroll">
            <table className="rc-table">
              <thead>
                <tr>
                  <th className="rc-table-subject-col">نام درس</th>
                  {showTerm1 && <th>نوبت اول</th>}
                  {showTerm2 && <th>نوبت دوم</th>}
                  {showFinal && <th>نتیجه نهایی</th>}
                </tr>
              </thead>
              <tbody>
                {model.qualitativeSubjects.map((row) => (
                  <tr key={row.subjectId}>
                    <td className="rc-table-subject-col">{row.subject}</td>
                    {showTerm1 && <td><QualitativePill level={row.term1} /></td>}
                    {showTerm2 && <td><QualitativePill level={row.term2} /></td>}
                    {showFinal && <td><QualitativePill level={row.finalResult} /></td>}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </SectionCard>

      <div className="rc-card-columns">
        <AttendanceSummary attendance={model.attendance} />
        <PerformanceChart data={model.termAverages} height={160} />
      </div>

      <TeacherComment comment={model.teacherComment} isPlaceholder={!model.hasTeacherComment} />

      <div className="rc-footer-year">سال تحصیلی {persianDigits(model.student.academicYear ?? '—')}</div>

      <SignatureRow />
    </div>
  );
}