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

type ClassItem = {
  id: number;
  name: string;
  grade: string;
  studentCount: number;
};

type Props = {
  classes: ClassItem[];
};

export default function AttendanceClasses({ classes }: Props) {
  return (
    <AppLayout title="حضور و غیاب — انتخاب کلاس">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-person-check" /> ثبت حضور و غیاب</h2>
            <p>کلاسی که می‌خواهید حضور و غیاب ثبت کنید را انتخاب کنید.</p>
          </div>
        </section>

        {classes.length > 0 ? (
          <div className="card-grid">
            {classes.map((cls) => (
              <a
                key={cls.id}
                href={`/teacher/attendance-sheet/${cls.id}`}
                className="panel-card"
                style={{ textDecoration: 'none', cursor: 'pointer', display: 'block', transition: 'box-shadow .15s' }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div>
                    <h3 style={{ marginBottom: 4 }}>{cls.name}</h3>
                    <p style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem', margin: 0 }}>{cls.grade}</p>
                  </div>
                  <span className="badge badge-primary">{cls.studentCount} نفر</span>
                </div>
                <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 8, color: 'var(--color-primary)', fontWeight: 600 }}>
                  <i className="bi bi-calendar-week" />
                  مشاهده جدول هفتگی
                  <i className="bi bi-arrow-left" />
                </div>
              </a>
            ))}
          </div>
        ) : (
          <section className="panel-card">
            <h2>کلاسی برای شما ثبت نشده</h2>
            <p>مدیر مدرسه باید ابتدا شما را به برنامه هفتگی اضافه کند تا کلاس‌های شما اینجا نمایش داده شود.</p>
          </section>
        )}
      </div>
    </AppLayout>
  );
}