import React from "react";
import { useModalStore } from "../../../stores/modalStore.js";
import { usePresenceStore } from "../../../stores/presenceStore.js";

export function StatusSelectorModal() {
  const { isOpen, type, onClose } = useModalStore();
  const { currentStatus, setStatus } = usePresenceStore();

  const isModalOpen = isOpen && type === "statusSelector";

  if (!isModalOpen) return null;

  const statuses = [
    { value: "online", label: "Online", icon: "🟢", description: "Available to chat" },
    { value: "idle", label: "Idle", icon: "🟡", description: "Away from keyboard" },
    { value: "dnd", label: "Do Not Disturb", icon: "🔴", description: "Focused - no notifications" },
    { value: "invisible", label: "Invisible", icon: "⚫", description: "Appear offline" },
  ];

  const handleStatusChange = (status) => {
    setStatus(status);
    onClose();
  };

  return (
    <div
      className="modal-overlay"
      onClick={onClose}
      style={{
        position: "fixed",
        inset: 0,
        backgroundColor: "transparent",
        display: "flex",
        alignItems: "flex-start",
        justifyContent: "flex-start",
        zIndex: 1000,
        padding: "60px 0 0 80px",
      }}
    >
      <div
        className="modal-content"
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "#1a1a1a",
          border: "1px solid #2a2a2a",
          borderRadius: "8px",
          width: "280px",
          boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
        }}
      >
        <div style={{ padding: "12px 16px", borderBottom: "1px solid #2a2a2a" }}>
          <h3 style={{ fontSize: "0.875rem", fontWeight: "bold", color: "#999", textTransform: "uppercase", letterSpacing: "1px" }}>
            Set Status
          </h3>
        </div>

        <div style={{ padding: "8px" }}>
          {statuses.map((status) => (
            <div
              key={status.value}
              onClick={() => handleStatusChange(status.value)}
              style={{
                padding: "12px",
                borderRadius: "4px",
                cursor: "pointer",
                background: currentStatus === status.value ? "#0066ff20" : "transparent",
                transition: "background 0.2s",
                marginBottom: "4px",
              }}
              onMouseEnter={(e) => {
                if (currentStatus !== status.value) {
                  e.currentTarget.style.background = "#2a2a2a";
                }
              }}
              onMouseLeave={(e) => {
                if (currentStatus !== status.value) {
                  e.currentTarget.style.background = "transparent";
                }
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "4px" }}>
                <span style={{ fontSize: "1.25rem" }}>{status.icon}</span>
                <span style={{ color: "#e0e0e0", fontWeight: currentStatus === status.value ? "bold" : "normal" }}>
                  {status.label}
                </span>
              </div>
              <div style={{ fontSize: "0.75rem", color: "#666", marginLeft: "36px" }}>
                {status.description}
              </div>
            </div>
          ))}

          {/* Custom Status Button */}
          <div
            onClick={() => {
              onClose();
              setTimeout(() => {
                const { onOpen } = useModalStore.getState();
                onOpen("customStatus");
              }, 100);
            }}
            style={{
              padding: "12px",
              borderRadius: "4px",
              cursor: "pointer",
              background: "transparent",
              borderTop: "1px solid #2a2a2a",
              marginTop: "8px",
              paddingTop: "16px",
              color: "#0066ff",
              fontWeight: "500",
              textAlign: "center",
              transition: "background 0.2s",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "#2a2a2a";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "transparent";
            }}
          >
            ✏️ Set Custom Status
          </div>
        </div>
      </div>
    </div>
  );
}