import type { PageContent, PageKey } from "@prisma/client";
import { AdminAutoTextarea } from "@/admin/components/AdminAutoTextarea";
import { AdminFormField, AdminFormSection } from "@/admin/components/AdminFormField";
import { savePageContentAction } from "@/lib/actions";

const labels: Record<PageKey, string> = {
  ABOUT: "About page",
  CONTACT: "Contact page",
  HOME: "Homepage"
};

const descriptions: Record<PageKey, string> = {
  ABOUT: "Public about page copy, hero, and SEO.",
  CONTACT: "Contact page messaging, CTA, and hero media.",
  HOME: "Homepage hero text, body content, and primary call to action."
};

export function PageContentForm({ page }: { page: PageContent }) {
  return (
    <form action={savePageContentAction} className="admin-form glass-panel admin-pages-form">
      <input name="key" type="hidden" value={page.key} />

      <header className="admin-pages-form__head">
        <span className="pill">{page.key}</span>
        <h2>{labels[page.key]}</h2>
        <p className="muted">{descriptions[page.key]}</p>
      </header>

      <AdminFormSection title="Page content" />

      <AdminFormField label="Title">
        <input
          className="admin-form-control"
          defaultValue={page.title}
          name="title"
          placeholder="Page heading"
          required
        />
      </AdminFormField>

      <AdminFormField label="Subtitle">
        <input
          className="admin-form-control"
          defaultValue={page.subtitle}
          name="subtitle"
          placeholder="Short line under the title"
          required
        />
      </AdminFormField>

      <AdminFormField
        hint="Main page body. Larger area for long-form content."
        label="Body"
        span="full"
      >
        <AdminAutoTextarea
          defaultValue={page.body}
          name="body"
          placeholder="Write the main page content"
          required
          variant="description"
        />
      </AdminFormField>

      <AdminFormSection title="SEO settings" />

      <AdminFormField label="SEO title">
        <input
          className="admin-form-control"
          defaultValue={page.seoTitle ?? ""}
          name="seoTitle"
          placeholder="Optional — defaults to page title"
        />
      </AdminFormField>

      <AdminFormField label="SEO description">
        <AdminAutoTextarea
          defaultValue={page.seoDescription ?? ""}
          name="seoDescription"
          placeholder="Optional search description"
          variant="compact"
        />
      </AdminFormField>

      <AdminFormField label="SEO keywords">
        <input
          className="admin-form-control"
          defaultValue={page.seoKeywords ?? ""}
          name="seoKeywords"
          placeholder="Just Chill Nepal, Nepal culture"
        />
      </AdminFormField>

      <AdminFormSection title="Call to action & media" />

      <AdminFormField label="CTA label">
        <input
          className="admin-form-control"
          defaultValue={page.ctaLabel ?? ""}
          name="ctaLabel"
          placeholder="Example: Watch videos"
        />
      </AdminFormField>

      <AdminFormField label="CTA link">
        <input
          className="admin-form-control"
          defaultValue={page.ctaHref ?? ""}
          name="ctaHref"
          placeholder="/videos or https://..."
        />
      </AdminFormField>

      <AdminFormField label="Hero image URL">
        <input
          className="admin-form-control"
          defaultValue={page.heroImage ?? ""}
          name="heroImage"
          placeholder="/uploads/hero.jpg or https://..."
        />
      </AdminFormField>

      <AdminFormField hint="Replaces the URL above when a file is selected." label="Upload hero image" span="full">
        <input className="admin-form-control" name="heroImageFile" type="file" />
      </AdminFormField>

      <button className="admin-btn admin-btn-modify admin-form__submit" type="submit">
        Save {labels[page.key].toLowerCase()}
      </button>
    </form>
  );
}