"use client"

import { Suspense } from "react"
import { Header } from "@/components/layout/header"
import { Skeleton } from "@/components/ui/skeleton"
import { FlavorProfileCard } from "@/components/recommend/flavor-profile-card"
import { SuggestSection } from "@/components/recommend/suggest-section"
import { SimilarSection } from "@/components/recommend/similar-section"
import {
  useFlavorProfile,
  useGenerateFlavorProfile,
} from "@/hooks/use-recommend"
import { useDrinks } from "@/hooks/use-drinks"
import { Sparkles } from "lucide-react"

export default function RecommendPage() {
  return (
    <Suspense fallback={<RecommendLoading />}>
      <RecommendContent />
    </Suspense>
  )
}

function RecommendLoading() {
  return (
    <div>
      <Header title="Recommend" />
      <div className="p-4 md:p-8 space-y-6">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-[200px] rounded-lg" />
        <Skeleton className="h-[200px] rounded-lg" />
        <Skeleton className="h-[200px] rounded-lg" />
      </div>
    </div>
  )
}

function RecommendContent() {
  const {
    data: profileData,
    isLoading: profileLoading,
    error: profileError,
  } = useFlavorProfile()

  const generateProfile = useGenerateFlavorProfile()

  const { data: drinksData, isLoading: drinksLoading } = useDrinks({
    limit: 500,
    sort: "name",
  })

  const profile = profileData?.profile ?? null
  const hasProfile = !!profile

  const drinkOptions = (drinksData?.drinks ?? []).map((d) => ({
    id: d.id,
    name: d.name,
    type: d.type,
  }))

  return (
    <div>
      <Header title="Recommend" />
      <div className="p-4 md:p-8 space-y-6">
        <div>
          <h1 className="text-2xl font-bold flex items-center gap-2">
            <Sparkles className="h-6 w-6 text-primary" />
            Recommendations
          </h1>
          <p className="text-muted-foreground mt-1">
            AI-powered drink suggestions tailored to your taste.
          </p>
        </div>

        <FlavorProfileCard
          profile={profile}
          isLoading={profileLoading}
          isGenerating={generateProfile.isPending}
          error={profileError}
          generateError={generateProfile.error}
          onGenerate={() => generateProfile.mutate()}
        />

        <SuggestSection hasProfile={hasProfile} />

        <SimilarSection
          drinks={drinkOptions}
          drinksLoading={drinksLoading}
        />
      </div>
    </div>
  )
}