import { DashboardShell } from '../../../../components/dashboard-shell';
import { SecuritySessionCard } from '../../../../components/security-session-card';
import { TwoFactorSettingsCard } from '../../../../components/two-factor-settings-card';
import { fetchCurrentSession, fetchTwoFactorStatus } from '../../../../lib/api';
import { requireAuthToken } from '../../../../lib/auth';

export default async function SecuritySettingsPage() {
  const token = await requireAuthToken();
  const [status, session] = await Promise.all([fetchTwoFactorStatus(token), fetchCurrentSession(token)]);

  return (
    <DashboardShell currentPath="/dashboard/settings/security">
      <section className="page-header">
        <div>
          <p className="page-eyebrow">Settings</p>
          <h1 className="page-heading">Security</h1>
          <p className="page-copy">
            Hardening auth production, termasuk TOTP, backup recovery codes, dan sesi admin yang lebih aman.
          </p>
        </div>
      </section>

      <section className="dashboard-two-column">
        <article className="surface-card">
          <div className="metric-stack">
            <div>
              <strong>JWT Auth</strong>
              <span>Login dan protected routes aktif</span>
            </div>
            <div>
              <strong>Webhook Verification</strong>
              <span>Verify token, shared secret, dan Meta signature tersedia</span>
            </div>
            <div>
              <strong>Queue Retry</strong>
              <span>Webhook jobs dapat di-retry dan tercatat di logs</span>
            </div>
          </div>
        </article>

        <TwoFactorSettingsCard status={status} />
      </section>

      <section className="dashboard-two-column-bottom">
        <SecuritySessionCard session={session} />
      </section>
    </DashboardShell>
  );
}
