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 ImportUsers({ 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 می‌شوند. هیچ رمز خامی در پایگاه داده ذخیره نمی‌شود.</p>
          </div>
          <a className="btn btn-soft" href="/documentation/templates/users-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/users', { 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">
              نقش‌های مجاز: teacher, moaven, support, finance, principal.
              کاربران student را از صفحه 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>username</span><i className="bi bi-key" /></li>
              <li><span>first_name / last_name</span><i className="bi bi-person" /></li>
              <li><span>role (teacher/moaven/...)</span><i className="bi bi-shield" /></li>
              <li><span>temporary_password / password_hash</span><i className="bi bi-lock" /></li>
            </ul>
          </article>
        </section>
        {rows.length > 0
          ? <DataTable columns={['وضعیت', 'کل ردیف', 'معتبر', 'خطادار', 'تاریخ']} rows={rows} />
          : (
            <section className="panel-card">
              <h2>هنوز Import انجام نشده</h2>
              <p>بعد از اولین آپلود CSV، گزارش وضعیت اینجا نمایش داده می‌شود.</p>
            </section>
          )}
      </div>
    </AppLayout>
  );
}