import { Video, Mic, Paperclip } from "lucide-react";
import { useMediaSettingsStore } from "@/stores/media-settings-store";

interface ControlsIndicatorProps {
  type: "reply" | "new";
  attachmentCount?: number;
  onOpenAttachments?: () => void;
  showEscape?: boolean;
}
export default function ControlsIndicator({
  type,
  attachmentCount = 0,
  showEscape = false,
  onOpenAttachments,
}: ControlsIndicatorProps) {
  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
  const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);

  return (
    <div className="flex items-center gap-4 text-sm text-white/50">
      {showEscape && (
        <span>
          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
            Esc
          </kbd>{" "}
          back
        </span>
      )}
      <span>
        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
          Hold `
        </kbd>{" "}
        to {type === "reply" ? "reply" : "start"}
      </span>
      <span>
        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
          T
        </kbd>{" "}
        text
      </span>
      {attachmentCount > 0 && (
        <button
          type="button"
          onClick={onOpenAttachments}
          className="flex items-center gap-1 text-white/50 transition-colors hover:text-white/80"
        >
          <kbd className="self-end rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
            A
          </kbd>{" "}
          <Paperclip className="size-3" />
          {attachmentCount} {attachmentCount === 1 ? "attachment" : "attachments"}
        </button>
      )}
      <button
        type="button"
        onClick={() =>
          setRecordingMode(recordingMode === "video" ? "audio" : "video")
        }
        title={
          recordingMode === "video"
            ? "Switch to audio-only"
            : "Switch to video"
        }
        className="flex items-center gap-1 rounded bg-white/10 px-1.5 py-0.5 text-xs text-white/50 transition-colors hover:text-white/80"
      >
        {recordingMode === "video" ? (
          <>
            <Video className="size-3" />
            Video
          </>
        ) : (
          <>
            <Mic className="size-3" />
            Audio
          </>
        )}
      </button>
    </div>
  );
}