import React, { useEffect, useState } from 'react'
import { useCanvasStore } from '../../state/canvasStore'
import { useSpotlightStore } from '../../state/spotlightStore'
import { useUserStore } from '../../state/userStore'
import { AdminDrawer } from './AdminDrawer'

export const TopBar: React.FC = () => {
  const { zoom } = useCanvasStore()
  const { open: spotlightOpen } = useSpotlightStore()
  const { currentUser, presence } = useUserStore()
  const [adminOpen, setAdminOpen] = useState(false)

  const [synced, setSynced] = useState(true)
  
  useEffect(() => {
    const interval = setInterval(() => {
      setSynced((prev) => !prev)
    }, 1000)
    return () => clearInterval(interval)
  }, [])

  const users = Array.from(presence.values()).map((user) => ({
    userId: user.userId,
    name: user.name,
    color: user.color,
    status: 'active',
  }))
  
  return (
    <>
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 10,
          height: '56px',
          display: 'flex',
          alignItems: 'center',
          padding: '13px 18px',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flex: 1 }}>
          <div
            style={{
              background: 'rgba(14,18,25,.82)',
              border: '1px solid rgba(140,165,200,.18)',
              borderRadius: '9px',
              padding: '7px 12px',
              backdropFilter: 'blur(6px)',
              display: 'flex',
              alignItems: 'center',
              gap: '6px',
              cursor: 'pointer',
            }}
          >
            <div
              style={{
                width: '12px',
                height: '12px',
                background: '#4dd6e8',
                clipPath: 'polygon(50% 0,100% 50%,50% 100%,0 50%)',
              }}
            />
            <span style={{ color: '#fff', fontSize: '14px', fontWeight: '600' }}>
              krates / yard
            </span>
          </div>

          <div
            style={{
              background: 'rgba(14,18,25,.82)',
              border: '1px solid rgba(140,165,200,.18)',
              borderRadius: '9px',
              padding: '7px 12px',
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              backdropFilter: 'blur(6px)',
            }}
          >
            <span style={{ color: '#fff', fontSize: '14px' }}>local</span>
            <div
              style={{
                width: '8px',
                height: '8px',
                borderRadius: '50%',
                background: '#4ad07a',
                boxShadow: '0 0 8px #4ad07a',
              }}
            />
          </div>

          {users.length > 0 && (
            <div
              style={{
                background: 'rgba(14,18,25,.82)',
                border: '1px solid rgba(140,165,200,.18)',
                borderRadius: '9px',
                padding: '7px 12px',
                backdropFilter: 'blur(6px)',
              }}
            >
              <span style={{ color: '#4dd6e8', fontSize: '14px' }}>
                {users.length} active
              </span>
            </div>
          )}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '6px',
              padding: '4px 10px',
              borderRadius: '9px',
              background: 'rgba(14,18,25,.82)',
              border: '1px solid rgba(140,165,200,.18)',
              backdropFilter: 'blur(6px)',
            }}
          >
            <span style={{ color: '#aaa', fontSize: '12px' }}>synced</span>
            <div
              style={{
                width: '6px',
                height: '6px',
                borderRadius: '50%',
                background: '#4dd6e8',
                opacity: synced ? 1 : 0.5,
                animation: synced ? 'pulse 1.6s ease-in-out infinite' : 'none',
              }}
            />
          </div>

          <button
            onClick={() => setAdminOpen(!adminOpen)}
            style={{
              background: adminOpen ? 'rgba(77,214,232,0.1)' : 'rgba(14,18,25,.82)',
              border: adminOpen 
                ? '1px solid #4dd6e8' 
                : '1px solid rgba(140,165,200,.18)',
              borderRadius: '9px',
              padding: '6px 12px',
              backdropFilter: 'blur(6px)',
              color: adminOpen ? '#4dd6e8' : '#aaa',
              fontSize: '14px',
              cursor: 'pointer',
            }}
          >
            ◉ admin
          </button>

          {users.slice(0, 5).map((user) => (
            <div
              key={user.userId}
              style={{
                width: '30px',
                height: '30px',
                borderRadius: '50%',
                background: user.color,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '10px',
                color: '#fff',
                fontWeight: '600',
                cursor: 'pointer',
                border: user.userId === currentUser.id ? '2px solid #4dd6e8' : 'none',
              }}
              title={user.name}
            >
              {user.userId === currentUser.id ? '★' : user.name.slice(0, 2).toUpperCase()}
            </div>
          ))}
          {users.length > 5 && (
            <div
              style={{
                width: '30px',
                height: '30px',
                borderRadius: '50%',
                background: '#2a3040',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '10px',
                color: '#aaa',
                cursor: 'pointer',
              }}
            >
              +{users.length - 5}
            </div>
          )}
        </div>
      </div>

      <AdminDrawer open={adminOpen} onClose={() => setAdminOpen(false)} users={users} />
    </>
  )
}