import { AppLayout } from '@/Components/Layout/AppLayout';

type Log = {
  id: number;
  student: string;
  studentCode: string;
  subject: string;
  oldScore: number | null;
  newScore: number | null;
  reason: string;
  changedBy: string;
  ip: string;
  createdAt: string;
};

type Props = {
  logs: Log[];
};

export default function GradeLogs({ logs }: Props) {
  return (
    <AppLayout title="گزارش تغییرات نمره">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>گزارش تغییرات نمره</h2>
            <p>تمام تغییرات ثبت‌شده در نمرات دانش‌آموزان</p>
          </div>
          <a className="btn btn-soft" href="/school/grades">بازگشت به تایید نمرات</a>
        </section>

        <div className="panel-card">
          {logs.length === 0 ? (
            <p style={{ padding: '1rem', opacity: .7 }}>هیچ تغییری ثبت نشده است.</p>
          ) : (
            <div className="table-wrap">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>دانش‌آموز</th>
                    <th>کد دانش‌آموزی</th>
                    <th>درس</th>
                    <th>نمره قبلی</th>
                    <th>نمره جدید</th>
                    <th>دلیل تغییر</th>
                    <th>تغییردهنده</th>
                    <th>IP</th>
                    <th>تاریخ</th>
                  </tr>
                </thead>
                <tbody>
                  {logs.map((log) => (
                    <tr key={log.id}>
                      <td>{log.student}</td>
                      <td>{log.studentCode}</td>
                      <td>{log.subject}</td>
                      <td>
                        {log.oldScore !== null
                          ? <span style={{ color: 'var(--color-danger)' }}>{log.oldScore}</span>
                          : <span style={{ opacity: .5 }}>—</span>}
                      </td>
                      <td>
                        {log.newScore !== null
                          ? <span style={{ color: 'var(--color-success)' }}>{log.newScore}</span>
                          : <span style={{ opacity: .5 }}>—</span>}
                      </td>
                      <td>{log.reason}</td>
                      <td>{log.changedBy}</td>
                      <td style={{ fontFamily: 'monospace', fontSize: '.8rem' }}>{log.ip}</td>
                      <td>{log.createdAt}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </AppLayout>
  );
}