"use client";

import { InfoTooltip } from "~/components/ui/InfoTooltip.js";

const INPUT_CLS =
  "w-full rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-100";
const LABEL_CLS = "mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-500";

export interface EditableAssumption {
  id?: string;
  category: string;
  key: string;
  label: string;
  valueType: string;
  value: string;
  notes: string;
}

export function makeAssumption(): EditableAssumption {
  return {
    category: "commercial",
    key: "",
    label: "",
    valueType: "string",
    value: "",
    notes: "",
  };
}

export interface AssumptionEditorProps {
  assumptions: EditableAssumption[];
  onChange: (updater: (current: EditableAssumption[]) => EditableAssumption[]) => void;
}

export function AssumptionEditor({ assumptions, onChange }: AssumptionEditorProps) {
  return (
    <div className="space-y-4">
      {assumptions.map((assumption, index) => (
        <div key={assumption.id ?? `new-${index}`} className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            <label>
              <span className={LABEL_CLS}>Category <InfoTooltip content="Groups assumptions by topic, e.g. 'commercial', 'delivery', 'technical'." /></span>
              <input className={INPUT_CLS} value={assumption.category} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, category: event.target.value } : item))} />
            </label>
            <label>
              <span className={LABEL_CLS}>Key <InfoTooltip content="Machine-readable identifier, auto-generated from label if left empty." /></span>
              <input className={INPUT_CLS} value={assumption.key} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, key: event.target.value } : item))} />
            </label>
            <label>
              <span className={LABEL_CLS}>Label <InfoTooltip content="Human-readable name for this assumption." /></span>
              <input className={INPUT_CLS} value={assumption.label} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, label: event.target.value } : item))} />
            </label>
            <label>
              <span className={LABEL_CLS}>Type <InfoTooltip content="Data type of the value, e.g. 'string', 'number', 'boolean'." /></span>
              <input className={INPUT_CLS} value={assumption.valueType} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, valueType: event.target.value } : item))} />
            </label>
          </div>
          <div className="mt-4 grid gap-4 lg:grid-cols-[minmax(0,1fr),220px]">
            <label className="block">
              <span className={LABEL_CLS}>Value <InfoTooltip content="The concrete value or condition for this assumption." /></span>
              <textarea className={`${INPUT_CLS} min-h-24`} value={assumption.value} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))} />
            </label>
            <label className="block">
              <span className={LABEL_CLS}>Notes <InfoTooltip content="Additional context or rationale for this assumption." /></span>
              <textarea className={`${INPUT_CLS} min-h-24`} value={assumption.notes} onChange={(event) => onChange((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, notes: event.target.value } : item))} />
            </label>
          </div>
          <div className="mt-4 flex justify-end">
            <button type="button" className="text-sm font-medium text-rose-600" onClick={() => onChange((current) => current.filter((_, itemIndex) => itemIndex !== index))}>
              Remove assumption
            </button>
          </div>
        </div>
      ))}

      <button type="button" className="rounded-2xl border border-dashed border-gray-300 px-4 py-3 text-sm font-medium text-gray-600" onClick={() => onChange((current) => [...current, makeAssumption()])}>
        Add assumption
      </button>
    </div>
  );
}
