import { useEffect, useState } from 'react'
import video from './assets/background.mp4'

function App(): JSX.Element {
  const [selectedServer, setSelectedServer] = useState('')
  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
  const [isUpdating, setIsUpdating] = useState(false)

  const [servers, setServers] = useState<
    { id: string; name: string; assetsFolder: string; enabled: boolean }[]
  >([])

  useEffect(() => {
    window.api.requestProfiles().then((profiles) => {
      setServers(profiles)
    })
  }, [])

  const handleWindowControl = (action: 'close' | 'minimize') => {
    window.electron.ipcRenderer.send(action)
  }

  return (
    <div className="relative h-screen w-screen overflow-hidden font-skyrim bg-black">
      {/* Video Background */}
      <video
        className="absolute inset-0 w-full h-full object-cover opacity-20"
        src={video}
        loop
        autoPlay
        muted
      />

      {/* Dark Overlay */}
      <div className="absolute inset-0 bg-gradient-to-b from-black/80 via-violet-900/10 to-black/90" />

      {/* Content Overlay */}
      <div className="relative z-10 h-full flex flex-col">
        {/* Window Controls Header - Obsidian Style */}
        <div className="flex justify-end items-center p-4 space-x-4 header">
          <button
            onClick={() => handleWindowControl('minimize')}
            className="text-slate-300 hover:text-indigo-400 transition-colors text-2xl shadow-[0_0_8px_rgba(99,102,241,0.3)]"
          >
            _
          </button>
          <button
            onClick={() => handleWindowControl('close')}
            className="text-slate-300 hover:text-red-500 transition-colors text-3xl"
          >
            ✕
          </button>
        </div>

        {/* Main Content Area */}
        <div className="flex-1 relative">
          {/* Server Selection - Ancient Monolith */}
          <div className="absolute bottom-8 left-8 w-72">
            <label className="block text-indigo-300 mb-3 text-lg font-medium tracking-wider shadow-[0_0_15px_rgba(99,102,241,0.1)]">
              REALM GATE
            </label>
            <div className="relative bg-black/50 border-2 border-indigo-900/80 rounded-lg p-2 shadow-[inset_0_0_20px_rgba(79,70,229,0.3)]">
              <select
                value={selectedServer}
                onChange={(e) => setSelectedServer(e.target.value)}
                className="w-full bg-transparent border-none text-indigo-300 text-lg focus:outline-none focus:ring-0"
              >
                {servers.map((server) => (
                  <option key={server.id} value={server.id} className="bg-gray-900">
                    {server.name}
                  </option>
                ))}
              </select>
              <div className="absolute right-3 top-1/2 -translate-y-1/2 text-indigo-400">▼</div>
            </div>
          </div>

          {/* Control Buttons - Arcane Style */}
          <div className="absolute bottom-8 right-8 flex items-center gap-6">
            {/* Settings Button - Eldritch Cog */}
            <button
              onClick={() => setIsSettingsOpen(true)}
              className="p-3 bg-black/60 hover:bg-indigo-900/30 border-2 border-indigo-900/50 rounded-lg transition-all shadow-[0_0_15px_rgba(99,102,241,0.2)] hover:shadow-[0_0_25px_rgba(99,102,241,0.3)]"
            >
              <svg
                className="w-8 h-8 text-indigo-400"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
                <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
              </svg>
            </button>

            {/* Play Button - Forged in Shadow */}
            <button
              onClick={() => setIsUpdating(true)}
              disabled={isUpdating}
              className={`px-12 py-5 rounded-lg text-xl font-bold transition-all
                ${
                  isUpdating
                    ? 'bg-slate-900 cursor-not-allowed'
                    : 'bg-gradient-to-r from-indigo-900/80 to-violet-900/80 hover:from-indigo-800/90 hover:to-violet-800/90'
                }
                border-2 border-indigo-900/70 relative shadow-[0_0_30px_rgba(79,70,229,0.3)]`}
            >
              <span className="text-indigo-200 tracking-wider text-shadow-[0_0_10px_rgba(99,102,241,0.7)]">
                {isUpdating ? 'SUMMONING...' : 'CALL TO VOID'}
              </span>
              {!isUpdating && (
                <div className="absolute inset-0 border-2 border-indigo-500/20 rounded-lg animate-pulse" />
              )}
            </button>
          </div>
        </div>

        {/* Settings Modal - Dark Arcane Tome */}
        {isSettingsOpen && (
          <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50">
            <div className="bg-gradient-to-br from-gray-900/95 to-slate-900/95 p-8 rounded-lg border-2 border-indigo-900/70 w-[500px] relative shadow-[0_0_50px_rgba(79,70,229,0.2)]">
              <div className="absolute inset-0 rounded-lg bg-[url('data:image/png;base64,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')] opacity-10" />
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-3xl font-bold text-indigo-300 tracking-wider shadow-[0_0_15px_rgba(99,102,241,0.3)]">
                  ARCANE CODEX
                </h3>
                <button
                  onClick={(e) => {
                    e.stopPropagation()
                    setIsSettingsOpen(false)
                  }}
                  className="modal-close-btn text-indigo-500 hover:text-indigo-300 text-3xl absolute top-4 right-4 z-50"
                >
                  ╳
                </button>
              </div>
              <div className="space-y-5">
                <label className="flex items-center justify-between p-4 bg-slate-900/50 rounded border border-indigo-900/50">
                  <span className="text-indigo-300 text-lg tracking-wider">AUTO-RITUALS</span>
                  <div className="relative">
                    <input type="checkbox" className="sr-only" />
                    <div className="w-12 h-6 bg-slate-800 rounded-full shadow-inner">
                      <div className="w-6 h-6 bg-indigo-600 rounded-full shadow-md transform transition-transform hover:bg-indigo-500" />
                    </div>
                  </div>
                </label>
                <label className="flex items-center justify-between p-4 bg-slate-900/50 rounded border border-indigo-900/50">
                  <span className="text-indigo-300 text-lg tracking-wider">SOUL ANCHOR</span>
                  <div className="relative">
                    <input type="checkbox" className="sr-only" />
                    <div className="w-12 h-6 bg-slate-800 rounded-full shadow-inner">
                      <div className="w-6 h-6 bg-indigo-600 rounded-full shadow-md transform transition-transform hover:bg-indigo-500" />
                    </div>
                  </div>
                </label>
                <div className="mt-8 pt-6 border-t border-indigo-900/50">
                  <button
                    className="w-full z-10 py-3 px-6 bg-indigo-900/50 hover:bg-indigo-800/60 rounded-lg text-indigo-300 tracking-wider text-lg transition-colors shadow-[0_0_15px_rgba(99,102,241,0.2)]"
                    onClick={() => setIsSettingsOpen(false)}
                  >
                    SEAL PORTAL
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default App
