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

type TermRow = {
  key: string;
  label: string;
  presentHours: number;
  absentHours: number;
  excusedHours: number;
  lateCount: number;
  sessions: number;
  rows: { date: string; classroom: string; status: string; hours: number }[];
};

type Props = {
  terms: TermRow[];
  onlineHours: number;
};

const statusLabel: Record<string, string> = {
  present: 'حاضر',
  absent: 'غایب',
  late: 'تاخیر',
  excused: 'موجه',
};

export default function AttendanceHours({ terms, onlineHours }: Props) {
  return (
    <AppLayout title="ساعت حضور">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>ساعت حضور من</h2>
            <p>جمع ساعت‌های حضور، غیبت و موجه به تفکیک نیم‌سال</p>
          </div>
          <div className="metric-card" style={{ minWidth: 180 }}>
            <span>حضور آنلاین</span>
            <strong>{onlineHours} ساعت</strong>
          </div>
        </section>

        {terms.map((term) => (
          <section key={term.key} className="panel-card">
            <h3 style={{ marginTop: 0 }}>{term.label}</h3>
            <div className="dashboard-grid">
              <article className="metric-card"><span>حضور</span><strong>{term.presentHours} ساعت</strong></article>
              <article className="metric-card"><span>غیبت</span><strong>{term.absentHours} ساعت</strong></article>
              <article className="metric-card"><span>موجه</span><strong>{term.excusedHours} ساعت</strong></article>
              <article className="metric-card"><span>تاخیر</span><strong>{term.lateCount}</strong></article>
              <article className="metric-card"><span>جلسات</span><strong>{term.sessions}</strong></article>
            </div>
            <div className="table-wrap" style={{ marginTop: 16 }}>
              <table className="data-table">
                <thead><tr><th>تاریخ</th><th>کلاس</th><th>وضعیت</th><th>ساعت</th></tr></thead>
                <tbody>
                  {term.rows.slice(0, 40).map((row, index) => (
                    <tr key={`${term.key}-${index}`}>
                      <td>{row.date}</td>
                      <td>{row.classroom}</td>
                      <td><span className={`badge ${row.status === 'absent' ? 'badge-danger' : row.status === 'present' ? 'badge-success' : 'badge-warning'}`}>{statusLabel[row.status] ?? row.status}</span></td>
                      <td>{row.hours}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>
        ))}

        {terms.length === 0 && (
          <section className="panel-card" style={{ textAlign: 'center', padding: '3rem' }}>
            <i className="bi bi-stopwatch" style={{ fontSize: '2.4rem', color: 'var(--color-text-muted)' }} />
            <p>هنوز رکورد حضوری برای شما ثبت نشده است.</p>
          </section>
        )}
      </div>
    </AppLayout>
  );
}