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

type Option = { value: string | number; label: string };

type Props = {
  classes: Option[];
  subjects: Option[];
  recentExams: Array<{
    id: number;
    title: string;
    classroom: string;
    subject: string;
    status: string;
    startsAt: string;
  }>;
};

export default function ExamBuilder({ classes, subjects, recentExams }: Props) {
  const form = useForm({
    title: '',
    classroom_id: '',
    subject_id: '',
    type: 'mixed',
    starts_at: '',
    ends_at: '',
    duration_minutes: '',
    max_score: '20',
  });

  const classOptions = classes.length > 0 ? classes : [{ value: '', label: 'کلاسی ثبت نشده' }];
  const subjectOptions = subjects.length > 0 ? subjects : [{ value: '', label: 'درسی ثبت نشده' }];

  return (
    <AppLayout title="ساخت امتحان">
      <div className="page-stack">
        <section className="split-panel">
          <form className="panel-card" onSubmit={(event) => { event.preventDefault(); form.post('/teacher/exams', { preserveScroll: true, onSuccess: () => form.reset() }); }}>
            <h2>اطلاعات امتحان</h2>
            <div className="form-grid">
              <TextInput label="عنوان امتحان" placeholder="مثلا آزمون فصل اول ریاضی" value={form.data.title} onChange={(event) => form.setData('title', event.target.value)} error={form.errors.title} />
              <SelectInput label="کلاس" value={form.data.classroom_id} onChange={(event) => form.setData('classroom_id', event.target.value)} options={[{ value: '', label: 'انتخاب کلاس' }, ...classOptions]} />
              <SelectInput label="درس" value={form.data.subject_id} onChange={(event) => form.setData('subject_id', event.target.value)} options={[{ value: '', label: 'انتخاب درس' }, ...subjectOptions]} />
              <SelectInput label="نوع امتحان" value={form.data.type} onChange={(event) => form.setData('type', event.target.value)} options={[
                { value: 'test', label: 'تستی' },
                { value: 'descriptive', label: 'تشریحی' },
                { value: 'mixed', label: 'ترکیبی' },
                { value: 'file', label: 'فایل' },
                { value: 'offline', label: 'حضوری/آفلاین' },
              ]} />
              <TextInput label="زمان شروع" type="datetime-local" value={form.data.starts_at} onChange={(event) => form.setData('starts_at', event.target.value)} />
              <TextInput label="زمان پایان" type="datetime-local" value={form.data.ends_at} onChange={(event) => form.setData('ends_at', event.target.value)} />
              <TextInput label="مدت زمان" type="number" min="1" value={form.data.duration_minutes} onChange={(event) => form.setData('duration_minutes', event.target.value)} />
              <TextInput label="نمره کامل" type="number" min="1" value={form.data.max_score} onChange={(event) => form.setData('max_score', event.target.value)} />
            </div>
            <button className="btn btn-primary" disabled={form.processing} type="submit"><i className="bi bi-plus-circle" /> ساخت امتحان</button>
          </form>
          <aside className="panel-card">
            <h2>نوع سوال‌ها</h2>
            <ul className="check-list">
              <li><span>تستی با گزینه‌ها</span><i className="bi bi-ui-checks" /></li>
              <li><span>تشریحی با تصحیح معلم</span><i className="bi bi-pencil-square" /></li>
              <li><span>آپلود فایل پاسخ</span><i className="bi bi-paperclip" /></li>
              <li><span>Auto-save و timer</span><i className="bi bi-stopwatch" /></li>
            </ul>
          </aside>
        </section>
        {recentExams.length > 0 ? (
          <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ overflowX: 'auto' }}>
              <table className="data-table" style={{ width: '100%' }}>
                <thead>
                  <tr>
                    <th>عنوان</th>
                    <th>کلاس</th>
                    <th>درس</th>
                    <th>وضعیت</th>
                    <th>شروع</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {recentExams.map((exam) => (
                    <tr key={exam.id}>
                      <td style={{ fontWeight: 600 }}>{exam.title}</td>
                      <td>{exam.classroom}</td>
                      <td>{exam.subject}</td>
                      <td>
                        <span className={exam.status === 'published' ? 'badge badge-success' : 'badge badge-secondary'}>
                          {exam.status === 'published' ? 'منتشر' : exam.status === 'archived' ? 'آرشیو' : 'پیش‌نویس'}
                        </span>
                      </td>
                      <td style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)', whiteSpace: 'nowrap' }}>{exam.startsAt}</td>
                      <td>
                        <a
                          href={`/teacher/exams/${exam.id}/questions`}
                          className="btn btn-ghost btn-sm"
                          title="مدیریت سوالات"
                        >
                          <i className="bi bi-list-check" />
                        </a>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>
        ) : (
          <section className="panel-card"><h2>امتحانی ثبت نشده</h2><p>بعد از ذخیره امتحان، لیست امتحانات واقعی از دیتابیس اینجا نمایش داده می‌شود.</p></section>
        )}
      </div>
    </AppLayout>
  );
}
