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

type ScheduleItem = {
  day: number;
  dayLabel: string;
  startsAt: string;
  endsAt: string;
  subject: string;
  classroom: string;
  room: string | null;
};

type Props = {
  schedules: ScheduleItem[];
  todayDayOfWeek: number;
  days: Record<number, string>;
};

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

export default function TeacherSchedule({ schedules, todayDayOfWeek, days }: Props) {
  const byDay: Record<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' }}>
              <i className="bi bi-calendar2-week" style={{ fontSize: '2rem', color: 'var(--color-text-muted)', display: 'block', marginBottom: '1rem' }} />
              <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>
                          <span style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)', marginRight: '0.5rem' }}>
                            <i className="bi bi-door-open" style={{ marginLeft: '0.2rem' }} />
                            {item.classroom}
                          </span>
                        </div>
                        {item.room && (
                          <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', flexShrink: 0 }}>
                            <i className="bi bi-geo-alt" style={{ marginLeft: '0.2rem' }} />
                            {item.room}
                          </span>
                        )}
                      </div>
                    ))}
                  </div>
                </section>
              );
            })}
          </div>
        )}
      </div>
    </AppLayout>
  );
}