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

type Submission = {
  id: number;
  studentName: string;
  studentCode: string;
  status: string;
  score: number | null;
  pendingDescriptive: number;
  startedAt: string;
  submittedAt: string;
};

type Props = {
  exam: { id: number; title: string; classroom: string; subject: string; maxScore: number };
  submissions: Submission[];
};

const statusLabel: Record<string, string> = {
  submitted: 'نیاز به تصحیح',
  graded: 'نمره‌گذاری شد',
  expired: 'منقضی',
};

export default function ExamSubmissions({ exam, submissions }: Props) {
  return (
    <AppLayout title={`تصحیح: ${exam.title}`}>
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-clipboard2-check" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />تصحیح امتحان</h2>
            <p>{exam.title} · {exam.classroom} · {exam.subject}</p>
          </div>
          <Link href="/teacher/exams" className="btn btn-ghost btn-sm"><i className="bi bi-arrow-right" /> برگشت</Link>
        </section>

        <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
          {submissions.length === 0 ? (
            <p style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted)' }}>هنوز پاسخی برای این امتحان ثبت نشده است.</p>
          ) : (
            <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>
                  {submissions.map((row) => (
                    <tr key={row.id}>
                      <td>
                        <strong>{row.studentName}</strong>
                      </td>
                      <td><span className={row.status === 'graded' ? 'badge badge-success' : 'badge badge-warning'}>{statusLabel[row.status] ?? row.status}</span></td>
                      <td>{row.score !== null ? `${row.score} از ${exam.maxScore}` : '—'}</td>
                      <td>{row.pendingDescriptive > 0 ? <span className="badge badge-warning">{row.pendingDescriptive}</span> : <span className="badge badge-success">۰</span>}</td>
                      <td style={{ whiteSpace: 'nowrap', color: 'var(--color-text-muted)', fontSize: '0.82rem' }}>{row.submittedAt}</td>
                      <td>
                        <Link href={`/teacher/exams/${exam.id}/submissions/${row.id}`} className="btn btn-primary btn-sm">
                          <i className="bi bi-pencil-square" /> باز کردن
                        </Link>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      </div>
    </AppLayout>
  );
}