"use client";

import * as React from "react";

import { cn } from "../../lib/utils";
import { Button } from "./button";
import { Input } from "./input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./select";
import { Tip } from "./tip";

interface InlineEditShellProps {
  children: React.ReactNode;
  className?: string;
}

function InlineEditShell({ children, className }: InlineEditShellProps) {
  return (
    <span
      data-slot="inline-edit"
      className={cn(
        "inline-flex min-w-0 max-w-full items-center gap-1",
        className,
      )}
      onClick={(event) => event.stopPropagation()}
    >
      {children}
    </span>
  );
}

function InlineEditActions({
  label,
  onSave,
  onCancel,
}: {
  label: string;
  onSave: () => void;
  onCancel: () => void;
}) {
  return (
    <span className="inline-flex shrink-0 items-center gap-0.5">
      <Tip label={`Save ${label}`} side="top">
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          aria-label={`Save ${label}`}
          onClick={onSave}
        >
          <i className="fa-light fa-check" aria-hidden="true" />
        </Button>
      </Tip>
      <Tip label={`Cancel editing ${label}`} side="top">
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          aria-label={`Cancel editing ${label}`}
          onClick={onCancel}
        >
          <i className="fa-light fa-xmark" aria-hidden="true" />
        </Button>
      </Tip>
    </span>
  );
}

export interface InlineInputEditProps extends Omit<
  React.ComponentProps<typeof Input>,
  "value" | "defaultValue" | "onChange" | "onBlur"
> {
  value: string;
  label: string;
  onCommit: (value: string) => void;
  emptyLabel?: string;
  displayClassName?: string;
  shellClassName?: string;
}

/**
 * Compact text editing for a value shown in place. Enter saves and Escape
 * cancels. Use a regular Field when the value needs help text or validation.
 */
function InlineInputEdit({
  value,
  label,
  onCommit,
  emptyLabel = "None",
  displayClassName,
  shellClassName,
  disabled,
  readOnly,
  className,
  onKeyDown,
  ...inputProps
}: InlineInputEditProps) {
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(value);
  const displayButtonRef = React.useRef<HTMLButtonElement>(null);
  const restoreFocusRef = React.useRef(false);

  React.useEffect(() => {
    if (!editing) setDraft(value);
  }, [editing, value]);

  React.useLayoutEffect(() => {
    if (!editing && restoreFocusRef.current) {
      restoreFocusRef.current = false;
      displayButtonRef.current?.focus();
    }
  }, [editing]);

  const cancel = React.useCallback(() => {
    setDraft(value);
    restoreFocusRef.current = true;
    setEditing(false);
  }, [value]);

  const save = React.useCallback(() => {
    onCommit(draft);
    restoreFocusRef.current = true;
    setEditing(false);
  }, [draft, onCommit]);

  if (!editing) {
    return (
      <InlineEditShell className={shellClassName}>
        <Button
          ref={displayButtonRef}
          type="button"
          variant="ghost"
          size="sm"
          disabled={disabled || readOnly}
          aria-label={`Edit ${label}: ${value || emptyLabel}`}
          className={cn(
            "h-8 min-w-0 max-w-full justify-start px-2 font-normal",
            !value && "text-muted-foreground",
            displayClassName,
          )}
          onClick={() => setEditing(true)}
        >
          <span className="truncate">{value || emptyLabel}</span>
          <i
            className="fa-light fa-pen ms-1.5 shrink-0 text-xs"
            aria-hidden="true"
          />
        </Button>
      </InlineEditShell>
    );
  }

  return (
    <InlineEditShell className={shellClassName}>
      <Input
        {...inputProps}
        value={draft}
        aria-label={label}
        className={cn("h-8 min-w-28", className)}
        autoFocus
        onChange={(event) => setDraft(event.target.value)}
        onKeyDown={(event) => {
          onKeyDown?.(event);
          event.stopPropagation();
          if (event.defaultPrevented) return;
          if (event.key === "Enter") {
            event.preventDefault();
            save();
          }
          if (event.key === "Escape") {
            event.preventDefault();
            cancel();
          }
        }}
      />
      <InlineEditActions label={label} onSave={save} onCancel={cancel} />
    </InlineEditShell>
  );
}

export interface InlineSelectEditOption {
  value: string;
  label: string;
}

export interface InlineSelectEditProps {
  value: string;
  label: string;
  options: readonly InlineSelectEditOption[];
  onCommit: (value: string) => void;
  emptyLabel?: string;
  disabled?: boolean;
  readOnly?: boolean;
  className?: string;
  triggerClassName?: string;
}

/**
 * Compact enumerated editing for detail rows and table cells. Selection stays
 * a draft until the user confirms it.
 */
function InlineSelectEdit({
  value,
  label,
  options,
  onCommit,
  emptyLabel = "None",
  disabled,
  readOnly,
  className,
  triggerClassName,
}: InlineSelectEditProps) {
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(value);
  const selectedLabel = options.find((option) => option.value === value)?.label;
  const displayButtonRef = React.useRef<HTMLButtonElement>(null);
  const restoreFocusRef = React.useRef(false);

  React.useEffect(() => {
    if (!editing) setDraft(value);
  }, [editing, value]);

  React.useLayoutEffect(() => {
    if (!editing && restoreFocusRef.current) {
      restoreFocusRef.current = false;
      displayButtonRef.current?.focus();
    }
  }, [editing]);

  const cancel = React.useCallback(() => {
    setDraft(value);
    restoreFocusRef.current = true;
    setEditing(false);
  }, [value]);

  const save = React.useCallback(() => {
    onCommit(draft);
    restoreFocusRef.current = true;
    setEditing(false);
  }, [draft, onCommit]);

  if (!editing) {
    return (
      <InlineEditShell className={className}>
        <Button
          ref={displayButtonRef}
          type="button"
          variant="ghost"
          size="sm"
          disabled={disabled || readOnly}
          aria-label={`Edit ${label}: ${selectedLabel || emptyLabel}`}
          className={cn(
            "h-8 min-w-0 max-w-full justify-start px-2 font-normal",
            !selectedLabel && "text-muted-foreground",
          )}
          onClick={() => setEditing(true)}
        >
          <span className="truncate">{selectedLabel || emptyLabel}</span>
          <i
            className="fa-light fa-chevron-down ms-1.5 shrink-0 text-xs"
            aria-hidden="true"
          />
        </Button>
      </InlineEditShell>
    );
  }

  return (
    <InlineEditShell className={className}>
      <Select value={draft} onValueChange={setDraft}>
        <SelectTrigger
          size="sm"
          aria-label={label}
          className={cn("min-w-36", triggerClassName)}
          onKeyDown={(event) => {
            event.stopPropagation();
            if (event.key === "Escape") {
              event.preventDefault();
              cancel();
            }
          }}
        >
          <SelectValue placeholder={emptyLabel} />
        </SelectTrigger>
        <SelectContent>
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <InlineEditActions label={label} onSave={save} onCancel={cancel} />
    </InlineEditShell>
  );
}

export {
  InlineEditActions,
  InlineEditShell,
  InlineInputEdit,
  InlineSelectEdit,
};