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 ImportTeachers({ 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 استاندارد دانشیار وارد کنید.</p>
          </div>
          <a className="btn btn-soft" href="/documentation/templates/teachers-import-template.csv">
            <i className="bi bi-filetype-csv" /> دانلود قالب
          </a>
        </section>
        <section className="split-panel">
          <form
            className="panel-card"
            onSubmit={(e) => { e.preventDefault(); form.post('/school/import/teachers', { forceFormData: true }); }}
          >
            <h3>آپلود فایل</h3>
            <input
              type="file"
              accept=".csv,.txt"
              onChange={(e) => form.setData('file', e.target.files?.[0] ?? null)}
            />
            {form.errors.file && <small className="field-error">{form.errors.file}</small>}
            <p className="mini-note">ردیف‌های معتبر وارد می‌شوند. ردیف‌های خطادار گزارش می‌شوند.</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>teacher_code</span><i className="bi bi-key" /></li>
              <li><span>first_name / last_name</span><i className="bi bi-person" /></li>
              <li><span>mobile / email</span><i className="bi bi-telephone" /></li>
              <li><span>subjects (با | جدا)</span><i className="bi bi-book" /></li>
            </ul>
          </article>
        </section>
        {rows.length > 0
          ? <DataTable columns={['وضعیت', 'کل ردیف', 'معتبر', 'خطادار', 'تاریخ']} rows={rows} />
          : (
            <section className="panel-card">
              <h2>هنوز Import انجام نشده</h2>
              <p>بعد از اولین آپلود CSV، گزارش وضعیت اینجا نمایش داده می‌شود.</p>
            </section>
          )}
      </div>
    </AppLayout>
  );
}