"use client";

import { FormEvent, useMemo, useState } from "react";

import { Button } from "@/components/button";
import { cn } from "@/lib/utils";

export type LeadType =
  | "ecommerce"
  | "ecommerce_multi_store"
  | "custom_ecommerce"
  | "namenski_ecommerce"
  | "bs_reporter"
  | "biznisoft"
  | "beds24"
  | "pda_wms"
  | "vps"
  | "tracking"
  | "seo_aeo_geo"
  | "general";

export type LeadIntent = {
  leadType?: LeadType;
  subject?: string;
  sourcePage?: string;
  sourceSection?: string;
};

type FormState = "idle" | "loading" | "success" | "error";

type FieldConfig = {
  name: string;
  label: string;
  type?: "text" | "url" | "select";
  placeholder?: string;
  options?: Array<[string, string]>;
};

type ContactFormProps = LeadIntent & {
  className?: string;
  inModal?: boolean;
  onCancel?: () => void;
  onSuccess?: () => void;
};

type ContactApiResult = {
  ok: boolean;
  body: {
    success?: boolean;
    message?: string;
    errors?: Record<string, string[]>;
  };
};

const leadTypeLabels: Record<LeadType, string> = {
  ecommerce: "eCommerce",
  ecommerce_multi_store: "eCommerce za više prodavnica",
  custom_ecommerce: "Namensko eCommerce rešenje",
  namenski_ecommerce: "Namenski eCommerce",
  bs_reporter: "BS Reporter",
  biznisoft: "BizniSoft integracije",
  beds24: "Beds24 / hoteli",
  pda_wms: "PDA / WMS",
  vps: "VPS / infrastruktura",
  tracking: "Tracking / analytics",
  seo_aeo_geo: "SEO / AEO / GEO",
  general: "Opšti upit",
};

const leadTypeOptions = Object.entries(leadTypeLabels) as Array<[LeadType, string]>;

const budgetOptions = [
  ["", "Izaberite budžet"],
  ["up_to_2000", "do 2.000 €"],
  ["2000_5000", "2.000–5.000 €"],
  ["5000_10000", "5.000–10.000 €"],
  ["10000_25000", "10.000–25.000 €"],
  ["25000_plus", "25.000 €+"],
];

const yesNoOptions: Array<[string, string]> = [
  ["", "Izaberite"],
  ["da", "Da"],
  ["ne", "Ne"],
  ["delimicno", "Delimično / potrebno je proveriti"],
];

const industryOptions = [
  ["", "Izaberite delatnost"],
  ["distribucija_veleprodaja", "Distribucija / veleprodaja"],
  ["proizvodnja", "Proizvodnja"],
  ["retail", "Retail / maloprodaja"],
  ["hospitality", "Hotel / apartmani / hospitality"],
  ["ecommerce_brand", "eCommerce brend"],
  ["logistika", "Logistika / skladište"],
  ["usluge", "B2B usluge"],
  ["drugo", "Drugo"],
];

const revenueOptions = [
  ["", "Izaberite godišnji promet"],
  ["up_to_500k", "do 500.000 €"],
  ["500k_1m", "500.000–1M €"],
  ["1m_5m", "1M–5M €"],
  ["5m_20m", "5M–20M €"],
  ["20m_plus", "20M €+"],
  ["no_answer", "Ne želim da navedem"],
];

const employeeOptions = [
  ["", "Izaberite broj zaposlenih"],
  ["1_10", "1–10"],
  ["11_50", "11–50"],
  ["51_200", "51–200"],
  ["201_plus", "201+"],
];

const fieldSets: Record<LeadType, FieldConfig[]> = {
  ecommerce: [
    { name: "articles_count", label: "Približan broj artikala/SKU", placeholder: "npr. 8.000 artikala" },
    { name: "retail_locations", label: "Koliko maloprodajnih objekata imate?", placeholder: "npr. 4 prodavnice" },
    { name: "warehouses", label: "Koliko magacina imate?", placeholder: "npr. centralni + 2 pomoćna" },
    { name: "sales_model", label: "Da li imate B2B, B2C ili oba modela prodaje?", type: "select", options: [["", "Izaberite"], ["b2c", "B2C"], ["b2b", "B2B"], ["oba", "Oba modela"]] },
    { name: "existing_webshop", label: "Da li imate postojeći webshop?", type: "select", options: yesNoOptions },
    { name: "current_webshop_platform", label: "Trenutni webshop / platforma", placeholder: "npr. WooCommerce, Shopify, custom, nema..." },
    { name: "stock_connected", label: "Da li su vam zalihe trenutno povezane sa webshopom?", type: "select", options: yesNoOptions },
    { name: "courier_integrations", label: "Da li želite integraciju sa kurirskim službama?", type: "select", options: yesNoOptions },
  ],
  ecommerce_multi_store: [
    { name: "articles_count", label: "Približan broj artikala/SKU", placeholder: "npr. 8.000 artikala" },
    { name: "retail_locations", label: "Koliko maloprodajnih objekata imate?", placeholder: "npr. 4 prodavnice" },
    { name: "warehouses", label: "Koliko magacina imate?", placeholder: "npr. centralni + 2 pomoćna" },
    { name: "sales_model", label: "Da li imate B2B, B2C ili oba modela prodaje?", type: "select", options: [["", "Izaberite"], ["b2c", "B2C"], ["b2b", "B2B"], ["oba", "Oba modela"]] },
    { name: "existing_webshop", label: "Da li imate postojeći webshop?", type: "select", options: yesNoOptions },
    { name: "current_webshop_platform", label: "Trenutni webshop / platforma", placeholder: "npr. WooCommerce, Shopify, custom, nema..." },
    { name: "stock_connected", label: "Da li su vam zalihe trenutno povezane sa webshopom?", type: "select", options: yesNoOptions },
    { name: "courier_integrations", label: "Da li želite integraciju sa kurirskim službama?", type: "select", options: yesNoOptions },
  ],
  custom_ecommerce: [
    { name: "articles_count", label: "Približan broj artikala/SKU", placeholder: "npr. 8.000 artikala" },
    { name: "retail_locations", label: "Koliko maloprodajnih objekata imate?", placeholder: "npr. 4 prodavnice" },
    { name: "warehouses", label: "Koliko magacina imate?", placeholder: "npr. centralni + 2 pomoćna" },
    { name: "sales_model", label: "Da li imate B2B, B2C ili oba modela prodaje?", type: "select", options: [["", "Izaberite"], ["b2c", "B2C"], ["b2b", "B2B"], ["oba", "Oba modela"]] },
    { name: "existing_webshop", label: "Da li imate postojeći webshop?", type: "select", options: yesNoOptions },
    { name: "current_webshop_platform", label: "Trenutni webshop / platforma", placeholder: "npr. WooCommerce, Shopify, custom, nema..." },
    { name: "stock_connected", label: "Da li su vam zalihe trenutno povezane sa webshopom?", type: "select", options: yesNoOptions },
    { name: "courier_integrations", label: "Da li želite integraciju sa kurirskim službama?", type: "select", options: yesNoOptions },
  ],
  namenski_ecommerce: [
    { name: "articles_count", label: "Približan broj artikala/SKU", placeholder: "npr. 8.000 artikala" },
    { name: "retail_locations", label: "Koliko maloprodajnih objekata imate?", placeholder: "npr. 4 prodavnice" },
    { name: "warehouses", label: "Koliko magacina imate?", placeholder: "npr. centralni + 2 pomoćna" },
    { name: "sales_model", label: "Da li imate B2B, B2C ili oba modela prodaje?", type: "select", options: [["", "Izaberite"], ["b2c", "B2C"], ["b2b", "B2B"], ["oba", "Oba modela"]] },
    { name: "existing_webshop", label: "Da li imate postojeći webshop?", type: "select", options: yesNoOptions },
    { name: "current_webshop_platform", label: "Trenutni webshop / platforma", placeholder: "npr. WooCommerce, Shopify, custom, nema..." },
    { name: "stock_connected", label: "Da li su vam zalihe trenutno povezane sa webshopom?", type: "select", options: yesNoOptions },
    { name: "courier_integrations", label: "Da li želite integraciju sa kurirskim službama?", type: "select", options: yesNoOptions },
  ],
  bs_reporter: [
    { name: "uses_biznisoft", label: "Da li koristite BizniSoft?", type: "select", options: yesNoOptions },
    { name: "locations", label: "Koliko prodavnica/magacina imate?", placeholder: "npr. 6 prodavnica i centralni magacin" },
    { name: "process_to_automate", label: "Koji proces želite da automatizujete?", placeholder: "interni prenosi, porudžbine, WMS, izveštaji..." },
    { name: "uses_pda", label: "Da li koristite PDA uređaje?", type: "select", options: yesNoOptions },
    { name: "needed_scope", label: "Da li vam treba izveštavanje, WMS, integracije ili sve zajedno?", type: "select", options: [["", "Izaberite"], ["izvestavanje", "Izveštavanje"], ["wms", "WMS"], ["integracije", "Integracije"], ["sve", "Sve zajedno"]] },
  ],
  biznisoft: [
    { name: "uses_biznisoft", label: "Da li već koristite BizniSoft?", type: "select", options: yesNoOptions },
    { name: "locations", label: "Koliko prodavnica/magacina imate?", placeholder: "npr. 3 prodavnice + 1 magacin" },
    { name: "integration_scope", label: "Šta želite da povežete?", placeholder: "proizvodi, zalihe, cene, porudžbine, fakture..." },
    { name: "sales_model", label: "Da li imate B2B, B2C ili oba modela prodaje?", type: "select", options: [["", "Izaberite"], ["b2c", "B2C"], ["b2b", "B2B"], ["oba", "Oba modela"]] },
  ],
  beds24: [
    { name: "property_type", label: "Tip objekta", placeholder: "hotel, apart-hotel, vila, apartmani..." },
    { name: "rooms_count", label: "Koliko soba imate?", placeholder: "npr. 24 sobe" },
    { name: "units_count", label: "Koliko smeštajnih jedinica imate?", placeholder: "npr. 18 apartmana / jedinica" },
    { name: "uses_booking_com", label: "Da li koristite Booking.com?", type: "select", options: yesNoOptions },
    { name: "monthly_reservations", label: "Procena mesečnih rezervacija", placeholder: "npr. 80 rezervacija mesečno" },
    { name: "ota_channels", label: "Koje još kanale koristite?", placeholder: "Airbnb, Expedia, Agoda, direktni upiti..." },
    { name: "uses_beds24", label: "Da li već koristite Beds24?", type: "select", options: yesNoOptions },
    { name: "uses_biznisoft_hms", label: "Da li koristite BizniSoft/HMS?", type: "select", options: yesNoOptions },
    { name: "needs_direct_booking_site", label: "Da li vam treba sajt za direktne rezervacije?", type: "select", options: yesNoOptions },
    { name: "needs_housekeeping_app", label: "Da li vam treba aplikacija za sobarice?", type: "select", options: yesNoOptions },
  ],
  pda_wms: [
    { name: "pda_users", label: "Broj korisnika/PDA uređaja", placeholder: "npr. 5 uređaja, 8 operatera" },
    { name: "has_pda_devices", label: "Da li već imate PDA uređaje?", type: "select", options: yesNoOptions },
    { name: "business_software", label: "Koji ERP/poslovni softver koristite?", placeholder: "BizniSoft, drugi ERP, ručni sistem..." },
    { name: "process_scope", label: "Proces koji treba pokriti", type: "select", options: [["", "Izaberite"], ["prijem", "Prijem robe"], ["popis", "Popis"], ["picking", "Picking"], ["packing", "Packing"], ["sve", "Sve navedeno"]] },
    { name: "locations", label: "Broj prodavnica/magacina", placeholder: "npr. 2 magacina i 7 prodavnica" },
  ],
  vps: [
    { name: "current_hosting", label: "Trenutni hosting / infrastruktura", placeholder: "npr. shared hosting, Hetzner, lokalni server..." },
    { name: "applications_count", label: "Broj aplikacija/sajtova", placeholder: "npr. 3 sajta + 2 integraciona servisa" },
    { name: "needs_backup_monitoring", label: "Da li je potreban backup i monitoring?", type: "select", options: yesNoOptions },
    { name: "system_criticality", label: "Kritičnost sistema", type: "select", options: [["", "Izaberite"], ["low", "Nisko - može kratko da ne radi"], ["medium", "Srednje - utiče na prodaju/rad"], ["high", "Visoko - prekid direktno zaustavlja posao"]] },
    { name: "support_scope", label: "Šta očekujete od podrške?", placeholder: "monitoring, backup, deploy, SSL, incidenti, održavanje..." },
  ],
  tracking: [
    { name: "platforms", label: "Koje platforme koristite?", placeholder: "Meta, GA4, Google Ads, TikTok, drugo..." },
    { name: "existing_webshop", label: "Da li imate postojeći webshop?", type: "select", options: yesNoOptions },
    { name: "has_data_layer", label: "Da li imate data layer?", type: "select", options: yesNoOptions },
    { name: "needs_server_side_tracking", label: "Da li želite server-side tracking / CAPI?", type: "select", options: yesNoOptions },
    { name: "has_feeds", label: "Da li imate feedove?", type: "select", options: yesNoOptions },
  ],
  seo_aeo_geo: [
    { name: "website_url", label: "URL sajta", type: "url", placeholder: "https://primer.rs" },
    { name: "has_blog", label: "Da li imate blog?", type: "select", options: yesNoOptions },
    { name: "has_case_studies", label: "Da li imate case study sadržaj?", type: "select", options: yesNoOptions },
    { name: "has_search_console", label: "Da li imate Search Console?", type: "select", options: yesNoOptions },
    { name: "has_backlink_strategy", label: "Da li imate backlink strategiju?", type: "select", options: yesNoOptions },
    { name: "optimization_goal", label: "Glavni cilj optimizacije", placeholder: "više leadova, veća vidljivost kategorija, AI pretraga..." },
  ],
  general: [],
};

const initialValues = {
  company_name: "",
  pib: "",
  contact_name: "",
  email: "",
  phone: "",
  industry: "",
  annual_revenue: "",
  employees: "",
  has_erp: "",
  erp_name: "",
  has_webshop: "",
  budget: "",
  message: "",
  website: "",
};

declare global {
  interface Window {
    gtag?: (...args: unknown[]) => void;
  }
}

export function trackLeadEvent(eventName: string, params: Record<string, unknown>) {
  if (typeof window !== "undefined" && typeof window.gtag === "function") {
    window.gtag("event", eventName, {
      page_path: window.location.pathname,
      ...params,
    });
  }
}

async function postContactForm(payload: Record<string, unknown>): Promise<ContactApiResult> {
  const response = await fetch("/api/contact", {
    method: "POST",
    headers: { Accept: "application/json", "Content-Type": "application/json" },
    body: JSON.stringify(payload),
  });

  const text = await response.text();

  return {
    ok: response.ok,
    body: text ? JSON.parse(text) : {},
  };
}

function inputClassName() {
  return "h-11 rounded-xl border border-slate-200 bg-slate-50 px-3 text-sm outline-none transition focus:border-primary focus:bg-white focus:ring-4 focus:ring-primary/10";
}

function textAreaClassName() {
  return "rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 text-sm outline-none transition focus:border-primary focus:bg-white focus:ring-4 focus:ring-primary/10";
}

export function ContactForm({
  sourcePage = "/kontakt",
  sourceSection = "Kontakt strana",
  subject = "Upit: konsultacije",
  leadType = "general",
  className,
  inModal = false,
  onCancel,
  onSuccess,
}: ContactFormProps) {
  const [state, setState] = useState<FormState>("idle");
  const [step, setStep] = useState(1);
  const [message, setMessage] = useState("");
  const [errors, setErrors] = useState<Record<string, string[]>>({});
  const [values, setValues] = useState(initialValues);
  const [selectedLeadType, setSelectedLeadType] = useState<LeadType>(leadType);
  const [formPayload, setFormPayload] = useState<Record<string, string>>({});

  const specificFields = useMemo(() => fieldSets[selectedLeadType] ?? [], [selectedLeadType]);
  const requiresBudget = true;
  const isLowBudget = values.budget === "up_to_2000";
  const totalSteps = 3;

  function updateValue(name: keyof typeof initialValues, value: string) {
    setValues((current) => ({ ...current, [name]: value }));
  }

  function updatePayload(name: string, value: string) {
    setFormPayload((current) => ({ ...current, [name]: value }));
  }

  function validateStepOne() {
    const required = ["contact_name", "email", "phone"] as const;
    const hasMissing = required.some((name) => !values[name].trim());

    if (hasMissing || !selectedLeadType) {
      setState("error");
      setErrors({});
      setMessage("Popunite tip projekta, ime, email i telefon.");
      trackLeadEvent("lead_form_error", { lead_type: selectedLeadType, source_page: sourcePage, source_section: sourceSection, service: selectedLeadType });
      return false;
    }

    setState("idle");
    setErrors({});
    setMessage("");
    return true;
  }

  function validateStepTwo() {
    const required = ["company_name", "pib", "industry", "annual_revenue", "employees", "has_erp", "erp_name", "has_webshop"] as const;
    const hasMissing = required.some((name) => !values[name].trim());
    const missingSpecific = specificFields.some((field) => !String(formPayload[field.name] ?? "").trim());

    if (hasMissing || missingSpecific || (requiresBudget && !values.budget.trim())) {
      setState("error");
      setErrors({});
      setMessage(requiresBudget ? "Popunite obavezna polja za firmu, projekat i budžet." : "Popunite obavezna polja za firmu i projekat.");
      trackLeadEvent("lead_form_error", { lead_type: selectedLeadType, source_page: sourcePage, source_section: sourceSection, service: selectedLeadType });
      return false;
    }

    setState("idle");
    setErrors({});
    setMessage("");
    return true;
  }

  const translateError = (key: string, messages: string[]) => {
    const firstMessage = messages[0] || "";

    if (key === "message" && firstMessage.includes("at least 10 characters")) {
      return "Poruka mora imati bar 10 karaktera.";
    }

    if (firstMessage.includes("required")) {
      return "Ovo polje je obavezno.";
    }

    if (firstMessage.includes("must be a valid email")) {
      return "Unesite ispravnu email adresu.";
    }

    return firstMessage;
  };

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const stepOneValid = validateStepOne();
    const stepTwoValid = stepOneValid ? validateStepTwo() : false;
    const messageValid = values.message.trim().length > 0;

    if (!stepOneValid || !stepTwoValid || !messageValid) {
      setState("error");
      setErrors({});
      setMessage(!messageValid && stepOneValid && stepTwoValid ? "Popunite kratak opis problema pre slanja." : "Popunite obavezna polja pre slanja.");
      setStep(!stepOneValid ? 1 : !stepTwoValid ? 2 : 3);
      trackLeadEvent("lead_form_error", { lead_type: selectedLeadType, source_page: sourcePage, source_section: sourceSection, service: selectedLeadType });
      return;
    }

    setState("loading");
    setMessage("");
    setErrors({});

    const payload = {
      ...values,
      lead_type: selectedLeadType,
      subject,
      source_page: sourcePage,
      source_section: sourceSection,
      form_payload: {
        industry: values.industry,
        annual_revenue: values.annual_revenue,
        employees: values.employees,
        has_erp: values.has_erp,
        erp_name: values.erp_name,
        has_webshop: values.has_webshop,
        ...formPayload,
      },
      consent: true,
    };

    trackLeadEvent("lead_form_submit", {
      lead_type: selectedLeadType,
      budget: values.budget,
      is_low_budget: isLowBudget,
      source_page: sourcePage,
      source_section: sourceSection,
      service: selectedLeadType,
    });

    try {
      const result = await postContactForm(payload);

      if (!result.ok || !result.body.success) {
        setState("error");
        setErrors(result.body.errors ?? {});
        setMessage(result.body.message === "Validation error" ? "Podaci nisu ispravni. Proverite polja ispod." : (result.body.message ?? "Upit nije poslat. Proverite podatke."));
        trackLeadEvent("lead_form_error", { lead_type: selectedLeadType, source_page: sourcePage, source_section: sourceSection, service: selectedLeadType });
        return;
      }

      setValues(initialValues);
      setErrors({});
      setFormPayload({});
      setStep(1);
      setState("success");
      setMessage("Hvala. Vaš upit je poslat. Javićemo vam se nakon procene zahteva.");
      trackLeadEvent("lead_form_success", {
        lead_type: selectedLeadType,
        budget: values.budget,
        is_low_budget: isLowBudget,
        source_page: sourcePage,
        source_section: sourceSection,
        service: selectedLeadType,
      });
      onSuccess?.();
    } catch {
      setState("error");
      setMessage("Trenutno nije moguće poslati upit.");
      trackLeadEvent("lead_form_error", { lead_type: selectedLeadType, source_page: sourcePage, source_section: sourceSection, service: selectedLeadType });
    }
  }

  return (
    <form
      onSubmit={handleSubmit}
      className={cn(
        "rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_24px_80px_rgb(15_23_42_/_0.08)] ring-1 ring-white/70 sm:p-6",
        inModal ? "shadow-none ring-0" : "",
        className,
      )}
    >
      <div className="mb-5 rounded-xl border border-primary/15 bg-primary-50 p-4 text-sm leading-6 text-slate-700">
        <p className="font-semibold text-slate-950">Radimo isključivo sa pravnim licima i B2B klijentima.</p>
        <p className="mt-1">Upit koristimo za procenu procesa, obima integracija i realnog sledećeg koraka.</p>
      </div>

      <div className="mb-5 grid grid-cols-3 gap-2 rounded-xl bg-slate-100 p-1 text-sm font-semibold">
        <button type="button" onClick={() => setStep(1)} className={cn("rounded-lg px-3 py-2 transition", step === 1 ? "bg-white text-slate-950 shadow-sm" : "text-slate-600")}>
          1. Kontakt
        </button>
        <button type="button" onClick={() => validateStepOne() && setStep(2)} className={cn("rounded-lg px-3 py-2 transition", step === 2 ? "bg-white text-slate-950 shadow-sm" : "text-slate-600")}>
          2. Projekat
        </button>
        <button type="button" onClick={() => validateStepOne() && validateStepTwo() && setStep(3)} className={cn("rounded-lg px-3 py-2 transition", step === 3 ? "bg-white text-slate-950 shadow-sm" : "text-slate-600")}>
          3. Problem
        </button>
      </div>

      {step === 1 ? (
        <div className="grid gap-4">
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Tip projekta *
              <select
                value={selectedLeadType}
                onChange={(event) => {
                  const nextLeadType = event.target.value as LeadType;
                  setSelectedLeadType(nextLeadType);
                  setFormPayload({});
                  trackLeadEvent("lead_type_selected", {
                    lead_type: nextLeadType,
                    source_page: sourcePage,
                    source_section: sourceSection,
                    service: nextLeadType,
                  });
                }}
                required
                className={inputClassName()}
              >
                {leadTypeOptions.map(([value, label]) => (
                  <option key={value} value={value}>{label}</option>
                ))}
              </select>
            </label>
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Web sajt
              <input value={values.website} onChange={(event) => updateValue("website", event.target.value)} type="url" placeholder="https://primer.rs" className={inputClassName()} />
            </label>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Ime i prezime *
              <input value={values.contact_name} onChange={(event) => updateValue("contact_name", event.target.value)} required autoComplete="name" className={inputClassName()} />
            </label>
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Email *
              <input value={values.email} onChange={(event) => updateValue("email", event.target.value)} type="email" required autoComplete="email" className={inputClassName()} />
            </label>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Telefon *
              <input value={values.phone} onChange={(event) => updateValue("phone", event.target.value)} required autoComplete="tel" className={inputClassName()} />
            </label>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
            <Button
              type="button"
              className="w-full sm:w-auto"
              onClick={() => {
                if (validateStepOne()) setStep(2);
              }}
            >
              Nastavite
            </Button>
          </div>
        </div>
      ) : step === 2 ? (
        <div className="grid gap-4">
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Naziv firme *
              <input value={values.company_name} onChange={(event) => updateValue("company_name", event.target.value)} required autoComplete="organization" className={inputClassName()} />
            </label>
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              PIB *
              <input value={values.pib} onChange={(event) => updateValue("pib", event.target.value)} required inputMode="numeric" className={inputClassName()} />
            </label>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Delatnost *
              <select value={values.industry} onChange={(event) => updateValue("industry", event.target.value)} required className={inputClassName()}>
                {industryOptions.map(([value, label]) => (
                  <option key={value} value={value}>{label}</option>
                ))}
              </select>
            </label>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Godišnji promet *
              <select value={values.annual_revenue} onChange={(event) => updateValue("annual_revenue", event.target.value)} required className={inputClassName()}>
                {revenueOptions.map(([value, label]) => (
                  <option key={value} value={value}>{label}</option>
                ))}
              </select>
            </label>
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Broj zaposlenih *
              <select value={values.employees} onChange={(event) => updateValue("employees", event.target.value)} required className={inputClassName()}>
                {employeeOptions.map(([value, label]) => (
                  <option key={value} value={value}>{label}</option>
                ))}
              </select>
            </label>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Da li postoji ERP? *
              <select value={values.has_erp} onChange={(event) => updateValue("has_erp", event.target.value)} required className={inputClassName()}>
                {yesNoOptions.map(([value, label]) => (
                  <option key={value} value={value}>{label}</option>
                ))}
              </select>
            </label>
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Koji ERP / poslovni softver? *
              <input value={values.erp_name} onChange={(event) => updateValue("erp_name", event.target.value)} required placeholder="BizniSoft, Pantheon, SAP, nema ERP..." className={inputClassName()} />
            </label>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="grid gap-2 text-sm font-medium text-slate-700">
              Da li postoji webshop? *
              <select value={values.has_webshop} onChange={(event) => updateValue("has_webshop", event.target.value)} required className={inputClassName()}>
                {yesNoOptions.map(([value, label]) => (
                  <option key={value} value={value}>{label}</option>
                ))}
              </select>
            </label>
            {requiresBudget ? (
              <label className="grid gap-2 text-sm font-medium text-slate-700">
                Budžet *
                <select value={values.budget} onChange={(event) => updateValue("budget", event.target.value)} required className={inputClassName()}>
                  {budgetOptions.map(([value, label]) => (
                    <option key={value} value={value}>{label}</option>
                  ))}
                </select>
              </label>
            ) : null}
          </div>
          {requiresBudget && isLowBudget ? (
            <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm leading-6 text-amber-900">
              Za ovaj budžet verovatno ne možemo ponuditi kompletno namensko rešenje, ali nam možete poslati upit pa ćemo proceniti da li postoji realna opcija za saradnju.
            </div>
          ) : null}

          {specificFields.length ? (
            <div className="grid gap-4 sm:grid-cols-2">
              {specificFields.map((field) => (
                <label key={field.name} className="grid gap-2 text-sm font-medium text-slate-700">
                  {field.label} *
                  {field.type === "select" ? (
                    <select
                      value={formPayload[field.name] ?? ""}
                      onChange={(event) => updatePayload(field.name, event.target.value)}
                      required
                      className={inputClassName()}
                    >
                      {(field.options ?? []).map(([value, label]) => (
                        <option key={value} value={value}>{label}</option>
                      ))}
                    </select>
                  ) : (
                    <input
                      value={formPayload[field.name] ?? ""}
                      onChange={(event) => updatePayload(field.name, event.target.value)}
                      type={field.type ?? "text"}
                      placeholder={field.placeholder}
                      required
                      className={inputClassName()}
                    />
                  )}
                </label>
              ))}
            </div>
          ) : null}

          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <Button type="button" variant="outline" onClick={() => setStep(1)}>
              Nazad
            </Button>
            <Button
              type="button"
              className="w-full sm:w-auto"
              onClick={() => {
                if (validateStepTwo()) setStep(3);
              }}
            >
              Nastavite
            </Button>
          </div>
        </div>
      ) : (
        <div className="grid gap-4">
          <label className="grid gap-2 text-sm font-medium text-slate-700">
            Poruka *
            <textarea
              value={values.message}
              onChange={(event) => updateValue("message", event.target.value)}
              required
              rows={inModal ? 4 : 5}
              placeholder="Ukratko opišite trenutni proces, postojeće sisteme i cilj projekta."
              className={textAreaClassName()}
            />
          </label>

          <input type="hidden" name="source_page" value={sourcePage} />
          <input type="hidden" name="source_section" value={sourceSection} />
          <input type="hidden" name="subject" value={subject} />
          <input type="hidden" name="lead_type" value={selectedLeadType} />

          <div className="rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm leading-6 text-slate-700">
            <p className="font-semibold text-slate-950">Upit: {leadTypeLabels[selectedLeadType]}</p>
            <p className="mt-1">Korak {step} od {totalSteps}. Nakon slanja upit ulazi u CRM sa izvorom CTA dugmeta i tipom zahteva.</p>
          </div>

          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <Button type="button" variant="outline" onClick={() => setStep(2)}>
              Nazad
            </Button>
            <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
              <Button type="submit" disabled={state === "loading"} className="w-full sm:w-auto">
                {state === "loading" ? "Slanje..." : "Zatražite procenu projekta"}
              </Button>
            </div>
          </div>
        </div>
      )}

      {message ? (
        <div className={cn("mt-4 rounded-xl p-3 text-sm leading-6", state === "success" ? "bg-emerald-50 text-emerald-800" : "bg-red-50 text-red-700")}>
          <p className="font-semibold">{message}</p>
          {Object.keys(errors).length > 0 && (
            <ul className="mt-2 list-inside list-disc opacity-90">
              {Object.entries(errors).map(([key, msgs]) => (
                <li key={key}>{translateError(key, msgs)}</li>
              ))}
            </ul>
          )}
        </div>
      ) : null}

      {onCancel ? (
        <div className="sticky bottom-0 z-10 -mx-5 mt-5 border-t border-slate-200 bg-white/95 px-5 py-4 backdrop-blur sm:-mx-6 sm:px-6">
          <Button type="button" variant="outline" className="w-full" onClick={onCancel}>
            Otkaži
          </Button>
        </div>
      ) : null}
    </form>
  );
}