"use client"

import { useEffect, useState } from "react"
import { Header } from "@/components/ui/header"
import { Footer } from "@/components/ui/footer"
import { FavoriteButton } from "@/components/ui/favorite-button"
import { ShareButton } from "@/components/ui/share-button"
import { DataAPI } from "@/lib/data-api"
import Link from "next/link"

export default function FavoritesPage() {
  const [items, setItems] = useState<any[]>([])

  useEffect(() => {
    const load = async () => {
      const res = await DataAPI.favorites.me({ page: 1, limit: 50 })
      setItems((res?.data as any)?.favorites || (res as any)?.favorites || [])
    }
    load()
  }, [])

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
      <Header />
      <main className="container mx-auto px-4 py-10">
        <h1 className="text-3xl font-bold mb-6">My Favorites</h1>
        {items.length === 0 ? (
          <div className="text-muted-foreground">No favorites yet. <Link href="/search" className="underline">Browse facilities</Link>.</div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {items.map((item) => {
              const f = item.facility
              if (!f) return null
              const url = `/facility/${f.id || f.slug || ''}`
              return (
                <div key={item.id} className="rounded-xl border bg-white shadow-sm p-4 flex flex-col">
                  <div className="flex-1">
                    <h3 className="font-semibold text-lg mb-1 line-clamp-1">{f.name}</h3>
                    <p className="text-sm text-muted-foreground">{f?.location?.city}, {f?.location?.state}</p>
                  </div>
                  <div className="mt-4 flex items-center gap-2">
                    <FavoriteButton facilityId={f.id} initial={true} count={(f as any).favoritesCount} />
                    <ShareButton url={typeof window !== 'undefined' ? window.location.origin + url : url} size="sm" />
                    <Link href={url} className="ml-auto text-sm underline">View Details</Link>
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </main>
      <Footer />
    </div>
  )
}