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

type Reason = 'used' | 'expired' | 'password_changed' | 'invalid';

const messages: Record<Reason, { icon: string; color: string; title: string; body: string; cta: string }> = {
  used: {
    icon: 'bi-qr-code-scan',
    color: '#f59e0b',
    title: 'این QR قبلاً استفاده شده است',
    body: 'کد QR یک‌بارمصرف است و قبلاً برای ورود استفاده شده.\nبرای ورود مجدد از نام کاربری و رمز عبور خود استفاده کنید.',
    cta: 'ورود با رمز عبور',
  },
  expired: {
    icon: 'bi-clock-history',
    color: '#94A3B8',
    title: 'کد QR منقضی شده است',
    body: 'اعتبار این کد QR ۳۰ روزه بوده و منقضی شده است.\nاز مدیر مدرسه درخواست کارت ورود جدید کنید یا از نام کاربری و رمز عبور استفاده کنید.',
    cta: 'ورود با رمز عبور',
  },
  password_changed: {
    icon: 'bi-shield-lock',
    color: '#f59e0b',
    title: 'رمز عبور تغییر کرده است',
    body: 'شما رمز عبور خود را تغییر داده‌اید و کد QR قبلی باطل شده است.\nاز طریق پروفایل کد QR جدید دریافت کنید.',
    cta: 'ورود به سامانه',
  },
  invalid: {
    icon: 'bi-x-octagon',
    color: '#EF4444',
    title: 'لینک QR نامعتبر است',
    body: 'این لینک وجود ندارد یا قبلاً باطل شده است.\nاز طریق پروفایل یا مدیر مدرسه کد QR جدید دریافت کنید.',
    cta: 'ورود به سامانه',
  },
};

export default function QrInvalid({ reason }: { reason?: string }) {
  const key = (reason as Reason) in messages ? (reason as Reason) : 'invalid';
  const m = messages[key];

  return (
    <div
      style={{
        minHeight: '100dvh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'var(--color-bg, #F1F5F9)',
        padding: '1.5rem',
        fontFamily: 'Vazirmatn, sans-serif',
      }}
      dir="rtl"
    >
      <Head title={m.title} />
      <div
        style={{
          background: 'var(--color-surface, #fff)',
          border: '1px solid var(--color-border, #E2E8F0)',
          borderRadius: 20,
          padding: '2.5rem 2rem',
          textAlign: 'center',
          maxWidth: 420,
          width: '100%',
          boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
        }}
      >
        <div
          style={{
            width: 72,
            height: 72,
            borderRadius: '50%',
            background: m.color + '18',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            margin: '0 auto 1.25rem',
          }}
        >
          <i className={`bi ${m.icon}`} style={{ fontSize: '2rem', color: m.color }} />
        </div>
        <h2 style={{ marginTop: 0, marginBottom: '0.6rem', fontSize: '1.1rem', fontWeight: 700, color: 'var(--color-text, #1E293B)' }}>
          {m.title}
        </h2>
        <p
          style={{
            color: 'var(--color-text-muted, #64748B)',
            marginBottom: '1.75rem',
            fontSize: '0.9rem',
            lineHeight: 1.7,
            whiteSpace: 'pre-line',
          }}
        >
          {m.body}
        </p>
        <Link
          href="/login"
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: '0.4rem',
            background: '#0EA678',
            color: '#fff',
            borderRadius: 12,
            padding: '0.65rem 1.5rem',
            fontWeight: 700,
            fontSize: '0.9rem',
            textDecoration: 'none',
          }}
        >
          <i className="bi bi-box-arrow-in-right" />
          {m.cta}
        </Link>
      </div>
    </div>
  );
}
