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

const STATUS_OPTIONS = [
  { id: "online", label: "Online", emoji: "🟢" },
  { id: "idle", label: "Idle", emoji: "🟡" },
  { id: "dnd", label: "Do Not Disturb", emoji: "🔴" },
  { id: "invisible", label: "Invisible", emoji: "⚫" },
];

export function StatusModal() {
  const { isOpen, type, onClose } = useModalStore();
  const currentStatus = usePresenceStore((state) => state.currentStatus);
  const setStatus = usePresenceStore((state) => state.setStatus);
  const customStatus = usePresenceStore((state) => state.customStatus);
  const setCustomStatus = usePresenceStore((state) => state.setCustomStatus);
  const [tempStatus, setTempStatus] = useState(customStatus);

  if (!isOpen || type !== "statusModal") return null;

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

  const handleCustomStatusSave = () => {
    setCustomStatus(tempStatus);
    onClose();
  };

  return (
    <div
      className="modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-50"
      onClick={onClose}
    >
      <div
        className="modal-content bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-6 w-96"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-xl font-bold text-white">Set Status</h2>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-white text-2xl"
          >
            ✕
          </button>
        </div>

        {/* Status Options */}
        <div className="space-y-2 mb-6">
          {STATUS_OPTIONS.map((option) => (
            <button
              key={option.id}
              onClick={() => handleStatusChange(option.id)}
              className={`w-full flex items-center gap-3 p-3 rounded transition ${
                currentStatus === option.id
                  ? "bg-[#0066ff] text-white"
                  : "bg-[#0f0f0f] text-gray-300 hover:bg-[#1a1a1a]"
              }`}
            >
              <span className="text-xl">{option.emoji}</span>
              <span>{option.label}</span>
            </button>
          ))}
        </div>

        {/* Custom Status */}
        <div className="border-t border-[#2a2a2a] pt-4">
          <label className="block text-sm text-gray-400 mb-2">
            Custom Status
          </label>
          <input
            type="text"
            value={tempStatus}
            onChange={(e) => setTempStatus(e.target.value)}
            placeholder="What's your status?"
            maxLength={50}
            className="w-full bg-[#0f0f0f] border border-[#2a2a2a] rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500 text-sm"
          />
          <div className="flex justify-end gap-2 mt-4">
            <button
              onClick={onClose}
              className="px-4 py-2 bg-[#2a2a2a] hover:bg-[#3a3a3a] rounded text-white text-sm transition"
            >
              Cancel
            </button>
            <button
              onClick={handleCustomStatusSave}
              className="px-4 py-2 bg-[#0066ff] hover:bg-[#0052cc] rounded text-white text-sm transition"
            >
              Save
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}