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

type Exam = {
  id: number;
  title: string;
  type: string;
  startsAt: string;
  endsAt: string;
  durationMinutes: number | null;
  maxScore: number;
  classroom: string;
  subject: string;
  sessionId: number | null;
  sessionStatus: string | null;
  sessionScore: number | null;
  submittedAt: string | null;
  isAvailable: boolean;
};

type Props = {
  exams: Exam[];
};

const typeLabel: Record<string, string> = {
  test: 'تستی',
  descriptive: 'تشریحی',
  mixed: 'ترکیبی',
};

const sessionStatusBadge: Record<string, { label: string; cls: string }> = {
  started: { label: 'در حال انجام', cls: 'badge badge-warning' },
  submitted: { label: 'ارسال شد', cls: 'badge badge-success' },
  graded: { label: 'نمره‌گذاری شد', cls: 'badge badge-success' },
  expired: { label: 'منقضی', cls: 'badge badge-secondary' },
};

export default function StudentExams({ exams }: Props) {
  return (
    <AppLayout title="امتحانات">
      <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>امتحانات منتشرشده برای کلاس‌های شما</p>
          </div>
        </section>

        {exams.length === 0 ? (
          <section className="panel-card">
            <div style={{ textAlign: 'center', padding: '2rem 1rem' }}>
              <div className="icon-badge" style={{ width: 56, height: 56, fontSize: '1.5rem', margin: '0 auto 1rem' }}>
                <i className="bi bi-pencil-square" />
              </div>
              <h2>امتحانی وجود ندارد</h2>
              <p>در حال حاضر امتحان فعالی برای کلاس‌های شما ثبت نشده است.</p>
            </div>
          </section>
        ) : (
          <div className="card-grid">
            {exams.map((exam) => {
              const submitted = exam.sessionId && exam.sessionStatus !== 'started';
              const inProgress = exam.sessionStatus === 'started';
              const badge = exam.sessionStatus ? sessionStatusBadge[exam.sessionStatus] : null;

              return (
                <article
                  key={exam.id}
                  className="panel-card"
                  style={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '0.75rem',
                    borderColor: submitted ? 'var(--color-primary-soft)' : inProgress ? '#f59e0b' : undefined,
                    background: submitted ? 'var(--color-primary-soft)' : inProgress ? '#fef3c710' : undefined,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.75rem' }}>
                    <span className="icon-badge" style={{ flexShrink: 0 }}>
                      <i className="bi bi-pencil-square" />
                    </span>
                    <div style={{ flex: 1 }}>
                      <h3 style={{ margin: 0, fontSize: '1rem' }}>{exam.title}</h3>
                      <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginTop: '0.25rem' }}>
                        <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>
                          <i className="bi bi-door-open" style={{ marginLeft: '0.25rem' }} />{exam.classroom}
                        </span>
                        {exam.subject !== '—' && (
                          <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>
                            <i className="bi bi-book" style={{ marginLeft: '0.25rem' }} />{exam.subject}
                          </span>
                        )}
                        <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>
                          {typeLabel[exam.type] ?? exam.type}
                        </span>
                      </div>
                    </div>
                    {badge && (
                      <span className={badge.cls} style={{ flexShrink: 0 }}>{badge.label}</span>
                    )}
                  </div>

                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem', fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>
                    {exam.startsAt !== '—' && (
                      <span><i className="bi bi-calendar-event" style={{ marginLeft: '0.3rem' }} />از {exam.startsAt}</span>
                    )}
                    {exam.endsAt !== '—' && (
                      <span><i className="bi bi-calendar-x" style={{ marginLeft: '0.3rem' }} />تا {exam.endsAt}</span>
                    )}
                    {exam.durationMinutes && (
                      <span><i className="bi bi-stopwatch" style={{ marginLeft: '0.3rem' }} />{exam.durationMinutes} دقیقه</span>
                    )}
                    <span><i className="bi bi-award" style={{ marginLeft: '0.3rem' }} />نمره کل: {exam.maxScore}</span>
                  </div>

                  {submitted ? (
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        flexWrap: 'wrap',
                        gap: '0.4rem',
                        background: 'white',
                        border: '1px solid var(--color-primary-soft)',
                        borderRadius: 'var(--radius-sm)',
                        color: 'var(--color-primary-active)',
                        fontSize: '0.875rem',
                        fontWeight: 700,
                        padding: '0.6rem 0.9rem',
                      }}
                    >
                      <i className="bi bi-check-circle-fill" />
                      امتحان ارسال شد
                      {exam.sessionScore !== null && (
                        <span style={{ marginRight: 'auto', fontWeight: 700 }}>
                          نمره: {exam.sessionScore}
                        </span>
                      )}
                      {exam.submittedAt && (
                        <span style={{ fontWeight: 400, color: 'var(--color-text-muted)', fontSize: '0.8rem' }}>
                          {exam.submittedAt}
                        </span>
                      )}
                      <Link href={`/student/exams/${exam.id}/result`} className="btn btn-ghost btn-sm" style={{ marginRight: 'auto' }}>
                        <i className="bi bi-eye" /> مشاهده نتیجه
                      </Link>
                    </div>
                  ) : exam.isAvailable ? (
                    <Link
                      href={`/student/exams/${exam.id}`}
                      className={`btn ${inProgress ? 'btn-warning' : 'btn-primary'}`}
                      style={{ textAlign: 'center' }}
                    >
                      {inProgress ? (
                        <><i className="bi bi-play-circle" /> ادامه امتحان</>
                      ) : (
                        <><i className="bi bi-pencil" /> شروع امتحان</>
                      )}
                    </Link>
                  ) : (
                    <div
                      style={{
                        textAlign: 'center',
                        padding: '0.6rem',
                        background: 'var(--color-bg-muted)',
                        borderRadius: 'var(--radius-sm)',
                        color: 'var(--color-text-muted)',
                        fontSize: '0.875rem',
                      }}
                    >
                      <i className="bi bi-clock" style={{ marginLeft: '0.3rem' }} />
                      هنوز شروع نشده یا زمان پایان یافته
                    </div>
                  )}
                </article>
              );
            })}
          </div>
        )}
      </div>
    </AppLayout>
  );
}