import { defineRouteConfig } from "@medusajs/admin-sdk"
import { useState, useEffect, useCallback } from "react"

const Heading = ({ children }: { children: React.ReactNode }) => (
  <h2 className="text-xl font-bold mb-4">{children}</h2>
)

const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
  <div className="border rounded-lg p-4 mb-6">
    <h3 className="text-base font-semibold mb-3">{title}</h3>
    {children}
  </div>
)

const Input = ({ label, value, onChange, placeholder }: { label: string; value: string; onChange: (v: string) => void; placeholder?: string }) => (
  <div className="mb-3">
    <label className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
    <input
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      className="w-full border rounded-md px-3 py-2 text-sm"
    />
  </div>
)

const Textarea = ({ label, value, onChange, placeholder }: { label: string; value: string; onChange: (v: string) => void; placeholder?: string }) => (
  <div className="mb-3">
    <label className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
    <textarea
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      rows={2}
      className="w-full border rounded-md px-3 py-2 text-sm"
    />
  </div>
)

const HeroPhotoItem = ({ photo, index, onChange, onRemove }: { photo: any; index: number; onChange: (i: number, p: any) => void; onRemove: (i: number) => void }) => (
  <div className="flex gap-3 items-start border rounded-md p-3 mb-2 bg-gray-50">
    <div className="flex-1 grid grid-cols-2 gap-2">
      <Input label="Image URL" value={photo.image_url} onChange={(v) => onChange(index, { ...photo, image_url: v })} placeholder="/images/..." />
      <Input label="Label" value={photo.label} onChange={(v) => onChange(index, { ...photo, label: v })} />
      <Input label="Rotate" value={photo.rotate} onChange={(v) => onChange(index, { ...photo, rotate: v })} placeholder="-rotate-2" />
      <Input label="Sort Order" value={String(photo.sort_order)} onChange={(v) => onChange(index, { ...photo, sort_order: Number(v) })} />
    </div>
    {photo.image_url && (
      <img src={photo.image_url} alt="" className="w-16 h-16 object-cover rounded border" />
    )}
    <button onClick={() => onRemove(index)} className="text-red-500 text-sm font-medium hover:text-red-700">Remove</button>
  </div>
)

const CategoryCardItem = ({ card, index, onChange, onRemove }: { card: any; index: number; onChange: (i: number, c: any) => void; onRemove: (i: number) => void }) => (
  <div className="flex gap-3 items-start border rounded-md p-3 mb-2 bg-gray-50">
    <div className="flex-1 grid grid-cols-2 gap-2">
      <Input label="Label" value={card.label} onChange={(v) => onChange(index, { ...card, label: v })} />
      <Input label="Sub" value={card.sub} onChange={(v) => onChange(index, { ...card, sub: v })} />
      <Input label="Image URL" value={card.image_url} onChange={(v) => onChange(index, { ...card, image_url: v })} />
      <Input label="Handle" value={card.handle} onChange={(v) => onChange(index, { ...card, handle: v })} placeholder="/categories/..." />
      <Input label="Badge" value={card.badge} onChange={(v) => onChange(index, { ...card, badge: v })} placeholder="🧱" />
      <Input label="BG Color" value={card.bg_color} onChange={(v) => onChange(index, { ...card, bg_color: v })} placeholder="bg-orange-400" />
      <Input label="Sort Order" value={String(card.sort_order)} onChange={(v) => onChange(index, { ...card, sort_order: Number(v) })} />
    </div>
    {card.image_url && (
      <img src={card.image_url} alt="" className="w-16 h-16 object-cover rounded border" />
    )}
    <button onClick={() => onRemove(index)} className="text-red-500 text-sm font-medium hover:text-red-700">Remove</button>
  </div>
)

const PartnerItem = ({ partner, index, onChange, onRemove }: { partner: any; index: number; onChange: (i: number, p: any) => void; onRemove: (i: number) => void }) => (
  <div className="flex gap-3 items-start border rounded-md p-3 mb-2 bg-gray-50">
    <div className="flex-1 grid grid-cols-3 gap-2">
      <Input label="Name" value={partner.name} onChange={(v) => onChange(index, { ...partner, name: v })} />
      <Input label="Image URL" value={partner.image_url} onChange={(v) => onChange(index, { ...partner, image_url: v })} />
      <Input label="Link" value={partner.link} onChange={(v) => onChange(index, { ...partner, link: v })} />
      <Input label="Sort Order" value={String(partner.sort_order)} onChange={(v) => onChange(index, { ...partner, sort_order: Number(v) })} />
    </div>
    {partner.image_url && (
      <img src={partner.image_url} alt="" className="w-16 h-8 object-contain rounded border" />
    )}
    <button onClick={() => onRemove(index)} className="text-red-500 text-sm font-medium hover:text-red-700">Remove</button>
  </div>
)

const HomepageCmsPage = () => {
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")

  const [headline, setHeadline] = useState("")
  const [subtitle, setSubtitle] = useState("")
  const [badge1Text, setBadge1Text] = useState("")
  const [badge2Text, setBadge2Text] = useState("")
  const [cta1Label, setCta1Label] = useState("")
  const [cta1Link, setCta1Link] = useState("")
  const [cta2Label, setCta2Label] = useState("")
  const [cta2Link, setCta2Link] = useState("")
  const [rentBannerTitle, setRentBannerTitle] = useState("")
  const [rentBannerText, setRentBannerText] = useState("")
  const [rentBannerCta, setRentBannerCta] = useState("")
  const [bestDealsHeading, setBestDealsHeading] = useState("")
  const [newArrivalsHeading, setNewArrivalsHeading] = useState("")
  const [partnersHeading, setPartnersHeading] = useState("")

  const [heroPhotos, setHeroPhotos] = useState<any[]>([])
  const [categoryCards, setCategoryCards] = useState<any[]>([])
  const [partners, setPartners] = useState<any[]>([])

  const fetchData = useCallback(async () => {
    setLoading(true)
    try {
      const res = await fetch(`/admin/homepage`)
      const data = await res.json()
      if (data.homepage) {
        const h = data.homepage
        setHeadline(h.headline || "")
        setSubtitle(h.subtitle || "")
        setBadge1Text(h.badge_1_text || "")
        setBadge2Text(h.badge_2_text || "")
        setCta1Label(h.cta_1_label || "")
        setCta1Link(h.cta_1_link || "")
        setCta2Label(h.cta_2_label || "")
        setCta2Link(h.cta_2_link || "")
        setRentBannerTitle(h.rent_banner_title || "")
        setRentBannerText(h.rent_banner_text || "")
        setRentBannerCta(h.rent_banner_cta || "")
        setBestDealsHeading(h.section_best_deals_heading || "")
        setNewArrivalsHeading(h.section_new_arrivals_heading || "")
        setPartnersHeading(h.section_partners_heading || "")
        setHeroPhotos(h.hero_photos || [])
        setCategoryCards(h.category_cards || [])
        setPartners(h.partners || [])
      }
    } catch (e: any) {
      setError(e.message || "Failed to load homepage data")
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { fetchData() }, [fetchData])

  const handleSave = async () => {
    setSaving(true)
    setError("")
    setSuccess("")
    try {
      const res = await fetch(`/admin/homepage`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          headline, subtitle,
          badge_1_text: badge1Text, badge_2_text: badge2Text,
          cta_1_label: cta1Label, cta_1_link: cta1Link,
          cta_2_label: cta2Label, cta_2_link: cta2Link,
          rent_banner_title: rentBannerTitle, rent_banner_text: rentBannerText, rent_banner_cta: rentBannerCta,
          section_best_deals_heading: bestDealsHeading,
          section_new_arrivals_heading: newArrivalsHeading,
          section_partners_heading: partnersHeading,
          hero_photos: heroPhotos,
          category_cards: categoryCards,
          partners: partners,
        }),
      })
      if (!res.ok) throw new Error("Failed to save")
      setSuccess("Homepage saved successfully!")
    } catch (e: any) {
      setError(e.message || "Failed to save")
    } finally {
      setSaving(false)
    }
  }

  if (loading) return <div className="p-6">Loading...</div>

  return (
    <div className="p-6 max-w-4xl">
      <div className="flex items-center justify-between mb-6">
        <Heading>Homepage CMS</Heading>
        <button
          onClick={handleSave}
          disabled={saving}
          className="bg-black text-white px-6 py-2 rounded-md text-sm font-medium disabled:opacity-50 hover:bg-gray-800 transition-colors"
        >
          {saving ? "Saving..." : "Save Changes"}
        </button>
      </div>

      {error && <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3 mb-4">{error}</div>}
      {success && <div className="bg-green-50 border border-green-200 text-green-700 text-sm rounded-md p-3 mb-4">{success}</div>}

      <Section title="Hero Text">
        <div className="grid grid-cols-2 gap-4">
          <Textarea label="Headline" value={headline} onChange={setHeadline} placeholder="Play. Learn. Grow." />
          <Textarea label="Subtitle" value={subtitle} onChange={setSubtitle} />
        </div>
        <div className="grid grid-cols-2 gap-4 mt-2">
          <Input label="Badge 1 Text" value={badge1Text} onChange={setBadge1Text} />
          <Input label="Badge 2 Text" value={badge2Text} onChange={setBadge2Text} />
        </div>
      </Section>

      <Section title="CTAs">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <Input label="CTA 1 Label" value={cta1Label} onChange={setCta1Label} />
            <Input label="CTA 1 Link" value={cta1Link} onChange={setCta1Link} />
          </div>
          <div>
            <Input label="CTA 2 Label" value={cta2Label} onChange={setCta2Label} />
            <Input label="CTA 2 Link" value={cta2Link} onChange={setCta2Link} />
          </div>
        </div>
      </Section>

      <Section title="Rent Banner">
        <div className="grid grid-cols-3 gap-4">
          <Input label="Title" value={rentBannerTitle} onChange={setRentBannerTitle} />
          <Input label="Text" value={rentBannerText} onChange={setRentBannerText} />
          <Input label="CTA" value={rentBannerCta} onChange={setRentBannerCta} />
        </div>
      </Section>

      <Section title="Section Headings">
        <div className="grid grid-cols-3 gap-4">
          <Input label="Best Deals" value={bestDealsHeading} onChange={setBestDealsHeading} />
          <Input label="New Arrivals" value={newArrivalsHeading} onChange={setNewArrivalsHeading} />
          <Input label="Partners" value={partnersHeading} onChange={setPartnersHeading} />
        </div>
      </Section>

      <Section title={`Hero Photos (${heroPhotos.length})`}>
        {heroPhotos.map((p, i) => (
          <HeroPhotoItem key={i} photo={p} index={i}
            onChange={(idx, val) => setHeroPhotos((prev) => prev.map((x, j) => j === idx ? val : x))}
            onRemove={(idx) => setHeroPhotos((prev) => prev.filter((_, j) => j !== idx))}
          />
        ))}
        <button
          onClick={() => setHeroPhotos((prev) => [...prev, { image_url: "", label: "", rotate: "", sort_order: prev.length }])}
          className="text-sm font-medium text-blue-600 hover:text-blue-800"
        >
          + Add Hero Photo
        </button>
      </Section>

      <Section title={`Category Cards (${categoryCards.length})`}>
        {categoryCards.map((c, i) => (
          <CategoryCardItem key={i} card={c} index={i}
            onChange={(idx, val) => setCategoryCards((prev) => prev.map((x, j) => j === idx ? val : x))}
            onRemove={(idx) => setCategoryCards((prev) => prev.filter((_, j) => j !== idx))}
          />
        ))}
        <button
          onClick={() => setCategoryCards((prev) => [...prev, { label: "", sub: "", image_url: "", handle: "", badge: "", bg_color: "", sort_order: prev.length }])}
          className="text-sm font-medium text-blue-600 hover:text-blue-800"
        >
          + Add Category Card
        </button>
      </Section>

      <Section title={`Partners (${partners.length})`}>
        {partners.map((p, i) => (
          <PartnerItem key={i} partner={p} index={i}
            onChange={(idx, val) => setPartners((prev) => prev.map((x, j) => j === idx ? val : x))}
            onRemove={(idx) => setPartners((prev) => prev.filter((_, j) => j !== idx))}
          />
        ))}
        <button
          onClick={() => setPartners((prev) => [...prev, { name: "", image_url: "", link: "", sort_order: prev.length }])}
          className="text-sm font-medium text-blue-600 hover:text-blue-800"
        >
          + Add Partner
        </button>
      </Section>

      <div className="flex justify-end mt-4 mb-8">
        <button
          onClick={handleSave}
          disabled={saving}
          className="bg-black text-white px-6 py-2 rounded-md text-sm font-medium disabled:opacity-50 hover:bg-gray-800 transition-colors"
        >
          {saving ? "Saving..." : "Save Changes"}
        </button>
      </div>
    </div>
  )
}

export const config = defineRouteConfig({
  label: "Homepage CMS",
  path: "/homepage-cms",
})

export default HomepageCmsPage