import { useState, useEffect } from 'react';
import { useForm, usePage } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';

type Classroom = {
  id: number;
  name: string;
  gradeLevelId: number | null;
  gradeName: string;
  gradeNumber: number;
};

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

type Props = {
  classrooms: Classroom[];
};

export default function StudentPromotion({ classrooms }: Props) {
  const { props } = usePage<{ flash?: { success?: string } }>();
  const flash = (props as { flash?: { success?: string } }).flash;

  const [sourceClassId, setSourceClassId] = useState('');
  const [students, setStudents] = useState<Student[]>([]);
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  const [loading, setLoading] = useState(false);

  const form = useForm({
    source_classroom_id: '',
    target_classroom_id: '',
    student_ids: [] as number[],
  });

  useEffect(() => {
    if (!sourceClassId) {
      setStudents([]);
      setSelectedIds([]);
      return;
    }
    setLoading(true);
    fetch(`/school/students/promote/class/${sourceClassId}`, {
      headers: { Accept: 'application/json' },
    })
      .then((r) => { if (!r.ok) throw new Error(r.statusText); return r.json(); })
      .then((data) => {
        setStudents(data.students ?? []);
        setSelectedIds((data.students ?? []).map((s: Student) => s.id));
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, [sourceClassId]);

  function toggleStudent(id: number) {
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
    );
  }

  function toggleAll() {
    if (selectedIds.length === students.length) {
      setSelectedIds([]);
    } else {
      setSelectedIds(students.map((s) => s.id));
    }
  }

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    if (selectedIds.length === 0) return alert('هیچ دانش‌آموزی انتخاب نشده است.');
    if (!form.data.target_classroom_id) return alert('کلاس مقصد را انتخاب کنید.');
    if (!confirm(`انتقال ${selectedIds.length} دانش‌آموز به کلاس مقصد؟`)) return;
    form.setData('student_ids', selectedIds);
    form.setData('source_classroom_id', sourceClassId);
    form.post('/school/students/promote', { preserveScroll: true });
  }

  const targetOptions = classrooms.filter((c) => String(c.id) !== sourceClassId);

  return (
    <AppLayout title="انتقال و ارتقاء پایه دانش‌آموزان">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-arrow-up-circle" /> انتقال و ارتقاء پایه</h2>
            <p>دانش‌آموزان یک کلاس را به‌صورت دسته‌جمعی به کلاس دیگر منتقل کنید.</p>
          </div>
        </section>

        {flash?.success && (
          <div className="alert alert-success" style={{ padding: '0.6rem 0.9rem', background: '#f0fdf4', border: '1px solid #86efac', borderRadius: 8, color: '#166534', display: 'flex', alignItems: 'center', gap: 8 }}>
            <i className="bi bi-check-circle-fill" /> {flash.success}
          </div>
        )}

        <form className="panel-card" onSubmit={handleSubmit}>
          <div className="form-grid" style={{ gridTemplateColumns: '1fr 1fr' }}>
            <div className="field-wrap">
              <label className="field-label">کلاس مبدا <span className="text-danger">*</span></label>
              <select
                className="field-input"
                value={sourceClassId}
                onChange={(e) => {
                  setSourceClassId(e.target.value);
                  form.setData('source_classroom_id', e.target.value);
                }}
              >
                <option value="">انتخاب کلاس مبدا</option>
                {classrooms.map((c) => (
                  <option key={c.id} value={String(c.id)}>
                    {c.name} — {c.gradeName}
                  </option>
                ))}
              </select>
            </div>

            <div className="field-wrap">
              <label className="field-label">کلاس مقصد <span className="text-danger">*</span></label>
              <select
                className="field-input"
                value={form.data.target_classroom_id}
                onChange={(e) => form.setData('target_classroom_id', e.target.value)}
                disabled={!sourceClassId}
              >
                <option value="">انتخاب کلاس مقصد</option>
                {targetOptions.map((c) => (
                  <option key={c.id} value={String(c.id)}>
                    {c.name} — {c.gradeName}
                  </option>
                ))}
              </select>
            </div>
          </div>

          {loading && (
            <div style={{ textAlign: 'center', padding: '1.5rem', color: 'var(--color-text-muted)' }}>
              <i className="bi bi-hourglass-split" /> در حال بارگذاری دانش‌آموزان…
            </div>
          )}

          {!loading && students.length > 0 && (
            <>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.75rem' }}>
                <h3 style={{ margin: 0 }}>
                  دانش‌آموزان کلاس مبدا ({students.length} نفر)
                </h3>
                <label style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontWeight: 600, fontSize: '0.875rem' }}>
                  <input
                    type="checkbox"
                    checked={selectedIds.length === students.length}
                    onChange={toggleAll}
                  />
                  {selectedIds.length === students.length ? 'لغو انتخاب همه' : 'انتخاب همه'}
                </label>
              </div>

              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
                gap: '0.5rem',
                marginBottom: '1.25rem',
              }}>
                {students.map((student) => (
                  <label
                    key={student.id}
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: 8,
                      padding: '0.5rem 0.75rem',
                      border: `1px solid ${selectedIds.includes(student.id) ? 'var(--color-primary)' : 'var(--color-border)'}`,
                      borderRadius: 8,
                      background: selectedIds.includes(student.id)
                        ? 'var(--color-bg-soft)'
                        : 'var(--color-surface)',
                      cursor: 'pointer',
                      fontSize: '0.875rem',
                      transition: 'border-color .1s, background .1s',
                    }}
                  >
                    <input
                      type="checkbox"
                      checked={selectedIds.includes(student.id)}
                      onChange={() => toggleStudent(student.id)}
                      style={{ flexShrink: 0 }}
                    />
                    <div>
                      <div style={{ fontWeight: 600 }}>{student.name}</div>
                      {student.code && <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>{student.code}</div>}
                    </div>
                  </label>
                ))}
              </div>

              <div className="action-row">
                <button
                  className="btn btn-primary"
                  type="submit"
                  disabled={form.processing || selectedIds.length === 0 || !form.data.target_classroom_id}
                >
                  <i className="bi bi-arrow-up-circle" /> انتقال {selectedIds.length} دانش‌آموز
                </button>
              </div>

              {form.errors.student_ids && (
                <p style={{ color: 'var(--color-danger)', fontSize: '0.875rem', marginTop: '0.5rem' }}>{form.errors.student_ids}</p>
              )}
            </>
          )}

          {!loading && sourceClassId && students.length === 0 && (
            <div style={{ textAlign: 'center', padding: '1.5rem', color: 'var(--color-text-muted)' }}>
              <i className="bi bi-person-x" /> هیچ دانش‌آموز فعالی در این کلاس وجود ندارد.
            </div>
          )}
        </form>

        <section className="panel-card" style={{ background: '#fffbeb', border: '1px solid #fde68a' }}>
          <h3 style={{ color: '#92400e', marginBottom: '0.5rem' }}><i className="bi bi-exclamation-triangle" /> توجه</h3>
          <ul style={{ color: '#78350f', fontSize: '0.875rem', margin: 0, paddingRight: '1.25rem' }}>
            <li>دانش‌آموزان منتقل‌شده از کلاس مبدا خارج می‌شوند و وارد کلاس مقصد می‌شوند.</li>
            <li>پایه تحصیلی دانش‌آموز به پایه کلاس مقصد به‌روزرسانی می‌شود.</li>
            <li>نمرات و حضورغیاب قبلی دست‌نخورده باقی می‌مانند.</li>
          </ul>
        </section>
      </div>
    </AppLayout>
  );
}