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

type Option = { id: number; body: string; isCorrect: boolean };
type Question = {
  id: number;
  type: 'test' | 'descriptive' | 'file';
  body: string;
  maxScore: number;
  imagePath: string | null;
  options: Option[];
  answerId: number | null;
  studentOptionId: number | null;
  studentText: string | null;
  filePath: string | null;
  score: number | null;
};

type Props = {
  exam: { id: number; title: string; maxScore: number; classroom: string; subject: string };
  session: { id: number; status: string; score: number | null; submittedAt: string };
  student: { name: string; code: string };
  questions: Question[];
};

export default function ExamSubmissionReview({ exam, session, student, questions }: Props) {
  const [scores, setScores] = useState<Record<string, string>>(() => {
    const initial: Record<string, string> = {};
    questions.forEach((q) => { initial[q.id] = q.score !== null ? String(q.score) : ''; });
    return initial;
  });

  function save(e: React.FormEvent) {
    e.preventDefault();
    router.post(`/teacher/exams/${exam.id}/submissions/${session.id}`, { scores }, { preserveScroll: true });
  }

  const currentTotal = Object.values(scores).reduce((sum, v) => sum + (Number(v) || 0), 0);

  return (
    <AppLayout title={`تصحیح ${student.name}`}>
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-pencil-square" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />برگه پاسخ</h2>
            <p>{exam.title} · {student.name} · ارسال: {session.submittedAt}</p>
          </div>
          <Link href={`/teacher/exams/${exam.id}/submissions`} className="btn btn-ghost btn-sm">
            <i className="bi bi-arrow-right" /> لیست پاسخ‌ها
          </Link>
        </section>

        <section className="dashboard-grid">
          <article className="metric-card"><span>نمره فعلی</span><strong>{session.score ?? '—'}</strong></article>
          <article className="metric-card"><span>جمع فرم</span><strong>{currentTotal.toFixed(2)}</strong></article>
          <article className="metric-card"><span>نمره کامل</span><strong>{exam.maxScore}</strong></article>
        </section>

        <form onSubmit={save} style={{ display: 'grid', gap: '0.75rem' }}>
          {questions.map((q, idx) => (
            <article key={q.id} className="panel-card">
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', alignItems: 'flex-start' }}>
                <div>
                  <div style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem', fontWeight: 700 }}>
                    سوال {idx + 1} · {q.type === 'test' ? 'تستی' : q.type === 'file' ? 'فایل' : 'تشریحی'} · {q.maxScore} نمره
                  </div>
                  <p style={{ margin: '0.45rem 0 0', fontWeight: 600 }}>{q.body}</p>
                </div>
                <div className="form-group" style={{ width: 140, margin: 0 }}>
                  <label className="form-label">نمره</label>
                  <input
                    className="form-input"
                    type="number"
                    min="0"
                    max={q.maxScore}
                    step="0.25"
                    value={scores[q.id] ?? ''}
                    onChange={(e) => setScores((prev) => ({ ...prev, [q.id]: e.target.value }))}
                  />
                </div>
              </div>

              {q.imagePath && <img src={`/storage/${q.imagePath}`} alt="" style={{ maxWidth: 320, borderRadius: 'var(--radius-sm)', marginTop: '0.75rem' }} />}

              {q.type === 'test' ? (
                <div style={{ display: 'grid', gap: '0.35rem', marginTop: '0.75rem' }}>
                  {q.options.map((opt) => {
                    const picked = opt.id === q.studentOptionId;
                    return (
                      <div
                        key={opt.id}
                        style={{
                          border: `1px solid ${opt.isCorrect ? '#16a34a' : picked ? '#dc2626' : 'var(--color-border)'}`,
                          background: opt.isCorrect ? '#16a34a12' : picked ? '#dc262612' : 'transparent',
                          borderRadius: 'var(--radius-sm)',
                          padding: '0.45rem 0.7rem',
                          fontSize: '0.88rem',
                        }}
                      >
                        {opt.isCorrect && <i className="bi bi-check-circle-fill" style={{ color: '#16a34a', marginLeft: '0.35rem' }} />}
                        {picked && !opt.isCorrect && <i className="bi bi-x-circle-fill" style={{ color: '#dc2626', marginLeft: '0.35rem' }} />}
                        {picked && <strong style={{ marginLeft: '0.25rem' }}>پاسخ دانش‌آموز:</strong>}
                        {opt.body}
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div style={{ marginTop: '0.75rem', display: 'grid', gap: '0.6rem' }}>
                  <div style={{ background: 'var(--color-bg-subtle)', borderRadius: 'var(--radius-sm)', padding: '0.75rem', whiteSpace: 'pre-wrap', color: 'var(--color-text-muted)' }}>
                    {q.studentText || 'پاسخ متنی ثبت نشده است.'}
                  </div>
                  {q.filePath && q.answerId && (
                    <a className="btn btn-ghost btn-sm" href={`/teacher/exams/${exam.id}/submissions/${session.id}/answers/${q.answerId}/download`}>
                      <i className="bi bi-paperclip" /> دانلود فایل پاسخ
                    </a>
                  )}
                </div>
              )}
            </article>
          ))}

          <div style={{ position: 'sticky', bottom: 12, display: 'flex', justifyContent: 'flex-end' }}>
            <button className="btn btn-primary" type="submit">
              <i className="bi bi-check2-circle" /> ذخیره نمره‌ها
            </button>
          </div>
        </form>
      </div>
    </AppLayout>
  );
}