import { useAction, useMutation, useQuery } from "convex/react";
import { useEffect, useRef, useState } from "react";
import { api } from "../../convex/_generated/api";
import { Doc, Id } from "../../convex/_generated/dataModel";
import { ClipDetail } from "./ClipDetail";

export const RadioRoomLoader = ({ roomId }: { roomId: Id<"rooms"> }) => {
  const room = useQuery(api.rooms.getById, {
    roomId: roomId,
  });

  if (!room) {
    return null;
  }

  return <RadioRoom room={room} />;
};

export const RadioRoom = ({ room }: { room: Doc<"rooms"> }) => {
  const clips = useQuery(api.clips.get, {
    roomId: room._id,
  });

  const [selectedClip, setSelectedClip] = useState<any>(null);

  const updateMetadata = useMutation(api.rooms.updateMetadata);

  const runGenerate = useAction(api.runGenerate.changeRadio);

  const [prompt, setPrompt] = useState("");

  const audioRef = useRef<HTMLAudioElement>(null);

  const checkAudio = () => {
    if (room.radioState?.queue && audioRef.current) {
      const queue = room.radioState.queue as any[];
      let audio = audioRef.current;
      const nextClip = queue.findLast(
        (clip) => clip.playTs && clip.playTs < new Date().getTime()
      );

      if (nextClip) {
        audio.src = nextClip.audio_url;
        console.log(new Date().getTime() - nextClip.playTs);
        audio.currentTime = (new Date().getTime() - nextClip.playTs) / 1000;
        audio.play();
      }
    }
  };

  useEffect(() => {
    checkAudio();
  }, [audioRef.current, room.radioState]);

  useEffect(() => {
    if (audioRef.current) {
      let audio = audioRef.current;
      audio.addEventListener("ended", checkAudio);
    }
  }, [audioRef.current]);

  return (
    <div className="h-full flex">
      <div className="flex-1 overflow-y-auto">
        Radio Room
        <textarea
          className="w-full h-12 bg-gray-800 text-white p-2 rounded-md"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
        />
        <button
          className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-md"
          onClick={() =>
            updateMetadata({
              roomId: room._id,
              metadata: { gpt_description_prompt: prompt },
            })
          }
        >
          Update Metadata
        </button>
        <button
          className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-md"
          onClick={() => runGenerate({ roomId: room._id })}
        >
          Generate (Test)
        </button>
        <pre>{JSON.stringify(room.metadata, null, 2)}</pre>
        <audio ref={audioRef} controls />
        <pre className="text-xs">
          {JSON.stringify(room.radioState, null, 2)}
        </pre>
        {clips?.map((clip) => {
          return (
            <div
              onClick={() => setSelectedClip(clip)}
              key={clip._id}
              className="flex items-center space-x-4"
            >
              {clip.image_url ? (
                <img
                  src={clip.image_url}
                  alt={clip.title}
                  className="w-8 h-12 object-cover rounded-sm"
                />
              ) : null}
              <div>
                {clip.title} - {clip.status}
                <div>{clip.user.name}</div>
              </div>
              {clip.audio_url ? <audio src={clip.audio_url} controls /> : null}
            </div>
          );
        })}
      </div>
      <div className="w-[300px] overflow-y-auto">
        {selectedClip ? <ClipDetail clip={selectedClip} /> : null}
      </div>
    </div>
  );
};