import { useForm } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { DataTable } from '@/Components/Tables/DataTable';
import { formatCount } from '@/lib/formatters';

type ImportJob = {
  status: string;
  total: number;
  valid: number;
  invalid: number;
  createdAt: string;
};

type Props = {
  jobs?: ImportJob[];
};

export default function ImportStudents({ jobs = [] }: Props) {
  const form = useForm<{ file: File | null }>({ file: null });
  const rows = jobs.map((job) => [job.status, formatCount(job.total), formatCount(job.valid), formatCount(job.invalid), job.createdAt]);

  return (
    <AppLayout title="Import دانش‌آموزان">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>ورود دسته‌ای با CSV استاندارد دانشیار</h2>
            <p>رمزهای داخل CSV در backend hash می‌شوند و هیچ password خامی در database ذخیره نمی‌شود.</p>
          </div>
          <a className="btn btn-soft" href="/documentation/templates/students-import-template.csv"><i className="bi bi-filetype-csv" /> دانلود قالب</a>
        </section>
        <section className="split-panel">
          <form className="panel-card" onSubmit={(event) => { event.preventDefault(); form.post('/school/import/students', { forceFormData: true }); }}>
            <h3>آپلود فایل</h3>
            <input type="file" accept=".csv,.txt" onChange={(event) => form.setData('file', event.target.files?.[0] ?? null)} />
            {form.errors.file ? <small className="field-error">{form.errors.file}</small> : null}
            <p className="mini-note">بعد از آپلود: validation ردیفی، گزارش خطا و import ردیف‌های معتبر انجام می‌شود.</p>
            <button className="btn btn-primary" disabled={form.processing || !form.data.file} type="submit" data-no-spin>شروع Import</button>
          </form>
          <article className="panel-card">
            <h3>ستون‌های مهم</h3>
            <ul className="check-list">
              <li><span>student_code / username / password</span><i className="bi bi-key" /></li>
              <li><span>father_mobile / mother_mobile / home_phone</span><i className="bi bi-telephone" /></li>
              <li><span>grade_level / classroom_code</span><i className="bi bi-diagram-3" /></li>
            </ul>
          </article>
        </section>
        {rows.length > 0
          ? <DataTable columns={['وضعیت', 'کل ردیف', 'معتبر', 'خطادار', 'تاریخ']} rows={rows} />
          : <section className="panel-card"><h2>هنوز Import انجام نشده</h2><p>بعد از اولین آپلود CSV، وضعیت job و تعداد ردیف‌های معتبر/خطادار اینجا از دیتابیس نمایش داده می‌شود.</p></section>}
      </div>
    </AppLayout>
  );
}