"use client";

import { signIn } from "next-auth/react";
import { Monitor, Github } from "lucide-react";

export default function LoginPage() {
  return (
    <div className="min-h-[calc(100vh-3.5rem)] flex items-center justify-center p-4">
      <div className="w-full max-w-sm">
        <div className="rounded-2xl border border-[var(--border)] bg-[var(--bg-card)] p-8 text-center shadow-xl">
          <div className="w-12 h-12 rounded-2xl bg-[var(--accent-dim)] border border-[var(--accent-border)] flex items-center justify-center mx-auto mb-5">
            <Monitor className="w-6 h-6 text-emerald-500" />
          </div>
          <h1 className="text-xl font-bold text-[var(--text)] mb-1">SSH Launcher</h1>
          <p className="text-sm text-[var(--text-muted)] mb-8">
            Sign in to manage your Cloudflare Zero Trust SSH hosts
          </p>
          <button
            onClick={() => signIn("github", { callbackUrl: "/" })}
            className="w-full flex items-center justify-center gap-3 rounded-xl bg-[var(--text)] text-[var(--bg)] font-semibold py-3 px-4 hover:opacity-90 transition"
          >
            <Github className="w-4 h-4" />
            Continue with GitHub
          </button>
          <p className="text-xs text-[var(--text-faint)] mt-6">
            Your Cloudflare credentials are stored encrypted in your browser session.
          </p>
        </div>
      </div>
    </div>
  );
}