import { useQuery } from '@tanstack/react-query'
import { Leaf, Sparkles, Flower2 } from 'lucide-react'
import { Link } from 'react-router-dom'
import { getProducts, aiRecommend } from '../api/client'
import ProductCard from './components/ProductCard'
import { StaggerGrid, StaggerItem, PetalLayer } from './components/motion'
import { useShop } from '../store/shop'

// Farmgirl 패턴: 오늘 가장 신선한 재고로 디자이너 AI 부케
export default function DailyStandard() {
  const { storeName } = useShop()
  const { data: recs } = useQuery({ queryKey: ['daily-rec'], queryFn: () => aiRecommend('daily', '', 8) })
  const { data: fresh } = useQuery({ queryKey: ['daily-fresh'], queryFn: () => getProducts({ sort: 'rating', size: 8 }) })
  const list = (recs && recs.length ? recs : fresh?.items) || []

  return (
    <div>
      <section className="relative overflow-hidden bg-gradient-to-br from-sage-700 to-sage-800 text-white">
        <PetalLayer count={12} />
        <div className="relative z-10 max-w-6xl mx-auto px-4 py-16">
          <div className="flex items-center gap-2 text-sage-200 text-[12px] tracking-[0.2em] uppercase mb-3"><Leaf size={15} /> Fresh today, gone tomorrow</div>
          <h1 className="font-serif text-5xl font-bold mb-4">Today's Designer Bouquet</h1>
          <p className="text-cream/85 max-w-xl leading-relaxed text-lg font-light">
            Hand-designed each morning with the freshest stems in our cooler, then curated by <b className="font-medium">GUARDiA AI</b>. Limited daily stock · {storeName || 'your nearest store'} same-day delivery.
          </p>
        </div>
      </section>

      <div className="max-w-6xl mx-auto px-4 py-12">
        <div className="flex items-center gap-2 mb-6">
          <Sparkles className="text-blush-500" size={18} />
          <h2 className="font-serif text-2xl font-bold text-blush-900">Today's Picks</h2>
          <span className="text-xs text-sage-600">AI-curated</span>
        </div>
        <StaggerGrid className="grid grid-cols-2 md:grid-cols-4 gap-5">
          {list.map((p: any) => <StaggerItem key={p.id}><ProductCard p={p} /></StaggerItem>)}
        </StaggerGrid>
        {!list.length && (
          <div className="text-center text-blush-300 py-20">
            <Flower2 className="mx-auto text-blush-200 mb-3" size={40} />
            Today's bouquet is being designed. <Link to="/category" className="text-blush-500">Browse all flowers →</Link>
          </div>
        )}
      </div>
    </div>
  )
}
