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

type Props = {
  classroom: { id: number; name: string };
};

export default function ClassImportStudents({ classroom }: Props) {
  const form = useForm({ file: null as File | null });

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    form.post(`/school/classes/${classroom.id}/import-students`, {
      forceFormData: true,
    });
  }

  return (
    <AppLayout title={`ورود گروهی دانش‌آموز — ${classroom.name}`}>
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-upload" /> ورود گروهی دانش‌آموز به کلاس «{classroom.name}»</h2>
            <p>فایل CSV را آپلود کنید. ستون‌ها به‌صورت خودکار شناسایی می‌شوند و دانش‌آموزان الفبایی مرتب می‌گردند.</p>
          </div>
          <a className="btn btn-ghost" href="/school/classes">
            <i className="bi bi-arrow-right" /> بازگشت
          </a>
        </section>

        <section className="panel-card">
          <h3>ساختار فایل CSV</h3>
          <p style={{ marginBottom: 12 }}>فایل باید حداقل یکی از این ستون‌ها را داشته باشد:</p>
          <div className="table-wrap">
            <table className="data-table">
              <thead>
                <tr>
                  <th>نام ستون (فارسی)</th>
                  <th>نام ستون (انگلیسی)</th>
                  <th>اجباری</th>
                </tr>
              </thead>
              <tbody>
                <tr><td>نام و نام خانوادگی</td><td>full_name</td><td>اگر نام و نام‌خانوادگی جدا نباشد</td></tr>
                <tr><td>نام</td><td>first_name</td><td>—</td></tr>
                <tr><td>نام خانوادگی</td><td>last_name</td><td>—</td></tr>
                <tr><td>کد ملی</td><td>national_code</td><td>اختیاری</td></tr>
                <tr><td>نام پدر</td><td>father_name</td><td>اختیاری</td></tr>
              </tbody>
            </table>
          </div>
          <div className="help-tip" style={{ marginTop: 12 }}>
            <i className="bi bi-info-circle" /> دانش‌آموزی که کد ملی تکراری داشته باشد، فقط به کلاس اضافه می‌شود (ثبت مجدد نمی‌شود). مرتب‌سازی: الفبایی بر اساس نام خانوادگی.
          </div>
        </section>

        <form className="panel-card" onSubmit={handleSubmit}>
          <h3>آپلود فایل</h3>
          <div className="field-wrap" style={{ maxWidth: 400 }}>
            <label className="field-label">فایل CSV</label>
            <input
              type="file"
              accept=".csv,.txt"
              className="field-input"
              onChange={(e) => form.setData('file', e.target.files?.[0] ?? null)}
            />
            {form.errors.file && <span className="field-error">{form.errors.file}</span>}
          </div>
          <div className="action-row" style={{ marginTop: 16 }}>
            <button className="btn btn-primary" type="submit" disabled={form.processing || !form.data.file} data-no-spin>
              <i className="bi bi-upload" /> ورود دانش‌آموزان
            </button>
          </div>
        </form>
      </div>
    </AppLayout>
  );
}