"use client";

import Link from "next/link";
import { Compass, Loader2, LogIn, Sparkles } from "lucide-react";
import { useAuth } from "@/components/auth/auth-provider";
import { SadhnaStreakCTA } from "@/components/sadhna/streak-cta";
import { VaniOfTheDayCTA } from "@/components/vani/vani-of-the-day-cta";
import { HomeFeed } from "@/components/feed/home-feed";
import { QuizzesCTA } from "@/components/quiz/quizzes-cta";

/**
 * / — the Home (Feed) gate.
 *
 *   • Signed in → the daily sādhana streak on top, then the global,
 *     personalised infinite-scroll feed of community posts.
 *   • Anonymous → a welcome screen: sign in (the feed is personalised, so an
 *     account is the prerequisite) or jump into the Knowledgebase.
 */
export default function HomePage() {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <main className="flex-1 flex items-center justify-center py-24">
        <Loader2 className="size-6 animate-spin text-muted-foreground" />
      </main>
    );
  }

  if (user) {
    return (
      // Narrower single-column feed on desktop (≈Instagram width) — the cards
      // are fluid, so the column width is what sizes the square media. On
      // mobile this max-width is wider than the viewport, so it's full-bleed
      // as before.
      <main className="flex-1 max-w-lg w-full mx-auto px-4 sm:px-6 py-6">
        <div className="mb-6">
          <div className="flex h-24 gap-3">
            {/* A compact sādhana tile beside a wider Vāṇī of the Day: the
                streak is a daily habit you already know how to reach, so it
                needs only a recognisable mark; the vāṇī changes daily and
                earns the room to say what it is. */}
            <SadhnaStreakCTA compact />
            <VaniOfTheDayCTA className="h-full min-w-0 max-w-none flex-1" />
          </div>
          {/* Only while something is left to take. */}
          <QuizzesCTA pendingOnly className="mt-3" />
        </div>
        <HomeFeed />
      </main>
    );
  }

  return (
    <main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-16 sm:py-24 select-none">
      <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">
          Welcome to Prabhupāda Says
        </h1>

        <p className="text-sm text-muted-foreground leading-relaxed max-w-md">
          Sign in to follow seekers and see their quotes in your feed, 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">
          <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>
          <Link
            href="/search"
            className="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>

        <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>

        {/* Daily sādhana streak + Vāṇī of the day — entry points for visitors. */}
        <div className="mt-6 w-full max-w-md">
          <div className="flex h-24 gap-3">
            {/* A compact sādhana tile beside a wider Vāṇī of the Day: the
                streak is a daily habit you already know how to reach, so it
                needs only a recognisable mark; the vāṇī changes daily and
                earns the room to say what it is. */}
            <SadhnaStreakCTA compact />
            <VaniOfTheDayCTA className="h-full min-w-0 max-w-none flex-1" />
          </div>
          {/* Only while something is left to take. */}
          <QuizzesCTA pendingOnly className="mt-3" />
        </div>
      </div>
    </main>
  );
}