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

export default function SettingsModal() {
  const { isOpen, type, onClose } = useModalStore();
  const { settings, toggleNotification, setTheme } = useUserSettingsStore();
  const [activeTab, setActiveTab] = useState("notifications");

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

  const blockedUsers = [
    { id: 1, username: "SpamBot", avatar: "🤖", blockedDate: "2 weeks ago" },
  ];

  const channelSettings = [
    { id: "general", name: "general", muted: false, mentions: "all" },
    { id: "announcements", name: "announcements", muted: false, mentions: "mentions" },
    { id: "random", name: "random", muted: true, mentions: "none" },
  ];

  const tabs = [
    { id: "notifications", label: "🔔 Notifications" },
    { id: "privacy", label: "🔒 Privacy" },
    { id: "blocked", label: "🚫 Blocked Users" },
    { id: "channels", label: "#️⃣ Channel Settings" },
    { id: "appearance", label: "🎨 Appearance" },
  ];

  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 w-96 max-h-96 overflow-hidden flex flex-col"
        onClick={(e) => e.stopPropagation()}
        style={{ fontFamily: "'Roboto Mono', monospace" }}
      >
        {/* Header */}
        <div className="p-4 border-b border-[#2a2a2a] flex justify-between items-center">
          <h2 className="text-xl font-bold text-white">Settings</h2>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-white text-2xl"
          >
            ✕
          </button>
        </div>

        {/* Tabs */}
        <div className="flex gap-2 p-3 border-b border-[#2a2a2a] overflow-x-auto">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`px-3 py-1 rounded text-sm whitespace-nowrap transition ${
                activeTab === tab.id
                  ? "bg-[#0066ff] text-white"
                  : "bg-[#0f0f0f] text-gray-400 hover:bg-[#1a1a1a]"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-4">
          {activeTab === "notifications" && (
            <div className="space-y-3">
              <label className="flex items-center gap-3">
                <input
                  type="checkbox"
                  checked={settings.notifications.desktop}
                  onChange={() => toggleNotification("desktop")}
                  className="w-4 h-4"
                />
                <span className="text-sm text-gray-300">Desktop Notifications</span>
              </label>
              <label className="flex items-center gap-3">
                <input
                  type="checkbox"
                  checked={settings.notifications.sound}
                  onChange={() => toggleNotification("sound")}
                  className="w-4 h-4"
                />
                <span className="text-sm text-gray-300">Sound</span>
              </label>
              <label className="flex items-center gap-3">
                <input
                  type="checkbox"
                  checked={settings.notifications.mentions}
                  onChange={() => toggleNotification("mentions")}
                  className="w-4 h-4"
                />
                <span className="text-sm text-gray-300">Mentions Only</span>
              </label>
            </div>
          )}

          {activeTab === "privacy" && (
            <div className="space-y-3">
              <label className="flex items-center gap-3">
                <input type="checkbox" defaultChecked className="w-4 h-4" />
                <span className="text-sm text-gray-300">Show Online Status</span>
              </label>
              <label className="flex items-center gap-3">
                <input type="checkbox" defaultChecked className="w-4 h-4" />
                <span className="text-sm text-gray-300">Allow Friend Requests</span>
              </label>
              <label className="flex items-center gap-3">
                <input type="checkbox" className="w-4 h-4" />
                <span className="text-sm text-gray-300">Allow DMs</span>
              </label>
            </div>
          )}

          {activeTab === "blocked" && (
            <div className="space-y-3">
              <p className="text-xs text-gray-500 mb-3">You won't receive DMs or see messages from blocked users</p>
              {blockedUsers.length === 0 ? (
                <div className="text-center py-8 text-gray-500">
                  <p className="text-sm">No blocked users</p>
                </div>
              ) : (
                blockedUsers.map((user) => (
                  <div key={user.id} className="flex items-center justify-between p-2 bg-[#0f0f0f] rounded">
                    <div className="flex items-center gap-2">
                      <span>{user.avatar}</span>
                      <div>
                        <p className="text-sm text-white">{user.username}</p>
                        <p className="text-xs text-gray-500">{user.blockedDate}</p>
                      </div>
                    </div>
                    <button className="text-xs text-red-500 hover:text-red-400">
                      Unblock
                    </button>
                  </div>
                ))
              )}
            </div>
          )}

          {activeTab === "channels" && (
            <div className="space-y-3">
              <p className="text-xs text-gray-500 mb-3">Customize notification settings for individual channels</p>
              {channelSettings.map((channel) => (
                <div key={channel.id} className="p-2 bg-[#0f0f0f] rounded">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-sm text-white">#{channel.name}</span>
                    <label className="flex items-center gap-2">
                      <span className="text-xs text-gray-500">Muted</span>
                      <input type="checkbox" checked={channel.muted} className="w-3 h-3" />
                    </label>
                  </div>
                  <select className="w-full bg-[#1a1a1a] border border-[#2a2a2a] rounded px-2 py-1 text-xs text-gray-300">
                    <option>All Messages</option>
                    <option>@Mentions Only</option>
                    <option>Nothing</option>
                  </select>
                </div>
              ))}
            </div>
          )}

          {activeTab === "appearance" && (
            <div className="space-y-3">
              <button
                onClick={() => setTheme("dark")}
                className="w-full p-2 bg-[#0f0f0f] hover:bg-[#1a1a1a] rounded text-sm text-left text-gray-300"
              >
                🌙 Dark
              </button>
              <button
                onClick={() => setTheme("light")}
                className="w-full p-2 bg-[#0f0f0f] hover:bg-[#1a1a1a] rounded text-sm text-left text-gray-300"
              >
                ☀️ Light
              </button>
              <label className="flex items-center gap-3 p-2">
                <input type="checkbox" className="w-4 h-4" />
                <span className="text-sm text-gray-300">Compact Mode</span>
              </label>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="p-4 border-t border-[#2a2a2a]">
          <button
            onClick={onClose}
            className="w-full px-4 py-2 bg-[#0066ff] hover:bg-[#0052cc] text-white rounded text-sm transition"
          >
            Done
          </button>
        </div>
      </div>
    </div>
  );
}