import { AppLayout } from '@/Components/Layout/AppLayout';
import { formatPersianTime } from '@/lib/persianDate';

type Event = {
  id: string;
  type: 'homework' | 'exam';
  title: string;
  date: string;
  dateJalali: string;
  classroom: string;
  subject: string;
  time: string | null;
};

type Group = {
  date: string;
  dateJalali: string;
  isToday: boolean;
  items: Event[];
};

type Props = {
  groups: Group[];
  total: number;
};

export default function Upcoming({ groups, total }: Props) {
  return (
    <AppLayout title="برنامه آینده">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>
              <i className="bi bi-calendar-check" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />
              برنامه آینده
            </h2>
            <p>تکالیف و امتحانات ۳۰ روز آینده</p>
          </div>
          {total > 0 && (
            <span style={{ background: 'var(--color-primary-soft)', color: 'var(--color-primary)', border: '1px solid var(--color-primary-soft)', borderRadius: 'var(--radius-sm)', padding: '0.3rem 0.75rem', fontSize: '0.875rem', fontWeight: 600 }}>
              {total} مورد
            </span>
          )}
        </section>

        {groups.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-check" />
              </div>
              <h2>برنامه‌ای ندارید</h2>
              <p>تکلیف یا امتحانی در ۳۰ روز آینده برایتان ثبت نشده است.</p>
            </div>
          </section>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
            {groups.map((group) => (
              <div key={group.date}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' }}>
                  <div style={{
                    background: group.isToday ? 'var(--color-primary)' : 'var(--color-border)',
                    color: group.isToday ? 'white' : 'var(--color-text-muted)',
                    borderRadius: 'var(--radius-sm)',
                    padding: '0.2rem 0.75rem',
                    fontSize: '0.82rem',
                    fontWeight: 700,
                  }}>
                    {group.isToday ? 'امروز' : group.dateJalali}
                  </div>
                  <div style={{ flex: 1, height: 1, background: 'var(--color-border)' }} />
                  <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>{group.items.length} مورد</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
                  {group.items.map((item) => (
                    <EventCard key={item.id} item={item} />
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </AppLayout>
  );
}

function EventCard({ item }: { item: Event }) {
  const isExam = item.type === 'exam';
  const color = isExam ? '#dc2626' : '#2563eb';
  const icon = isExam ? 'bi-pencil-square' : 'bi-journal-text';
  const typeLabel = isExam ? 'امتحان' : 'تکلیف';

  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: '0.75rem',
      background: 'var(--color-surface)',
      border: `1px solid ${color}28`,
      borderRight: `3px solid ${color}`,
      borderRadius: 'var(--radius-md)',
      padding: '0.65rem 0.9rem',
    }}>
      <div style={{ width: 36, height: 36, borderRadius: '50%', background: color + '15', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <i className={`bi ${icon}`} style={{ color, fontSize: '1rem' }} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 600, fontSize: '0.9rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.title}</div>
        <div style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>
          {item.subject} · {item.classroom}
          {item.time && <> · ساعت {formatPersianTime(item.time)}</>}
        </div>
      </div>
      <span style={{ background: color + '15', color, border: `1px solid ${color}30`, borderRadius: 'var(--radius-sm)', padding: '0.15rem 0.5rem', fontSize: '0.75rem', fontWeight: 600, flexShrink: 0 }}>
        {typeLabel}
      </span>
    </div>
  );
}