import { redirect } from "next/navigation";
import Link from "next/link";
import { auth } from "@/lib/auth";
import { Users, HeartPulse, Stethoscope } from "lucide-react";

export default async function HomePage() {
  const session = await auth();

  if (session?.user?.id) {
    redirect("/dashboard");
  }

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100 flex flex-col">
      {/* Navbar */}
      <nav className="w-full border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-sm">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
          <span className="text-xl font-semibold tracking-tight text-zinc-100">
            RememberMe
          </span>
          <Link
            href="/login"
            className="rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-950 transition-colors hover:bg-zinc-200"
          >
            Login
          </Link>
        </div>
      </nav>

      {/* Hero */}
      <section className="flex flex-col items-center justify-center px-4 pt-16 pb-10 text-center sm:pt-24 sm:pb-14">
        <h1 className="max-w-3xl text-3xl font-bold leading-tight tracking-tight text-zinc-100 sm:text-4xl md:text-5xl">
          Empowering Alzheimer’s Care
          <br className="hidden sm:block" /> through Connection
        </h1>
        <p className="mt-4 max-w-xl text-base text-zinc-400 sm:text-lg">
          Choose your role to access personalized tools designed to support patients, caregivers, and medical professionals.
        </p>
      </section>

      {/* Role Selection */}
      <section className="mx-auto w-full max-w-7xl flex-1 px-4 pb-20 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {/* Family / Caregiver */}
          <RoleCard
            href="/login?family=true"
            title="Family / Caregiver"
            description="Manage patients, track medications, and connect with doctors."
            icon={<Users className="h-8 w-8 text-zinc-100" />}
          />

          {/* Patient */}
          <RoleCard
            href="/login/patient"
            title="Patient"
            description="Quick access to daily schedule and emergency info via QR scan."
            icon={<HeartPulse className="h-8 w-8 text-zinc-100" />}
          />

          {/* Doctor */}
          <RoleCard
            href="/login?doctor=true"
            title="Doctor"
            description="Monitor patient progress and provide medical guidance."
            icon={<Stethoscope className="h-8 w-8 text-zinc-100" />}
          />
        </div>
      </section>
    </div>
  );
}

function RoleCard({
  href,
  title,
  description,
  icon,
}: {
  href: string;
  title: string;
  description: string;
  icon: React.ReactNode;
}) {
  return (
    <Link
      href={href}
      className="group flex flex-col items-start rounded-xl border border-zinc-800 bg-zinc-900/50 p-8 transition-colors hover:border-indigo-500/80 hover:bg-zinc-900"
    >
      <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-zinc-800 group-hover:bg-indigo-500/20 transition-colors">
        {icon}
      </div>
      <h3 className="mb-2 text-lg font-semibold text-zinc-100">{title}</h3>
      <p className="text-sm leading-relaxed text-zinc-400">{description}</p>
    </Link>
  );
}