import Link from "next/link";
import { requireStaff } from "@/lib/auth";
import { db } from "@/lib/db";
import { Badge, Card, L, PageHead, area, btn, btnGhost, input } from "@/components/admin/ui";
import { deleteFaq, deleteMenu, deletePage, saveFaq, saveMenu, savePage } from "./actions";

const LOCS = [["HEADER", "Header menu"], ["FOOTER_SHOP", "Footer: Shop"], ["FOOTER_INFO", "Footer: Info"], ["FOOTER_CONTACT", "Footer: Help"]] as const;

export default async function PagesAdmin({ searchParams }: { searchParams: Promise<{ tab?: string; edit?: string }> }) {
  await requireStaff("content.edit");
  const { tab = "pages", edit } = await searchParams;
  const tabs = [["pages", "Pages"], ["faq", "FAQ"], ["menus", "Menus and footer links"]];
  return (
    <div>
      <PageHead title="Pages and menus" sub="Policies, brand pages, FAQ, navigation and footer links. Contact details, social links and the announcement bar are under Settings." />
      <div className="flex gap-2 mb-6">{tabs.map(([k, l]) => <Link key={k} href={`?tab=${k}`} className={`px-4 h-10 grid place-items-center text-[14px] border ${tab === k ? "bg-ink text-paper border-ink" : "bg-paper border-sand"}`}>{l}</Link>)}</div>
      {tab === "pages" && <PagesTab edit={edit} />}{tab === "faq" && <FaqTab />}{tab === "menus" && <MenusTab />}
    </div>
  );
}

async function PagesTab({ edit }: { edit?: string }) {
  const pages = await db.page.findMany({ orderBy: { title: "asc" } });
  const cur = edit === "new" ? null : pages.find((p) => p.id === edit);
  return (
    <div className="grid lg:grid-cols-[320px_1fr] gap-6">
      <Card title="All pages" action={<Link href="?tab=pages&edit=new" className={btnGhost}>New page</Link>}>
        <ul className="divide-y divide-sand text-[14px]">{pages.map((p) => <li key={p.id} className="py-2 flex justify-between gap-2"><Link href={`?tab=pages&edit=${p.id}`} className="underline underline-offset-4">{p.title}</Link><span className="text-stone text-[12px]">/{p.slug} {p.status === "DRAFT" && <Badge tone="warn">draft</Badge>}</span></li>)}</ul>
      </Card>
      {(cur || edit === "new") ? (
        <Card title={cur ? `Edit ${cur.title}` : "New page"}>
          <form action={savePage} className="grid md:grid-cols-2 gap-4">
            {cur && <input type="hidden" name="id" value={cur.id} />}
            <L label="Title"><input name="title" defaultValue={cur?.title} className={input} required /></L><L label="Slug (URL)" hint="Shown as /your-slug"><input name="slug" defaultValue={cur?.slug} className={input} required /></L>
            <L label="Intro (one or two sentences)" className="md:col-span-2"><textarea name="intro" defaultValue={cur?.intro ?? ""} className={area} /></L>
            <L label="Body" hint="## Heading, ### Subheading, blank line between paragraphs, “- ” for lists, **bold**, [link text](/path). No HTML." className="md:col-span-2"><textarea name="body" defaultValue={cur?.body ?? ""} className={`${area} min-h-[320px] font-mono`} /></L>
            <L label="Status"><select name="status" defaultValue={cur?.status ?? "DRAFT"} className={input}><option value="PUBLISHED">Published</option><option value="DRAFT">Draft (hidden)</option></select></L><span />
            <L label="SEO title"><input name="seoTitle" defaultValue={cur?.seoTitle ?? ""} className={input} /></L><L label="SEO description"><input name="seoDesc" defaultValue={cur?.seoDesc ?? ""} maxLength={320} className={input} /></L>
            <div className="md:col-span-2 flex gap-4"><button className={btn}>Save page</button>{cur && <Link href={`/${cur.slug}`} target="_blank" className="underline self-center text-[13px]">View</Link>}</div>
          </form>
          {cur && !cur.system && <form action={deletePage} className="mt-4"><input type="hidden" name="id" value={cur.id} /><button className="underline text-rose text-[13px]">Delete page</button></form>}
        </Card>) : <p className="text-stone self-center">Choose a page to edit, or create a new one.</p>}
    </div>
  );
}

async function FaqTab() {
  const items = await db.faqItem.findMany({ orderBy: [{ sortOrder: "asc" }] });
  return (
    <div className="space-y-4">
      <Card title="Add a question"><FaqForm /></Card>
      {items.map((f) => <Card key={f.id}><FaqForm item={f} /></Card>)}
    </div>
  );
}
function FaqForm({ item }: { item?: { id: string; group: string; question: string; answer: string; sortOrder: number; visible: boolean } }) {
  return (
    <div><form action={saveFaq} className="grid md:grid-cols-[160px_1fr_100px] gap-3">
      {item && <input type="hidden" name="id" value={item.id} />}
      <L label="Group"><input name="group" defaultValue={item?.group ?? "General"} className={input} /></L><L label="Question"><input name="question" defaultValue={item?.question} className={input} required /></L><L label="Order"><input name="sortOrder" type="number" defaultValue={item?.sortOrder ?? 0} className={input} /></L>
      <L label="Answer" className="md:col-span-3"><textarea name="answer" defaultValue={item?.answer} className={area} required /></L>
      <div className="md:col-span-3 flex gap-5 items-center">{item && <label className="flex gap-2 text-[14px]"><input type="checkbox" name="visible" defaultChecked={item.visible} /> Visible</label>}<button className={btn}>{item ? "Save" : "Add question"}</button></div>
    </form>{item && <form action={deleteFaq} className="mt-2"><input type="hidden" name="id" value={item.id} /><button className="underline text-rose text-[13px]">Delete</button></form>}</div>
  );
}

async function MenusTab() {
  const items = await db.menuItem.findMany({ orderBy: [{ sortOrder: "asc" }] });
  return (
    <div className="grid lg:grid-cols-2 gap-4">
      {LOCS.map(([loc, name]) => {
        const here = items.filter((i) => i.location === loc);
        return (
          <Card key={loc} title={name}>
            <ul className="space-y-3">{here.map((m) => (
              <li key={m.id}><form action={saveMenu} className="grid grid-cols-[1fr_1fr_70px] gap-2"><input type="hidden" name="id" value={m.id} /><input type="hidden" name="location" value={loc} />
                <input name="label" defaultValue={m.label} className={input} aria-label="Label" /><input name="href" defaultValue={m.href} className={input} aria-label="Link" /><input name="sortOrder" type="number" defaultValue={m.sortOrder} className={input} aria-label="Order" />
                {loc === "HEADER" && <select name="parentId" defaultValue={m.parentId ?? ""} className={`${input} col-span-2`} aria-label="Parent item"><option value="">Top level</option>{here.filter((x) => x.id !== m.id && !x.parentId).map((x) => <option key={x.id} value={x.id}>Under {x.label}</option>)}</select>}
                <div className="flex gap-3 items-center col-span-3"><button className={btnGhost}>Save</button></div></form>
                <form action={deleteMenu}><input type="hidden" name="id" value={m.id} /><button className="underline text-rose text-[12px] mt-1">Remove</button></form></li>))}</ul>
            <form action={saveMenu} className="grid grid-cols-[1fr_1fr_70px] gap-2 mt-4 pt-4 border-t border-sand"><input type="hidden" name="location" value={loc} /><input name="label" placeholder="Label" className={input} required /><input name="href" placeholder="/path" className={input} required /><input name="sortOrder" type="number" defaultValue={here.length} className={input} /><button className={`${btn} col-span-3`}>Add link</button></form>
          </Card>);
      })}
    </div>
  );
}