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

type AttendanceRecord = {
  date: string;
  status: string;
  type: string;
  classroom: string;
  note: string | null;
};

type Summary = {
  present: number;
  absent: number;
  late: number;
  excused: number;
};

type Props = {
  records: AttendanceRecord[];
  summary: Summary;
};

const statusConfig: { [key: string]: { label: string; color: string; bg: string; icon: string } } = {
  present: { label: 'حاضر', color: '#0EA678', bg: '#0EA67815', icon: 'bi-check-circle-fill' },
  absent: { label: 'غایب', color: '#ef4444', bg: '#ef444415', icon: 'bi-x-circle-fill' },
  late: { label: 'دیر', color: '#f59e0b', bg: '#f59e0b15', icon: 'bi-clock-fill' },
  excused: { label: 'موجه', color: '#6366f1', bg: '#6366f115', icon: 'bi-shield-check' },
};

const typeLabel: { [key: string]: string } = {
  in_person: 'حضوری',
  online: 'آنلاین',
};

export default function StudentAttendance({ records, summary }: Props) {
  const total: number = Object.values(summary).reduce((a: number, b: number) => a + b, 0);
  const attendancePct = total > 0 ? Math.round((summary.present / total) * 100) : 100;

  return (
    <AppLayout title="حضور و غیاب">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-clipboard-check" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />حضور و غیاب</h2>
            <p>سابقه حضور و غیاب شما در {total} جلسه</p>
          </div>
        </section>

        <section className="dashboard-grid">
          {Object.entries(statusConfig).map(([key, cfg]) => (
            <article key={key} className="metric-card" style={{ borderColor: cfg.color + '40', background: cfg.bg }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', color: cfg.color }}>
                <i className={`bi ${cfg.icon}`} />
                {cfg.label}
              </span>
              <strong style={{ color: cfg.color }}>{summary[key as keyof Summary]}</strong>
            </article>
          ))}
        </section>

        <section className="panel-card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
            <span style={{ fontWeight: 600 }}>درصد حضور</span>
            <strong style={{ color: attendancePct >= 80 ? '#0EA678' : attendancePct >= 60 ? '#f59e0b' : '#ef4444' }}>
              {attendancePct}٪
            </strong>
          </div>
          <div style={{ height: 10, background: 'var(--color-border)', borderRadius: 99, overflow: 'hidden' }}>
            <div
              style={{
                height: '100%',
                width: `${attendancePct}%`,
                background: attendancePct >= 80 ? '#0EA678' : attendancePct >= 60 ? '#f59e0b' : '#ef4444',
                borderRadius: 99,
                transition: 'width 0.5s',
              }}
            />
          </div>
        </section>

        {records.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-clipboard-check" />
              </div>
              <h2>سابقه‌ای ثبت نشده</h2>
              <p>هنوز هیچ جلسه حضور و غیابی برای شما ثبت نشده است.</p>
            </div>
          </section>
        ) : (
          <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ overflowX: 'auto' }}>
              <table className="data-table" style={{ width: '100%' }}>
                <thead>
                  <tr>
                    <th>تاریخ</th>
                    <th>کلاس</th>
                    <th>نوع</th>
                    <th>وضعیت</th>
                    <th>یادداشت</th>
                  </tr>
                </thead>
                <tbody>
                  {records.map((r: AttendanceRecord, i: number) => {
                    const cfg: { label: string; color: string; bg: string; icon: string } = statusConfig[r.status] ?? { label: r.status, color: 'var(--color-text)', bg: 'transparent', icon: 'bi-dash' };
                    return (
                      <tr key={i}>
                        <td style={{ whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>{r.date}</td>
                        <td>{r.classroom}</td>
                        <td>
                          <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>
                            {typeLabel[r.type] ?? r.type}
                          </span>
                        </td>
                        <td>
                          <span
                            style={{
                              display: 'inline-flex',
                              alignItems: 'center',
                              gap: '0.3rem',
                              background: cfg.bg,
                              color: cfg.color,
                              border: `1px solid ${cfg.color}40`,
                              borderRadius: 'var(--radius-sm)',
                              padding: '0.15rem 0.5rem',
                              fontSize: '0.8rem',
                              fontWeight: 600,
                            }}
                          >
                            <i className={`bi ${cfg.icon}`} />
                            {cfg.label}
                          </span>
                        </td>
                        <td style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
                          {r.note ?? '—'}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </section>
        )}
      </div>
    </AppLayout>
  );
}
