"use client";

import { useState, useRef, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

export interface EditableCellProps {
  value: string | number | boolean;
  type?: "text" | "number" | "textarea" | "toggle";
  onSave: (value: string) => void;
  required?: boolean;
  placeholder?: string;
  disabled?: boolean;
  formatDisplay?: (value: string) => string;
}

export function EditableCell({
  value,
  type = "text",
  onSave,
  required,
  placeholder,
  disabled,
  formatDisplay,
}: EditableCellProps) {
  const [isEditing, setIsEditing] = useState(false);
  const [tempValue, setTempValue] = useState(String(value));
  const [error, setError] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);

  useEffect(() => {
    if (isEditing && inputRef.current) {
      inputRef.current.focus();
      if ("select" in inputRef.current) {
        inputRef.current.select();
      }
    }
  }, [isEditing]);

  function startEdit() {
    if (disabled) return;
    setError(null);
    setTempValue(String(value));
    setIsEditing(true);
  }

  function commit() {
    // WR-02: skip redundant server action when nothing changed
    if (tempValue === String(value)) {
      setError(null);
      setIsEditing(false);
      return;
    }
    if (required && tempValue.trim().length === 0) {
      setError("Campo richiesto");
      return;
    }
    setError(null);
    onSave(tempValue);
    setIsEditing(false);
  }

  // Blur path: never leave the cell stuck. No-op if unchanged (WR-02);
  // revert to the last valid value instead of persisting/holding an
  // invalid required field while focus has already moved away (WR-03).
  function commitOnBlur() {
    if (tempValue === String(value)) {
      cancel();
      return;
    }
    if (required && tempValue.trim().length === 0) {
      cancel();
      return;
    }
    setError(null);
    onSave(tempValue);
    setIsEditing(false);
  }

  function cancel() {
    setTempValue(String(value));
    setError(null);
    setIsEditing(false);
  }

  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {
    if (e.key === "Enter" && type !== "textarea") {
      e.preventDefault();
      commit();
    } else if (e.key === "Escape") {
      e.preventDefault();
      cancel();
    }
  }

  if (!isEditing) {
    let display: string;
    if (type === "toggle") {
      display = String(value) === "true" ? "✓ Attivo" : "✗ Disattivato";
    } else {
      const raw = String(value);
      display = formatDisplay ? formatDisplay(raw) : raw || "—";
    }

    return (
      <div
        onClick={startEdit}
        className={cn(
          "px-2 py-1 rounded transition-colors duration-150 text-sm",
          disabled
            ? "cursor-not-allowed opacity-50"
            : "cursor-pointer hover:bg-muted",
          type === "textarea" && "line-clamp-2 max-w-md"
        )}
      >
        {display}
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-1">
      {type === "textarea" ? (
        <Textarea
          ref={inputRef as React.Ref<HTMLTextAreaElement>}
          value={tempValue}
          onChange={(e) => setTempValue(e.target.value)}
          onBlur={commitOnBlur}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          className={cn("ring-1 ring-primary resize-none text-sm", error && "ring-2 ring-red-500")}
          rows={3}
        />
      ) : type === "toggle" ? (
        <input
          ref={inputRef as React.Ref<HTMLInputElement>}
          type="checkbox"
          checked={tempValue === "true"}
          onChange={(e) => {
            const next = e.target.checked ? "true" : "false";
            setTempValue(next);
            onSave(next);
            setIsEditing(false);
          }}
          // WR-01: onChange already saves + closes — a blur-commit here would
          // fire a second (possibly stale) updateServiceField for the same field.
          onKeyDown={(e) => { if (e.key === "Escape") cancel(); }}
          className="h-4 w-4 cursor-pointer accent-primary"
        />
      ) : (
        <Input
          ref={inputRef as React.Ref<HTMLInputElement>}
          type={type}
          value={tempValue}
          onChange={(e) => setTempValue(e.target.value)}
          onBlur={commitOnBlur}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          step={type === "number" ? "0.01" : undefined}
          min={type === "number" ? "0" : undefined}
          className={cn("ring-1 ring-primary h-8 text-sm", error && "ring-2 ring-red-500")}
        />
      )}
      {error && <p className="text-xs text-red-600">{error}</p>}
    </div>
  );
}
