import { Link, router } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { PageHeader } from '@/Components/UI/PageHeader';
import { persianDigits } from '@/lib/persianDate';

type Row = {
  studentId: number;
  name: string;
  studentCode: string;
  tokenId: number | null;
  token: string | null;
  status: 'active' | 'revoked' | null;
  firstUsed: string | null;
  lastUsed: string | null;
  useCount: number;
  boundIp: string | null;
  flagged: boolean;
  flagReason: string | null;
};

type Props = {
  classId: number;
  classTitle: string;
  requireToken: boolean;
  rows: Row[];
};

export default function ClassTokens({ classId, classTitle, requireToken, rows }: Props) {
  const base = `/school/online-classes/${classId}/tokens`;
  const missing = rows.filter((r) => !r.tokenId || r.status !== 'active').length;
  const flagged = rows.filter((r) => r.flagged).length;

  return (
    <AppLayout title={`توکن‌های کلاس ${classTitle}`}>
      <div className="page-stack">
        <PageHeader
          title={`توکن‌های ورود — ${classTitle}`}
          icon="bi-shield-lock"
          description="هر دانش‌آموز توکن شخصی دارد؛ ورود به کلاس فقط با توکن خودش ممکن است. استفاده از توکن دیگری رد و ثبت می‌شود و ورود از دستگاه/شبکه متفاوت پرچم می‌خورد."
        />

        <section className="section-header">
          <div style={{ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
            <span className={`badge ${requireToken ? 'badge-success' : 'badge-muted'}`}>
              {requireToken ? 'ورود فقط با توکن' : 'ورود بدون توکن آزاد'}
            </span>
            {flagged > 0 && (
              <span className="badge badge-danger">
                <i className="bi bi-exclamation-triangle" /> {persianDigits(String(flagged))} توکن پرچم‌دار
              </span>
            )}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
            <button
              className="btn btn-soft"
              type="button"
              onClick={() => router.post(`${base}/toggle-require`, {}, { preserveScroll: true })}
            >
              <i className="bi bi-toggle2-on" /> {requireToken ? 'آزاد کردن ورود' : 'اجباری کردن توکن'}
            </button>
            <Link href={`${base}/print`} className="btn btn-ghost">
              <i className="bi bi-printer" /> چاپ کارت توکن‌ها
            </Link>
            <button
              className="btn btn-primary"
              type="button"
              disabled={missing === 0}
              onClick={() => router.post(`${base}/generate`, {}, { preserveScroll: true })}
            >
              <i className="bi bi-key" /> صدور توکن ({persianDigits(String(missing))} نفر بدون توکن)
            </button>
          </div>
        </section>

        <div className="table-wrap">
          <table className="data-table">
            <thead>
              <tr>
                <th>دانش‌آموز</th>
                <th>توکن</th>
                <th>وضعیت</th>
                <th>اولین ورود</th>
                <th>آخرین ورود</th>
                <th>دفعات</th>
                <th>IP</th>
                <th>عملیات</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.studentId} style={r.flagged ? { background: 'rgba(220,38,38,0.06)' } : undefined}>
                  <td>
                    {r.name}
                    {r.flagged && (
                      <i
                        className="bi bi-exclamation-triangle-fill"
                        title={r.flagReason ?? 'پرچم‌دار'}
                        style={{ color: 'var(--color-danger)', marginRight: '0.4rem' }}
                      />
                    )}
                    <small style={{ color: 'var(--color-text-soft)', display: 'block' }}>{r.studentCode}</small>
                  </td>
                  <td>
                    {r.token && r.status === 'active'
                      ? <code style={{ direction: 'ltr', fontWeight: 700, letterSpacing: '0.05em' }}>{r.token}</code>
                      : <span className="badge badge-muted">بدون توکن</span>}
                  </td>
                  <td>
                    {r.status === 'active' && !r.flagged && <span className="badge badge-success">فعال</span>}
                    {r.status === 'active' && r.flagged && (
                      <span className="badge badge-danger" title={r.flagReason ?? ''}>مشکوک</span>
                    )}
                    {r.status === 'revoked' && <span className="badge badge-muted">باطل</span>}
                    {!r.status && <span className="badge badge-muted">—</span>}
                  </td>
                  <td>{r.firstUsed ?? '—'}</td>
                  <td>{r.lastUsed ?? '—'}</td>
                  <td style={{ textAlign: 'center' }}>{persianDigits(String(r.useCount))}</td>
                  <td style={{ direction: 'ltr', fontSize: '0.78rem' }}>{r.boundIp ?? '—'}</td>
                  <td>
                    {r.tokenId && (
                      <div className="action-row" style={{ gap: '0.3rem' }}>
                        <button
                          className="btn btn-ghost btn-sm"
                          type="button"
                          title="توکن جدید (بایند و پرچم صفر می‌شود)"
                          onClick={() => confirm(`توکن جدید برای «${r.name}»؟ توکن قبلی از کار می‌افتد.`)
                            && router.post(`${base}/${r.tokenId}/regenerate`, {}, { preserveScroll: true })}
                        >
                          <i className="bi bi-arrow-repeat" /> توکن جدید
                        </button>
                        {r.status === 'active' && (
                          <button
                            className="btn btn-danger-ghost btn-sm"
                            type="button"
                            onClick={() => confirm(`توکن «${r.name}» باطل شود؟`)
                              && router.post(`${base}/${r.tokenId}/revoke`, {}, { preserveScroll: true })}
                          >
                            <i className="bi bi-x-circle" /> ابطال
                          </button>
                        )}
                      </div>
                    )}
                  </td>
                </tr>
              ))}
              {rows.length === 0 && (
                <tr><td colSpan={8} style={{ color: 'var(--color-text-soft)', textAlign: 'center' }}>دانش‌آموزی در این کلاس ثبت نشده.</td></tr>
              )}
            </tbody>
          </table>
        </div>

        <div>
          <Link href="/school/online-classes" className="btn btn-ghost">
            <i className="bi bi-arrow-right" /> بازگشت به کلاس‌های آنلاین
          </Link>
        </div>
      </div>
    </AppLayout>
  );
}