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

type Grade = {
  id: number;
  student: string;
  subject: string;
  classroom: string;
  teacher: string;
  score: number;
  maxScore: number;
  status: string;
  description: string;
  updatedAt: string;
};

type Props = {
  grades: Grade[];
};

const statusLabel: Record<string, string> = {
  draft: 'پیش‌نویس',
  submitted: 'ارسال‌شده',
  approved: 'تایید شده',
  rejected: 'رد شده',
};

const statusClass: Record<string, string> = {
  submitted: 'badge-warning',
  approved: 'badge-success',
  rejected: 'badge-danger',
};

export default function SchoolGrades({ grades }: Props) {
  function handleApprove(id: number, student: string) {
    if (!confirm(`تایید نمره «${student}»؟`)) return;
    router.patch(`/school/grades/${id}/approve`, {}, { preserveScroll: true });
  }

  function handleReject(id: number, student: string) {
    if (!confirm(`رد نمره «${student}»؟`)) return;
    router.patch(`/school/grades/${id}/reject`, {}, { preserveScroll: true });
  }

  const submitted = grades.filter((g) => g.status === 'submitted');
  const rest = grades.filter((g) => g.status !== 'submitted');

  return (
    <AppLayout title="تایید نمرات">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>تایید و مدیریت نمرات</h2>
            <p>نمرات ارسال‌شده توسط معلمان نیاز به تایید دارند.</p>
          </div>
          <a className="btn btn-soft" href="/school/report-card">کارنامه دانش‌آموز</a>
        </section>

        {submitted.length > 0 && (
          <div className="panel-card">
            <h2>نیاز به تایید ({submitted.length})</h2>
            <div className="table-wrap">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>دانش‌آموز</th>
                    <th>درس</th>
                    <th>کلاس</th>
                    <th>معلم</th>
                    <th>نمره</th>
                    <th>توضیح</th>
                    <th>عملیات</th>
                  </tr>
                </thead>
                <tbody>
                  {submitted.map((grade) => (
                    <tr key={grade.id}>
                      <td>{grade.student}</td>
                      <td>{grade.subject}</td>
                      <td>{grade.classroom}</td>
                      <td>{grade.teacher}</td>
                      <td>{grade.score} از {grade.maxScore}</td>
                      <td>{grade.description || '—'}</td>
                      <td>
                        <div className="action-row--compact">
                          <button
                            className="btn btn-primary btn-sm"
                            type="button"
                            onClick={() => handleApprove(grade.id, grade.student)}
                          >
                            <i className="bi bi-check-circle" /> تایید
                          </button>
                          <button
                            className="btn btn-danger-ghost btn-sm"
                            type="button"
                            onClick={() => handleReject(grade.id, grade.student)}
                          >
                            <i className="bi bi-x-circle" /> رد
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {submitted.length === 0 && (
          <section className="panel-card">
            <h2>نمره‌ای منتظر تایید نیست</h2>
            <p>همه نمرات بررسی شده‌اند یا هنوز نمره‌ای ثبت نشده است.</p>
          </section>
        )}

        {rest.length > 0 && (
          <div className="table-wrap">
            <table className="data-table">
              <thead>
                <tr>
                  <th>دانش‌آموز</th>
                  <th>درس</th>
                  <th>کلاس</th>
                  <th>نمره</th>
                  <th>وضعیت</th>
                  <th>آخرین تغییر</th>
                </tr>
              </thead>
              <tbody>
                {rest.map((grade) => (
                  <tr key={grade.id}>
                    <td>{grade.student}</td>
                    <td>{grade.subject}</td>
                    <td>{grade.classroom}</td>
                    <td>{grade.score} از {grade.maxScore}</td>
                    <td>
                      <span className={`badge ${statusClass[grade.status] || ''}`}>
                        {statusLabel[grade.status] || grade.status}
                      </span>
                    </td>
                    <td>{grade.updatedAt}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </AppLayout>
  );
}
