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} />;
// }