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

type LogEntry = {
  id: number;
  student: string;
  studentCode: string;
  ip: string;
  joinedAt: string;
};

type Props = {
  classTitle: string;
  logs: LogEntry[];
};

export default function OnlineClassLogs({ classTitle, logs }: Props) {
  return (
    <AppLayout title={`لاگ ورود — ${classTitle}`}>
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>لاگ ورود به کلاس آنلاین</h2>
            <p>{classTitle}</p>
          </div>
          <Link href="/school/online-classes" className="btn btn-ghost">
            <i className="bi bi-arrow-right" /> بازگشت
          </Link>
        </section>

        {logs.length === 0 ? (
          <section className="panel-card">
            <p style={{ color: 'var(--color-text-muted)' }}>هنوز هیچ دانش‌آموزی وارد این کلاس نشده است.</p>
          </section>
        ) : (
          <div className="table-wrap panel-card" style={{ padding: 0, overflow: 'hidden' }}>
            <table className="data-table">
              <thead>
                <tr>
                  <th>نام دانش‌آموز</th>
                  <th>کد دانش‌آموزی</th>
                  <th>IP</th>
                  <th>زمان ورود</th>
                </tr>
              </thead>
              <tbody>
                {logs.map((log) => (
                  <tr key={log.id}>
                    <td style={{ fontWeight: 600 }}>{log.student}</td>
                    <td><code style={{ fontSize: '0.8rem' }}>{log.studentCode}</code></td>
                    <td style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>{log.ip}</td>
                    <td style={{ fontSize: '0.85rem' }}>{log.joinedAt}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </AppLayout>
  );
}
