import { useMemo, useState } from 'react'

const BASE = 10000
const PER_SHOP = 2000
const PER_CASH = 500
const PER_WAREHOUSE = 500

interface SliderProps {
  label: string; value: number; min: number; max: number; onChange: (v: number) => void; suffix?: string
}
function Slider({ label, value, min, max, onChange, suffix }: SliderProps) {
  return (
    <div>
      <div className="flex items-baseline justify-between">
        <label className="text-sm font-medium">{label}</label>
        <span className="text-2xl font-bold tabular-nums">{value}{suffix && <span className="text-sm text-slate-500">{suffix}</span>}</span>
      </div>
      <input
        type="range" min={min} max={max} value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="w-full mt-2 accent-[#00B207]"
      />
      <div className="flex justify-between text-xs text-slate-400 mt-1"><span>{min}</span><span>{max}</span></div>
    </div>
  )
}

export default function BusinessTariffBuilder() {
  const [shops, setShops] = useState(1)
  const [cashes, setCashes] = useState(1)
  const [warehouses, setWarehouses] = useState(1)
  const [employees, setEmployees] = useState(5)

  const total = useMemo(() => {
    return BASE
      + Math.max(0, shops - 1) * PER_SHOP
      + Math.max(0, cashes - 1) * PER_CASH
      + Math.max(0, warehouses - 1) * PER_WAREHOUSE
  }, [shops, cashes, warehouses])

  const fmt = new Intl.NumberFormat('ru')
  const signupHref = `/signup?plan=business&shops=${shops}&cashes=${cashes}&warehouses=${warehouses}&employees=${employees}`

  return (
    <div className="rounded-xl border-2 border-brand bg-white p-6">
      <div className="flex items-baseline justify-between mb-6">
        <div>
          <h3 class="text-lg font-bold">Конструктор «Бизнес»</h3>
          <p className="text-xs text-slate-500 mt-0.5">База 10 000 ₸ + ваши параметры</p>
        </div>
        <div className="text-right">
          <div className="text-3xl font-extrabold">{fmt.format(total)} ₸</div>
          <div className="text-xs text-slate-500">в месяц</div>
        </div>
      </div>
      <div className="space-y-5">
        <Slider label="Магазинов (точек продаж)" value={shops} min={1} max={3} onChange={setShops} />
        <Slider label="Касс" value={cashes} min={1} max={5} onChange={setCashes} />
        <Slider label="Складов" value={warehouses} min={1} max={5} onChange={setWarehouses} />
        <Slider label="Сотрудников" value={employees} min={5} max={10} onChange={setEmployees} />
      </div>
      <div className="mt-6 text-xs text-slate-500 grid grid-cols-3 gap-2">
        <div>+{fmt.format(PER_SHOP)} ₸ / магазин</div>
        <div>+{fmt.format(PER_CASH)} ₸ / касса</div>
        <div>+{fmt.format(PER_WAREHOUSE)} ₸ / склад</div>
      </div>
      <a href={signupHref} className="block text-center mt-6 px-4 py-3 bg-brand text-white rounded-md font-semibold hover:bg-[#009305]">
        Выбрать конфигурацию · {fmt.format(total)} ₸/мес
      </a>
    </div>
  )
}
