import { Head, Link } from '@inertiajs/react';

type Card = { name: string; studentCode: string; token: string };

type Props = {
  schoolName: string;
  classTitle: string;
  cards: Card[];
};

/** چاپ کارت توکن ورود کلاس آنلاین — همان قالب کارت ورود. */
export default function PrintClassTokens({ schoolName, classTitle, cards }: Props) {
  return (
    <div className="cred-print-page" dir="rtl">
      <Head title={`چاپ توکن‌های ${classTitle}`} />

      <div className="cred-print-toolbar">
        <div>
          <strong>{cards.length} کارت توکن — {classTitle}</strong>
          <small> — هر توکن شخصی است؛ استفاده توسط دیگری ثبت تخلف می‌شود.</small>
        </div>
        <div style={{ display: 'flex', gap: '0.5rem' }}>
          <button className="btn btn-primary" type="button" onClick={() => window.print()}>
            <i className="bi bi-printer" /> چاپ
          </button>
          <Link href="/school/online-classes" className="btn btn-ghost">بازگشت</Link>
        </div>
      </div>

      <div className="cred-grid">
        {cards.map((card, i) => (
          <div className="cred-card" key={i}>
            <div className="cred-card-head">
              <strong>{schoolName}</strong>
              <span>توکن ورود کلاس آنلاین — {classTitle}</span>
            </div>
            <div className="cred-card-body">
              <div className="cred-row"><span>نام:</span><strong>{card.name}</strong></div>
              <div className="cred-row"><span>کد دانش‌آموزی:</span><code>{card.studentCode}</code></div>
              <div className="cred-row"><span>توکن ورود:</span><code>{card.token}</code></div>
            </div>
            <div className="cred-card-foot">توکن شخصی شماست — آن را به کسی ندهید.</div>
          </div>
        ))}
      </div>
    </div>
  );
}
