import { router } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';

type GradeEntry = {
  id: number;
  score: number;
  maxScore: number;
  status: 'submitted' | 'approved' | 'rejected';
  rejectReason: string | null;
  teacherComment: string | null;
  description: string | null;
  approvedAt: string | null;
  term: number | null;
  gradeType?: string | null;
};

type Subject = {
  subjectId: number;
  subjectName: string;
  entries: GradeEntry[];
  average: number | null;
};

type SchoolYear = { id: number; title: string; status: string };

type Props = {
  subjects: Subject[];
  gpa: number | null;
  rank: number | null;
  classSize: number | null;
  schoolYear: { id: number; title: string } | null;
  schoolYears: SchoolYear[];
  selectedYear: number | null;
  selectedTerm: number | null;
  classroomName: string | null;
  gradeNumber: number | null;
};

const statusMeta = {
  approved: { label: 'تایید', color: '#16a34a', icon: 'bi-patch-check-fill' },
  submitted: { label: 'در انتظار', color: '#d97706', icon: 'bi-hourglass-split' },
  rejected: { label: 'رد شده', color: '#dc2626', icon: 'bi-x-circle-fill' },
};

function gpaBand(gpa: number): { label: string; color: string } {
  if (gpa >= 18) return { label: 'عالی', color: '#16a34a' };
  if (gpa >= 15) return { label: 'خوب', color: 'var(--color-primary-active)' };
  if (gpa >= 12) return { label: 'متوسط', color: '#d97706' };
  return { label: 'نیاز به تلاش', color: '#dc2626' };
}

export default function StudentReportCard({
  subjects,
  gpa,
  rank,
  classSize,
  schoolYears,
  selectedYear,
  selectedTerm,
  classroomName,
}: Props) {
  function navigate(year: number | '', term: number | '') {
    const q: Record<string, string | number> = {};
    if (year) q.year = year;
    if (term) q.term = term;
    router.get('/student/report-card', q, { preserveScroll: false });
  }

  const band = gpa !== null ? gpaBand(gpa) : null;

  return (
    <AppLayout title="کارنامه">
      <div className="page-stack">

        {/* Header */}
        <section className="section-header">
          <div>
            <h2>
              <i className="bi bi-file-earmark-bar-graph" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />
              کارنامه
            </h2>
            <p>
              {classroomName ? `کلاس: ${classroomName}` : 'نمای کلی وضعیت تحصیلی'}
            </p>
          </div>
          <a className="btn btn-primary" href="/student/report-card/pdf" target="_blank" rel="noreferrer">
            <i className="bi bi-file-earmark-pdf" /> دانلود PDF
          </a>
        </section>

        {/* GPA + Rank cards */}
        {gpa !== null && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: '0.75rem' }}>
            <StatCard
              icon="bi-star-fill"
              label="معدل کل"
              value={gpa.toFixed(2)}
              sub={band?.label ?? ''}
              color={band?.color ?? 'var(--color-primary)'}
            />
            {rank !== null && classSize !== null && (
              <StatCard
                icon="bi-trophy-fill"
                label="رتبه کلاسی"
                value={`${rank} از ${classSize}`}
                sub="بر اساس نمرات تایید‌شده"
                color="#7c3aed"
              />
            )}
            <StatCard
              icon="bi-book"
              label="تعداد دروس"
              value={String(subjects.length)}
              sub={`${subjects.filter((s) => s.average !== null).length} درس با نمره تایید`}
              color="#0891b2"
            />
          </div>
        )}

        {/* Filters */}
        <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center' }}>
          {schoolYears.length > 0 && (
            <>
              <div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center' }}>
                <label style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>سال تحصیلی:</label>
                <select
                  value={selectedYear ?? ''}
                  onChange={(e) => navigate(e.target.value === '' ? '' : Number(e.target.value), selectedTerm ?? '')}
                  style={selectStyle}
                >
                  <option value="">همه</option>
                  {schoolYears.map((y) => (
                    <option key={y.id} value={y.id}>{y.title}</option>
                  ))}
                </select>
              </div>
              <div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center' }}>
                <label style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>نیمسال:</label>
                <select
                  value={selectedTerm ?? ''}
                  onChange={(e) => navigate(selectedYear ?? '', e.target.value === '' ? '' : Number(e.target.value))}
                  style={selectStyle}
                >
                  <option value="">هر دو نیمسال</option>
                  <option value={1}>نیمسال اول</option>
                  <option value={2}>نیمسال دوم</option>
                </select>
              </div>
            </>
          )}
        </div>

        {/* Subject list */}
        {subjects.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-file-earmark-bar-graph" />
              </div>
              <h2>نمره‌ای یافت نشد</h2>
              <p>برای سال تحصیلی انتخاب‌شده نمره‌ای ثبت نشده است.</p>
            </div>
          </section>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
            {subjects.map((s) => (
              <section key={s.subjectId} className="panel-card" style={{ padding: '1rem 1.25rem' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: s.entries.length > 0 ? '0.75rem' : 0 }}>
                  <div style={{ flex: 1 }}>
                    <strong style={{ fontSize: '1rem' }}>{s.subjectName}</strong>
                  </div>
                  {s.average !== null ? (
                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
                      <span style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)' }}>میانگین:</span>
                      <strong style={{ fontSize: '1.1rem', color: averageColor(s.average) }}>{s.average.toFixed(2)}</strong>
                      <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>/ ۲۰</span>
                    </div>
                  ) : (
                    <span style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)', fontStyle: 'italic' }}>بدون نمره تایید</span>
                  )}
                </div>

                {s.entries.length > 0 && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
                    {s.entries.map((e) => {
                      const meta = statusMeta[e.status] ?? statusMeta.submitted;
                      const pct = Math.round((e.score / e.maxScore) * 100);
                      return (
                        <div
                          key={e.id}
                          style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: '0.75rem',
                            padding: '0.4rem 0.6rem',
                            borderRadius: 'var(--radius-sm)',
                            background: 'var(--color-bg-subtle)',
                            flexWrap: 'wrap',
                          }}
                        >
                          <span style={{ background: meta.color + '18', color: meta.color, border: `1px solid ${meta.color}30`, borderRadius: 4, padding: '0.1rem 0.4rem', fontSize: '0.75rem', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '0.25rem', whiteSpace: 'nowrap' }}>
                            <i className={meta.icon} />
                            {meta.label}
                          </span>
                          <strong style={{ color: averageColor((e.score / e.maxScore) * 20), minWidth: 32 }}>
                            {e.score.toFixed(1)}
                          </strong>
                          <span style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem' }}>/ {e.maxScore}</span>
                          <div style={{ flex: 1, minWidth: 60, height: 5, background: 'var(--color-border)', borderRadius: 99, overflow: 'hidden' }}>
                            <div style={{ height: '100%', width: `${pct}%`, background: averageColor((e.score / e.maxScore) * 20), borderRadius: 99 }} />
                          </div>
                          <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', minWidth: 36 }}>{pct}٪</span>
                          {e.description && (
                            <span style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)' }}>{e.description}</span>
                          )}
                          {e.status === 'rejected' && e.rejectReason && (
                            <span style={{ fontSize: '0.75rem', color: '#dc2626' }}>دلیل رد: {e.rejectReason}</span>
                          )}
                          {e.teacherComment && (
                            <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', fontStyle: 'italic' }}>نظر: {e.teacherComment}</span>
                          )}
                        </div>
                      );
                    })}
                  </div>
                )}
              </section>
            ))}
          </div>
        )}
      </div>
    </AppLayout>
  );
}

function averageColor(avg20: number): string {
  if (avg20 >= 14) return '#16a34a';
  if (avg20 >= 10) return '#d97706';
  return '#dc2626';
}

const selectStyle: React.CSSProperties = {
  border: '1px solid var(--color-border)',
  borderRadius: 'var(--radius-sm)',
  padding: '0.3rem 0.6rem',
  background: 'var(--color-surface)',
  color: 'var(--color-text)',
  fontSize: '0.85rem',
};

function StatCard({ icon, label, value, sub, color }: { icon: string; label: string; value: string; sub: string; color: string }) {
  return (
    <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', color, marginBottom: '0.25rem' }}>
        <i className={icon} style={{ fontSize: '1.1rem' }} />
        <span style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>{label}</span>
      </div>
      <strong style={{ fontSize: '1.4rem', color }}>{value}</strong>
      <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>{sub}</span>
    </div>
  );
}