import { useState } from 'react';
import { useForm, router } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { SelectInput } from '@/Components/Forms/SelectInput';
import { TextInput } from '@/Components/Forms/TextInput';
import { formatCount } from '@/lib/formatters';

type Classroom = {
  id: number;
  name: string;
  grade: string;
  gradeLevelId: number | null;
  studentsCount: number;
  capacity: number | null;
  status: string;
};

type Props = {
  enabledGrades: string[];
  gradeOptions: Array<{ value: string | number; label: string }>;
  classes: Classroom[];
};

const blank = { name: '', grade_level_id: '', capacity: '' };

export default function Classes({ enabledGrades, gradeOptions, classes }: Props) {
  const [editId, setEditId] = useState<number | null>(null);
  const form = useForm({ ...blank });

  function startEdit(classroom: Classroom) {
    setEditId(classroom.id);
    form.setData({
      name: classroom.name,
      grade_level_id: classroom.gradeLevelId ? String(classroom.gradeLevelId) : '',
      capacity: classroom.capacity ? String(classroom.capacity) : '',
    });
    document.getElementById('class-form')?.scrollIntoView({ behavior: 'smooth' });
  }

  function cancelEdit() {
    setEditId(null);
    form.reset();
    form.clearErrors();
  }

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    if (editId) {
      form.put(`/school/classes/${editId}`, {
        preserveScroll: true,
        onSuccess: () => { form.reset(); setEditId(null); },
      });
    } else {
      form.post('/school/classes', {
        preserveScroll: true,
        onSuccess: () => form.reset(),
      });
    }
  }

  function handleDelete(classroom: Classroom) {
    if (!confirm(`آیا می‌خواهید کلاس «${classroom.name}» را حذف کنید؟\nدانش‌آموزان از این کلاس خارج می‌شوند.`)) return;
    router.delete(`/school/classes/${classroom.id}`, { preserveScroll: true });
  }

  return (
    <AppLayout title="کلاس‌ها">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>کلاس‌ها و پایه‌های مجاز</h2>
            <p>کلاس فقط در پایه‌هایی ساخته می‌شود که مدیر کل برای license مدرسه فعال کرده باشد.</p>
          </div>
        </section>

        <form id="class-form" className="panel-card" onSubmit={handleSubmit}>
          <h2>{editId ? 'ویرایش کلاس' : 'ساخت کلاس'}</h2>
          <div className="form-grid">
            <TextInput label="نام کلاس" placeholder="مثلا دهم ریاضی ۱" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} error={form.errors.name} />
            <SelectInput label="پایه" value={form.data.grade_level_id} onChange={(e) => form.setData('grade_level_id', e.target.value)} options={[{ value: '', label: 'انتخاب پایه' }, ...gradeOptions]} />
            <TextInput label="ظرفیت" type="number" min="1" value={form.data.capacity} onChange={(e) => form.setData('capacity', e.target.value)} error={form.errors.capacity} />
          </div>
          <div className="action-row">
            <button className="btn btn-primary" disabled={form.processing} type="submit">
              <i className={`bi ${editId ? 'bi-pencil-square' : 'bi-plus-square'}`} />
              {editId ? 'ذخیره تغییرات' : 'ثبت کلاس'}
            </button>
            {editId && (
              <button className="btn btn-ghost" type="button" onClick={cancelEdit}>
                انصراف
              </button>
            )}
          </div>
        </form>

        <section className="card-grid">
          {enabledGrades.map((grade) => (
            <article className="panel-card" key={grade}>
              <h3>{grade}</h3>
              <p>فعال برای این مدرسه</p>
              <span className="status-pill">مجاز</span>
            </article>
          ))}
          {enabledGrades.length === 0 && (
            <article className="panel-card">
              <h3>پایه‌ای فعال نشده</h3>
              <p>مدیر کل باید پایه‌های مجاز مدرسه را در license فعال کند.</p>
            </article>
          )}
        </section>

        {classes.length > 0 ? (
          <div className="table-wrap">
            <table className="data-table">
              <thead>
                <tr>
                  <th>کلاس</th>
                  <th>پایه</th>
                  <th>تعداد دانش‌آموز</th>
                  <th>ظرفیت</th>
                  <th>وضعیت</th>
                  <th>عملیات</th>
                </tr>
              </thead>
              <tbody>
                {classes.map((classroom) => (
                  <tr key={classroom.id} className={editId === classroom.id ? 'row-editing' : ''}>
                    <td>{classroom.name}</td>
                    <td>{classroom.grade}</td>
                    <td>{formatCount(classroom.studentsCount)}</td>
                    <td>{classroom.capacity ? formatCount(classroom.capacity) : '—'}</td>
                    <td>{classroom.status === 'active' ? 'فعال' : 'غیرفعال'}</td>
                    <td>
                      <div className="action-row action-row--compact">
                        <a className="btn btn-soft btn-sm" href={`/school/classes/${classroom.id}/import-students`} title="ورود گروهی دانش‌آموز از CSV">
                          <i className="bi bi-upload" /> CSV
                        </a>
                        <button className="btn btn-ghost btn-sm" type="button" onClick={() => startEdit(classroom)}>
                          <i className="bi bi-pencil" />
                        </button>
                        <button className="btn btn-danger-ghost btn-sm" type="button" onClick={() => handleDelete(classroom)}>
                          <i className="bi bi-trash" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <section className="panel-card">
            <h2>هنوز کلاسی ساخته نشده</h2>
            <p>بعد از ساخت کلاس، اطلاعات واقعی کلاس‌ها و تعداد دانش‌آموزان از دیتابیس اینجا می‌آید.</p>
          </section>
        )}
      </div>
    </AppLayout>
  );
}