"use client";

import { useState } from "react";

// Illustrative estimate only — assumes automated reminders/rebooking recover
// roughly 40% of currently-lost no-show slots. This assumption is a
// placeholder for a real, defensible figure (ideally drawn from actual
// client data once we have more than one case study) — flag before launch.
const ASSUMED_RECOVERY_RATE = 0.4;

export function RoiCalculator() {
  const [monthlyBookings, setMonthlyBookings] = useState(120);
  const [noShowRate, setNoShowRate] = useState(15);
  const [avgValue, setAvgValue] = useState(15000);

  const lostBookings = monthlyBookings * (noShowRate / 100);
  const recovered = Math.round(lostBookings * ASSUMED_RECOVERY_RATE);
  const recoveredRevenue = recovered * avgValue;

  return (
    <div className="grid grid-cols-1 gap-8 rounded-card border border-navy/10 p-8 md:grid-cols-2">
      <div className="space-y-6">
        <SliderField
          label="Bookings per month"
          value={monthlyBookings}
          onChange={setMonthlyBookings}
          min={10}
          max={500}
          step={10}
        />
        <SliderField
          label="Current no-show rate (%)"
          value={noShowRate}
          onChange={setNoShowRate}
          min={0}
          max={50}
          step={1}
        />
        <SliderField
          label="Average value per booking (₦)"
          value={avgValue}
          onChange={setAvgValue}
          min={2000}
          max={100000}
          step={1000}
          format={(v) => `₦${v.toLocaleString()}`}
        />
      </div>

      <div className="flex flex-col justify-center rounded-2xl bg-gray-light p-6">
        <p className="mb-1 text-sm text-navy/60">Estimated recovered bookings / month</p>
        <p className="mb-5 font-heading text-4xl font-semibold text-green">{recovered}</p>
        <p className="mb-1 text-sm text-navy/60">Estimated recovered revenue / month</p>
        <p className="font-heading text-3xl font-semibold">
          ₦{recoveredRevenue.toLocaleString()}
        </p>
        <p className="mt-6 text-xs text-navy/45">
          Illustrative estimate based on typical improvements from automated
          reminders and rebooking — not a guarantee. We&apos;ll work out your
          real numbers on the call.
        </p>
      </div>
    </div>
  );
}

function SliderField({
  label,
  value,
  onChange,
  min,
  max,
  step,
  format,
}: {
  label: string;
  value: number;
  onChange: (v: number) => void;
  min: number;
  max: number;
  step: number;
  format?: (v: number) => string;
}) {
  return (
    <label className="block">
      <span className="mb-2 flex justify-between text-sm font-medium text-navy">
        <span>{label}</span>
        <span className="text-navy/60">{format ? format(value) : value}</span>
      </span>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="w-full accent-green"
      />
    </label>
  );
}