import { useState } from 'react';
import { useForm } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { TextInput } from '@/Components/Forms/TextInput';

type Grade = { id: number; number: number; nameFa: string; nameEn: string | null; status: string };
type Props = { grades: Grade[] };

export default function GradeLevels({ grades }: Props) {
  const create = useForm({ number: '', name_fa: '', name_en: '' });
  const [edit, setEdit] = useState<Grade | null>(null);
  const editForm = useForm({ name_fa: '', name_en: '', status: 'active' });
  function start(g: Grade) { setEdit(g); editForm.setData({ name_fa: g.nameFa, name_en: g.nameEn ?? '', status: g.status }); }
  return (
    <AppLayout title="پایه‌های تحصیلی">
      <div className="page-stack">
        <section className="section-header"><div><h2>مدیریت پایه‌های تحصیلی</h2><p>افزودن، ویرایش و غیرفعال‌سازی پایه‌ها.</p></div></section>
        <form className="panel-card" onSubmit={(e) => { e.preventDefault(); create.post('/super-admin/grade-levels', { onSuccess: () => create.reset() }); }}>
          <div className="form-grid">
            <TextInput label="شماره پایه" type="number" value={create.data.number} onChange={(e) => create.setData('number', e.target.value)} error={create.errors.number} />
            <TextInput label="نام فارسی" value={create.data.name_fa} onChange={(e) => create.setData('name_fa', e.target.value)} error={create.errors.name_fa} />
            <TextInput label="نام انگلیسی" value={create.data.name_en} onChange={(e) => create.setData('name_en', e.target.value)} />
          </div>
          <button className="btn btn-primary" disabled={create.processing} type="submit">افزودن</button>
        </form>
        {edit && (
          <form className="panel-card" onSubmit={(e) => { e.preventDefault(); editForm.put(`/super-admin/grade-levels/${edit.id}`, { onSuccess: () => setEdit(null) }); }}>
            <h2>ویرایش پایه {edit.number}</h2>
            <div className="form-grid">
              <TextInput label="نام فارسی" value={editForm.data.name_fa} onChange={(e) => editForm.setData('name_fa', e.target.value)} />
              <TextInput label="نام انگلیسی" value={editForm.data.name_en} onChange={(e) => editForm.setData('name_en', e.target.value)} />
              <div className="field-wrap"><label className="field-label">وضعیت</label><select className="field-input" value={editForm.data.status} onChange={(e) => editForm.setData('status', e.target.value)}><option value="active">فعال</option><option value="inactive">غیرفعال</option></select></div>
            </div>
            <div className="action-row"><button className="btn btn-primary" disabled={editForm.processing} type="submit">ذخیره</button><button className="btn btn-ghost" type="button" onClick={() => setEdit(null)}>لغو</button></div>
          </form>
        )}
        <div className="table-wrap"><table className="data-table"><thead><tr><th>شماره</th><th>نام</th><th>انگلیسی</th><th>وضعیت</th><th>عملیات</th></tr></thead><tbody>{grades.map((g) => <tr key={g.id}><td>{g.number}</td><td>{g.nameFa}</td><td>{g.nameEn ?? '—'}</td><td>{g.status}</td><td><button className="btn btn-soft btn-sm" onClick={() => start(g)}>ویرایش</button></td></tr>)}</tbody></table></div>
      </div>
    </AppLayout>
  );
}