import { useState, useEffect, useRef } from "react";
import { Howl, Howler } from 'howler';
import { invoke } from "@tauri-apps/api/core";
import { listen } from '@tauri-apps/api/event';
import "./App.css";
import { OSC_ADDRESS } from "./utils/constant";
import { Light } from "./utils/light";


const DefaultFadeDuration = 3; // 1 second
const CLIENT_COUNT = 13;
const CUE_FILE = 'cuelist_1009.json';
const OSC_BROADCAST_IP='192.168.51.255:8000';
const SCS_IP='192.168.51.100:58200';
// const OSC_BROADCAST_IP = '192.168.234.255:8000';
const UNITY_BROADCAST_IP = '192.168.234.255:9000';
// const SCS_IP = '192.168.234.41:58200';


const CueType = {
  Bg: 'bg',
  Announce: 'announce',
  Light: 'light'
}
const EmojiType = {
  bg: '🎵',
  announce: '📢',
  light: '💡'
}

function App() {

  const [cuelist, setCuelist] = useState([]);
  const [currentCue, setCurrentCue] = useState(null);
  const [fadeDuration, setFadeDuration] = useState(DefaultFadeDuration); // Default fade duration in seconds
  const [clientStatus, setClientStatus] = useState({});

  const refCue = useRef(null);
  // const refNextCue = useRef(null);
  const refLight = useRef();
  const refDuration = useRef();
  const refTotalTime=useRef();
  const refTimer = useRef();


  function sendOsc(addr, message, id) {

    invoke('send_osc_message', {
      key: addr,
      message: `${id}#${message}`,
      host: '0.0.0.0:0',
      target: OSC_BROADCAST_IP,
    });

  }


  function sendOscToSound(addr, message) {

    invoke('send_osc_message', {
      key: addr,
      message,
      host: '0.0.0.0:0',
      target: SCS_IP,
    });

  }

  function onOsc(message) {

    const addr = message.addr;
    const [id, status, name] = message.args[0]?.split('#');
    // console.log('receive osc:', id, status,name);

    switch (addr) {
      case OSC_ADDRESS.CLIENT_STATUS:

        setClientStatus(prev => ({
          ...prev,
          [id]: {
            status,
            name,
            timestamp: new Date().toLocaleTimeString(),
          }
        }));
        break;
      case OSC_ADDRESS.CLIENT_DURATION:
        setClientStatus(prev => ({
          ...prev,
          [id]: {
            ...prev[id],
            duration: status,
            timestamp: new Date().toLocaleTimeString(),
          }
        }));
        break;
      case OSC_ADDRESS.CLIENT_INPUT:
        setClientStatus(prev => ({
          ...prev,
          [id]: {
            ...prev[id],
            input: status,
            timestamp: new Date().toLocaleTimeString(),
          }
        }));
        break;
    }
  }

  function getTotalLeftTime(id){
    const cue=cuelist.find(el=>el.id==id);
    const index=cuelist.indexOf(cue);
    if(index==-1) return;

    let sum=0;
    for(var i=index;i<cuelist.length;++i){
      if(cuelist[i].duration) sum+=cuelist[i].duration;
    } 

    return sum;

  }


  function playCue({ id, name, description, type, auto, audioFile, ...props }) {

    console.log('Playing cue:', { id, name, description, type, auto, audioFile, ...props });
    setCurrentCue({ id, name, description, type, auto, audioFile, ...props });

    // Handle other cue types and properties here
    if (props.audioCue) {
      sendOscToSound(OSC_ADDRESS.SCS_GO_CUE, props.audioCue);
    }

    if (props.clientCue) {
      sendOsc(OSC_ADDRESS.PLAYCUE, props.clientCue, 'all');
    }

    if (props.lightCue) {
      // sendOsc(OSC_ADDRESS.CLIENT_INPUT, props.lightCue);

      if (props.lightCue == 'fade_in_light'){
        refLight.current.fadeIn(props.lightDuration,  props.syncUnityLight?UNITY_BROADCAST_IP:null); // Fade in light for conversation start
      }
      if (props.lightCue == 'fade_out_light'){
        refLight.current.fadeOut(props.lightDuration, props.syncUnityLight?UNITY_BROADCAST_IP:null); // Fade out light for conversation end
      }

    }
    if (props.reset) {
      resetLight();
    }

     if (refTimer.current) {
        clearTimeout(refTimer.current);
      }

    if (props.duration) {

      // calculate last time
      let totalLefTime=getTotalLeftTime(id);
      
      // Clear any existing timer
     
      // Store the end time of the timer
      const totalEndTime=new Date().getTime()+totalLefTime*1000;
      const endTime = new Date().getTime() + (props.duration * 1000);

      // Function to update the timer
      const tick = () => {
        const now = new Date().getTime();
        const timeLeft = endTime - now;
        const totalTimeLeft=totalEndTime-now;
        //console.log(totalTimeLeft);

        if (timeLeft <= 0) {
          // Timer has finished
          clearTimeout(refTimer.current);
          refTimer.current = null;

          if (auto) {
            // const next = cuelist.find(c => c.id === id + 1);
            const index = cuelist.findIndex(c => c.id === id);
            const next = cuelist[index + 1];
            if (!next) return;

            console.log('Auto play next cue:', next);
            playCue(next);
          }
          return;
        }

        // Update the displayed duration
        refDuration.current.innerText = secondToTime(timeLeft / 1000);
        refTotalTime.current.innerText=`${secondToTime(totalTimeLeft/1000)} / ${secondToTime(totalLefTime)}`;



        // Call the next tick
        refTimer.current = setTimeout(tick, 100);
      };

      // Start the timer
      console.log('Start timer:', props.duration);
      refTimer.current = setTimeout(tick, 100);
    }

  }
  function stop() {
    console.log('Stop all');

    sendOsc(OSC_ADDRESS.STOPCUE, '', 'all');
    sendOscToSound(OSC_ADDRESS.SCS_FADE_ALL, '');

    // cear timer
    if (refTimer.current) clearInterval(refTimer.current);
  }
  function reset() {
    console.log('Reset all');

    sendOsc(OSC_ADDRESS.RESETCUE, '', 'all');
    sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, '');
    resetLight();
  } 
  function resetLight(){
    refLight.current.set(1);
    invoke('send_osc_message', {
          key: '/amplitude',
          message: 1.0.toString(),
          host:`0.0.0.0:0`,
          target: UNITY_BROADCAST_IP,
    });

  }
  function secondToTime(seconds) {
    const minutes = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${minutes.toString().padStart(2,'0')}:${secs < 10 ? '0' : ''}${secs}`;
  }
  function getAudioDuration() {

    const type = refCue.current?.type;
    // console.log('getAudioDuration', type, refCue.current);
    // switch(type) {
    //   case CueType.Bg:
    if (refAudioBg.current) {
      return `${secondToTime(refAudioBg.current.seek())} / ${secondToTime(refAudioBg.current.duration())} ${refAudioBg.current?.volume()}`;
    } else {
      return 'N/A';
    }
    //   case CueType.Announce:
    //     return refAudioAnnounce.current ? `${secondToTime(refAudioAnnounce.current.seek())} / ${secondToTime(refAudioAnnounce.current.duration())}` : 'N/A';
    //   default:
    //     return 'N/A';
    // }


  }
  useEffect(() => {
    if (currentCue) {
      refCue.current = currentCue;
      // console.log('Current Cue:', currentCue);
    }
  }, [currentCue]);
  useEffect(() => {
    fetch(`/${CUE_FILE}`)
      .then(response => response.json())
      .then(data => {
        console.log('Cuelist data:', data);
        setCuelist(data.cuelist);
      })
      .catch(error => {
        console.error('Error fetching cuelist:', error);
      });


    listen('osc_message', (event) => {
      // console.log(`Received OSC message: ${JSON.stringify(event.payload)}`);
      onOsc(event.payload);
    });



  }, []);

  return (
    <main className="overflow-y-auto flex flex-row gap-8 p-4 min-h-screen">
      <section className="flex-1 flex flex-col gap-4">
        <section className="grid grid-cols-4 items-center gap-2">
            <div className="grid grid-cols-1 font-bold items-stretch justify-between bg-pink-300 gap-4 p-2">
              <div className="text-4xl">{currentCue ? `${currentCue.name}` : 'None'}</div>
              <div className="text-4xl" ref={refDuration}></div>
            </div>
          <button className="text-4xl self-stretch" onClick={stop}>stop all</button>
          <button className="text-4xl self-stretch" onClick={reset}>reset all</button>
          <Light ref={refLight} />
          <span className="flex flex-col gap-2 items-stretch hidden">
            <label htmlFor="fade_duration">Fade Duration</label>
            <input type="range" id="fade_duration" min="0" max="30" step="0.1" defaultValue={DefaultFadeDuration} className="slider"
              onChange={(e) => {
                const value = parseFloat(e.target.value);
                setFadeDuration(value);
              }}></input>
            <span className="text-2xl">{fadeDuration}s</span>
          </span>
        </section>
        <table className="border-collapse w-full **:px-1 border-green-500 border-4">
          <thead className="bg-green-500">
            <tr className="text-left lowercase font-[900]">
              {/* <th>ID</th> */}
              <th></th>
              <th>Name</th>
              <th>Description</th>
              <th>Type</th>
              <th>Auto</th>
              <th>Due</th>
              <th>Light</th>
              <th>Audio</th>
              <th>Client</th>
            </tr>
          </thead>
          <tbody>
            {cuelist?.map(({ id, name, description, type, auto, ...props }, index) => (
              <tr key={id} className={currentCue?.id === id ? 'bg-green-200' : `${props.debug && 'text-red-500'}`}>
                <td className="flex flex-row gap-2">
                  <button
                    onClick={() => {
                      playCue({ id, name, description, type, auto, ...props });
                    }}>go</button>
                </td>
                <td>{name}</td>
                <td className="text-sm">{description}</td>
                <td>{EmojiType[type]}</td>
                <td>{auto ? '⤵️' : ''}</td>
                <td>{props.duration}</td>
                <td className="text-sm">{props.lightCue && `L${props.lightCue}`}</td>
                <td className="text-sm">{props.audioCue && `S${props.audioCue}`}</td>
                <td className={`text-sm ${props.clientCue && 'bg-green-300 rounded-full text-center font-[900]'}`}>{props.clientCue || ''}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="text-6xl text-center font-bold bg-blue-500 text-white p-4" ref={refTotalTime}></div>          
            
      </section>
      <table className="flex-1 text-sm">
        <thead className="bg-blue-500">
          <tr className="text-center lowercase font-[900]">
            <th>id</th>
            <th>status</th>
            <th>cue</th>
            <th>input</th>
            <th>due</th>
            <th>timestamp</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {Array.from(Array(CLIENT_COUNT).keys()).map((i) => {
            const id = (i + 1).toString();//.padStart(2,'0');
            const log = clientStatus[id.toString()];
            return (
              <tr key={id} className="text-left lowercase">
                <td className="font-[900]">{id}</td>
                {<>
                  <td>{log?.status}</td>
                  <td>
                    <span className="bg-green-200 rounded-full p-2">{log?.name}</span>
                  </td>
                  <td className="flex-1 text-[9px] min-w-[80px]">
                    {log?.input?.substr(log.input.length - 20)?.split('').map((ch, i) => i % 3 < 1 ? ch : '*').join('')}
                  </td>
                  <td>{log?.duration}</td>
                  <td className="text-[12px]">{log?.timestamp}</td>
                </>}
                <td className="flex flex-row justify-end gap-1 p-1">
                  <button className="!bg-pink-300" onClick={() => sendOsc(OSC_ADDRESS.TESTPRINT, '', id)}>print</button>
                  <button onClick={() => sendOsc(OSC_ADDRESS.STOPCUE, '', id)}>stop</button>
                  <button onClick={() => sendOsc(OSC_ADDRESS.RESETCUE, '', id)}>reset</button>                  
                  {cuelist?.filter(c => c.clientCue && !c.debug).map((c, index) => (
                    <button key={`${id}${c.clientCue}${index}`} onClick={() => {
                      sendOsc(OSC_ADDRESS.PLAYCUE, c.clientCue, id);
                    }}>{c.clientCue}</button>
                  ))}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </main>
  );
}

export default App;