"use client";

import { useMemo, useState } from "react";
import { useFormStatus } from "react-dom";

import { saveCampaignAction } from "@/app/portal/oglasi/actions";
import { Spinner } from "@/components/common/Spinner";
import { AD_SLOT_GROUPS, AD_SLOT_META } from "@/lib/constants/ad-slots";

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="inline-flex items-center justify-center gap-2 rounded-xl bg-[#c2410c] px-6 py-3 font-semibold text-white disabled:opacity-60"
    >
      {pending ? <Spinner className="h-4 w-4" /> : null}
      {pending ? "Kreiram račun…" : "Sačuvaj i nastavi na plaćanje"}
    </button>
  );
}

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

type Props = {
  categories: Option[];
  cities: Option[];
  municipalities: Option[];
  neighborhoods: Option[];
  preselectedSlot?: string;
  preselectedBudgetRsd?: string;
  initial?: {
    id: string;
    name: string;
    objective: string;
    dailyBudgetRsd: string;
    totalBudgetRsd: string;
    bidModel: string;
    bidRsd: string;
    targetCategories: string[];
    targetCities: string[];
    targetMunicipalities: string[];
    targetNeighborhoods: string[];
    targetSlots: string[];
    targetTiers: string[];
    creativeHeadline: string;
    creativeBody: string;
    creativeImageUrl: string;
    landingUrl: string;
    startAt: string;
    endAt: string;
  };
};

export function SelfServeCampaignForm({
  categories,
  cities,
  municipalities,
  neighborhoods,
  preselectedSlot,
  preselectedBudgetRsd,
  initial,
}: Props) {
  const [headline, setHeadline] = useState(initial?.creativeHeadline ?? "");
  const [body, setBody] = useState(initial?.creativeBody ?? "");
  const [imageUrl, setImageUrl] = useState(initial?.creativeImageUrl ?? "");
  const [bidModel, setBidModel] = useState(initial?.bidModel ?? "CPC");
  const [bidRsd, setBidRsd] = useState(initial?.bidRsd ?? "50");
  const [selCats, setSelCats] = useState<string[]>(
    initial?.targetCategories ?? []
  );
  const [selCities, setSelCities] = useState<string[]>(
    initial?.targetCities ?? []
  );

  const reach = useMemo(() => {
    // Gruba procena dosega: manja ciljanja = veći doseg.
    const base = 10000;
    const catFactor =
      selCats.length === 0
        ? 1
        : Math.max(0.15, selCats.length / categories.length || 0.1);
    const cityFactor =
      selCities.length === 0 ? 1 : Math.max(0.1, selCities.length / 50);
    return Math.round(base * catFactor * cityFactor);
  }, [selCats, selCities, categories.length]);

  function toggle(list: string[], setList: (v: string[]) => void, id: string) {
    setList(list.includes(id) ? list.filter((x) => x !== id) : [...list, id]);
  }

  return (
    <div className="grid gap-8 lg:grid-cols-[1.4fr_1fr]">
      <form action={saveCampaignAction} className="space-y-6">
        {initial?.id && <input type="hidden" name="id" value={initial.id} />}

        <fieldset className="space-y-3 rounded-2xl border border-black/10 p-5">
          <legend className="px-2 text-sm font-semibold">Osnovno</legend>
          <label className="block text-sm font-medium">
            Naziv kampanje
            <input
              name="name"
              required
              defaultValue={initial?.name}
              className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
            />
          </label>
          <label className="block text-sm font-medium">
            Cilj
            <select
              name="objective"
              defaultValue={initial?.objective ?? "TRAFFIC"}
              className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
            >
              <option value="TRAFFIC">Saobraćaj (posete)</option>
              <option value="LEADS">Lidovi</option>
            </select>
          </label>
        </fieldset>

        <fieldset className="space-y-3 rounded-2xl border border-black/10 p-5">
          <legend className="px-2 text-sm font-semibold">
            Budžet i licitacija
          </legend>
          <p className="rounded-xl bg-emerald-50 px-3 py-2 text-xs leading-5 text-emerald-800">
            Budžet se uplaćuje unapred. Posle uspešne kartične uplate kampanja
            se automatski aktivira i nikada ne može potrošiti više od uplaćenog
            iznosa.
          </p>
          <div className="grid grid-cols-2 gap-3">
            <label className="block text-sm font-medium">
              Dnevni budžet (RSD)
              <input
                name="dailyBudgetRsd"
                type="number"
                step="0.01"
                min="0"
                required
                defaultValue={initial?.dailyBudgetRsd ?? "1000"}
                className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
              />
            </label>
            <label className="block text-sm font-medium">
              Ukupan budžet (RSD)
              <input
                name="totalBudgetRsd"
                type="number"
                step="0.01"
                min="0"
                required
                defaultValue={
                  initial?.totalBudgetRsd ?? preselectedBudgetRsd ?? "10000"
                }
                className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
              />
            </label>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <label className="block text-sm font-medium">
              Model
              <select
                name="bidModel"
                value={bidModel}
                onChange={(e) => setBidModel(e.target.value)}
                className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
              >
                <option value="CPC">CPC (po kliku)</option>
                <option value="CPM">CPM (po 1000 prikaza)</option>
              </select>
            </label>
            <label className="block text-sm font-medium">
              Ponuda {bidModel === "CPC" ? "po kliku" : "po 1000 prikaza"} (RSD)
              <input
                name="bidRsd"
                type="number"
                step="0.01"
                min="0"
                required
                value={bidRsd}
                onChange={(e) => setBidRsd(e.target.value)}
                className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
              />
            </label>
          </div>
        </fieldset>

        <fieldset className="space-y-3 rounded-2xl border border-black/10 p-5">
          <legend className="px-2 text-sm font-semibold">Ciljanje</legend>
          <p className="text-xs text-black/50">
            Prazan izbor = bez ograničenja (cilja sve).
          </p>
          <div>
            <p className="text-sm font-medium">Pozicije oglasa</p>
            <div className="mt-2 grid gap-2 sm:grid-cols-2">
              {AD_SLOT_GROUPS.flatMap((group) => group.slots).map((slot) => (
                <label
                  key={slot}
                  className="flex items-start gap-2 rounded-xl border border-black/10 px-3 py-2 text-xs"
                >
                  <input
                    type="checkbox"
                    name="targetSlots"
                    value={slot}
                    defaultChecked={
                      initial?.targetSlots.includes(slot) ||
                      preselectedSlot === slot
                    }
                    className="mt-0.5"
                  />
                  <span>
                    <b>{AD_SLOT_META[slot].label}</b>
                    <span className="mt-0.5 block text-black/50">
                      {AD_SLOT_META[slot].where}
                    </span>
                  </span>
                </label>
              ))}
            </div>
          </div>
          <div>
            <p className="text-sm font-medium">Kategorije</p>
            <div className="mt-1 flex max-h-32 flex-wrap gap-2 overflow-auto">
              {categories.map((c) => (
                <label
                  key={c.id}
                  className={`cursor-pointer rounded-full border px-3 py-1 text-xs ${
                    selCats.includes(c.id)
                      ? "border-[#c2410c] bg-[#c2410c]/10"
                      : "border-black/15"
                  }`}
                >
                  <input
                    type="checkbox"
                    name="targetCategories"
                    value={c.id}
                    checked={selCats.includes(c.id)}
                    onChange={() => toggle(selCats, setSelCats, c.id)}
                    className="hidden"
                  />
                  {c.name}
                </label>
              ))}
            </div>
          </div>
          <div>
            <p className="text-sm font-medium">Gradovi</p>
            <div className="mt-1 flex max-h-32 flex-wrap gap-2 overflow-auto">
              {cities.slice(0, 120).map((c) => (
                <label
                  key={c.id}
                  className={`cursor-pointer rounded-full border px-3 py-1 text-xs ${
                    selCities.includes(c.id)
                      ? "border-[#c2410c] bg-[#c2410c]/10"
                      : "border-black/15"
                  }`}
                >
                  <input
                    type="checkbox"
                    name="targetCities"
                    value={c.id}
                    checked={selCities.includes(c.id)}
                    onChange={() => toggle(selCities, setSelCities, c.id)}
                    className="hidden"
                  />
                  {c.name}
                </label>
              ))}
            </div>
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            <label className="block text-sm font-medium">
              Opštine
              <select
                name="targetMunicipalities"
                multiple
                defaultValue={initial?.targetMunicipalities ?? []}
                className="mt-1 h-36 w-full rounded-lg border border-black/15 px-3 py-2 text-xs"
              >
                {municipalities.map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                ))}
              </select>
            </label>
            <label className="block text-sm font-medium">
              Naselja
              <select
                name="targetNeighborhoods"
                multiple
                defaultValue={initial?.targetNeighborhoods ?? []}
                className="mt-1 h-36 w-full rounded-lg border border-black/15 px-3 py-2 text-xs"
              >
                {neighborhoods.map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                ))}
              </select>
            </label>
          </div>
          {/* Ciljanje po nivou (tier) je uklonjeno: oglasne pozicije se ne
              renderuju u kontekstu jednog profila, pa aukcija nema nivo za
              poređenje — svaka kampanja sa izabranim nivoom bi ispala iz
              aukcije. Postojeće vrednosti u bazi se ne diraju. */}
        </fieldset>

        <fieldset className="space-y-3 rounded-2xl border border-black/10 p-5">
          <legend className="px-2 text-sm font-semibold">Kreativa</legend>
          <label className="block text-sm font-medium">
            Naslov
            <input
              name="creativeHeadline"
              required
              value={headline}
              onChange={(e) => setHeadline(e.target.value)}
              className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
            />
          </label>
          <label className="block text-sm font-medium">
            Tekst
            <textarea
              name="creativeBody"
              required
              value={body}
              onChange={(e) => setBody(e.target.value)}
              rows={3}
              className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
            />
          </label>
          <label className="block text-sm font-medium">
            URL slike (opciono)
            <input
              name="creativeImageUrl"
              value={imageUrl}
              onChange={(e) => setImageUrl(e.target.value)}
              className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
            />
          </label>
          <label className="block text-sm font-medium">
            Landing URL
            <input
              name="landingUrl"
              required
              type="url"
              defaultValue={initial?.landingUrl}
              className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
            />
          </label>
        </fieldset>

        <fieldset className="grid grid-cols-2 gap-3 rounded-2xl border border-black/10 p-5">
          <legend className="px-2 text-sm font-semibold">Raspored</legend>
          <label className="block text-sm font-medium">
            Početak
            <input
              name="startAt"
              type="datetime-local"
              defaultValue={initial?.startAt}
              className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
            />
          </label>
          <label className="block text-sm font-medium">
            Kraj (opciono)
            <input
              name="endAt"
              type="datetime-local"
              defaultValue={initial?.endAt}
              className="mt-1 w-full rounded-lg border border-black/15 px-3 py-2"
            />
          </label>
        </fieldset>

        <SubmitButton />
      </form>

      <aside className="space-y-4">
        <p className="text-sm font-semibold">Pregled oglasa</p>
        <div className="overflow-hidden rounded-2xl border border-black/10 shadow-sm">
          {imageUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={imageUrl} alt="" className="h-40 w-full object-cover" />
          ) : (
            <div className="flex h-40 items-center justify-center bg-black/5 text-xs text-black/40">
              Nema slike
            </div>
          )}
          <div className="space-y-1 p-4">
            <p className="text-[10px] uppercase tracking-wide text-[#c2410c]">
              Sponzorisano
            </p>
            <p className="font-semibold">{headline || "Naslov oglasa"}</p>
            <p className="text-sm text-black/60">
              {body || "Opis oglasa se prikazuje ovde."}
            </p>
          </div>
        </div>
        <div className="rounded-2xl border border-black/10 p-4 text-sm">
          <p className="font-medium">Procenjeni doseg</p>
          <p className="text-2xl font-bold text-[#c2410c]">
            ~{reach.toLocaleString("sr-RS")}
          </p>
          <p className="text-xs text-black/50">
            prikaza dnevno (procena na osnovu ciljanja)
          </p>
        </div>
      </aside>
    </div>
  );
}