"use client";

import Link from "next/link";
import { Compass, LogIn, MessageSquare, Sparkles } from "lucide-react";
import { useAuth } from "@/components/auth/auth-provider";

/**
 * / — the Home (Feed) gate.
 *
 * The Instagram-inspired infinite-scroll feed of posts from people you
 * follow will live here. Until that ships we show two paths:
 *
 *   • Sign in — for visitors who don't have an account yet; the eventual
 *     feed is personalised, so an account is the prerequisite.
 *   • Explore the Knowledgebase — Śrīla Prabhupāda's full library is
 *     ready today, regardless of feed status.
 *
 * The "Sign in" CTA hides once the user is authenticated — at that point
 * there's nothing to gate, just a "feed coming soon" note above the
 * always-on Knowledgebase entry.
 */

export default function HomePage() {
  const { user, loading } = useAuth();
  const authed = !loading && !!user;

  return (
    <main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-16 sm:py-24">
      <div className="flex flex-col items-center text-center gap-5">
        <span
          aria-hidden
          className="inline-flex size-14 items-center justify-center rounded-full bg-primary/10 text-primary"
        >
          <Sparkles className="size-6" />
        </span>

        <h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-3xl text-foreground leading-tight text-balance">
          {authed
            ? "Your feed is coming soon"
            : "Welcome to Prabhupāda Says"}
        </h1>

        <p className="text-sm text-muted-foreground leading-relaxed max-w-md">
          {authed
            ? "We're building a feed of quotes shared by the community. Until it lands, dive into the Knowledgebase — Śrīla Prabhupāda's books, letters, lectures, and teachings."
            : "Sign in to follow seekers and see their quotes here once the feed launches, or jump straight into the Knowledgebase — the original, unedited writings of His Divine Grace A.C. Bhaktivedanta Swami Prabhupāda."}
        </p>

        <div className="flex flex-col sm:flex-row items-center gap-3 mt-2">
          {!authed ? (
            <Link
              href="/login"
              className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary text-primary-foreground px-5 h-11 text-sm font-medium hover:bg-primary/90 transition-colors min-w-[12rem]"
            >
              <LogIn className="size-4" />
              Sign in to view feed
            </Link>
          ) : null}
          <Link
            href="/search"
            className={
              authed
                ? "inline-flex items-center justify-center gap-2 rounded-lg bg-primary text-primary-foreground px-5 h-11 text-sm font-medium hover:bg-primary/90 transition-colors min-w-[12rem]"
                : "inline-flex items-center justify-center gap-2 rounded-lg border border-border text-foreground px-5 h-11 text-sm font-medium hover:bg-muted transition-colors min-w-[12rem]"
            }
          >
            <Compass className="size-4" />
            Explore Knowledgebase
          </Link>
        </div>

        {!authed ? (
          <p className="text-xs text-muted-foreground mt-1">
            No account?{" "}
            <Link href="/signup" className="text-foreground hover:underline">
              Create one
            </Link>{" "}
            — it&apos;s free.
          </p>
        ) : null}

        <Link
          href="/feedback"
          className="mt-8 inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground underline-offset-4 hover:underline"
        >
          <MessageSquare className="size-3.5" />
          Send feedback
        </Link>
      </div>
    </main>
  );
}