"use client";

import {
  Fragment,
  useId,
  useRef,
  useState,
  type ChangeEvent,
  type KeyboardEvent,
  type ReactNode,
} from "react";
import { cx } from "../../utils";
import { FoxInput, type FoxInputState } from "../fox-input";
import { FoxSelect, type FoxSelectItem } from "../fox-select";

export type FoxPhoneNumberType = "unit" | "combine";
export type FoxPhoneNumberState = FoxInputState;

type Parts = [string, string, string];
type Lengths = [number, number, number];

export interface FoxPhoneNumberProps {
  /** `unit`은 상자 셋을 하이픈으로 잇고, `combine`은 상자 하나에 세 칸을 둔다. */
  type?: FoxPhoneNumberType;
  /**
   * 숫자만 담긴 값. 하이픈은 화면에만 있고 값에는 들어가지 않는다 — `"01012345678"`.
   * 꾸며진 값을 넣어도 숫자만 남겨 읽는다. 주면 제어 컴포넌트가 된다.
   */
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  /**
   * 앞자리 목록. `unit`에서는 선택 목록이 되고, 두 모양 모두 **밖에서 받은 값을 나눌 때**
   * 앞자리 길이를 알아내는 데 쓴다 — 없으면 `maxLengths[0]`만큼을 앞자리로 본다.
   * 지역번호 `02`처럼 짧은 앞자리를 쓰면 목록에 넣거나 `maxLengths`를 함께 조정한다.
   */
  prefixOptions?: string[];
  label?: string;
  /** 헬퍼 메시지. 색은 상태를 따라간다. */
  message?: string;
  /** 헬퍼 메시지 앞 아이콘. `currentColor`로 그려야 상태 색을 따라간다. */
  messageIcon?: ReactNode;
  placeholders?: Parts;
  /** 칸별 최대 자릿수. 자동 이동의 기준이기도 하다. */
  maxLengths?: Lengths;
  /** 칸을 다 채우면 다음 칸으로 옮기고, 빈 칸에서 지우면 앞칸으로 돌아간다. */
  autoAdvance?: boolean;
  /** 오류 표시. `aria-invalid`가 되고 테두리·헬퍼 색이 바뀐다. */
  invalid?: boolean;
  disabled?: boolean;
  readOnly?: boolean;
  /** 주면 모양이 그 상태로 고정된다. 없으면 포커스·값·비활성으로 브라우저가 판단한다. */
  state?: FoxPhoneNumberState;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. */
  className?: string;
  name?: string;
  id?: string;
}

const DEFAULT_PLACEHOLDERS: Parts = ["010", "1234", "5678"];
const DEFAULT_MAX_LENGTHS: Lengths = [3, 4, 4];
const SEGMENT_LABELS: Parts = ["전화번호 앞자리", "전화번호 가운데자리", "전화번호 뒷자리"];

/** 숫자가 아닌 글자는 버린다 — 붙여넣기로 들어온 하이픈·공백도 여기서 걸린다. */
function onlyDigits(text: string): string {
  return text.replace(/\D/g, "");
}

/**
 * 숫자만 담긴 값을 화면의 세 칸으로 나눈다.
 *
 * 앞자리는 선택 목록 중 가장 긴 일치를 쓴다 — `02`와 `021`이 함께 있어도 흔들리지 않는다.
 * 뒷자리는 항상 마지막 네 자리다(시안 기준). 그래서 `010-123-4567`과 `010-1234-5678`이
 * 둘 다 맞게 갈린다. 남은 글자가 그보다 짧으면 아직 입력 중이라 보고 가운데에 둔다.
 */
function splitValue(value: string, prefixOptions: string[], maxLengths: Lengths): Parts {
  // 밖에서 `010-1234-5678`처럼 꾸며진 값이 와도 받아 준다 — 내보낼 때는 숫자만 남는다.
  const digits = onlyDigits(value ?? "");
  const matched = prefixOptions
    .filter((option) => option && digits.startsWith(option))
    .sort((a, b) => b.length - a.length)[0];
  const head = matched ?? digits.slice(0, maxLengths[0]);
  const rest = digits.slice(head.length);

  if (rest.length > maxLengths[2]) {
    return [head, rest.slice(0, rest.length - maxLengths[2]), rest.slice(-maxLengths[2])];
  }
  return [head, rest, ""];
}

/**
 * @fox 전화번호 입력. 화면은 세 칸이지만 값은 숫자만 담긴 문자열 하나다.
 *
 * 화면의 세 칸이 값의 진실 공급원이다 — 입력 도중 `"0101"`처럼 어디까지가 앞자리인지
 * 알 수 없는 값이 생겨도 칸이 흔들리지 않는다. 밖에서 `value`를 바꿨을 때만 다시 나눈다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxPhoneNumber({
  type = "unit",
  value,
  defaultValue,
  onChange,
  prefixOptions = [],
  label,
  message,
  messageIcon,
  placeholders = DEFAULT_PLACEHOLDERS,
  maxLengths = DEFAULT_MAX_LENGTHS,
  autoAdvance = true,
  invalid = false,
  disabled = false,
  readOnly = false,
  state,
  hidden = false,
  className,
  name,
  id,
}: FoxPhoneNumberProps) {
  const autoId = useId();
  const [parts, setParts] = useState<Parts>(() =>
    splitValue(value ?? defaultValue ?? "", prefixOptions, maxLengths)
  );
  const [seenValue, setSeenValue] = useState(value);
  const tailRefs = useRef<(HTMLInputElement | null)[]>([]);

  // 밖에서 값을 바꿨을 때만 다시 나눈다. 우리가 방금 올려보낸 값이면 그대로 둔다.
  if (value !== undefined && value !== seenValue) {
    setSeenValue(value);
    if (value !== parts.join("")) {
      setParts(splitValue(value, prefixOptions, maxLengths));
    }
  }

  if (hidden) {
    return null;
  }

  const rootId = id ?? autoId;
  const labelId = `${rootId}-label`;
  const messageId = `${rootId}-message`;
  const errored = invalid || state === "error";

  const commit = (index: number, next: string) => {
    const nextParts = [...parts] as Parts;
    nextParts[index] = next;
    setParts(nextParts);
    const joined = nextParts.join("");
    setSeenValue(joined);
    onChange?.(joined);
  };

  const focusSegment = (index: number) => {
    tailRefs.current[index]?.focus();
  };

  // 숫자가 아닌 입력은 아예 들어오지 못한다. 붙여넣기로 하이픈이 섞여 와도 여기서 걸리고,
  // 그 뒤에 자릿수를 자르므로 `010-1234`를 한 칸에 붙여도 넘치지 않는다.
  const handleSegmentChange = (index: number) => (next: string) => {
    const digits = onlyDigits(next).slice(0, maxLengths[index]);
    commit(index, digits);
    if (autoAdvance && index < 2 && digits.length >= maxLengths[index]) {
      focusSegment(index + 1);
    }
  };

  // 빈 칸에서 백스페이스하면 앞칸으로 돌아간다.
  const handleSegmentKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {
    if (autoAdvance && event.key === "Backspace" && index > 0 && parts[index] === "") {
      event.preventDefault();
      focusSegment(index - 1);
    }
  };

  const prefixItems: FoxSelectItem[] = prefixOptions.map((option) => ({
    value: option,
    label: option,
  }));

  const body =
    type === "unit" ? (
      <div className="fox-phone-number__row">
        <div className="fox-phone-number__part">
          <FoxSelect
            size="md"
            options={prefixItems}
            value={parts[0]}
            onValueChange={(next) => {
              commit(0, next);
              if (autoAdvance) {
                focusSegment(1);
              }
            }}
            placeholder={placeholders[0]}
            error={errored}
            disabled={disabled || state === "disabled"}
            readOnly={readOnly || state === "view"}
          />
        </div>

        {[1, 2].map((index) => (
          <Fragment key={index}>
            <span className="fox-phone-number__separator" aria-hidden="true">
              -
            </span>
            <div className="fox-phone-number__part">
              <FoxInput
                size="md"
                inputMode="numeric"
                aria-label={SEGMENT_LABELS[index]}
                value={parts[index]}
                onChange={handleSegmentChange(index)}
                onKeyDown={handleSegmentKeyDown(index)}
                placeholder={placeholders[index]}
                maxLength={maxLengths[index]}
                invalid={invalid}
                disabled={disabled}
                readOnly={readOnly}
                state={state}
                ref={(node) => {
                  tailRefs.current[index] = node;
                }}
              />
            </div>
          </Fragment>
        ))}
      </div>
    ) : (
      <div className="fox-phone-number__box">
        {[0, 1, 2].map((index) => (
          <Fragment key={index}>
            {index > 0 && (
              <span className="fox-phone-number__separator" aria-hidden="true">
                -
              </span>
            )}
            <input
              className="fox-phone-number__segment"
              inputMode="numeric"
              aria-label={SEGMENT_LABELS[index]}
              aria-invalid={errored || undefined}
              aria-describedby={message ? messageId : undefined}
              value={parts[index]}
              placeholder={placeholders[index]}
              maxLength={maxLengths[index]}
              disabled={disabled}
              readOnly={readOnly}
              onChange={(event: ChangeEvent<HTMLInputElement>) =>
                handleSegmentChange(index)(event.target.value)
              }
              onKeyDown={handleSegmentKeyDown(index)}
              ref={(node) => {
                tailRefs.current[index] = node;
              }}
            />
          </Fragment>
        ))}
      </div>
    );

  return (
    <div
      className={cx("fox-phone-number", className)}
      data-state={state}
      role="group"
      aria-labelledby={label ? labelId : undefined}
    >
      {label && (
        <span className="fox-phone-number__label" id={labelId}>
          {label}
        </span>
      )}

      {body}

      {/* 폼 전송용. 화면의 세 칸은 이름을 갖지 않는다 — 값은 언제나 합쳐진 하나다. */}
      {name && <input type="hidden" name={name} value={parts.join("")} />}

      {message && (
        <p className="fox-phone-number__message" id={messageId}>
          {messageIcon && (
            <span className="fox-phone-number__message-icon" aria-hidden="true">
              {messageIcon}
            </span>
          )}
          {message}
        </p>
      )}
    </div>
  );
}