import { router, useForm } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';

type Student = {
  id: number;
  name: string;
  studentCode: string;
};

type Props = {
  students: Student[];
  classroomId: number;
  classroomName: string;
  subjectId: number;
  subjectName: string;
  maxScore: number;
  term: number;
  hasTermSupport: boolean;
  existingScores: Record<number, string>;
  classrooms: { value: number; label: string }[];
  subjects: { value: number; label: string }[];
  activeSchoolYear: { id: number; title: string } | null;
};

const TERM_LABELS: Record<number, string> = {
  1: 'نیمسال اول',
  2: 'نیمسال دوم',
};

export default function BulkGradeEntry({ students, classroomId, classroomName, subjectId, subjectName, maxScore, term, hasTermSupport, existingScores, classrooms, subjects, activeSchoolYear }: Props) {
  const form = useForm<{
    classroom_id: number;
    subject_id: number;
    term: number;
    max_score: number;
    scores: Record<number, string>;
  }>({
    classroom_id: classroomId,
    subject_id: subjectId,
    term,
    max_score: maxScore,
    // نمرات ثبت‌شده‌ی قبلی برای همین کلاس/درس/نیمسال پیش‌پر می‌شوند تا قابل ویرایش باشند
    scores: { ...(existingScores ?? {}) },
  });

  const savedCount = Object.keys(existingScores ?? {}).length;

  function changeFilter(key: 'classroom_id' | 'subject_id' | 'term', val: number) {
    router.get('/teacher/grades/bulk', {
      classroom_id: key === 'classroom_id' ? val : form.data.classroom_id,
      subject_id: key === 'subject_id' ? val : form.data.subject_id,
      term: key === 'term' ? val : form.data.term,
      max_score: form.data.max_score,
    }, { preserveScroll: false });
  }

  function submit(e: React.FormEvent) {
    e.preventDefault();
    form.post('/teacher/grades/bulk', { preserveScroll: true });
  }

  return (
    <AppLayout title="ثبت گروهی نمرات">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>ثبت گروهی نمرات</h2>
            <p>نمرات کلاس <strong>{classroomName}</strong> — درس <strong>{subjectName}</strong> — <strong>{TERM_LABELS[form.data.term] ?? 'نیمسال اول'}</strong></p>
            {activeSchoolYear && (
              <p style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)', marginTop: '0.25rem' }}>
                <i className="bi bi-calendar2-range" style={{ marginLeft: '0.3rem' }} />
                سال تحصیلی فعال: <strong>{activeSchoolYear.title}</strong>
              </p>
            )}
          </div>
          <a className="btn btn-soft" href="/teacher/grades">بازگشت به نمرات</a>
        </section>

        {/* Filters */}
        <div className="panel-card">
          <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
            <div className="form-group" style={{ flex: 1, minWidth: 180 }}>
              <label className="form-label">کلاس</label>
              <select className="form-select" value={form.data.classroom_id} onChange={(e) => changeFilter('classroom_id', Number(e.target.value))}>
                {classrooms.map((c) => <option key={c.value} value={c.value}>{c.label}</option>)}
              </select>
            </div>
            <div className="form-group" style={{ flex: 1, minWidth: 180 }}>
              <label className="form-label">درس</label>
              <select className="form-select" value={form.data.subject_id} onChange={(e) => changeFilter('subject_id', Number(e.target.value))}>
                {subjects.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}
              </select>
            </div>
            {hasTermSupport && (
              <div className="form-group" style={{ flex: 1, minWidth: 160 }}>
                <label className="form-label">نیمسال</label>
                <select className="form-select" value={form.data.term} onChange={(e) => changeFilter('term', Number(e.target.value))}>
                  <option value={1}>نیمسال اول</option>
                  <option value={2}>نیمسال دوم</option>
                </select>
              </div>
            )}
            <div className="form-group" style={{ minWidth: 120 }}>
              <label className="form-label">نمره کل</label>
              <input
                type="number"
                className="form-input"
                value={form.data.max_score}
                min={1}
                max={100}
                onChange={(e) => form.setData('max_score', Number(e.target.value))}
              />
            </div>
          </div>
        </div>

        {savedCount > 0 && (
          <div className="panel-card" style={{ background: 'var(--color-info-soft, rgba(59,130,246,0.08))', borderColor: 'var(--color-info, #3b82f6)' }}>
            <p style={{ margin: 0, fontSize: '0.9rem' }}>
              <i className="bi bi-info-circle" style={{ marginLeft: '0.4rem' }} />
              نمرات ثبت‌شده‌ی قبلی برای <strong>{TERM_LABELS[form.data.term] ?? 'نیمسال اول'}</strong> بارگذاری شد ({savedCount} نمره). می‌توانید نمرات را ویرایش کنید؛ فقط موارد تغییریافته به‌روزرسانی می‌شوند.
            </p>
          </div>
        )}

        {students.length === 0 ? (
          <div className="panel-card" style={{ textAlign: 'center', padding: '2rem', opacity: .6 }}>
            دانش‌آموزی برای این کلاس یافت نشد.
          </div>
        ) : (
          <form onSubmit={submit}>
            <div className="panel-card">
              <div className="table-wrap">
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>نام دانش‌آموز</th>
                      <th style={{ minWidth: 120 }}>نمره (از {form.data.max_score})</th>
                    </tr>
                  </thead>
                  <tbody>
                    {students.map((s, i) => (
                      <tr key={s.id}>
                        <td style={{ opacity: .5 }}>{i + 1}</td>
                        <td>{s.name}</td>
                        <td>
                          <input
                            type="number"
                            className="form-input form-input--sm"
                            min={0}
                            max={form.data.max_score}
                            step={0.25}
                            placeholder="—"
                            value={form.data.scores[s.id] ?? ''}
                            onChange={(e) => form.setData('scores', { ...form.data.scores, [s.id]: e.target.value })}
                          />
                          {form.errors[`scores.${s.id}` as keyof typeof form.errors] && (
                            <span className="form-error">{form.errors[`scores.${s.id}` as keyof typeof form.errors]}</span>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div style={{ display: 'flex', gap: '.75rem', justifyContent: 'flex-end', marginTop: '1.25rem', paddingTop: '1rem', borderTop: '1px solid var(--color-border, #333)' }}>
                <button type="button" className="btn btn-soft" onClick={() => router.visit('/teacher/grades')}>انصراف</button>
                <button type="submit" className="btn btn-primary" disabled={form.processing}>
                  {form.processing ? 'در حال ثبت...' : (savedCount > 0 ? 'ذخیره تغییرات' : 'ثبت نمرات')}
                </button>
              </div>
            </div>
          </form>
        )}
      </div>
    </AppLayout>
  );
}