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

// 1. Basic forwardRef: Passing DOM ref
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
}

// forwardRef<ref type, props type>
const CustomInput = forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, ...props }, ref) => {
    return (
      <div className="flex flex-col gap-1">
        {label && <label className="text-sm font-medium">{"Email"}</label>}
        {/* Connect ref to the actual 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'; // Display name in DevTools

// Access input DOM directly via ref from parent component
function LoginForm() {
  const emailRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);

  const focusEmail = () => emailRef.current?.focus(); // Control focus externally

  return (
    <form>
      <CustomInput ref={emailRef} label="Email" type="email" />
      <CustomInput ref={passwordRef} label="Password" type="password" />
      <button type="button" onClick={focusEmail}>{"Focus on Email"}</button>
    </form>
  );
}

// 2. useImperativeHandle: Customizing exposed 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);

    // Define methods to expose to parent (expose only selected APIs, not the entire DOM)
    useImperativeHandle(ref, () => ({
      play: () => videoRef.current?.play(),
      pause: () => videoRef.current?.pause(),
      seek: (seconds) => {
        if (videoRef.current) videoRef.current.currentTime = seconds;
      },
      getCurrentTime: () => videoRef.current?.currentTime ?? 0,
    }), []); // dependency array

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

// Parent: Can only use exposed APIs (cannot access entire 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()}>{"Play"}</button>
        <button onClick={() => playerRef.current?.pause()}>{"Pause"}</button>
        <button onClick={() => playerRef.current?.seek(30)}>{"Seek to 30 seconds"}</button>
      </div>
    </div>
  );
}

// 3. React 19 method (forwardRef not needed)
// function NewInput({ ref, ...props }: InputProps & { ref?: React.Ref<HTMLInputElement> }) {
//   return <input ref={ref} {...props} />;
// }