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

type ScheduleItem = {
  day: number;
  dayLabel: string;
  startsAt: string;
  endsAt: string;
  classroom: string;
  subject: string;
  teacher: string;
};

type Props = {
  schedules: ScheduleItem[];
  todayDayOfWeek: number;
  days: { [key: number]: string };
};

const DAY_ORDER = [0, 1, 2, 3, 4, 5, 6];

export default function StudentSchedule({ schedules, todayDayOfWeek, days }: Props) {
  const byDay: { [key: number]: ScheduleItem[] } = {};
  for (const item of schedules) {
    if (!byDay[item.day]) byDay[item.day] = [];
    byDay[item.day].push(item);
  }

  const activeDays = DAY_ORDER.filter((d) => byDay[d] && byDay[d].length > 0);

  return (
    <AppLayout title="برنامه هفتگی">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-calendar2-week" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />برنامه هفتگی</h2>
            <p>برنامه کلاسی هفتگی شما</p>
          </div>
        </section>

        {schedules.length === 0 ? (
          <section className="panel-card">
            <div style={{ textAlign: 'center', padding: '2rem 1rem' }}>
              <div className="icon-badge" style={{ width: 56, height: 56, fontSize: '1.5rem', margin: '0 auto 1rem' }}>
                <i className="bi bi-calendar2-week" />
              </div>
              <h2>برنامه‌ای ثبت نشده</h2>
              <p>هنوز برنامه هفتگی برای کلاس شما تنظیم نشده است.</p>
            </div>
          </section>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
            {activeDays.map((dayNum) => {
              const isToday = dayNum === todayDayOfWeek;
              const dayItems = byDay[dayNum] ?? [];

              return (
                <section
                  key={dayNum}
                  className="panel-card"
                  style={{
                    borderColor: isToday ? 'var(--color-primary)' : undefined,
                    background: isToday ? 'var(--color-primary-soft)' : undefined,
                  }}
                >
                  <h3
                    style={{
                      margin: '0 0 0.75rem',
                      display: 'flex',
                      alignItems: 'center',
                      gap: '0.5rem',
                      color: isToday ? 'var(--color-primary-active)' : undefined,
                    }}
                  >
                    <i className={`bi ${isToday ? 'bi-calendar-check-fill' : 'bi-calendar2'}`} />
                    {days[dayNum] ?? `روز ${dayNum}`}
                    {isToday && (
                      <span className="badge badge-success" style={{ fontSize: '0.72rem' }}>امروز</span>
                    )}
                  </h3>

                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                    {dayItems.map((item, idx) => (
                      <div
                        key={idx}
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '0.75rem',
                          padding: '0.6rem 0.9rem',
                          background: isToday ? 'white' : 'var(--color-bg-muted)',
                          borderRadius: 'var(--radius-sm)',
                          border: `1px solid ${isToday ? 'var(--color-primary-soft)' : 'var(--color-border)'}`,
                        }}
                      >
                        <span
                          style={{
                            direction: 'ltr',
                            fontVariantNumeric: 'tabular-nums',
                            fontSize: '0.82rem',
                            color: 'var(--color-text-muted)',
                            minWidth: 80,
                            flexShrink: 0,
                          }}
                        >
                          {item.startsAt} – {item.endsAt}
                        </span>

                        <div style={{ flex: 1 }}>
                          <span style={{ fontWeight: 600, fontSize: '0.95rem' }}>{item.subject}</span>
                          {item.classroom !== '—' && (
                            <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', marginRight: '0.5rem' }}>
                              ({item.classroom})
                            </span>
                          )}
                        </div>

                        {item.teacher !== '—' && (
                          <span style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)', flexShrink: 0 }}>
                            <i className="bi bi-person-workspace" style={{ marginLeft: '0.25rem' }} />
                            {item.teacher}
                          </span>
                        )}
                      </div>
                    ))}
                  </div>
                </section>
              );
            })}
          </div>
        )}
      </div>
    </AppLayout>
  );
}