import { router } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { ReportCardHeader } from '@/Components/ReportCard/ReportCardHeader';
import { StudentSummaryCard } from '@/Components/ReportCard/StudentSummaryCard';
import { TermSelector } from '@/Components/ReportCard/TermSelector';
import { ElementaryReportCard } from '@/Components/ReportCard/ElementaryReportCard';
import { MiddleSchoolReportCard } from '@/Components/ReportCard/MiddleSchoolReportCard';
import { HighSchoolReportCard } from '@/Components/ReportCard/HighSchoolReportCard';
import { buildReportCardModel, type ReportCardPageProps } from '@/lib/reportCard';

type SchoolYear = { id: number; title: string; status: string };

type Props = ReportCardPageProps & {
  schoolYears: SchoolYear[];
  selectedYear: number | null;
  selectedTerm: number | null;
};

export default function StudentReportCard(props: Props) {
  const { schoolYears, selectedYear, selectedTerm } = props;
  const model = buildReportCardModel(props, selectedTerm);

  function navigate(year: number | '', term: number | null) {
    const q: Record<string, string | number> = {};
    if (year) q.year = year;
    if (term) q.term = term;
    router.get('/student/report-card', q, { preserveScroll: true });
  }

  return (
    <AppLayout title="کارنامه">
      <div className="page-stack">
        <ReportCardHeader
          schoolName={model?.student.schoolName ?? 'مدرسه'}
          schoolLogoUrl={model?.student.schoolLogoUrl ?? null}
          academicYear={model?.student.academicYear ?? null}
          action={
            model && (
              <span className="rc-pdf-hint">
                <i className="bi bi-info-circle" aria-hidden="true" /> نسخه‌ی PDF یا لینک اشتراک‌گذاری را از مدیر یا معاون مدرسه درخواست کنید.
              </span>
            )
          }
        />

        {!model ? (
          <section className="panel-card">
            <div style={{ textAlign: 'center', padding: '2rem 1rem' }}>
              <div className="icon-badge" style={{ width: 56, height: 56, fontSize: '1.5rem', margin: '0 auto 1rem' }}>
                <i className="bi bi-file-earmark-bar-graph" />
              </div>
              <h2>کارنامه‌ای یافت نشد</h2>
              <p>اطلاعات دانش‌آموزی شما هنوز در سامانه ثبت نشده یا نمره‌ای برایتان درج نشده است.</p>
            </div>
          </section>
        ) : (
          <>
            <StudentSummaryCard
              student={model.student}
              level={model.level}
              attendanceChips={model.level === 'elementary' ? model.attendance : undefined}
            />

            <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
              <TermSelector value={selectedTerm} onChange={(term) => navigate(selectedYear ?? '', term)} />
              {schoolYears.length > 0 && (
                <div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center' }}>
                  <label style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>سال تحصیلی:</label>
                  <select
                    value={selectedYear ?? ''}
                    onChange={(e) => navigate(e.target.value === '' ? '' : Number(e.target.value), selectedTerm)}
                    className="form-select"
                    style={{ fontSize: '0.85rem' }}
                  >
                    {schoolYears.map((y) => (
                      <option key={y.id} value={y.id}>{y.title}</option>
                    ))}
                  </select>
                </div>
              )}
            </div>

            {model.level === 'elementary' && <ElementaryReportCard model={model} />}
            {model.level === 'middle' && <MiddleSchoolReportCard model={model} />}
            {model.level === 'high' && <HighSchoolReportCard model={model} />}
          </>
        )}
      </div>
    </AppLayout>
  );
}