import Link from 'next/link';

type Props = {
  appName: string;
  labels: {
    title: string;
    description: string;
    verify: string;
    backToLogin: string;
    needHelp: string;
    appTitle: string;
    appDescription: string;
    securityTitle: string;
    securityDescription: string;
    placeholderBadge: string;
    placeholderBody: string;
  };
};

function ShieldIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 3 5 6v5c0 4.7 2.8 8.9 7 10 4.2-1.1 7-5.3 7-10V6l-7-3Z" fill="currentColor" />
    </svg>
  );
}

function DeviceIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M8 2h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm4 17.5a1 1 0 1 0 0 .01Z" fill="currentColor" />
    </svg>
  );
}

function VerifiedIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="m10 14.8-2.8-2.8-1.4 1.4L10 17.6l8-8-1.4-1.4-6.6 6.6Z" fill="currentColor" />
      <path d="M12 2 4 5v6c0 5.2 3.3 9.8 8 11 4.7-1.2 8-5.8 8-11V5l-8-3Z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
    </svg>
  );
}

export function TwoFactorPlaceholder({ appName, labels }: Props) {
  return (
    <main className="auth-page auth-page-enterprise">
      <section className="two-factor-shell">
        <header className="two-factor-brand">
          <div className="two-factor-mark">
            <ShieldIcon />
          </div>
          <h1>{appName}</h1>
          <p>{labels.placeholderBadge}</p>
        </header>

        <section className="two-factor-card">
          <div className="two-factor-copy">
            <h2>{labels.title}</h2>
            <p>{labels.description}</p>
          </div>

          <div className="otp-row" aria-hidden="true">
            {Array.from({ length: 6 }).map((_, index) => (
              <div key={index} className="otp-box">0</div>
            ))}
          </div>

          <button type="button" className="auth-submit" disabled>
            {labels.verify}
          </button>

          <div className="two-factor-meta">
            <Link href="/login" className="text-link">
              {labels.backToLogin}
            </Link>
            <button type="button" className="text-link">
              {labels.needHelp}
            </button>
          </div>

          <div className="placeholder-note">
            <strong>{labels.placeholderBadge}</strong>
            <p>{labels.placeholderBody}</p>
          </div>
        </section>

        <section className="two-factor-info-grid">
          <article className="security-info-card">
            <span className="security-icon">
              <DeviceIcon />
            </span>
            <div>
              <h3>{labels.appTitle}</h3>
              <p>{labels.appDescription}</p>
            </div>
          </article>
          <article className="security-info-card">
            <span className="security-icon">
              <VerifiedIcon />
            </span>
            <div>
              <h3>{labels.securityTitle}</h3>
              <p>{labels.securityDescription}</p>
            </div>
          </article>
        </section>
      </section>
    </main>
  );
}
