"use client";

import {
  useId,
  useState,
  type ChangeEvent,
  type ComponentPropsWithRef,
  type FormEvent,
  type ReactNode,
} from "react";
import { cx } from "../../utils";
import { FoxFormLabel } from "../fox-form-label";

export type FoxTextAreaState = "default" | "focused" | "completed" | "error" | "disabled" | "view";

/**
 * 네이티브 `<textarea>`가 받는 것을 그대로 넘겨받는다 — rows·cols·maxLength·name·
 * required·readOnly·disabled·autoComplete 등. 이름이 겹치거나 의미가 다른 것만 걷어낸다.
 */
type NativeTextAreaProps = Omit<
  ComponentPropsWithRef<"textarea">,
  "onChange" | "onInput" | "className" | "children" | "hidden"
>;

export interface FoxTextAreaProps extends NativeTextAreaProps {
  /** 값이 첫 인자다. */
  onChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
  onInput?: (value: string, event: FormEvent<HTMLTextAreaElement>) => void;
  label?: string;
  /** 헬퍼 메시지. 색은 상태를 따라간다. */
  message?: string;
  /** 헬퍼 메시지 앞 아이콘. `currentColor`로 그려야 상태 색을 따라간다. */
  messageIcon?: ReactNode;
  /** 글자 수를 오른쪽 아래에 보여준다. `maxLength`가 있으면 `현재/최대`로 적는다. */
  counter?: boolean;
  /** 오류 표시. `aria-invalid`가 되고 테두리·헬퍼·카운터 색이 바뀐다. */
  invalid?: boolean;
  /** 주면 모양이 그 상태로 고정된다. 없으면 포커스·값·비활성으로 브라우저가 판단한다. */
  state?: FoxTextAreaState;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. */
  className?: string;
}

/**
 * @fox 여러 줄 입력. 시안에 크기 축이 없어 높이는 `rows`가 정한다(기본 5줄).
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxTextArea({
  onChange,
  onInput,
  label,
  message,
  messageIcon,
  counter = false,
  invalid = false,
  state,
  hidden = false,
  className,
  id,
  rows = 5,
  value,
  defaultValue,
  maxLength,
  ...rest
}: FoxTextAreaProps) {
  const autoId = useId();

  // 카운터는 현재 길이를 알아야 한다. 비제어 입력은 DOM만 알고 있으므로 직접 따라간다.
  const [typedLength, setTypedLength] = useState(() => String(defaultValue ?? "").length);

  if (hidden) {
    return null;
  }

  const fieldId = id ?? `${autoId}-field`;
  const messageId = `${autoId}-message`;
  const length = value !== undefined ? String(value).length : typedLength;
  const errored = invalid || state === "error";
  const showFooter = Boolean(message) || counter;

  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
    if (value === undefined) {
      setTypedLength(event.target.value.length);
    }
    onChange?.(event.target.value, event);
  };

  const handleInput = (event: FormEvent<HTMLTextAreaElement>) => {
    onInput?.((event.target as HTMLTextAreaElement).value, event);
  };

  return (
    <div className={cx("fox-text-area", className)} data-state={state}>
      {label && (
        <FoxFormLabel htmlFor={fieldId}>{label}</FoxFormLabel>
      )}

      <div className="fox-text-area__box">
        <textarea
          {...rest}
          id={fieldId}
          className="fox-text-area__field"
          rows={rows}
          value={value}
          defaultValue={defaultValue}
          maxLength={maxLength}
          aria-invalid={errored || undefined}
          aria-describedby={message ? messageId : undefined}
          onChange={handleChange}
          onInput={handleInput}
        />
      </div>

      {showFooter && (
        <div className="fox-text-area__footer">
          {message && (
            <p className="fox-text-area__message" id={messageId}>
              {messageIcon && (
                <span className="fox-text-area__message-icon" aria-hidden="true">
                  {messageIcon}
                </span>
              )}
              {message}
            </p>
          )}

          {counter && (
            <p className="fox-text-area__counter">
              <span className="fox-text-area__counter-current">{length}</span>
              {maxLength !== undefined && `/${maxLength}`}
            </p>
          )}
        </div>
      )}
    </div>
  );
}