'use client'

import React, { useEffect, useMemo, useState } from 'react'

interface TimerProps {
  socketRef: React.MutableRefObject<any>
  setTimeLeft: React.Dispatch<React.SetStateAction<number | undefined>>
  timeLeft: number | undefined
  setHideMediaIcons: React.Dispatch<React.SetStateAction<boolean>>
  setRemainingTime: React.Dispatch<React.SetStateAction<string>>
  remainingTime: string
  setisMeetingStarted: React.Dispatch<React.SetStateAction<boolean>> // attention au i minuscule (côté parent tu passes bien setIsMeetingStarted)
}

const clampMs = (ms: number) => Math.max(0, Math.floor(ms))

const formatMs = (milliseconds: number) => {
  const ms = clampMs(milliseconds)
  let seconds = Math.floor(ms / 1000)
  const minutes = Math.floor(seconds / 60)
  seconds = seconds % 60
  return `${minutes}m ${seconds < 10 ? '0' : ''}${seconds}s`
}

const Timer: React.FC<TimerProps> = ({
  socketRef,
  setTimeLeft,
  timeLeft,
  setHideMediaIcons,
  setRemainingTime,
  remainingTime,
  setisMeetingStarted,
}) => {
  const [paused, setPaused] = useState(false)
  const [graceLeftMs, setGraceLeftMs] = useState<number | null>(null)

  // Affiche aussi la grâce restante quand c'est en pause
  const graceText = useMemo(() => {
    if (!paused || graceLeftMs == null) return null
    return `· grâce ${formatMs(graceLeftMs)}`
  }, [paused, graceLeftMs])

  useEffect(() => {
    const socket = socketRef.current
    if (!socket) return

    const onStarted = (data: any) => {
      if (data && typeof data.remaining === 'number') {
        const ms = clampMs(data.remaining)
        setTimeLeft(ms)
        setRemainingTime(formatMs(ms))
        setisMeetingStarted(true)
        setPaused(false)
        setGraceLeftMs(null)
        setHideMediaIcons(false)
      }
    }

    const onPaused = (data: any) => {
      setPaused(true)
      setGraceLeftMs(
        typeof data?.graceLeftMs === 'number' ? clampMs(data.graceLeftMs) : null
      )
      setHideMediaIcons(true)
    }

    const onResumed = () => {
      setPaused(false)
      setGraceLeftMs(null)
      setHideMediaIcons(false)
    }

    const onEnded = () => {
      setTimeLeft(0)
      setRemainingTime(formatMs(0))
      setisMeetingStarted(false)
      setPaused(false)
      setGraceLeftMs(null)
      setHideMediaIcons(true)
    }

    socket.on('meeting started', onStarted)
    socket.on('meeting paused', onPaused)
    socket.on('meeting resumed', onResumed)
    socket.on('meeting ended', onEnded)

    return () => {
      socket.off('meeting started', onStarted)
      socket.off('meeting paused', onPaused)
      socket.off('meeting resumed', onResumed)
      socket.off('meeting ended', onEnded)
    }
  }, [socketRef, setTimeLeft, setRemainingTime, setisMeetingStarted, setHideMediaIcons])

  useEffect(() => {
    if (typeof timeLeft !== 'number') return
    // Alerte 1 minute restante (si tu veux, branche un toast ici)
    // if (timeLeft <= 60_000 && timeLeft > 0) { ... }
    if (timeLeft <= 0) {
      setisMeetingStarted(false)
      setHideMediaIcons(true)
    }
  }, [timeLeft, setisMeetingStarted, setHideMediaIcons])

  return (
    <>
      {remainingTime && (
        <p
          className={`${
            timeLeft && timeLeft <= 5 * 60 * 1000
              ? 'text-red-500 text-xl lg:text-4xl mb-1'
              : 'text-xl lg:text-4xl mb-1'
          } flex flex-col justify-center pt-7`}
        >
          {remainingTime}
          {paused && (
            <span className="text-sm opacity-70 mt-1">
              En pause {graceText ?? ''}
            </span>
          )}
        </p>
      )}
    </>
  )
}

export default Timer