import { ArrowRight, Fingerprint, Smartphone, Sparkles } from "lucide-react";

const flows = [
  {
    title: "Admin login",
    description:
      "Enforce short TTL and step-up MFA. Keep admin session separate from app session.",
    pill: "15m TTL",
  },
  {
    title: "Tenant pick",
    description:
      "Admin chooses target tenant before hitting APIs. Propagate X-Tenant-ID on every call.",
    pill: "Header-ready",
  },
  {
    title: "Device approval",
    description:
      "If app session exists and user opts in, use push/deeplink approval as MFA replacement.",
    pill: "App session",
  },
];

function AuthPage() {
  return (
    <div className="space-y-8">
      <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6 shadow-[var(--shadow-card)]">
        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
          <div>
            <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
              Admin auth
            </p>
            <h2 className="text-2xl font-semibold">Admin auth guardrails</h2>
            <p className="text-sm text-[var(--color-muted)]">
              Build the admin-only login flow first, keeping app login separate.
              Respect the “fallback only when user chooses” rule for SMS/email
              vs app approval.
            </p>
          </div>
          <div className="flex items-center gap-2">
            <span className="rounded-full border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-muted)]">
              IDP session placeholder
            </span>
            <button
              type="button"
              className="inline-flex items-center gap-2 rounded-full bg-[var(--color-accent)] px-4 py-2 text-sm font-semibold text-black"
            >
              <Sparkles size={14} />
              Connect auth layer
            </button>
          </div>
        </div>
      </section>

      <section className="grid gap-4 md:grid-cols-3">
        {flows.map((flow) => (
          <div
            key={flow.title}
            className="rounded-xl border border-[var(--color-border)] bg-[var(--color-panel)] p-5"
          >
            <div className="flex items-center justify-between text-xs uppercase tracking-[0.16em] text-[var(--color-muted)]">
              <span>{flow.pill}</span>
              <Fingerprint size={14} />
            </div>
            <h3 className="mt-3 text-lg font-semibold">{flow.title}</h3>
            <p className="text-sm text-[var(--color-muted)]">
              {flow.description}
            </p>
          </div>
        ))}
      </section>

      <section className="grid gap-6 md:grid-cols-[1fr,0.9fr]">
        <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
          <div className="flex items-center gap-2 text-[var(--color-muted)]">
            <Smartphone size={16} />
            <span className="text-xs uppercase tracking-[0.18em]">
              App-based approvals
            </span>
          </div>
          <h3 className="mt-2 text-xl font-semibold">
            App session as MFA replacement
          </h3>
          <p className="text-sm text-[var(--color-muted)]">
            If the admin keeps the mobile app signed in and opts in, use
            push/deeplink approval instead of OTP. Otherwise fall back to
            SMS/email based on user choice.
          </p>
        </div>
        <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
          <div className="flex items-center gap-2 text-[var(--color-muted)]">
            <ArrowRight size={16} />
            <span className="text-xs uppercase tracking-[0.18em]">
              TTL discipline
            </span>
          </div>
          <h3 className="mt-2 text-xl font-semibold">
            Keep admin sessions short
          </h3>
          <p className="text-sm text-[var(--color-muted)]">
            Default admin TTL is 15 minutes. Show countdown and nudge re-auth
            with step-up MFA when critical actions (rotate secret, export logs)
            happen.
          </p>
        </div>
      </section>
    </div>
  );
}

export default AuthPage;