"use client";

import { useMemo, useState } from "react";

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

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

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

function savingRange(value: number) {
  if (value < 3000) return "under_3k";
  if (value < 10000) return "3k_10k";
  if (value < 25000) return "10k_25k";
  return "25k_plus";
}

type NumberFieldProps = {
  label: string;
  value: number;
  min: number;
  max: number;
  step?: number;
  suffix?: string;
  onChange: (value: number) => void;
};

function NumberField({ label, value, min, max, step = 1, suffix, onChange }: NumberFieldProps) {
  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>
  );
}

export function DirectBookingRoiCalculator() {
  const [monthlyReservations, setMonthlyReservations] = useState(90);
  const [averageBookingValue, setAverageBookingValue] = useState(180);
  const [bookingShare, setBookingShare] = useState(70);
  const [bookingCommission, setBookingCommission] = useState(15);
  const [directShift, setDirectShift] = useState(15);
  const [expectedInvestment, setExpectedInvestment] = useState(3500);
  const [hasTrackedUse, setHasTrackedUse] = useState(false);

  const result = useMemo(() => {
    const monthlyRevenue = monthlyReservations * averageBookingValue;
    const bookingRevenue = monthlyRevenue * (bookingShare / 100);
    const currentCommission = bookingRevenue * (bookingCommission / 100);
    const shiftedRevenue = monthlyRevenue * (directShift / 100);
    const monthlySaving = shiftedRevenue * (bookingCommission / 100);
    const paybackMonths = monthlySaving > 0 ? expectedInvestment / monthlySaving : null;

    return {
      monthlyRevenue,
      currentCommission,
      annualCommission: currentCommission * 12,
      monthlySaving,
      annualSaving: monthlySaving * 12,
      shiftedReservations: Math.round(monthlyReservations * (directShift / 100)),
      paybackMonths,
    };
  }, [averageBookingValue, bookingCommission, bookingShare, directShift, expectedInvestment, monthlyReservations]);

  function markCalculatorUsed(changedField: string, value: number) {
    if (hasTrackedUse) return;

    setHasTrackedUse(true);
    trackLeadEvent("roi_calculator_used", {
      calculator: "direct_booking",
      changed_field: changedField,
      value,
      source_section: "ROI kalkulator direktnih rezervacija",
      service: "beds24",
      calculator_result_range: savingRange(result.annualSaving),
    });
  }

  return (
    <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="grid gap-2">
        <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">ROI kalkulator</p>
        <h2 className="text-2xl font-semibold leading-tight text-slate-950">Koliko OTA provizije možete prebaciti u direktnu prodaju?</h2>
        <p className="text-sm leading-6 text-slate-600">
          Procena je indikativna. Koristi se za prvi razgovor o tome koliko vredi jači direktni kanal.
        </p>
      </div>

      <div className="mt-6 grid gap-4 sm:grid-cols-2">
        <NumberField label="Rezervacija mesečno" value={monthlyReservations} min={1} max={2000} onChange={(value) => { setMonthlyReservations(value); markCalculatorUsed("monthly_reservations", value); }} />
        <NumberField label="Prosečna vrednost rezervacije" value={averageBookingValue} min={20} max={10000} step={10} suffix="EUR" onChange={(value) => { setAverageBookingValue(value); markCalculatorUsed("average_booking_value", value); }} />
        <NumberField label="Udeo rezervacija preko Booking.com" value={bookingShare} min={0} max={100} suffix="%" onChange={(value) => { setBookingShare(value); markCalculatorUsed("booking_share", value); }} />
        <NumberField label="Booking.com provizija" value={bookingCommission} min={1} max={30} suffix="%" onChange={(value) => { setBookingCommission(value); markCalculatorUsed("booking_commission", value); }} />
        <NumberField label="Prebacivanje u direktne rezervacije" value={directShift} min={1} max={60} suffix="%" onChange={(value) => { setDirectShift(value); markCalculatorUsed("direct_shift", value); }} />
        <NumberField label="Procena investicije" value={expectedInvestment} min={500} max={50000} step={100} suffix="EUR" onChange={(value) => { setExpectedInvestment(value); markCalculatorUsed("expected_investment", value); }} />
      </div>

      <div className="mt-6 grid gap-3 sm:grid-cols-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">Procena godišnje provizije</p>
          <p className="mt-2 text-2xl font-semibold text-slate-950">{formatEuro(result.annualCommission)}</p>
        </div>
        <div className="rounded-xl border border-amber-200 bg-amber-50 p-4">
          <p className="text-xs font-semibold uppercase tracking-[0.12em] text-amber-700">Potencijalna godišnja ušteda</p>
          <p className="mt-2 text-2xl font-semibold text-amber-950">{formatEuro(result.annualSaving)}</p>
        </div>
        <div className="rounded-xl border border-primary/20 bg-primary-50 p-4">
          <p className="text-xs font-semibold uppercase tracking-[0.12em] text-primary">Povrat investicije</p>
          <p className="mt-2 text-2xl font-semibold text-slate-950">
            {result.paybackMonths ? `${Math.max(1, Math.ceil(result.paybackMonths))} mes.` : "n/a"}
          </p>
        </div>
      </div>

      <div className="mt-5 rounded-xl border border-slate-200 bg-white p-4 text-sm leading-6 text-slate-700">
        Ako prebacite oko <strong>{result.shiftedReservations} rezervacija mesečno</strong> iz OTA kanala u direktan booking tok,
        procenjena ušteda na Booking.com proviziji je <strong>{formatEuro(result.monthlySaving)} mesečno</strong>.
      </div>

      <div className="mt-5">
        <Button
          href="/kontakt"
          data-lead-type="beds24"
          data-lead-subject="Upit: ROI direktnih rezervacija"
          data-source-section="ROI kalkulator direktnih rezervacija"
        >
          Zakažite konsultaciju za direktne rezervacije
        </Button>
      </div>
    </div>
  );
}