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;
  classrooms: { value: number; label: string }[];
  subjects: { value: number; label: string }[];
  activeSchoolYear: { id: number; title: string } | null;
};

export default function BulkGradeEntry({ students, classroomId, classroomName, subjectId, subjectName, maxScore, classrooms, subjects, activeSchoolYear }: Props) {
  const form = useForm<{
    classroom_id: number;
    subject_id: number;
    max_score: number;
    scores: Record<number, string>;
  }>({
    classroom_id: classroomId,
    subject_id: subjectId,
    max_score: maxScore,
    scores: {},
  });

  function changeFilter(key: 'classroom_id' | 'subject_id', 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, 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></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>
            <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>

        {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 ? 'در حال ثبت...' : 'ثبت نمرات'}
                </button>
              </div>
            </div>
          </form>
        )}
      </div>
    </AppLayout>
  );
}