"use client";

import { FormEvent, useMemo, useState } from "react";
import { Calculator, CheckCircle2, ClipboardList, Send, TrendingUp } from "lucide-react";

import { Button } from "@/components/button";
import { trackLeadEvent } from "@/components/contact-form";
import { cn } from "@/lib/utils";

type Choice = "da" | "ne" | "delimicno";

type CalculatorValues = {
  packagesPerDay: number;
  workingDays: number;
  baseMinutes: number;
  manualCourier: Choice;
  courierMinutes: number;
  sendsFiscalReceipts: "da" | "ne";
  manualFiscalization: Choice;
  fiscalMinutes: number;
  usesErp: "da" | "ne";
  erpType: string;
  manualErp: Choice;
  erpMinutes: number;
  stores: number;
  warehouses: number;
  multipleLocations: "da" | "ne";
  people: number;
  monthlyEmployeeCost: number;
  manualAdminHoursDaily: number;
};

type CalculatorResult = {
  monthlyPackages: number;
  minutesPerOrder: number;
  manualHoursMonthly: number;
  adminHoursMonthly: number;
  hourlyCost: number | null;
  monthlyValue: number | null;
  scenarios: {
    conservative: ScenarioResult;
    realistic: ScenarioResult;
    optimistic: ScenarioResult;
  };
  relievedWorkDaysRange: [number, number];
};

type ScenarioResult = {
  rate: number;
  savedHours: number;
  monthlySaving: number | null;
  annualSaving: number | null;
};

type LeadValues = {
  contactName: string;
  companyName: string;
  pib: string;
  email: string;
  phone: string;
  webshopUrl: string;
  budget: string;
  problem: string;
};

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

const initialCalculatorValues: CalculatorValues = {
  packagesPerDay: 80,
  workingDays: 22,
  baseMinutes: 3,
  manualCourier: "delimicno",
  courierMinutes: 2,
  sendsFiscalReceipts: "da",
  manualFiscalization: "delimicno",
  fiscalMinutes: 2,
  usesErp: "da",
  erpType: "BizniSoft",
  manualErp: "da",
  erpMinutes: 3,
  stores: 2,
  warehouses: 1,
  multipleLocations: "da",
  people: 2,
  monthlyEmployeeCost: 140000,
  manualAdminHoursDaily: 4,
};

const initialLeadValues: LeadValues = {
  contactName: "",
  companyName: "",
  pib: "",
  email: "",
  phone: "",
  webshopUrl: "",
  budget: "5000_10000",
  problem: "",
};

const erpOptions = ["BizniSoft", "Pantheon", "SAP", "Drugo", "Ne koristimo ERP"];

const choiceOptions: Array<[Choice, string]> = [
  ["da", "Da"],
  ["ne", "Ne"],
  ["delimicno", "Delimično"],
];

const yesNoOptions: Array<["da" | "ne", string]> = [
  ["da", "Da"],
  ["ne", "Ne"],
];

const budgetOptions = [
  ["up_to_2000", "do 2.000 EUR"],
  ["2000_5000", "2.000-5.000 EUR"],
  ["5000_10000", "5.000-10.000 EUR"],
  ["10000_25000", "10.000-25.000 EUR"],
  ["25000_plus", "25.000 EUR+"],
];

function clampNumber(value: number, min: number, max: number) {
  if (!Number.isFinite(value)) return min;
  return Math.min(Math.max(value, min), max);
}

function formatNumber(value: number, maximumFractionDigits = 0) {
  return new Intl.NumberFormat("sr-RS", { maximumFractionDigits }).format(value);
}

function formatRsd(value: number | null) {
  if (value === null) return "unesite trošak";

  return new Intl.NumberFormat("sr-RS", {
    style: "currency",
    currency: "RSD",
    maximumFractionDigits: 0,
  }).format(value);
}

function rangeForValue(value: number, ranges: Array<[number, string]>) {
  return ranges.find(([limit]) => value < limit)?.[1] ?? ranges[ranges.length - 1][1];
}

function packagesRange(value: number) {
  return rangeForValue(value, [
    [20, "under_20"],
    [75, "20_75"],
    [200, "75_200"],
    [500, "200_500"],
    [Number.POSITIVE_INFINITY, "500_plus"],
  ]);
}

function hoursRange(value: number) {
  return rangeForValue(value, [
    [20, "under_20"],
    [60, "20_60"],
    [120, "60_120"],
    [240, "120_240"],
    [Number.POSITIVE_INFINITY, "240_plus"],
  ]);
}

function savingsRange(value: number | null) {
  if (value === null) return "no_employee_cost";

  return rangeForValue(value, [
    [250000, "under_250k_rsd"],
    [750000, "250k_750k_rsd"],
    [1500000, "750k_1_5m_rsd"],
    [3000000, "1_5m_3m_rsd"],
    [Number.POSITIVE_INFINITY, "3m_plus_rsd"],
  ]);
}

function calculateResult(values: CalculatorValues): CalculatorResult {
  const monthlyPackages = values.packagesPerDay * values.workingDays;
  const minutesPerOrder = values.baseMinutes + values.courierMinutes + values.fiscalMinutes + values.erpMinutes;
  const manualHoursMonthly = (monthlyPackages * minutesPerOrder) / 60;
  const adminHoursMonthly = values.manualAdminHoursDaily * values.workingDays;
  const hourlyCost = values.monthlyEmployeeCost > 0 ? values.monthlyEmployeeCost / 176 : null;
  const monthlyValue = hourlyCost === null ? null : manualHoursMonthly * hourlyCost;

  function scenario(rate: number): ScenarioResult {
    const savedHours = manualHoursMonthly * rate;

    return {
      rate,
      savedHours,
      monthlySaving: monthlyValue === null ? null : monthlyValue * rate,
      annualSaving: monthlyValue === null ? null : monthlyValue * rate * 12,
    };
  }

  const conservative = scenario(0.3);
  const optimistic = scenario(0.7);

  return {
    monthlyPackages,
    minutesPerOrder,
    manualHoursMonthly,
    adminHoursMonthly,
    hourlyCost,
    monthlyValue,
    scenarios: {
      conservative,
      realistic: scenario(0.5),
      optimistic,
    },
    relievedWorkDaysRange: [conservative.savedHours / 8, optimistic.savedHours / 8],
  };
}

function eventParams(values: CalculatorValues, result: CalculatorResult) {
  return {
    packages_per_day_range: packagesRange(values.packagesPerDay),
    monthly_manual_hours_range: hoursRange(result.manualHoursMonthly),
    estimated_annual_savings_range: savingsRange(result.scenarios.realistic.annualSaving),
    erp_type: values.erpType,
    has_manual_courier: values.manualCourier,
    has_manual_fiscalization: values.manualFiscalization,
    has_multiple_locations: values.multipleLocations,
    service: "ecommerce",
    source_section: "ecommerce_savings_calculator",
  };
}

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 NumberField({
  label,
  value,
  min,
  max,
  step = 1,
  suffix,
  onChange,
}: {
  label: string;
  value: number;
  min: number;
  max: number;
  step?: number;
  suffix?: string;
  onChange: (value: number) => void;
}) {
  return (
    <label className="grid gap-2 text-sm font-medium text-slate-700">
      <span>{label}</span>
      <div className="grid grid-cols-[1fr_auto] overflow-hidden rounded-xl border border-slate-200 bg-slate-50 focus-within:border-primary focus-within:bg-white focus-within:ring-4 focus-within:ring-primary/10">
        <input
          className="h-11 min-w-0 bg-transparent px-3 text-sm outline-none"
          type="number"
          min={min}
          max={max}
          step={step}
          value={value}
          onChange={(event) => onChange(clampNumber(Number(event.target.value), min, max))}
        />
        {suffix ? <span className="flex h-11 items-center px-3 text-xs font-semibold text-slate-500">{suffix}</span> : null}
      </div>
    </label>
  );
}

function SelectField<T extends string>({
  label,
  value,
  options,
  onChange,
}: {
  label: string;
  value: T;
  options: Array<[T, string]>;
  onChange: (value: T) => void;
}) {
  return (
    <label className="grid gap-2 text-sm font-medium text-slate-700">
      <span>{label}</span>
      <select value={value} onChange={(event) => onChange(event.target.value as T)} className={inputClassName()}>
        {options.map(([optionValue, labelText]) => (
          <option key={optionValue} value={optionValue}>
            {labelText}
          </option>
        ))}
      </select>
    </label>
  );
}

export function CalculatorFieldGroup({
  title,
  description,
  children,
}: {
  title: string;
  description: string;
  children: React.ReactNode;
}) {
  return (
    <section className="rounded-xl border border-slate-200/80 bg-white p-4">
      <div className="mb-4">
        <h3 className="text-base font-semibold text-slate-950">{title}</h3>
        <p className="mt-1 text-sm leading-6 text-slate-600">{description}</p>
      </div>
      <div className="grid gap-4 sm:grid-cols-2">{children}</div>
    </section>
  );
}

export function CalculatorResultCard({ result }: { result: CalculatorResult }) {
  const scenarios = [
    ["Konzervativno", result.scenarios.conservative, "border-slate-200 bg-slate-50"],
    ["Realno", result.scenarios.realistic, "border-primary/20 bg-primary-50"],
    ["Optimistično", result.scenarios.optimistic, "border-emerald-200 bg-emerald-50"],
  ] as const;

  return (
    <aside className="sticky top-24 grid gap-4">
      <div className="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_24px_80px_rgb(15_23_42_/_0.08)]">
        <div className="flex items-start gap-3">
          <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary-50 text-primary">
            <TrendingUp className="h-5 w-5" strokeWidth={1.8} />
          </span>
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">Okvirna procena</p>
            <h3 className="mt-1 text-xl font-semibold leading-tight text-slate-950">Na osnovu unetih podataka</h3>
          </div>
        </div>

        <div className="mt-5 grid gap-3">
          <div className="grid grid-cols-2 gap-3">
            <div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
              <p className="text-xs font-semibold uppercase tracking-[0.12em] text-slate-500">Paketa mesečno</p>
              <p className="mt-2 text-2xl font-semibold text-slate-950">{formatNumber(result.monthlyPackages)}</p>
            </div>
            <div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
              <p className="text-xs font-semibold uppercase tracking-[0.12em] text-slate-500">Ručnih sati</p>
              <p className="mt-2 text-2xl font-semibold text-slate-950">{formatNumber(result.manualHoursMonthly, 1)}</p>
            </div>
          </div>

          {scenarios.map(([label, scenario, className]) => (
            <div key={label} className={cn("rounded-xl border p-4", className)}>
              <div className="flex items-center justify-between gap-4">
                <p className="text-sm font-semibold text-slate-950">{label}</p>
                <p className="text-xs font-semibold text-slate-500">{Math.round(scenario.rate * 100)}% manje vremena</p>
              </div>
              <p className="mt-2 text-2xl font-semibold text-slate-950">{formatRsd(scenario.monthlySaving)}</p>
              <p className="mt-1 text-xs leading-5 text-slate-600">
                {formatNumber(scenario.savedHours, 1)} sati mesečno, {scenario.annualSaving === null ? "bez novčane procene" : `${formatRsd(scenario.annualSaving)} godišnje`}
              </p>
            </div>
          ))}
        </div>

        <div className="mt-4 rounded-xl border border-slate-200 bg-white p-4 text-sm leading-6 text-slate-700">
          Ovo je približno <strong>{formatNumber(result.relievedWorkDaysRange[0], 1)} do {formatNumber(result.relievedWorkDaysRange[1], 1)} radnih dana mesečno</strong> koje tim može preusmeriti sa administracije na prodaju, kontrolu i kupce.
        </div>
      </div>
    </aside>
  );
}

export function CalculatorLeadCapture({
  values,
  result,
}: {
  values: CalculatorValues;
  result: CalculatorResult;
}) {
  const [leadValues, setLeadValues] = useState(initialLeadValues);
  const [state, setState] = useState<FormState>("idle");
  const [message, setMessage] = useState("");

  function updateLeadValue(name: keyof LeadValues, value: string) {
    setLeadValues((current) => ({ ...current, [name]: value }));
  }

  function calculatorSummary() {
    return [
      `Paketa dnevno: ${values.packagesPerDay}`,
      `Paketa mesečno: ${result.monthlyPackages}`,
      `Ručnih minuta po porudžbini: ${result.minutesPerOrder}`,
      `Ručnih sati mesečno: ${formatNumber(result.manualHoursMonthly, 1)}`,
      `Realna mesečna ušteda: ${formatRsd(result.scenarios.realistic.monthlySaving)}`,
      `Realna godišnja ušteda: ${formatRsd(result.scenarios.realistic.annualSaving)}`,
      `ERP: ${values.erpType}`,
    ].join("\n");
  }

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

    if (!leadValues.contactName.trim() || !leadValues.companyName.trim() || !leadValues.email.trim() || !leadValues.phone.trim() || !leadValues.problem.trim()) {
      setState("error");
      setMessage("Popunite ime, firmu, email, telefon i kratak opis problema.");
      return;
    }

    setState("loading");
    setMessage("");

    const summary = calculatorSummary();
    const payload = {
      company_name: leadValues.companyName,
      pib: leadValues.pib.trim() || "nije navedeno",
      contact_name: leadValues.contactName,
      email: leadValues.email,
      phone: leadValues.phone,
      website: leadValues.webshopUrl || undefined,
      budget: leadValues.budget,
      lead_type: "ecommerce",
      subject: "Upit: rezultat kalkulatora uštede za ecommerce automatizaciju",
      source_page: "/kalkulator-ustede-ecommerce",
      source_section: "ecommerce_savings_calculator",
      message: `${leadValues.problem}\n\nRezultat kalkulatora:\n${summary}`,
      form_payload: {
        industry: "ecommerce_brand",
        annual_revenue: "no_answer",
        employees: `${values.people} osoba u obradi porudžbina`,
        has_erp: values.usesErp,
        erp_name: values.erpType,
        has_webshop: "da",
        articles_count: "nije navedeno kroz kalkulator",
        retail_locations: `${values.stores} prodavnica`,
        warehouses: `${values.warehouses} magacina`,
        sales_model: "b2c",
        existing_webshop: "da",
        current_webshop_platform: leadValues.webshopUrl || "nije navedeno",
        stock_connected: values.multipleLocations === "da" ? "delimicno" : "nije navedeno",
        courier_integrations: values.manualCourier === "ne" ? "ne" : "da",
        calculator_result: summary,
        packages_per_day: String(values.packagesPerDay),
        working_days: String(values.workingDays),
        minutes_per_order: String(result.minutesPerOrder),
        monthly_packages: String(result.monthlyPackages),
        monthly_manual_hours: formatNumber(result.manualHoursMonthly, 1),
        conservative_monthly_saving: formatRsd(result.scenarios.conservative.monthlySaving),
        realistic_monthly_saving: formatRsd(result.scenarios.realistic.monthlySaving),
        annual_saving: formatRsd(result.scenarios.realistic.annualSaving),
        manual_courier: values.manualCourier,
        manual_fiscalization: values.manualFiscalization,
        manual_erp: values.manualErp,
        multiple_locations: values.multipleLocations,
      },
      consent: true,
    };

    trackLeadEvent("ecommerce_savings_calculator_lead_submit", eventParams(values, result));

    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { Accept: "application/json", "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const responseBody = await response.json();

      if (!response.ok || !responseBody.success) {
        setState("error");
        setMessage(responseBody.message === "Validation error" ? "Podaci nisu ispravni. Proverite formu." : "Upit trenutno nije poslat.");
        return;
      }

      setLeadValues(initialLeadValues);
      setState("success");
      setMessage("Hvala. Rezultat je poslat i možemo pripremiti prvu procenu automatizacije.");
    } catch {
      setState("error");
      setMessage("Trenutno nije moguće poslati upit. Pokušajte ponovo za par minuta.");
    }
  }

  return (
    <form onSubmit={handleSubmit} className="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_24px_80px_rgb(15_23_42_/_0.08)] sm:p-6">
      <div className="flex items-start gap-3">
        <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary-50 text-primary">
          <Send className="h-5 w-5" strokeWidth={1.8} />
        </span>
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">Pošaljite rezultat</p>
          <h3 className="mt-1 text-2xl font-semibold leading-tight text-slate-950">Dobijte procenu automatizacije</h3>
          <p className="mt-2 text-sm leading-6 text-slate-600">Rezultat kalkulatora šaljemo zajedno sa opisom problema, da prvi razgovor ne počne od nule.</p>
        </div>
      </div>

      <div className="mt-6 grid gap-4 sm:grid-cols-2">
        <label className="grid gap-2 text-sm font-medium text-slate-700">
          Ime i prezime *
          <input value={leadValues.contactName} onChange={(event) => updateLeadValue("contactName", event.target.value)} required autoComplete="name" className={inputClassName()} />
        </label>
        <label className="grid gap-2 text-sm font-medium text-slate-700">
          Firma *
          <input value={leadValues.companyName} onChange={(event) => updateLeadValue("companyName", event.target.value)} required autoComplete="organization" className={inputClassName()} />
        </label>
        <label className="grid gap-2 text-sm font-medium text-slate-700">
          Email *
          <input value={leadValues.email} onChange={(event) => updateLeadValue("email", event.target.value)} required type="email" autoComplete="email" className={inputClassName()} />
        </label>
        <label className="grid gap-2 text-sm font-medium text-slate-700">
          Telefon *
          <input value={leadValues.phone} onChange={(event) => updateLeadValue("phone", event.target.value)} required autoComplete="tel" className={inputClassName()} />
        </label>
        <label className="grid gap-2 text-sm font-medium text-slate-700">
          Webshop URL
          <input value={leadValues.webshopUrl} onChange={(event) => updateLeadValue("webshopUrl", event.target.value)} type="url" placeholder="https://primer.rs" className={inputClassName()} />
        </label>
        <label className="grid gap-2 text-sm font-medium text-slate-700">
          ERP
          <input value={values.erpType} readOnly className={cn(inputClassName(), "text-slate-500")} />
        </label>
        <label className="grid gap-2 text-sm font-medium text-slate-700">
          PIB
          <input value={leadValues.pib} onChange={(event) => updateLeadValue("pib", event.target.value)} inputMode="numeric" placeholder="Ako želite da navedete" className={inputClassName()} />
        </label>
        <label className="grid gap-2 text-sm font-medium text-slate-700">
          Okvirni budžet *
          <select value={leadValues.budget} onChange={(event) => updateLeadValue("budget", event.target.value)} required className={inputClassName()}>
            {budgetOptions.map(([value, label]) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </label>
      </div>

      <div className="mt-4 grid gap-2 text-sm font-medium text-slate-700">
        Kratak opis problema *
        <textarea
          value={leadValues.problem}
          onChange={(event) => updateLeadValue("problem", event.target.value)}
          required
          rows={5}
          placeholder="Npr. porudžbine se ručno unose u ERP, kuriri se spremaju iz Excela, fiskalni se kucaju ručno..."
          className="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"
        />
      </div>

      <div className="mt-4 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">Rezultat koji šaljemo</p>
        <p className="mt-1">
          {formatNumber(result.manualHoursMonthly, 1)} ručnih sati mesečno, {formatRsd(result.scenarios.realistic.monthlySaving)} realne mesečne uštede, {formatNumber(result.monthlyPackages)} paketa mesečno.
        </p>
      </div>

      <div className="mt-5 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..." : "Pošaljite rezultat"}
        </Button>
      </div>

      {message ? (
        <div className={cn("mt-4 rounded-xl p-3 text-sm font-semibold leading-6", state === "success" ? "bg-emerald-50 text-emerald-800" : "bg-red-50 text-red-700")}>
          {message}
        </div>
      ) : null}
    </form>
  );
}

export function EcommerceSavingsCalculator() {
  const [values, setValues] = useState(initialCalculatorValues);
  const [hasStarted, setHasStarted] = useState(false);
  const [trackedSteps, setTrackedSteps] = useState<string[]>([]);
  const [hasTrackedResult, setHasTrackedResult] = useState(false);

  const result = useMemo(() => calculateResult(values), [values]);

  function updateValue<T extends keyof CalculatorValues>(name: T, value: CalculatorValues[T], stepName: string) {
    const nextValues = { ...values, [name]: value };
    const nextResult = calculateResult(nextValues);

    setValues(nextValues);

    if (!hasStarted) {
      setHasStarted(true);
      trackLeadEvent("ecommerce_savings_calculator_start", eventParams(nextValues, nextResult));
    }

    if (!trackedSteps.includes(stepName)) {
      setTrackedSteps((current) => [...current, stepName]);
      trackLeadEvent("ecommerce_savings_calculator_step", {
        ...eventParams(nextValues, nextResult),
        calculator_step: stepName,
        changed_field: name,
      });
    }

    if (!hasTrackedResult) {
      setHasTrackedResult(true);
      trackLeadEvent("ecommerce_savings_calculator_result", eventParams(nextValues, nextResult));
    }
  }

  const risks = [
    values.manualCourier !== "ne" ? "Kurirske nalepnice i statusi" : null,
    values.manualFiscalization !== "ne" ? "Fiskalni računi i dokumenta" : null,
    values.manualErp !== "ne" ? "ERP unos i zalihe" : null,
    values.multipleLocations === "da" ? "Zalihe po lokacijama" : null,
    "Duplo kucanje i Excel improvizacija",
  ].filter(Boolean);

  return (
    <div id="kalkulator" className="grid gap-8 lg:grid-cols-[1.08fr_0.92fr] lg:items-start">
      <div className="grid gap-4">
        <div className="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_24px_80px_rgb(15_23_42_/_0.08)] sm:p-6">
          <div className="flex items-start gap-3">
            <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary-50 text-primary">
              <Calculator className="h-5 w-5" strokeWidth={1.8} />
            </span>
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">Kalkulator uštede</p>
              <h2 className="mt-1 text-2xl font-semibold leading-tight text-slate-950">Izmerite ručni rad pre nego što odlučite šta automatizovati.</h2>
              <p className="mt-2 text-sm leading-6 text-slate-600">
                Procena nije garancija uštede. Koristi se da se vidi red veličine problema i pripremi ozbiljan razgovor o procesu.
              </p>
            </div>
          </div>
        </div>

        <CalculatorFieldGroup title="Obim prodaje" description="Osnovni ritam obrade porudžbina i paketa.">
          <NumberField label="Koliko paketa šaljete dnevno?" value={values.packagesPerDay} min={1} max={10000} onChange={(value) => updateValue("packagesPerDay", value, "sales_volume")} />
          <NumberField label="Koliko radnih dana mesečno šaljete pakete?" value={values.workingDays} min={1} max={31} onChange={(value) => updateValue("workingDays", value, "sales_volume")} />
          <NumberField label="Minuta po porudžbini za osnovnu obradu" value={values.baseMinutes} min={0} max={120} onChange={(value) => updateValue("baseMinutes", value, "sales_volume")} />
        </CalculatorFieldGroup>

        <CalculatorFieldGroup title="Kuriri" description="Ručni unos, nalepnice, statusi i priprema pošiljki.">
          <SelectField label="Da li ručno šaljete podatke kurirskoj službi?" value={values.manualCourier} options={choiceOptions} onChange={(value) => updateValue("manualCourier", value, "couriers")} />
          <NumberField label="Minuta po porudžbini za kurira" value={values.courierMinutes} min={0} max={60} onChange={(value) => updateValue("courierMinutes", value, "couriers")} />
        </CalculatorFieldGroup>

        <CalculatorFieldGroup title="Fiskalni računi" description="Fiskalizacija, računi, dokumenta i prepisivanje podataka.">
          <SelectField label="Da li šaljete fiskalne račune?" value={values.sendsFiscalReceipts} options={yesNoOptions} onChange={(value) => updateValue("sendsFiscalReceipts", value, "fiscalization")} />
          <SelectField label="Da li ručno kucate fiskalne račune?" value={values.manualFiscalization} options={choiceOptions} onChange={(value) => updateValue("manualFiscalization", value, "fiscalization")} />
          <NumberField label="Minuta po porudžbini za fiskalizaciju" value={values.fiscalMinutes} min={0} max={60} onChange={(value) => updateValue("fiscalMinutes", value, "fiscalization")} />
        </CalculatorFieldGroup>

        <CalculatorFieldGroup title="ERP i zalihe" description="Unos porudžbina, rezervacije robe i usklađivanje stanja.">
          <SelectField label="Da li koristite ERP?" value={values.usesErp} options={yesNoOptions} onChange={(value) => updateValue("usesErp", value, "erp_stock")} />
          <label className="grid gap-2 text-sm font-medium text-slate-700">
            Koji ERP koristite?
            <select value={values.erpType} onChange={(event) => updateValue("erpType", event.target.value, "erp_stock")} className={inputClassName()}>
              {erpOptions.map((option) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </select>
          </label>
          <SelectField label="Da li se porudžbine ručno unose u ERP?" value={values.manualErp} options={choiceOptions} onChange={(value) => updateValue("manualErp", value, "erp_stock")} />
          <NumberField label="Minuta po porudžbini za ERP/zalihe" value={values.erpMinutes} min={0} max={90} onChange={(value) => updateValue("erpMinutes", value, "erp_stock")} />
        </CalculatorFieldGroup>

        <CalculatorFieldGroup title="Prodavnice i magacini" description="Broj lokacija najčešće povećava cenu ručne koordinacije.">
          <NumberField label="Koliko prodavnica imate?" value={values.stores} min={0} max={300} onChange={(value) => updateValue("stores", value, "locations")} />
          <NumberField label="Koliko magacina imate?" value={values.warehouses} min={0} max={100} onChange={(value) => updateValue("warehouses", value, "locations")} />
          <SelectField label="Da li imate više lokacija zaliha?" value={values.multipleLocations} options={yesNoOptions} onChange={(value) => updateValue("multipleLocations", value, "locations")} />
        </CalculatorFieldGroup>

        <CalculatorFieldGroup title="Ljudi i trošak" description="Ako ne znate trošak zaposlenog, ostavite 0 i koristićemo procenu u satima.">
          <NumberField label="Koliko ljudi učestvuje u obradi porudžbina?" value={values.people} min={1} max={200} onChange={(value) => updateValue("people", value, "people_cost")} />
          <NumberField label="Procena troška jednog zaposlenog mesečno" value={values.monthlyEmployeeCost} min={0} max={2000000} step={5000} suffix="RSD" onChange={(value) => updateValue("monthlyEmployeeCost", value, "people_cost")} />
          <NumberField label="Koliko sati dnevno ode na ručnu administraciju?" value={values.manualAdminHoursDaily} min={0} max={24} step={0.5} suffix="h" onChange={(value) => updateValue("manualAdminHoursDaily", value, "people_cost")} />
        </CalculatorFieldGroup>

        <div className="rounded-2xl border border-slate-200/80 bg-slate-50 p-5">
          <div className="flex items-start gap-3">
            <ClipboardList className="mt-1 h-5 w-5 shrink-0 text-primary" strokeWidth={1.8} />
            <div>
              <h3 className="text-base font-semibold text-slate-950">Operativni rizici koji se smanjuju</h3>
              <div className="mt-4 flex flex-wrap gap-2">
                {risks.map((risk) => (
                  <span key={risk} className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700">
                    <CheckCircle2 className="h-3.5 w-3.5 text-primary" strokeWidth={1.8} />
                    {risk}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>

        <CalculatorLeadCapture values={values} result={result} />
      </div>

      <CalculatorResultCard result={result} />
    </div>
  );
}