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

type Option = { value: number; label: string };
type Item = {
  id: number;
  type: string;
  difficulty: string;
  body: string;
  options: string[];
  correctIndex: number | null;
  score: number;
  tags: string;
  subject: string;
};
type Props = { items: Item[]; subjects: Option[] };

const difficultyLabel: Record<string, string> = { easy: 'آسان', medium: 'متوسط', hard: 'سخت' };

export default function QuestionBank({ items, subjects }: Props) {
  function submit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    router.post('/teacher/question-bank', Object.fromEntries(new FormData(e.currentTarget)), { preserveScroll: true });
    e.currentTarget.reset();
  }

  return (
    <AppLayout title="بانک سوال">
      <div className="page-stack">
        <section className="section-header"><div><h2>بانک سوال</h2><p>ذخیره و دسته‌بندی سوال برای استفاده در امتحان‌ها</p></div></section>
        <form className="panel-card" onSubmit={submit}>
          <div className="form-grid">
            <select className="form-select" name="subject_id"><option value="">درس</option>{subjects.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}</select>
            <select className="form-select" name="question_type" defaultValue="test"><option value="test">تستی</option><option value="descriptive">تشریحی</option></select>
            <select className="form-select" name="difficulty" defaultValue="medium"><option value="easy">آسان</option><option value="medium">متوسط</option><option value="hard">سخت</option></select>
            <input className="form-input" name="score" type="number" step="0.25" min="0.25" defaultValue="1" />
            <textarea className="form-input" name="body" required placeholder="متن سوال" style={{ gridColumn: '1 / -1', minHeight: 90 }} />
            <textarea className="form-input" name="options" placeholder="گزینه‌ها، هر گزینه در یک خط" style={{ gridColumn: '1 / -1' }} />
            <input className="form-input" name="correct_index" type="number" min="0" max="9" placeholder="شماره گزینه صحیح از صفر" />
            <input className="form-input" name="tags" placeholder="برچسب‌ها با کاما" />
          </div>
          <button className="btn btn-primary" type="submit" style={{ marginTop: 16 }}><i className="bi bi-plus-circle" /> افزودن سوال</button>
        </form>
        <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
          <table className="data-table">
            <thead><tr><th>درس</th><th>سوال</th><th>نوع</th><th>سطح</th><th>بارم</th><th>برچسب</th></tr></thead>
            <tbody>
              {items.map((item) => (
                <tr key={item.id}>
                  <td>{item.subject}</td>
                  <td>
                    <strong>{item.body}</strong>
                    {item.options.length > 0 && <small style={{ display: 'block', color: 'var(--color-text-muted)' }}>{item.options.join(' / ')}</small>}
                  </td>
                  <td>{item.type === 'test' ? 'تستی' : 'تشریحی'}</td>
                  <td><span className="badge badge-muted">{difficultyLabel[item.difficulty] ?? item.difficulty}</span></td>
                  <td>{item.score}</td>
                  <td>{item.tags || '—'}</td>
                </tr>
              ))}
              {items.length === 0 && <tr><td colSpan={6} style={{ textAlign: 'center' }}>هنوز سوالی ثبت نشده است.</td></tr>}
            </tbody>
          </table>
        </section>
      </div>
    </AppLayout>
  );
}