import { forwardRef, useRef, useImperativeHandle, useState } from 'react';

// 1. 기본 forwardRef: DOM ref 전달
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
}

// forwardRef<ref 타입, props 타입>
const CustomInput = forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, ...props }, ref) => {
    return (
      <div className="flex flex-col gap-1">
        {label && <label className="text-sm font-medium">{label}</label>}
        {/* ref를 실제 input DOM에 연결 */}
        <input
          ref={ref}
          className={`border rounded px-3 py-2 ${
            error ? 'border-red-500' : 'border-gray-300'
          }`}
          {...props}
        />
        {error && <p className="text-red-500 text-xs">{error}</p>}
      </div>
    );
  }
);

CustomInput.displayName = 'CustomInput'; // DevTools 표시명

// 부모 컴포넌트에서 ref로 input DOM 직접 접근
function LoginForm() {
  const emailRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);

  const focusEmail = () => emailRef.current?.focus(); // 외부에서 포커스 제어

  return (
    <form>
      <CustomInput ref={emailRef} label="이메일" type="email" />
      <CustomInput ref={passwordRef} label="비밀번호" type="password" />
      <button type="button" onClick={focusEmail}>이메일로 포커스</button>
    </form>
  );
}

// 2. useImperativeHandle: 노출 API 커스터마이징
interface VideoPlayerHandle {
  play: () => void;
  pause: () => void;
  seek: (seconds: number) => void;
  getCurrentTime: () => number;
}

interface VideoPlayerProps {
  src: string;
  autoPlay?: boolean;
}

const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
  ({ src, autoPlay = false }, ref) => {
    const videoRef = useRef<HTMLVideoElement>(null);

    // 부모에게 노출할 메서드 정의 (DOM 전체가 아닌 선택된 API만 노출)
    useImperativeHandle(ref, () => ({
      play: () => videoRef.current?.play(),
      pause: () => videoRef.current?.pause(),
      seek: (seconds) => {
        if (videoRef.current) videoRef.current.currentTime = seconds;
      },
      getCurrentTime: () => videoRef.current?.currentTime ?? 0,
    }), []); // 의존성 배열

    return (
      <video
        ref={videoRef}
        src={src}
        autoPlay={autoPlay}
        controls
        className="w-full rounded"
      />
    );
  }
);

// 부모: 노출된 API만 사용 가능 (DOM 전체 접근 불가)
function VideoPage() {
  const playerRef = useRef<VideoPlayerHandle>(null);

  return (
    <div>
      <VideoPlayer ref={playerRef} src="/video.mp4" />
      <div className="flex gap-2 mt-2">
        <button onClick={() => playerRef.current?.play()}>재생</button>
        <button onClick={() => playerRef.current?.pause()}>정지</button>
        <button onClick={() => playerRef.current?.seek(30)}>30초로 이동</button>
      </div>
    </div>
  );
}

// 3. React 19 방식 (forwardRef 불필요)
// function NewInput({ ref, ...props }: InputProps & { ref?: React.Ref<HTMLInputElement> }) {
//   return <input ref={ref} {...props} />;
// }