"use client"

import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Heart, Search, MapPin, ShieldCheck, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { DataAPI } from "@/lib/data-api"
import { FavoriteButton } from "@/components/ui/favorite-button"
import { Header } from "@/components/ui/header"

interface FavoriteItem {
  id: string
  facility: {
    id: string
    name: string
    slug?: string
    images?: string[]
    verified?: boolean
    location?: { city?: string; state?: string }
  }
}

export default function FavoritesPage() {
  const [items, setItems] = useState<FavoriteItem[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const load = async () => {
      try {
        setLoading(true)
        const res = await DataAPI.favorites.me({ page: 1, limit: 100 })
        const list = (res as any)?.data?.favorites || (res as any)?.favorites || []
        setItems(list)
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [])

  const handleUnfavorite = async (facilityId: string) => {
    // Optimistic removal
    setItems((prev) => prev.filter((it) => it.facility?.id !== facilityId))
    try {
      await DataAPI.favorites.remove(facilityId)
    } catch {
      // Revert on failure (best-effort)
      try {
        const res = await DataAPI.favorites.me({ page: 1, limit: 100 })
        const list = (res as any)?.data?.favorites || (res as any)?.favorites || []
        setItems(list)
      } catch {}
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
      <Header />
      <div className="container mx-auto px-4 max-w-5xl py-12">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Your Favorites</h1>
          <p className="text-gray-600">Facilities you've saved for later</p>
        </div>

        <Card className="shadow-lg border border-slate-200 overflow-hidden">
          <CardContent className="p-6 md:p-8">
            {/* Section Header */}
            <div className="mb-6 flex items-center justify-between border-b border-slate-200 pb-4">
              <div className="flex items-center gap-3">
                <div className="h-9 w-9 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center ring-1 ring-blue-100">
                  <Heart className="h-4 w-4" />
                </div>
                <h2 className="text-lg md:text-xl font-semibold text-slate-900">Saved Facilities</h2>
              </div>
              <span className="text-sm text-slate-500">{loading ? 'Loading…' : `${items.length} saved`}</span>
            </div>
            {loading ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {Array.from({ length: 6 }).map((_, i) => (
                  <div key={i} className="rounded-xl border bg-white shadow-sm overflow-hidden animate-pulse">
                    <div className="h-36 bg-slate-100" />
                    <div className="p-4 space-y-3">
                      <div className="h-5 bg-slate-100 rounded w-3/4" />
                      <div className="h-4 bg-slate-100 rounded w-1/2" />
                      <div className="h-9 bg-slate-100 rounded w-full" />
                    </div>
                  </div>
                ))}
              </div>
            ) : items.length === 0 ? (
              <div className="text-center py-12">
                <Heart className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                <h3 className="text-xl font-semibold text-gray-900 mb-2">No favorites yet</h3>
                <p className="text-gray-600 mb-6">
                  Start exploring facilities and save your favorites to easily find them later.
                </p>
                <Link href="/search">
                  <Button className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white">
                    <Search className="h-4 w-4 mr-2" />
                    Search Facilities
                  </Button>
                </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
                  return (
                    <div key={item.id} className="rounded-2xl border bg-white shadow hover:shadow-lg transition-shadow overflow-hidden">
                      {/* Header banner */}
                      <div className="relative h-40 bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
                        <div className="text-center">
                          <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-2 shadow-md">
                            <Heart className="h-8 w-8 text-blue-600" />
                          </div>
                          <p className="text-xs text-slate-600">Senior Care Facility</p>
                        </div>
                        <div className="absolute top-3 right-3">
                          <FavoriteButton
                            facilityId={f.id}
                            initial={true}
                            compact
                            onChange={(fav) => { if (!fav) handleUnfavorite(f.id) }}
                          />
                        </div>
                        {f.verified && (
                          <span className="absolute top-3 left-3 inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">
                            <ShieldCheck className="h-3 w-3" /> Verified
                          </span>
                        )}
                      </div>

                      {/* Body */}
                      <CardContent className="p-5">
                        <h3 className="text-lg font-semibold text-slate-900 mb-1 line-clamp-2">{f.name}</h3>
                        <div className="flex items-center text-slate-600 mb-3">
                          <MapPin className="h-4 w-4 mr-2 text-blue-500" />
                          <span className="text-sm">{f.location?.city || '—'}, {f.location?.state || '—'}</span>
                        </div>

                        <div className="flex gap-3 items-center">
                          <Button asChild className="flex-1 bg-blue-600 hover:bg-blue-700 shadow-sm">
                            <Link href={`/facility/${f.id}`}>View Details</Link>
                          </Button>
                          <Button variant="destructive" size="sm" onClick={() => handleUnfavorite(f.id)} className="bg-red-600 hover:bg-red-700 text-white">
                            <X className="h-4 w-4 mr-1" /> Remove
                          </Button>
                        </div>
                      </CardContent>
                    </div>
                  )
                })}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}