"use client";

import { useState } from "react";
import { euro } from "@/lib/format";

/**
 * Inline-bewerkbaar bedrag: klik om te overschrijven, ↺ om de berekende
 * waarde te herstellen. Gebruikt overal waar de notaris een berekend bedrag
 * manueel wil kunnen aanpassen.
 */
export default function EditableAmount({
  value,
  isOverridden,
  onCommit,
  onReset,
}: {
  value: number;
  isOverridden: boolean;
  onCommit: (v: number) => void;
  onReset: () => void;
}) {
  const [editing, setEditing] = useState(false);
  const [raw, setRaw] = useState("");

  function begin() {
    setRaw(String(Math.round(value)));
    setEditing(true);
  }

  function save() {
    const n = parseFloat(raw.replace(/\s/g, "").replace(/\./g, "").replace(",", "."));
    if (!isNaN(n) && n >= 0) onCommit(Math.round(n));
    setEditing(false);
  }

  if (editing) {
    return (
      <input
        autoFocus
        type="text"
        inputMode="decimal"
        value={raw}
        onChange={(e) => setRaw(e.target.value)}
        onBlur={save}
        onKeyDown={(e) => {
          if (e.key === "Enter") save();
          if (e.key === "Escape") setEditing(false);
        }}
        className="w-28 text-right font-mono text-sm border border-brand-400 rounded-md px-1.5 py-0.5 focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white"
      />
    );
  }

  return (
    <span className="inline-flex items-center gap-0.5 group">
      <span
        role="button"
        tabIndex={0}
        onClick={(e) => { e.stopPropagation(); begin(); }}
        onKeyDown={(e) => e.key === "Enter" && begin()}
        title="Klik om handmatig aan te passen"
        className={`font-mono cursor-pointer rounded px-1 -mx-1 hover:bg-brand-50 transition-colors ${
          isOverridden ? "text-brand-600 underline decoration-dotted underline-offset-2" : ""
        }`}
      >
        {euro(value)}
      </span>
      {isOverridden ? (
        <button
          onClick={(e) => { e.stopPropagation(); onReset(); }}
          title="Herstel berekende waarde"
          className="text-[11px] text-brand-300 hover:text-red-500 transition-colors leading-none ml-0.5"
          tabIndex={-1}
        >
          ↺
        </button>
      ) : (
        <span className="text-[11px] text-slate-300 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none select-none">
          ✎
        </span>
      )}
    </span>
  );
}