import {
  saveCmsFinanceSettingAction,
  saveCmsHomeBannerProductAction,
  saveCmsHomeBannerProductImageAction,
  saveCmsPageContentAction,
  saveCmsPageImageControlsAction,
  saveCmsPageHeroImagesAction,
  saveCmsPageSectionsAction,
  saveCmsSiteProfileAction,
} from "@/app/admin/actions";
import { AdminImageUpload } from "@/components/admin/AdminImageUpload";
import { Button } from "@/components/ui/button";
import { getAdminCmsData, getAdminReferenceData } from "@/lib/admin-data";
import { defaultSiteProfile } from "@/lib/site-profile";

const pageLabels: Record<string, string> = {
  scooters: "Scooters",
  brands: "Brands",
  offers: "Offers",
  about: "About Us",
  parts: "Parts",
  gallery: "Gallery",
  contact: "Contact",
};

export default async function AdminCmsPage() {
  const [cms, refData] = await Promise.all([getAdminCmsData(), getAdminReferenceData()]);
  const heroImages = (cms.heroImages ?? {}) as Record<string, string>;
  const defaultHeroImages = cms.defaultHeroImages as Record<string, string>;
  const siteProfile = cms.siteProfile ?? defaultSiteProfile;
  const homeBannerProductImage = (cms as any).homeBannerProductImage ?? "";
  const pageImageControls = ((cms as any).pageImageControls ?? {}) as Record<string, string>;
  const pageContents = ((cms as any).pageContents ?? {}) as Record<string, { heroTitle?: string; heroSubtitle?: string; heroDescription?: string }>;
  const pageSections = ((cms as any).pageSections ?? {}) as Record<string, Record<string, boolean>>;

  return (
    <div className="space-y-5">
      <div className="soft-card p-6">
        <h1 className="text-2xl font-bold text-navy-deep">CMS</h1>
        <p className="mt-2 text-sm text-navy-muted">
          Control page header/banner images and finance content visibility across the website.
        </p>
      </div>

      <section className="soft-card p-6">
        <h2 className="text-xl font-bold text-navy-deep">Page Header Images</h2>
        <p className="mt-2 text-sm text-navy-muted">
          Recommended size: 1920 x 640 px. Upload one image for each page hero/banner background.
        </p>
        <form action={saveCmsPageHeroImagesAction} className="mt-4 space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            {cms.pages.map((page) => (
              <AdminImageUpload
                key={page}
                label={`${pageLabels[page]} Header Image`}
                name={`heroImage_${page}`}
                defaultValue={heroImages[page] ?? defaultHeroImages[page]}
                previewAlt={`${pageLabels[page]} header image`}
              />
            ))}
          </div>
          <Button type="submit" variant="green">
            Save Header Images
          </Button>
        </form>
      </section>

      <section className="soft-card p-6">
        <h2 className="text-xl font-bold text-navy-deep">Page Text Content Controls</h2>
        <p className="mt-2 text-sm text-navy-muted">Control hero title, subtitle and description for each page.</p>
        <form action={saveCmsPageContentAction} className="mt-4 space-y-5">
          {cms.pages.map((page) => (
            <div key={page} className="rounded-xl border border-border p-4">
              <p className="text-sm font-bold text-navy-deep">{pageLabels[page]}</p>
              <div className="mt-3 grid gap-3 md:grid-cols-2">
                <input name={`${page}_heroTitle`} defaultValue={pageContents[page]?.heroTitle ?? ""} className="rounded-lg border border-border px-3 py-2" placeholder={`${pageLabels[page]} hero title`} />
                <input name={`${page}_heroSubtitle`} defaultValue={pageContents[page]?.heroSubtitle ?? ""} className="rounded-lg border border-border px-3 py-2" placeholder={`${pageLabels[page]} hero subtitle`} />
                <textarea name={`${page}_heroDescription`} defaultValue={pageContents[page]?.heroDescription ?? ""} className="rounded-lg border border-border px-3 py-2 md:col-span-2 min-h-20" placeholder={`${pageLabels[page]} hero description`} />
              </div>
            </div>
          ))}
          <Button type="submit" variant="green">Save Page Text Content</Button>
        </form>
      </section>

      <section className="soft-card p-6">
        <h2 className="text-xl font-bold text-navy-deep">Section Visibility Controls</h2>
        <p className="mt-2 text-sm text-navy-muted">Turn page sections on or off (Section 1 to Section 6).</p>
        <form action={saveCmsPageSectionsAction} className="mt-4 space-y-4">
          {cms.pages.map((page) => (
            <div key={page} className="rounded-xl border border-border p-4">
              <p className="text-sm font-bold text-navy-deep">{pageLabels[page]}</p>
              <div className="mt-3 grid gap-2 sm:grid-cols-3">
                {["section1", "section2", "section3", "section4", "section5", "section6"].map((sectionKey) => (
                  <label key={sectionKey} className="inline-flex items-center gap-2 text-sm text-navy-deep">
                    <input type="checkbox" name={`${page}_${sectionKey}`} defaultChecked={Boolean(pageSections[page]?.[sectionKey])} />
                    {sectionKey}
                  </label>
                ))}
              </div>
            </div>
          ))}
          <Button type="submit" variant="green">Save Section Visibility</Button>
        </form>
      </section>

      <section className="soft-card p-6">
        <h2 className="text-xl font-bold text-navy-deep">Page Image Controls</h2>
        <p className="mt-2 text-sm text-navy-muted">
          Control product/section images used inside each page content area.
        </p>
        <form action={saveCmsPageImageControlsAction} className="mt-4 space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <AdminImageUpload label="Scooters Banner Product Image" name="scooters_banner_product_image" defaultValue={pageImageControls.scooters_banner_product_image} previewAlt="Scooters banner product image" />
            <AdminImageUpload label="Brands Banner Product Image" name="brands_banner_product_image" defaultValue={pageImageControls.brands_banner_product_image} previewAlt="Brands banner product image" />
            <AdminImageUpload label="Brands CTA Product Image" name="brands_cta_product_image" defaultValue={pageImageControls.brands_cta_product_image} previewAlt="Brands CTA product image" />
            <AdminImageUpload label="Offers Banner Product Image" name="offers_banner_product_image" defaultValue={pageImageControls.offers_banner_product_image} previewAlt="Offers banner product image" />
            <AdminImageUpload label="About Banner Product Image" name="about_banner_product_image" defaultValue={pageImageControls.about_banner_product_image} previewAlt="About banner product image" />
            <AdminImageUpload label="About Story Section Image" name="about_story_image" defaultValue={pageImageControls.about_story_image} previewAlt="About story image" />
            <AdminImageUpload label="About CTA Image" name="about_cta_image" defaultValue={pageImageControls.about_cta_image} previewAlt="About CTA image" />
            <AdminImageUpload label="Parts Banner Product Image" name="parts_banner_product_image" defaultValue={pageImageControls.parts_banner_product_image} previewAlt="Parts banner product image" />
            <AdminImageUpload label="Parts Support Section Image" name="parts_support_image" defaultValue={pageImageControls.parts_support_image} previewAlt="Parts support image" />
            <AdminImageUpload label="Gallery Banner Image" name="gallery_banner_product_image" defaultValue={pageImageControls.gallery_banner_product_image} previewAlt="Gallery banner image" />
            <AdminImageUpload label="Contact Banner Product Image" name="contact_banner_product_image" defaultValue={pageImageControls.contact_banner_product_image} previewAlt="Contact banner product image" />
            <AdminImageUpload label="Contact CTA Image" name="contact_cta_image" defaultValue={pageImageControls.contact_cta_image} previewAlt="Contact CTA image" />
          </div>
          <Button type="submit" variant="green">Save Page Image Controls</Button>
        </form>
      </section>

      <section className="soft-card p-6">
        <h2 className="text-xl font-bold text-navy-deep">Finance / EMI Content</h2>
        <p className="mt-2 text-sm text-navy-muted">
          Disable this to hide finance and EMI promotional sections from public pages.
        </p>
        <form action={saveCmsFinanceSettingAction} className="mt-4 space-y-3">
          <label className="inline-flex items-center gap-2 text-sm font-semibold text-navy-deep">
            <input type="checkbox" name="financeEnabled" defaultChecked={cms.financeEnabled} />
            Enable finance/EMI content site-wide
          </label>
          <div>
            <Button type="submit" variant="green">
              Save Finance Setting
            </Button>
          </div>
        </form>
      </section>

      <section className="soft-card p-6">
        <h2 className="text-xl font-bold text-navy-deep">Homepage Offers Banner Product</h2>
        <p className="mt-2 text-sm text-navy-muted">
          Select which scooter image appears in the homepage offers section fallback banner.
        </p>
        <form action={saveCmsHomeBannerProductAction} className="mt-4 flex flex-wrap items-end gap-3">
          <label className="min-w-[280px] text-sm font-semibold text-navy-deep">
            Banner Scooter
            <select
              name="homeBannerScooterId"
              defaultValue={cms.homeBannerScooterId ?? refData.scooters[0]?.id}
              className="mt-2 h-11 w-full rounded-lg border border-border px-3"
            >
              {refData.scooters.map((scooter: any) => (
                <option key={scooter.id} value={scooter.id}>
                  {scooter.name}
                </option>
              ))}
            </select>
          </label>
          <Button type="submit" variant="green">Save Banner Product</Button>
        </form>
        <form action={saveCmsHomeBannerProductImageAction} className="mt-5 space-y-3">
          <AdminImageUpload
            label="Banner Product Image Override"
            name="homeBannerProductImage"
            defaultValue={homeBannerProductImage}
            previewAlt="Homepage banner product image"
          />
          <Button type="submit" variant="green">Save Banner Product Image</Button>
        </form>
      </section>

      <section className="soft-card p-6">
        <h2 className="text-xl font-bold text-navy-deep">Global Site Profile</h2>
        <p className="mt-2 text-sm text-navy-muted">
          Manage site name, tagline, contacts, branches, social links, and opening hours.
        </p>
        <form action={saveCmsSiteProfileAction} className="mt-4 grid gap-3 md:grid-cols-2">
          <input name="siteName" defaultValue={siteProfile.siteName} className="rounded-lg border border-border px-3 py-2" placeholder="Site name" />
          <input name="tagline" defaultValue={siteProfile.tagline} className="rounded-lg border border-border px-3 py-2" placeholder="Tagline" />
          <input name="primaryPhone" defaultValue={siteProfile.primaryPhone} className="rounded-lg border border-border px-3 py-2" placeholder="Primary phone" />
          <input name="secondaryPhone" defaultValue={siteProfile.secondaryPhone} className="rounded-lg border border-border px-3 py-2" placeholder="Secondary phone" />
          <input name="mainBranch" defaultValue={siteProfile.mainBranch} className="rounded-lg border border-border px-3 py-2" placeholder="Main branch" />
          <input name="secondBranch" defaultValue={siteProfile.secondBranch} className="rounded-lg border border-border px-3 py-2" placeholder="Second branch" />
          <input name="supportEmail" defaultValue={siteProfile.supportEmail} className="rounded-lg border border-border px-3 py-2" placeholder="Support email" />
          <input name="whatsappUrl" defaultValue={siteProfile.whatsappUrl} className="rounded-lg border border-border px-3 py-2" placeholder="WhatsApp URL" />
          <input name="facebookUrl" defaultValue={siteProfile.facebookUrl} className="rounded-lg border border-border px-3 py-2" placeholder="Facebook URL" />
          <input name="instagramUrl" defaultValue={siteProfile.instagramUrl} className="rounded-lg border border-border px-3 py-2" placeholder="Instagram URL" />
          <input name="youtubeUrl" defaultValue={siteProfile.youtubeUrl} className="rounded-lg border border-border px-3 py-2" placeholder="YouTube URL" />
          <input name="tiktokUrl" defaultValue={siteProfile.tiktokUrl} className="rounded-lg border border-border px-3 py-2" placeholder="TikTok URL" />
          <input name="openingHoursWeek" defaultValue={siteProfile.openingHoursWeek} className="rounded-lg border border-border px-3 py-2" placeholder="Sun-Fri hours" />
          <input name="openingHoursSat" defaultValue={siteProfile.openingHoursSat} className="rounded-lg border border-border px-3 py-2" placeholder="Saturday hours" />
          <input name="holidayNote" defaultValue={siteProfile.holidayNote} className="rounded-lg border border-border px-3 py-2 md:col-span-2" placeholder="Holiday note" />
          <div className="md:col-span-2">
            <Button type="submit" variant="green">Save Site Profile</Button>
          </div>
        </form>
      </section>
    </div>
  );
}