import Link from "next/link";
import { asc } from "drizzle-orm";
import { db } from "@/db";
import { slides, announcements } from "@/db/schema";
import { getSettings } from "@/lib/data";
import { saveSlide, saveAnnouncement, saveSections } from "@/app/admin/actions";
const LABELS: Record<string, string> = { categories: "Shop by Category", featured: "Featured Products", bestSellers: "Best Sellers", newArrivals: "New Arrivals", offers: "Special Discounts", services: "Statistics counters", babyEssentials: "Mother & Baby Essentials", vitamins: "Vitamins & Supplements", blog: "Blog preview" };
export default async function Content({ searchParams }: { searchParams: Promise<{ tab?: string }> }) {
  const tab = (await searchParams).tab || "slides";
  const s = await getSettings();
  const sl = await db.select().from(slides).orderBy(asc(slides.sortOrder));
  const an = await db.select().from(announcements).orderBy(asc(announcements.sortOrder));
  const Slide = ({ x }: { x?: typeof sl[number] }) => <form action={saveSlide} className="card p-5 grid lg:grid-cols-[180px_1fr] gap-4"><input type="hidden" name="id" value={x?.id ?? ""} /><div className="aspect-video rounded-xl bg-mint overflow-hidden">{/* eslint-disable-next-line @next/next/no-img-element */}{x?.image && <img src={x.image} alt="" className="w-full h-full object-cover" />}</div><div className="grid sm:grid-cols-2 gap-2"><input name="heading" defaultValue={x?.heading} placeholder="Heading" required className="input sm:col-span-2 font-semibold" /><textarea name="description" defaultValue={x?.description} placeholder="Description" rows={2} className="input sm:col-span-2" /><input name="buttonText" defaultValue={x?.buttonText ?? "Shop Now"} placeholder="Button text" className="input" /><input name="buttonLink" defaultValue={x?.buttonLink ?? "/shop"} placeholder="Button link" className="input" /><input name="image" defaultValue={x?.image} placeholder="Image URL" className="input" /><input name="imageFile" type="file" accept="image/*" className="input !py-1.5" /><input name="sortOrder" type="number" defaultValue={x?.sortOrder ?? sl.length} className="input" title="Order" /><div className="flex items-center gap-3"><label className="text-sm flex gap-1"><input type="checkbox" name="active" defaultChecked={x?.active ?? true} />Visible</label><button className="btn btn-green !py-2 ml-auto">{x ? "Save" : "Add slide"}</button>{x && <button name="_delete" value="1" className="btn !py-2 text-red-600">Delete</button>}</div></div></form>;
  return <div><h1 className="text-2xl font-extrabold mb-4">Website & Homepage Editor</h1>
    <div className="flex gap-2 mb-5 text-sm">{[["slides", "Hero Slider / Banners"], ["announcements", "Announcement Bar"], ["sections", "Homepage Sections"]].map(([k, l]) => <Link key={k} href={`/admin/content?tab=${k}`} className={`px-4 py-2 rounded-full font-semibold ${tab === k ? "bg-brand text-white" : "bg-white border"}`}>{l}</Link>)}<Link href="/" target="_blank" className="ml-auto text-brand font-semibold py-2">Preview site ↗</Link></div>
    {tab === "slides" && <div className="space-y-3">{sl.map((x) => <Slide key={x.id} x={x} />)}<h3 className="font-bold pt-3">Add slide</h3><Slide /></div>}
    {tab === "announcements" && <div className="space-y-2">{[...an, undefined].map((a, i) => <form key={a?.id ?? "new" + i} action={saveAnnouncement} className="card p-3 flex flex-wrap gap-2 items-center"><input type="hidden" name="id" value={a?.id ?? ""} /><input name="text" defaultValue={a?.text} placeholder="New announcement message" required className="input flex-1 min-w-[240px]" /><input name="sortOrder" type="number" defaultValue={a?.sortOrder ?? an.length} className="input !w-20" /><label className="text-xs flex gap-1"><input type="checkbox" name="active" defaultChecked={a?.active ?? true} />Active</label><button className="btn btn-green !py-2">{a ? "Save" : "Add"}</button>{a && <button name="_delete" value="1" className="btn !py-2 text-red-600">✕</button>}</form>)}<p className="text-xs text-slate-500">Active messages rotate automatically every 4 seconds, in order.</p></div>}
    {tab === "sections" && <form action={saveSections} className="card p-6 space-y-2 max-w-lg"><h3 className="font-bold mb-2">Show / hide homepage sections</h3>{Object.keys(s.sections).map((k) => <label key={k} className="flex gap-2 text-sm"><input type="checkbox" name={k} defaultChecked={s.sections[k]} />{LABELS[k] || k}</label>)}<p className="text-xs text-slate-500 pt-2">Featured / Best-seller products are chosen with the checkboxes on each product.</p><button className="btn btn-green mt-2">Save</button></form>}
  </div>;
}