import React from 'react'
import { FolderOpen, Settings, Zap, Bell, Mail, ChevronRight, FileText } from 'lucide-react'
import { applyFilters } from '../extensions/registry'

// WP doesn't have Tippy, so we build a lightweight Tippy-style tooltip + flyout
import { useState, useRef, useEffect } from 'react'

export function Tooltip({ content, placement = 'right', children }) {
  const [show, setShow] = useState(false)
  const ref = useRef(null)
  const [pos, setPos] = useState({ top: 0, left: 0 })

  useEffect(() => {
    if (show && ref.current) {
      const rect = ref.current.getBoundingClientRect()
      setPos({
        top: rect.top + rect.height / 2,
        left: rect.right + 8
      })
    }
  }, [show])

  return (
    <div
      ref={ref}
      onMouseEnter={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
      className="relative"
    >
      {children}
      {show && (
        <div
          className="fixed z-[9999] px-2.5 py-1.5 bg-gray-900 text-white text-[11px] font-medium rounded-lg shadow-lg max-w-[220px] pointer-events-none whitespace-normal"
          style={{ top: pos.top, left: pos.left, transform: 'translateY(-50%)' }}
        >
          {content}
        </div>
      )}
    </div>
  )
}

/** One tile of the left rail (icon + label). Extensions reuse it for their own tiles. */
export function RailTile({ icon: Icon, label, onClick, collapsed = false, dataTile }) {
  return (
    <button
      type="button"
      data-tile={dataTile}
      className="floating-tile text-sm font-medium text-gray-800"
      onClick={onClick}
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '8px',
        borderRadius: '12px',
        cursor: 'pointer',
        border: 'none',
        background: 'transparent',
        width: collapsed ? '40px' : '64px',
        height: collapsed ? '40px' : '64px',
        transition: 'all 0.15s',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = '#f9fafb'; }}
      onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
    >
      <span className="floating-tile-icon" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '4px' }}>
        {Icon && <Icon className="w-5 h-5 text-gray-700" />}
      </span>
      {!collapsed && <span className="floating-tile-label" style={{ fontSize: '10px', fontWeight: 500, textAlign: 'center', lineHeight: 1.2, marginTop: '2px' }}>{label}</span>}
    </button>
  )
}

/** One row of the Settings flyout. */
function FlyoutItem({ icon: Icon, label, sublabel, iconBg = '#F3F4F6', iconClass = 'text-gray-700', hoverBg = 'rgba(249,250,251,0.9)', onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="group"
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '8px 10px',
        borderRadius: '12px',
        textAlign: 'left',
        transition: 'all 0.15s',
        cursor: 'pointer',
        width: '100%',
        border: 'none',
        background: 'transparent',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = hoverBg; }}
      onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', minWidth: 0 }}>
        <div style={{ width: '24px', height: '24px', borderRadius: '8px', background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          {Icon && <Icon className={`w-3.5 h-3.5 ${iconClass}`} />}
        </div>
        {sublabel ? (
          <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
            <span style={{ fontSize: '12px', fontWeight: 600, color: '#1F2937' }}>{label}</span>
            <span style={{ fontSize: '10px', color: '#6B7280' }}>{sublabel}</span>
          </div>
        ) : (
          <span style={{ fontSize: '12px', fontWeight: 600, color: '#1F2937' }}>{label}</span>
        )}
      </div>
      <ChevronRight className="w-3.5 h-3.5 text-gray-400" />
    </button>
  )
}

/**
 * Left rail tiles. Extensions add tiles with the `leftRail.tiles` filter (items: { id, label, tooltip, icon, onClick }
 * or { id, Component } for a custom tile, which receives { collapsed, openSettings }) and Settings flyout rows with
 * `leftRail.settingsMenu` (items: { id, label, sublabel, icon, onClick }).
 */
const FloatingIcons = ({
  onTemplatesClick,
  onSettingsItemClick,
  collapsed = false,
  onEntriesClick,
}) => {
  const [settingsOpen, setSettingsOpen] = useState(false)
  const settingsTimerRef = useRef(null)

  const handleSettingsEnter = () => {
    if (settingsTimerRef.current) clearTimeout(settingsTimerRef.current)
    setSettingsOpen(true)
  }

  const handleSettingsLeave = () => {
    settingsTimerRef.current = setTimeout(() => {
      setSettingsOpen(false)
    }, 160)
  }

  const openSettings = (tab) => onSettingsItemClick && onSettingsItemClick(tab)
  const ctx = { collapsed, openSettings }

  const tiles = applyFilters('leftRail.tiles', [
    { id: 'entries', label: 'Entries', tooltip: 'View and manage form submissions', icon: FileText, onClick: onEntriesClick },
    { id: 'templates', label: 'Templates', tooltip: 'Browse pre-built templates or start fresh', icon: FolderOpen, onClick: onTemplatesClick, dataTile: 'templates' },
    { id: 'actions', label: 'Actions', tooltip: 'Configure redirects, messages, and submit behavior', icon: Zap, onClick: () => openSettings('Submit Actions') },
    { id: 'notices', label: 'Notices', tooltip: 'Configure admin email alerts and autoresponders', icon: Bell, onClick: () => openSettings('Notifications') },
  ], ctx) || []

  const settingsMenu = applyFilters('leftRail.settingsMenu', [
    { id: 'general', label: 'General Setup', icon: Settings, onClick: () => openSettings('Form Settings') },
    { id: 'email', label: 'Sender Identity (SMTP)', icon: Mail, iconBg: 'rgba(209,250,229,0.7)', iconClass: 'text-emerald-700', hoverBg: 'rgba(236,253,245,0.7)', onClick: () => openSettings('Email Settings') },
  ], ctx) || []

  return (
    <div className={`floating-icons ${collapsed ? 'floating-icons-collapsed' : ''}`}
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: '16px 0',
        gap: '4px',
        width: collapsed ? '48px' : '84px',
      }}
    >
      {tiles.map((tile) => {
        if (tile.Component) return <tile.Component key={tile.id} {...ctx} />
        return (
          <Tooltip key={tile.id} content={tile.tooltip || tile.label} placement="right">
            <RailTile icon={tile.icon} label={tile.label} onClick={tile.onClick} collapsed={collapsed} dataTile={tile.dataTile || tile.id} />
          </Tooltip>
        )
      })}

      {/* Settings with flyout submenu */}
      <div
        className="relative"
        onMouseEnter={handleSettingsEnter}
        onMouseLeave={handleSettingsLeave}
      >
        <RailTile icon={Settings} label="Settings" onClick={() => openSettings('Form Settings')} collapsed={collapsed} dataTile="settings" />

        {settingsOpen && (
          <div
            className="absolute left-full top-0 ml-2 z-50"
            style={{
              width: '230px',
              padding: '6px',
              background: 'rgba(255,255,255,0.95)',
              backdropFilter: 'blur(20px)',
              WebkitBackdropFilter: 'blur(20px)',
              borderRadius: '16px',
              boxShadow: '0 25px 50px -12px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05)',
              border: '1px solid rgba(229,231,235,0.9)',
            }}
            onMouseEnter={handleSettingsEnter}
            onMouseLeave={handleSettingsLeave}
          >
            <div style={{ padding: '6px 10px 4px', fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', color: '#9CA3AF', userSelect: 'none' }}>
              Form Settings
            </div>
            {settingsMenu.map(({ id, onClick, ...item }) => (
              <FlyoutItem key={id} {...item} onClick={() => { if (onClick) onClick(); setSettingsOpen(false) }} />
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

export default FloatingIcons