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

type Grade = {
  id: number;
  score: number;
  maxScore: number;
  subject: string;
  examTitle: string | null;
  description: string | null;
  approvedAt: string;
};

type Props = {
  grades: Grade[];
  average: number | null;
};

function scoreColor(score: number, max: number): string {
  const pct = (score / max) * 100;
  if (pct >= 70) return 'var(--color-primary-active)';
  if (pct >= 50) return '#f59e0b';
  return '#ef4444';
}

function scoreLabel(score: number, max: number): string {
  const pct = (score / max) * 100;
  if (pct >= 85) return 'عالی';
  if (pct >= 70) return 'خوب';
  if (pct >= 50) return 'متوسط';
  return 'ضعیف';
}

export default function StudentGrades({ grades, average }: Props) {
  return (
    <AppLayout title="نمرات">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-patch-check" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />نمرات</h2>
            <p>نمرات تأیید شده توسط مدرسه</p>
          </div>
          {average !== null && (
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                background: 'var(--color-primary-soft)',
                borderRadius: 'var(--radius-md)',
                padding: '0.75rem 1.25rem',
                minWidth: 100,
              }}
            >
              <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>میانگین کل</span>
              <strong style={{ fontSize: '1.5rem', color: 'var(--color-primary-active)', lineHeight: 1.2 }}>
                {average.toFixed(1)}
              </strong>
              <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>از ۲۰</span>
            </div>
          )}
        </section>

        {grades.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-patch-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>
                    <th>توضیحات</th>
                  </tr>
                </thead>
                <tbody>
                  {grades.map((g) => {
                    const normalized = (g.score / g.maxScore) * 20;
                    const pct = Math.round((g.score / g.maxScore) * 100);
                    const color = scoreColor(g.score, g.maxScore);

                    return (
                      <tr key={g.id}>
                        <td style={{ fontWeight: 600 }}>{g.subject}</td>
                        <td style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem' }}>
                          {g.examTitle ?? '—'}
                        </td>
                        <td>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                            <strong style={{ color, fontSize: '1rem', minWidth: 40 }}>
                              {g.score.toFixed(1)}
                            </strong>
                            <span style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem' }}>
                              / {g.maxScore}
                            </span>
                            <div
                              style={{
                                flex: 1,
                                minWidth: 60,
                                height: 6,
                                background: 'var(--color-border)',
                                borderRadius: 99,
                                overflow: 'hidden',
                              }}
                            >
                              <div
                                style={{
                                  height: '100%',
                                  width: `${pct}%`,
                                  background: color,
                                  borderRadius: 99,
                                  transition: 'width 0.4s',
                                }}
                              />
                            </div>
                            <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', minWidth: 28 }}>
                              {pct}٪
                            </span>
                          </div>
                          {g.maxScore !== 20 && (
                            <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: '0.15rem' }}>
                              معادل ۲۰: {normalized.toFixed(1)}
                            </div>
                          )}
                        </td>
                        <td>
                          <span
                            style={{
                              background: color + '20',
                              color,
                              border: `1px solid ${color}40`,
                              borderRadius: 'var(--radius-sm)',
                              padding: '0.15rem 0.5rem',
                              fontSize: '0.8rem',
                              fontWeight: 600,
                            }}
                          >
                            {scoreLabel(g.score, g.maxScore)}
                          </span>
                        </td>
                        <td style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem', whiteSpace: 'nowrap' }}>
                          {g.approvedAt}
                        </td>
                        <td style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
                          {g.description ?? '—'}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </section>
        )}
      </div>
    </AppLayout>
  );
}
