"use client";

import { useLocalParticipant, DisconnectButton } from "@livekit/components-react";
import {
  Mic,
  MicOff,
  Video,
  VideoOff,
  Phone,
  ArrowLeft,
  Users,
} from "lucide-react";

interface RoomControlsProps {
  roomName?: string;
  onEndStream?: () => void;
  onLeaveRoom?: () => void;
  onMuteAudio?: () => void;
  onMuteVideo?: () => void;
}

export function RoomControls({ roomName, onEndStream, onLeaveRoom, onMuteAudio, onMuteVideo }: RoomControlsProps) {
  const { localParticipant, isMicrophoneEnabled, isCameraEnabled } = useLocalParticipant();

  const isAudioMuted = !isMicrophoneEnabled;
  const isVideoDisabled = !isCameraEnabled;

  const handleMuteAudio = async () => {
    await localParticipant.setMicrophoneEnabled(!isMicrophoneEnabled);
    onMuteAudio?.();
  };

  const handleMuteVideo = async () => {
    await localParticipant.setCameraEnabled(!isCameraEnabled);
    onMuteVideo?.();
  };

  return (
    <div className="flex items-center justify-between gap-4 px-6 py-3 bg-muted border-t border-border">
      <div className="flex items-center gap-3">
        <div className="flex items-center gap-2 text-sm">
          <Users size={16} />
          <span className="font-medium">{localParticipant ? 1 : 0} participants</span>
        </div>
        <div className="h-4 w-px bg-border" />
        <div className="flex items-center gap-2 text-sm">
          <span className="font-medium">{roomName}</span>
        </div>
      </div>

      <div className="flex items-center gap-3">
        <button
          onClick={handleMuteAudio}
          className={`p-2.5 rounded-md transition-colors ${
            isAudioMuted ? "bg-red/50 text-red-500 hover:bg-red/100" : "bg-muted/50 text-muted-foreground hover:bg-muted"
          }`}
          title={isAudioMuted ? "Unmute audio" : "Mute audio"}
        >
          {isAudioMuted ? <MicOff size={18} /> : <Mic size={18} />}
        </button>

        <button
          onClick={handleMuteVideo}
          className={`p-2.5 rounded-md transition-colors ${
            isVideoDisabled ? "bg-red/50 text-red-500 hover:bg-red/100" : "bg-muted/50 text-muted-foreground hover:bg-muted"
          }`}
          title={isVideoDisabled ? "Enable video" : "Disable video"}
        >
          {!isCameraEnabled ? <VideoOff size={18} /> : <Video size={18} />}
        </button>

        <button
          onClick={onLeaveRoom}
          className="p-2.5 rounded-md bg-muted/50 text-muted-foreground hover:bg-muted"
          title="Leave room"
        >
          <ArrowLeft size={18} />
        </button>

        <button
          onClick={onEndStream}
          className="p-2.5 rounded-md bg-red/50 text-red-500 hover:bg-red/100"
          title="End stream"
        >
          <Phone size={18} />
        </button>

        <DisconnectButton className="p-2.5 rounded-md bg-red/50 text-red-500 hover:bg-red/100" />
      </div>
    </div>
  );
}