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

type Grade = {
  id: number; subject: string; score: number; maxScore: number; pct: number;
  status: string; statusLabel: string; qualitativeLabel: string | null;
  editable: boolean; note: string | null; createdAt: string;
};
type AttendanceRecord = { date: string; status: string; classroom: string; note: string | null };
type Homework = {
  id: number; title: string; subject: string; dueAt: string | null;
  submitted: boolean; submissionId: number | null; submissionStatus: string | null;
  submissionStatusLabel: string; submittedAt: string | null; hasFile: boolean;
};
type Message = {
  id: number; subject: string | null; body: string; fromMe: boolean;
  senderName: string; read: boolean; createdAt: string;
};
type FileItem = { id: number; name: string; size: number | null; mimeType: string | null; createdAt: string | null };

type Student = {
  id: number; name: string; firstName: string; lastName: string;
  rollNumber: number | null;
  nationalCode: string | null; birthDate: string | null; gender: string | null;
  mobile: string | null;
  fatherName: string | null; fatherMobile: string | null;
  motherName: string | null; motherMobile: string | null;
  homePhone: string | null; address: string | null; grade: string | null;
  status: string; userId: number | null; classes: string[];
  absenceTotal: number; absenceExcused: number; gradeAvg: number | null;
};

type Props = {
  student: Student;
  grades: Grade[];
  attendanceLog: AttendanceRecord[];
  homeworks: Homework[];
  messages: Message[];
  files: FileItem[];
  openHomeworks: number;
};

type Tab = 'overview' | 'grades' | 'attendance' | 'homeworks' | 'messages' | 'files';

function pctColor(p: number) {
  if (p >= 70) return '#16a34a';
  if (p >= 50) return '#d97706';
  return '#dc2626';
}

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

const gradeStatusColor: Record<string, string> = {
  draft: '#6b7280',
  submitted: '#d97706',
  approved: '#16a34a',
  rejected: '#dc2626',
};

/** Inline score editor — only rendered for draft/submitted grades. */
function GradeRow({ grade }: { grade: Grade }) {
  const [editing, setEditing] = useState(false);
  const { data, setData, put, processing, errors, reset } = useForm({
    score: String(grade.score),
    max_score: String(grade.maxScore),
    reason: '',
  });

  function save() {
    put(`/teacher/grades/${grade.id}`, {
      preserveScroll: true,
      onSuccess: () => setEditing(false),
    });
  }

  function cancel() {
    reset();
    setEditing(false);
  }

  if (editing) {
    return (
      <tr>
        <td style={{ fontWeight: 600 }}>{grade.subject}</td>
        <td colSpan={4}>
          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-start', flexWrap: 'wrap' }}>
            <input
              className="form-control"
              type="number"
              step="0.25"
              min="0"
              value={data.score}
              onChange={(e) => setData('score', e.target.value)}
              style={{ width: 90 }}
              aria-label="نمره"
              autoFocus
            />
            <span style={{ alignSelf: 'center', color: 'var(--color-text-muted)' }}>از</span>
            <input
              className="form-control"
              type="number"
              step="0.25"
              min="1"
              value={data.max_score}
              onChange={(e) => setData('max_score', e.target.value)}
              style={{ width: 90 }}
              aria-label="نمره کل"
            />
            <input
              className="form-control"
              placeholder="دلیل تغییر (اختیاری)"
              value={data.reason}
              onChange={(e) => setData('reason', e.target.value)}
              style={{ flex: '1 1 160px', minWidth: 140 }}
            />
            <button type="button" className="btn btn-primary btn-sm" onClick={save} disabled={processing}>
              <i className="bi bi-check-lg" /> ذخیره
            </button>
            <button type="button" className="btn btn-ghost btn-sm" onClick={cancel} disabled={processing}>
              انصراف
            </button>
          </div>
          {(errors.score || errors.max_score) && (
            <div style={{ color: 'var(--color-danger)', fontSize: '0.78rem', marginTop: '0.35rem' }}>
              {errors.score ?? errors.max_score}
            </div>
          )}
        </td>
      </tr>
    );
  }

  return (
    <tr>
      <td style={{ fontWeight: 600 }}>{grade.subject}</td>
      <td style={{ fontVariantNumeric: 'tabular-nums' }}>
        {grade.qualitativeLabel ?? `${grade.score}/${grade.maxScore}`}
      </td>
      <td><span style={{ fontWeight: 700, color: pctColor(grade.pct) }}>{grade.pct}%</span></td>
      <td>
        <span style={{
          color: gradeStatusColor[grade.status] ?? 'var(--color-text)',
          background: (gradeStatusColor[grade.status] ?? '#888') + '15',
          border: `1px solid ${(gradeStatusColor[grade.status] ?? '#888')}30`,
          borderRadius: 'var(--radius-sm)', padding: '0.15rem 0.5rem',
          fontSize: '0.75rem', fontWeight: 600, whiteSpace: 'nowrap',
        }}>
          {grade.statusLabel}
        </span>
      </td>
      <td style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)', whiteSpace: 'nowrap' }}>
        {grade.createdAt}
      </td>
      <td>
        {grade.editable ? (
          <button type="button" className="btn btn-ghost btn-sm" onClick={() => setEditing(true)} title="ویرایش نمره">
            <i className="bi bi-pencil" />
          </button>
        ) : (
          <span title="نمره تایید‌شده قابل ویرایش نیست" style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem' }}>
            <i className="bi bi-lock" />
          </span>
        )}
      </td>
    </tr>
  );
}

/** Chat composer + thread with the student's account. */
function MessagesTab({ student, messages }: { student: Student; messages: Message[] }) {
  const { data, setData, post, processing, reset, errors } = useForm({
    recipient_ids: student.userId ? [student.userId] : [],
    subject: '',
    body: '',
  });

  function send(e: React.FormEvent) {
    e.preventDefault();
    post('/school/messages', {
      preserveScroll: true,
      onSuccess: () => reset('body', 'subject'),
    });
  }

  if (!student.userId) {
    return (
      <div className="panel-card" style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted)' }}>
        <i className="bi bi-chat-dots" style={{ fontSize: '2rem', display: 'block', marginBottom: '0.5rem' }} />
        این دانش‌آموز حساب کاربری ندارد؛ امکان ارسال پیام نیست.
      </div>
    );
  }

  return (
    <>
      <section className="panel-card">
        <h3 style={{ marginBottom: '0.75rem' }}>
          <i className="bi bi-send" style={{ marginLeft: '0.4rem', color: 'var(--color-primary)' }} />
          ارسال پیام به {student.firstName}
        </h3>
        <form onSubmit={send} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
          <input
            className="form-control"
            placeholder="موضوع (اختیاری)"
            value={data.subject}
            onChange={(e) => setData('subject', e.target.value)}
          />
          <textarea
            className="form-control"
            placeholder="متن پیام…"
            rows={3}
            value={data.body}
            onChange={(e) => setData('body', e.target.value)}
            required
          />
          {errors.body && <div style={{ color: 'var(--color-danger)', fontSize: '0.78rem' }}>{errors.body}</div>}
          <button type="submit" className="btn btn-primary btn-sm" disabled={processing || !data.body.trim()} style={{ alignSelf: 'flex-start' }}>
            <i className="bi bi-send" /> ارسال
          </button>
        </form>
      </section>

      {messages.length === 0 ? (
        <div className="panel-card" style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted)' }}>
          <i className="bi bi-chat-dots" style={{ fontSize: '2rem', display: 'block', marginBottom: '0.5rem' }} />
          هنوز پیامی رد و بدل نشده
        </div>
      ) : (
        <section className="panel-card" style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
          {messages.map((m) => (
            <div
              key={m.id}
              style={{
                alignSelf: m.fromMe ? 'flex-start' : 'flex-end',
                maxWidth: '80%',
                background: m.fromMe ? 'var(--color-primary-soft)' : 'var(--color-bg-soft)',
                border: '1px solid var(--color-border)',
                borderRadius: 'var(--radius-md)',
                padding: '0.6rem 0.8rem',
              }}
            >
              <div style={{ fontSize: '0.72rem', color: 'var(--color-text-muted)', marginBottom: '0.25rem', display: 'flex', gap: '0.5rem' }}>
                <strong>{m.fromMe ? 'شما' : m.senderName}</strong>
                <span>{m.createdAt}</span>
                {m.fromMe && <i className={`bi ${m.read ? 'bi-check2-all' : 'bi-check2'}`} title={m.read ? 'خوانده شده' : 'ارسال شده'} />}
              </div>
              {m.subject && <div style={{ fontWeight: 700, fontSize: '0.85rem', marginBottom: '0.2rem' }}>{m.subject}</div>}
              <div style={{ fontSize: '0.875rem', whiteSpace: 'pre-wrap' }}>{m.body}</div>
            </div>
          ))}
        </section>
      )}
    </>
  );
}

export default function StudentDetail({ student, grades, attendanceLog, homeworks, messages, files, openHomeworks }: Props) {
  const [activeTab, setActiveTab] = useState<Tab>('overview');
  const absenceColor = student.absenceTotal > 5 ? '#dc2626' : student.absenceTotal > 2 ? '#d97706' : '#16a34a';

  const tabs: { key: Tab; label: string; icon: string; count?: number }[] = [
    { key: 'overview', label: 'خلاصه', icon: 'bi-person-vcard' },
    { key: 'grades', label: 'نمرات', icon: 'bi-mortarboard', count: grades.length },
    { key: 'attendance', label: 'حضور', icon: 'bi-clipboard-check', count: attendanceLog.length },
    { key: 'homeworks', label: 'تکالیف', icon: 'bi-journal-check', count: homeworks.length },
    { key: 'messages', label: 'پیام‌ها', icon: 'bi-chat-dots', count: messages.length },
    { key: 'files', label: 'فایل‌ها', icon: 'bi-folder2-open', count: files.length },
  ];

  const rollLabel = student.rollNumber !== null ? String(student.rollNumber) : null;

  const identityRows: Array<[string, string | null]> = [
    ['نام', student.firstName],
    ['نام خانوادگی', student.lastName],
    ['نام پدر', student.fatherName],
    ['کد ملی', student.nationalCode],
    ['شماره دفتر کلاسی', rollLabel],
    ['تاریخ تولد', student.birthDate],
    ['پایه', student.grade],
    ['کلاس‌ها', student.classes.length > 0 ? student.classes.join('، ') : null],
  ];

  return (
    <AppLayout title={`پرونده: ${student.name}`}>
      <div className="page-stack">
        {/* Student header */}
        <section className="section-header">
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <div
              style={{
                width: 56, height: 56, borderRadius: '50%', background: 'var(--color-primary-soft)',
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                color: 'var(--color-primary)', flexShrink: 0, lineHeight: 1,
              }}
              title={rollLabel ? `شماره دفتر کلاسی: ${rollLabel}` : undefined}
            >
              {student.rollNumber !== null ? (
                <>
                  <span style={{ fontSize: '1.35rem', fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>
                    {student.rollNumber}
                  </span>
                  <span style={{ fontSize: '0.55rem', opacity: 0.75, marginTop: 2 }}>دفتر</span>
                </>
              ) : (
                <i className="bi bi-person-fill" style={{ fontSize: '1.6rem' }} />
              )}
            </div>
            <div>
              <h2 style={{ margin: 0 }}>{student.name}</h2>
              <div style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem' }}>
                {rollLabel && <>شماره دفتر کلاسی: <strong style={{ fontVariantNumeric: 'tabular-nums' }}>{rollLabel}</strong></>}
                {student.grade && <> · {student.grade}</>}
                {student.classes.length > 0 && <> · {student.classes.join('، ')}</>}
              </div>
            </div>
          </div>
          <button type="button" onClick={() => router.visit('/teacher/students')} className="btn btn-ghost btn-sm">
            <i className="bi bi-arrow-right" /> بازگشت به دفتر کلاسی
          </button>
        </section>

        {/* Stat cards */}
        <div className="dashboard-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))' }}>
          <div className="panel-card" style={{ textAlign: 'center' }}>
            <i className="bi bi-x-circle" style={{ fontSize: '1.5rem', color: absenceColor, display: 'block' }} />
            <div style={{ fontSize: '1.6rem', fontWeight: 700, color: absenceColor }}>{student.absenceTotal}</div>
            <div style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>کل غیبت</div>
          </div>
          <div className="panel-card" style={{ textAlign: 'center' }}>
            <i className="bi bi-check-circle" style={{ fontSize: '1.5rem', color: '#d97706', display: 'block' }} />
            <div style={{ fontSize: '1.6rem', fontWeight: 700, color: '#d97706' }}>{student.absenceExcused}</div>
            <div style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>غیبت موجه</div>
          </div>
          <div className="panel-card" style={{ textAlign: 'center' }}>
            <i className="bi bi-graph-up" style={{ fontSize: '1.5rem', color: pctColor(student.gradeAvg ?? 0), display: 'block' }} />
            <div style={{ fontSize: '1.6rem', fontWeight: 700, color: pctColor(student.gradeAvg ?? 0) }}>
              {student.gradeAvg !== null ? `${student.gradeAvg}%` : '—'}
            </div>
            <div style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>میانگین نمرات تایید‌شده</div>
          </div>
          <div className="panel-card" style={{ textAlign: 'center' }}>
            <i className="bi bi-journal-check" style={{ fontSize: '1.5rem', color: 'var(--color-primary)', display: 'block' }} />
            <div style={{ fontSize: '1.6rem', fontWeight: 700 }}>{openHomeworks}</div>
            <div style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>تکلیف ارسال‌نشده</div>
          </div>
        </div>

        {/* Tabs */}
        <div className="student-detail-tabs student-tabs" role="tablist">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              type="button"
              role="tab"
              aria-selected={activeTab === tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`student-tab${activeTab === tab.key ? ' is-active' : ''}`}
            >
              <i className={`bi ${tab.icon}`} aria-hidden="true" />
              <span>{tab.label}</span>
              {tab.count !== undefined && tab.count > 0 && (
                <span className="student-tab-count">{tab.count}</span>
              )}
            </button>
          ))}
        </div>

        {/* Tab content */}
        <div className="student-tab-panel" key={activeTab}>
        {activeTab === 'overview' && (
          <>
            {/* Identity */}
            <section className="panel-card">
              <h3 style={{ marginBottom: '0.75rem' }}><i className="bi bi-person-vcard" style={{ marginLeft: '0.4rem' }} />مشخصات</h3>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '0.6rem 1rem' }}>
                {identityRows.map(([label, value]) => (
                  <div key={label} style={{ display: 'flex', gap: '0.4rem', fontSize: '0.875rem' }}>
                    <span style={{ color: 'var(--color-text-muted)' }}>{label}:</span>
                    <strong style={{ fontVariantNumeric: 'tabular-nums' }}>{value || '—'}</strong>
                  </div>
                ))}
              </div>
            </section>

            {/* Contact info */}
            {(student.mobile || student.fatherMobile || student.motherMobile || student.homePhone || student.address) && (
              <section className="panel-card">
                <h3 style={{ marginBottom: '0.75rem' }}><i className="bi bi-telephone" style={{ marginLeft: '0.4rem' }} />اطلاعات تماس</h3>
                <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', fontSize: '0.9rem' }}>
                  {student.mobile && <span><i className="bi bi-person" style={{ marginLeft: '0.3rem' }} />دانش‌آموز: <a href={`tel:${student.mobile}`}>{student.mobile}</a></span>}
                  {student.fatherMobile && <span><i className="bi bi-person" style={{ marginLeft: '0.3rem' }} />پدر{student.fatherName ? ` (${student.fatherName})` : ''}: <a href={`tel:${student.fatherMobile}`}>{student.fatherMobile}</a></span>}
                  {student.motherMobile && <span><i className="bi bi-person" style={{ marginLeft: '0.3rem' }} />مادر{student.motherName ? ` (${student.motherName})` : ''}: <a href={`tel:${student.motherMobile}`}>{student.motherMobile}</a></span>}
                  {student.homePhone && <span><i className="bi bi-telephone" style={{ marginLeft: '0.3rem' }} />خانه: <a href={`tel:${student.homePhone}`}>{student.homePhone}</a></span>}
                  {student.address && <span style={{ flexBasis: '100%' }}><i className="bi bi-geo-alt" style={{ marginLeft: '0.3rem' }} />{student.address}</span>}
                </div>
              </section>
            )}
          </>
        )}

        {activeTab === 'grades' && (
          grades.length === 0 ? (
            <div className="panel-card" style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted)' }}>
              <i className="bi bi-mortarboard" style={{ fontSize: '2rem', display: 'block', marginBottom: '0.5rem' }} />
              نمره‌ای ثبت نشده
            </div>
          ) : (
            <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ padding: '0.6rem 1rem', borderBottom: '1px solid var(--color-border)', fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>
                <i className="bi bi-info-circle" style={{ marginLeft: '0.3rem' }} />
                فقط نمرات پیش‌نویس و در انتظار تایید قابل ویرایش هستند. نمره تایید‌شده قفل است.
              </div>
              <div style={{ overflowX: 'auto' }}>
                <table className="data-table" style={{ width: '100%' }}>
                  <thead>
                    <tr><th>درس</th><th>نمره</th><th>درصد</th><th>وضعیت</th><th>تاریخ</th><th /></tr>
                  </thead>
                  <tbody>
                    {grades.map((g) => <GradeRow key={g.id} grade={g} />)}
                  </tbody>
                </table>
              </div>
            </section>
          )
        )}

        {activeTab === 'attendance' && (
          attendanceLog.length === 0 ? (
            <div className="panel-card" style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted)' }}>
              <i className="bi bi-clipboard-check" style={{ fontSize: '2rem', display: 'block', marginBottom: '0.5rem' }} />
              سابقه حضور و غیابی یافت نشد
            </div>
          ) : (
            <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></tr>
                  </thead>
                  <tbody>
                    {attendanceLog.map((r, i) => {
                      const cfg = statusConfig[r.status] ?? { label: r.status, color: 'var(--color-text)', icon: 'bi-dash' };
                      return (
                        <tr key={i}>
                          <td style={{ whiteSpace: 'nowrap', fontSize: '0.85rem' }}>{r.date}</td>
                          <td>{r.classroom}</td>
                          <td>
                            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.3rem', color: cfg.color, background: cfg.color + '15', border: `1px solid ${cfg.color}30`, borderRadius: 'var(--radius-sm)', padding: '0.15rem 0.5rem', fontSize: '0.78rem', fontWeight: 600 }}>
                              <i className={`bi ${cfg.icon}`} />{cfg.label}
                            </span>
                          </td>
                          <td style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>{r.note ?? '—'}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </section>
          )
        )}

        {activeTab === 'homeworks' && (
          homeworks.length === 0 ? (
            <div className="panel-card" style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted)' }}>
              <i className="bi bi-journal-check" style={{ fontSize: '2rem', display: 'block', marginBottom: '0.5rem' }} />
              تکلیفی برای این دانش‌آموز ثبت نشده
            </div>
          ) : (
            <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 /></tr>
                  </thead>
                  <tbody>
                    {homeworks.map((h) => (
                      <tr key={h.id}>
                        <td style={{ fontWeight: 600 }}>{h.title}</td>
                        <td style={{ fontSize: '0.85rem' }}>{h.subject}</td>
                        <td style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)', whiteSpace: 'nowrap' }}>{h.dueAt ?? '—'}</td>
                        <td>
                          <span className={h.submitted ? 'badge badge-success' : 'badge badge-warning'}>
                            {h.submissionStatusLabel}
                          </span>
                        </td>
                        <td style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)', whiteSpace: 'nowrap' }}>{h.submittedAt ?? '—'}</td>
                        <td>
                          <a href={`/teacher/homeworks/${h.id}/submissions`} className="btn btn-ghost btn-sm" title="مشاهده ارسال‌ها">
                            <i className="bi bi-box-arrow-up-left" />
                          </a>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          )
        )}

        {activeTab === 'messages' && <MessagesTab student={student} messages={messages} />}

        {activeTab === 'files' && (
          files.length === 0 ? (
            <div className="panel-card" style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted)' }}>
              <i className="bi bi-folder2-open" style={{ fontSize: '2rem', display: 'block', marginBottom: '0.5rem' }} />
              این دانش‌آموز فایلی بارگذاری نکرده
            </div>
          ) : (
            <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 /></tr>
                  </thead>
                  <tbody>
                    {files.map((f) => (
                      <tr key={f.id}>
                        <td style={{ fontWeight: 600 }}>{f.name}</td>
                        <td style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>
                          {f.size !== null ? `${Math.max(1, Math.round(f.size / 1024))} کیلوبایت` : '—'}
                        </td>
                        <td style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)', whiteSpace: 'nowrap' }}>{f.createdAt ?? '—'}</td>
                        <td>
                          <a href={`/school/files/${f.id}/download`} className="btn btn-ghost btn-sm" target="_blank" rel="noreferrer" title="دانلود">
                            <i className="bi bi-download" />
                          </a>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          )
        )}

        </div>

        <style>{`
          @media print {
            .dashboard-sidebar, .topbar, .student-detail-tabs, .btn { display: none !important; }
            .dashboard-main, .dashboard-content { margin: 0 !important; padding: 0 !important; }
            .panel-card { box-shadow: none !important; break-inside: avoid; }
          }
        `}</style>
      </div>
    </AppLayout>
  );
}