import { useState } from 'react';
import { router } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { SelectInput } from '@/Components/Forms/SelectInput';
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 { DownloadPdfButton } from '@/Components/ReportCard/DownloadPdfButton';
import { ShareLinkPanel, type ShareTokenInfo } from '@/Components/ReportCard/ShareLinkPanel';
import { TeacherCommentEditor } from '@/Components/ReportCard/TeacherCommentEditor';
import { buildReportCardModel, type ReportCardPageProps } from '@/lib/reportCard';

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

type Props = ReportCardPageProps & {
  students: Option[];
  classrooms: Option[];
  selectedStudentId: number | null;
  schoolYears: SchoolYear[];
  selectedYear: number | null;
  selectedTerm: number | null;
  shareTokens: ShareTokenInfo[];
};

export default function ReportCard({
  students,
  classrooms,
  selectedStudentId,
  schoolYears,
  selectedYear,
  selectedTerm,
  shareTokens,
  ...cardProps
}: Props) {
  const [bulkScope, setBulkScope] = useState<'classroom' | 'year'>('classroom');
  const [bulkClassroom, setBulkClassroom] = useState('');
  const [bulkTerm, setBulkTerm] = useState('');
  const [bulkLayout, setBulkLayout] = useState<'pages' | 'stacked'>('pages');

  const model = buildReportCardModel(cardProps, selectedTerm);

  function handleSelect(event: React.ChangeEvent<HTMLSelectElement>) {
    const id = event.target.value;
    if (id) navigate(Number(id), selectedYear ?? '', selectedTerm);
  }

  function navigate(studentId: number, year: number | '', term: number | null) {
    const q: Record<string, string | number> = { student_id: studentId };
    if (year) q.year = year;
    if (term) q.term = term;
    router.get('/school/report-card', q, { preserveState: false });
  }

  const pdfHref = selectedStudentId
    ? `/school/report-card/pdf?${new URLSearchParams({
        student_id: String(selectedStudentId),
        ...(selectedYear ? { year: String(selectedYear) } : {}),
        ...(selectedTerm ? { term: String(selectedTerm) } : {}),
      }).toString()}`
    : '';

  return (
    <AppLayout title="کارنامه">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>کارنامه دانش‌آموز</h2>
            <p>برای مشاهده و صدور کارنامه، ابتدا دانش‌آموز را انتخاب کنید.</p>
          </div>
          <div className="action-row report-card-actions">
            <a className="btn btn-ghost" href="/school/grades"><i className="bi bi-arrow-right" /> بازگشت به نمرات</a>
          </div>
        </section>

        <div className="panel-card" style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
          <div style={{ flex: 1, minWidth: 240 }}>
            <SelectInput
              label="کارنامه تکی — انتخاب دانش‌آموز"
              value={selectedStudentId ?? ''}
              onChange={handleSelect}
              options={[
                { value: '', label: 'انتخاب کنید...' },
                ...students.map((s) => ({ value: s.value, label: s.label })),
              ]}
            />
          </div>
          {classrooms.length > 0 && (
            <div style={{ flex: 1, minWidth: 320 }}>
              <label style={{ fontSize: '0.85rem', fontWeight: 600, display: 'block', marginBottom: '0.3rem' }}>کارنامه دسته‌جمعی — چاپ انبوه</label>
              <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                <select
                  value={bulkScope}
                  onChange={(e) => setBulkScope(e.target.value as 'classroom' | 'year')}
                  className="form-select"
                  style={{ width: 130 }}
                >
                  <option value="classroom">یک کلاس</option>
                  <option value="year">همه کلاس‌ها (سال)</option>
                </select>
                {bulkScope === 'classroom' && (
                  <select
                    value={bulkClassroom}
                    onChange={(e) => setBulkClassroom(e.target.value)}
                    className="form-select"
                    style={{ flex: 1, minWidth: 140 }}
                  >
                    <option value="">انتخاب کلاس...</option>
                    {classrooms.map((c) => <option key={c.value} value={c.value}>{c.label}</option>)}
                  </select>
                )}
                <select className="form-select" value={bulkTerm} onChange={(e) => setBulkTerm(e.target.value)} style={{ width: 120 }}>
                  <option value="">سالانه</option>
                  <option value="1">نوبت اول</option>
                  <option value="2">نوبت دوم</option>
                </select>
                <select className="form-select" value={bulkLayout} onChange={(e) => setBulkLayout(e.target.value as 'pages' | 'stacked')} style={{ width: 160 }}>
                  <option value="pages">هر دانش‌آموز یک صفحه</option>
                  <option value="stacked">پشت سر هم</option>
                </select>
                {(bulkScope === 'year' || bulkClassroom) && (
                  <a
                    href={`/school/report-card/pdf/bulk?${new URLSearchParams({
                      scope: bulkScope,
                      ...(bulkScope === 'classroom' ? { classroom_id: bulkClassroom } : {}),
                      ...(selectedYear ? { school_year_id: String(selectedYear) } : {}),
                      ...(bulkTerm ? { term: bulkTerm } : {}),
                      layout: bulkLayout,
                    }).toString()}`}
                    target="_blank"
                    rel="noreferrer"
                    className="btn btn-primary btn-sm"
                    style={{ whiteSpace: 'nowrap' }}
                  >
                    <i className="bi bi-file-earmark-pdf" /> {bulkScope === 'year' ? 'PDF همه کلاس‌ها' : 'PDF کلاس'}
                  </a>
                )}
              </div>
            </div>
          )}
        </div>

        {selectedStudentId && !model && (
          <section className="panel-card">
            <h2>نمره‌ای ثبت نشده</h2>
            <p>برای این دانش‌آموز هنوز نمره‌ای توسط معلم ثبت نشده است.</p>
          </section>
        )}

        {selectedStudentId && model && (
          <>
            <ReportCardHeader
              schoolName={model.student.schoolName}
              schoolLogoUrl={model.student.schoolLogoUrl}
              academicYear={model.student.academicYear}
              action={<DownloadPdfButton href={pdfHref} label="دانلود PDF کارنامه" />}
            />

            <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(selectedStudentId, 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(selectedStudentId, 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} />}

            <TeacherCommentEditor
              saveUrl={`/teacher/students/${selectedStudentId}/report-card-comment`}
              schoolYearId={selectedYear}
              term={selectedTerm}
              initialComment={cardProps.teacherComment ?? null}
              reloadOnly={['teacherComment']}
            />

            <ShareLinkPanel
              studentId={selectedStudentId}
              schoolYearId={selectedYear}
              term={selectedTerm}
              tokens={shareTokens}
            />
          </>
        )}
      </div>
    </AppLayout>
  );
}