import {
  AdCampaignStatus,
  AdPageType,
  type AdCampaign,
  type Category,
  type RegionNode,
} from "@prisma/client";

import { deleteAdCampaignAction, saveAdCampaignAction } from "@/app/(admin)/admin/oglasi/kampanje/actions";
import { AdminDeleteButton } from "@/components/admin/common/AdminDeleteButton";
import { AdminSaveNotice } from "@/components/admin/common/AdminSaveNotice";
import { AdminDateTimeField } from "@/components/admin/forms/AdminDateTimeField";
import { AdSlotPicker } from "@/components/admin/forms/AdSlotPicker";
import { AD_MODULE_TYPES } from "@/lib/constants/ad-slots";
import { formatDateTimeLocalInput, getAdCampaignStatusLabel } from "@/lib/module-formatters";
import { SubmitButton } from "@/components/common/SubmitButton";

type CompanyOption = {
  id: string;
  name: string;
};

type CampaignDetails = AdCampaign & {
  category?: Category | null;
  company?: CompanyOption | null;
  city?: RegionNode | null;
  municipality?: RegionNode | null;
  neighborhood?: RegionNode | null;
};

const PAGE_TYPE_OPTIONS: Array<{ value: AdPageType; label: string }> = [
  { value: "HOME", label: "Početna" },
  { value: "LISTING", label: "Listing stranica" },
  { value: "PROFILE", label: "Profil" },
  { value: "CATEGORY", label: "Kategorija" },
  { value: "CITY", label: "Grad" },
  { value: "MUNICIPALITY", label: "Opština" },
  { value: "MODULE", label: "Modul" },
];

export function AdCampaignForm({
  campaign,
  categories,
  companies,
  regions,
}: {
  campaign?: CampaignDetails | null;
  categories: Category[];
  companies: CompanyOption[];
  regions: RegionNode[];
}) {
  const cities = regions.filter((region) => region.type === "CITY");
  const municipalities = regions.filter((region) => region.type === "MUNICIPALITY");
  const neighborhoods = regions.filter((region) => region.type === "NEIGHBORHOOD");

  return (
    <form action={saveAdCampaignAction} className="surface admin-form-shell rounded-[2rem] p-5 xl:p-6">
      <input type="hidden" name="id" value={campaign?.id ?? ""} />

      <div className="mb-6 flex flex-wrap items-center justify-end gap-3">
        {campaign?.id ? (
          <AdminDeleteButton
            action={deleteAdCampaignAction}
            title="Obrisati kampanju?"
            description="Kampanja će biti uklonjena iz oglasnog sistema i više neće moći da se prikazuje."
            triggerLabel="Obriši kampanju"
            inputs={[{ name: "id", value: campaign.id }]}
          />
        ) : null}
        <SubmitButton className="primary-button">
          Sačuvaj kampanju
        </SubmitButton>
      </div>
      <AdminSaveNotice message="Kampanja je sačuvana." />

      <div className="grid gap-6 2xl:grid-cols-[minmax(0,1fr)_minmax(420px,560px)]">
        <div className="min-w-0 space-y-6">
          <section>
            <h3 className="admin-panel-heading">1. Kampanja i pozicija</h3>
            <p className="mt-1 text-[0.85rem] text-[#6b7280]">
              Naziv, gde se reklama prikazuje (pozicija) i kada je aktivna.
              Sadržaj (slika/HTML/AdSense) dodaješ kao &quot;kreativ&quot; posle čuvanja.
            </p>
            <div className="mt-5 grid gap-4">
              <label className="field-shell">
                <span className="field-label">Naziv kampanje</span>
                <input
                  required
                  name="name"
                  defaultValue={campaign?.name ?? ""}
                  className="input-premium"
                  placeholder="Naziv kampanje"
                />
              </label>
              <div className="grid gap-4 md:grid-cols-2">
                <label className="field-shell">
                  <span className="field-label">Slug kampanje</span>
                  <input
                    name="slug"
                    defaultValue={campaign?.slug ?? ""}
                    className="input-premium"
                    placeholder="Slug kampanje"
                  />
                </label>
                <label className="field-shell">
                  <span className="field-label">Status</span>
                  <select
                    name="status"
                    defaultValue={campaign?.status ?? AdCampaignStatus.DRAFT}
                    className="select-premium"
                  >
                    {Object.values(AdCampaignStatus).map((status) => (
                      <option key={status} value={status}>
                        {getAdCampaignStatusLabel(status)}
                      </option>
                    ))}
                  </select>
                </label>
              </div>
              <p className="rounded-xl border border-[#ede8e3] bg-[#faf9f7] px-4 py-3 text-[0.82rem] leading-relaxed text-[#6b7280]">
                <strong className="font-semibold text-[#0c1828]">
                  Pozicija (Slot)
                </strong>{" "}
                određuje GDE se reklama vidi. &quot;Tip stranice&quot; je{" "}
                <strong className="font-semibold text-[#0c1828]">
                  opciono dodatno suženje
                </strong>{" "}
                — slot već podrazumeva stranicu, pa ga ostavi prazno osim ako
                želiš da kampanja radi samo na jednom tipu stranice.
              </p>
              <div className="grid gap-4 md:grid-cols-3">
                <label className="field-shell md:col-span-2">
                  <span className="field-label">Pozicija (Slot)</span>
                  <AdSlotPicker defaultValue={campaign?.slot ?? undefined} />
                </label>
                <label className="field-shell">
                  <span className="field-label">Prioritet</span>
                  <input
                    name="priority"
                    type="number"
                    defaultValue={campaign?.priority ?? 0}
                    className="input-premium"
                    placeholder="Veći broj = ranije se prikazuje"
                  />
                </label>
              </div>
              <label className="field-shell">
                <span className="field-label">
                  Tip stranice — dodatno suženje (opciono)
                </span>
                <select
                  name="pageType"
                  defaultValue={campaign?.pageType ?? ""}
                  className="select-premium"
                >
                  <option value="">
                    Bez ograničenja (preporučeno — slot već bira stranicu)
                  </option>
                  {PAGE_TYPE_OPTIONS.map((option) => (
                    <option key={option.value} value={option.value}>
                      Samo: {option.label}
                    </option>
                  ))}
                </select>
              </label>
              <div className="grid gap-4 md:grid-cols-2">
                <AdminDateTimeField
                  name="startAt"
                  label="Početak kampanje"
                  defaultValue={formatDateTimeLocalInput(campaign?.startAt)}
                />
                <AdminDateTimeField
                  name="endAt"
                  label="Kraj kampanje"
                  defaultValue={formatDateTimeLocalInput(campaign?.endAt)}
                />
              </div>
              <label className="field-shell">
                <span className="field-label">Click URL</span>
                <input
                  name="clickUrl"
                  defaultValue={campaign?.clickUrl ?? ""}
                  className="input-premium"
                  placeholder="Click URL"
                />
              </label>
            </div>
          </section>

          <section>
            <h3 className="admin-panel-heading">2. Targetiranje (opciono)</h3>
            <p className="mt-1 text-[0.85rem] text-[#6b7280]">
              Suzi prikaz na određenu kategoriju, grad/opštinu ili firmu.
              Ostavi prazno da se prikazuje svuda gde pozicija postoji.
            </p>
            <div className="mt-5 grid gap-4">
              <label className="field-shell">
                <span className="field-label">Kategorija</span>
                <select
                  name="categoryId"
                  defaultValue={campaign?.categoryId ?? ""}
                  className="select-premium"
                >
                  <option value="">Sve kategorije</option>
                  {categories.map((category) => (
                    <option key={category.id} value={category.id}>
                      {category.nameSr}
                    </option>
                  ))}
                </select>
              </label>
              <label className="field-shell">
                <span className="field-label">Oglašivač (fakturisanje)</span>
                <select
                  name="companyId"
                  defaultValue={campaign?.companyId ?? ""}
                  className="select-premium"
                >
                  <option value="">Bez vezanog profila</option>
                  {companies.map((company) => (
                    <option key={company.id} value={company.id}>
                      {company.name}
                    </option>
                  ))}
                </select>
                <span className="field-hint">
                  Evidencija ko je zakupio oglas. Ne utiče na prikaz.
                </span>
              </label>
              <div className="grid gap-4 md:grid-cols-3">
                <label className="field-shell">
                  <span className="field-label">Grad</span>
                  <select
                    name="cityId"
                    defaultValue={campaign?.cityId ?? ""}
                    className="select-premium"
                  >
                    <option value="">Svi gradovi</option>
                    {cities.map((region) => (
                      <option key={region.id} value={region.id}>
                        {region.nameSr}
                      </option>
                    ))}
                  </select>
                </label>
                <label className="field-shell">
                  <span className="field-label">Opština</span>
                  <select
                    name="municipalityId"
                    defaultValue={campaign?.municipalityId ?? ""}
                    className="select-premium"
                  >
                    <option value="">Sve opštine</option>
                    {municipalities.map((region) => (
                      <option key={region.id} value={region.id}>
                        {region.nameSr}
                      </option>
                    ))}
                  </select>
                </label>
                <label className="field-shell">
                  <span className="field-label">Naselje</span>
                  <select
                    name="neighborhoodId"
                    defaultValue={campaign?.neighborhoodId ?? ""}
                    className="select-premium"
                  >
                    <option value="">Sva naselja</option>
                    {neighborhoods.map((region) => (
                      <option key={region.id} value={region.id}>
                        {region.nameSr}
                      </option>
                    ))}
                  </select>
                </label>
              </div>
              {/* Slobodan tekst je ovde bio tiha zamka: `Events`, razmak na
                  kraju ili izmišljena vrednost = kampanja koja se nikad ne
                  prikaže. Izbor je ograničen na module koje render sloj
                  stvarno poznaje. */}
              <label className="field-shell">
                <span className="field-label">Modul</span>
                <select
                  name="moduleType"
                  defaultValue={campaign?.moduleType ?? ""}
                  className="select-premium"
                >
                  <option value="">Svi moduli (preporučeno)</option>
                  {AD_MODULE_TYPES.map((moduleType) => (
                    <option key={moduleType} value={moduleType}>
                      {moduleType}
                    </option>
                  ))}
                </select>
                <span className="field-hint">
                  Ograničava prikaz na jedan modul. Pozicija već bira stranicu —
                  ostavite prazno osim ako baš ciljate jedan modul.
                </span>
              </label>
            </div>
          </section>
        </div>

        <div className="min-w-0 space-y-6">
          <section>
            <h3 className="admin-panel-heading !text-[1.7rem]">Pravila prikaza</h3>
            <div className="mt-4 space-y-3 text-sm text-muted-foreground">
              <div className="rounded-[1.5rem] border border-border bg-background/70 px-4 py-4">
                Kampanja se prikazuje samo ako su slot, page type i svi zadati target filteri usklađeni sa kontekstom stranice.
              </div>
              <div className="rounded-[1.5rem] border border-border bg-background/70 px-4 py-4">
                Veći <span className="font-semibold text-foreground">priority</span> dobija prednost kada više kampanja odgovara istom slotu.
              </div>
              <div className="rounded-[1.5rem] border border-border bg-background/70 px-4 py-4">
                Kreative se upravljaju odvojeno u sekciji <span className="font-semibold text-foreground">Kreative</span>.
              </div>
            </div>
          </section>
        </div>
      </div>

      <div className="mt-8 flex flex-wrap items-center justify-between gap-3">
        <SubmitButton className="primary-button">
          Sačuvaj kampanju
        </SubmitButton>
      </div>
    </form>
  );
}