"use client";

import { useMemo, useState } from "react";
import type { CalculatorDefinition } from "@/lib/calculators/types";
import { runCalculator } from "@/lib/calculators/engine";
import { formatCurrency, formatPercent } from "@/lib/utils";

export function DynamicCalculator({ calculator }: { calculator: CalculatorDefinition }) {
  const initialValues = Object.fromEntries(calculator.inputs.map((input) => [input.name, input.defaultValue ?? 0]));
  const [values, setValues] = useState<Record<string, number | string>>(initialValues);
  const result = useMemo(() => runCalculator(calculator, values), [calculator, values]);

  function formatValue(name: string, value: number) {
    const output = calculator.outputs.find((item) => item.name === name);
    if (output?.format === "currency") return formatCurrency(value);
    if (output?.format === "percentage") return formatPercent(value);
    return value.toLocaleString("en-US", { maximumFractionDigits: 2 });
  }

  return (
    <div className="card grid gap-8 p-6 lg:grid-cols-[360px_1fr]">
      <div className="space-y-4 lg:border-r lg:border-slate-200 lg:pr-8">
        {calculator.inputs.map((input) => (
          <label key={input.name} className="grid gap-2 text-sm font-bold text-slate-700">
            {input.label}
            <input
              className="rounded-xl border border-slate-200 bg-white px-4 py-3 outline-none focus:border-blue-500"
              type="number"
              value={values[input.name]}
              onChange={(event) => setValues((current) => ({ ...current, [input.name]: Number(event.target.value) }))}
            />
          </label>
        ))}
      </div>
      <div>
        <div className="grid gap-4 md:grid-cols-3">
          {calculator.outputs.map((output) => (
            <div className="metric" key={output.name}>
              <p className="text-sm font-bold text-slate-500">{output.label}</p>
              <p className="mt-3 text-3xl font-black text-blue-600">{formatValue(output.name, result.outputs[output.name])}</p>
            </div>
          ))}
        </div>
        <div className="mt-6 rounded-2xl bg-blue-50 p-5 text-blue-900">
          <h3 className="font-black">Business insight</h3>
          <p className="mt-2 text-sm leading-6">{result.insights[0]?.message}</p>
        </div>
      </div>
    </div>
  );
}