import { useState } from 'react'
import { Monitor, Smartphone, MessageSquare, Hash, ChevronDown, Eye, Pencil } from 'lucide-react'
import type { Channel } from '../../types/protocol'

interface ChannelSelectorProps {
  channels: Channel[]
  selectedChannel: string | null
  onSelectChannel: (channelId: string) => void
}

const CHANNEL_ICONS: Record<string, React.ReactNode> = {
  cli: <Monitor className="h-4 w-4" />,
  websocket: <MessageSquare className="h-4 w-4" />,
  feishu: <Smartphone className="h-4 w-4" />,
  weixin: <Smartphone className="h-4 w-4" />,
  wechat: <Smartphone className="h-4 w-4" />,
}

export function ChannelSelector({
  channels,
  selectedChannel,
  onSelectChannel,
}: ChannelSelectorProps) {
  const [isOpen, setIsOpen] = useState(false)

  const selected = channels.find((c) => c.id === selectedChannel)

  return (
    <div className="relative">
      {/* Header */}
      <div className="flex items-center justify-between border-b border-white/8 px-4 py-3">
        <h2 className="font-semibold text-white flex items-center gap-2 text-sm">
          <Hash className="h-4 w-4 text-[#00f0ff]" />
          通道
        </h2>
      </div>

      {/* Channel Dropdown */}
      <div className="px-3 py-2">
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="w-full flex items-center justify-between rounded-lg border border-white/10 bg-[#1a1a25]/80 px-3 py-2.5 text-left hover:bg-[#1a1a25] transition-all"
        >
          <div className="flex items-center gap-2.5">
            <span className="text-zinc-400">
              {selected ? CHANNEL_ICONS[selected.id] || <MessageSquare className="h-4 w-4" /> : <MessageSquare className="h-4 w-4" />}
            </span>
            <div className="flex flex-col">
              <span className="text-sm font-medium text-white">
                {selected?.name || '选择通道'}
              </span>
              {selected && (
                <span className={`text-xs flex items-center gap-1 ${selected.isWritable ? 'text-emerald-400' : 'text-zinc-500'}`}>
                  {selected.isWritable ? (
                    <>
                      <Pencil className="h-3 w-3" />
                      可输入
                    </>
                  ) : (
                    <>
                      <Eye className="h-3 w-3" />
                      只读
                    </>
                  )}
                </span>
              )}
            </div>
          </div>
          <ChevronDown
            className={`h-4 w-4 text-zinc-500 transition-transform ${isOpen ? 'rotate-180' : ''}`}
          />
        </button>

        {/* Dropdown Menu */}
        {isOpen && (
          <>
            <div
              className="fixed inset-0 z-10"
              onClick={() => setIsOpen(false)}
            />
            <div className="absolute left-3 right-3 z-20 mt-1 rounded-lg border border-white/10 bg-[#1a1a25] shadow-xl shadow-black/50 overflow-hidden">
              {channels.length === 0 ? (
                <div className="px-3 py-3 text-sm text-zinc-500 text-center">
                  暂无可用通道
                </div>
              ) : (
                channels.map((channel) => (
                  <button
                    key={channel.id}
                    onClick={() => {
                      onSelectChannel(channel.id)
                      setIsOpen(false)
                    }}
                    className={`w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-white/5 transition-colors ${
                      channel.id === selectedChannel ? 'bg-[#00f0ff]/10' : ''
                    }`}
                  >
                    <div className="flex items-center gap-2.5">
                      <span className={channel.id === selectedChannel ? 'text-[#00f0ff]' : 'text-zinc-400'}>
                        {CHANNEL_ICONS[channel.id] || <MessageSquare className="h-4 w-4" />}
                      </span>
                      <div className="flex flex-col">
                        <span className={`text-sm ${channel.id === selectedChannel ? 'text-white font-medium' : 'text-zinc-300'}`}>
                          {channel.name}
                        </span>
                        {channel.description && (
                          <span className="text-xs text-zinc-500">{channel.description}</span>
                        )}
                      </div>
                    </div>
                    <span className={`text-xs px-1.5 py-0.5 rounded ${
                      channel.isWritable
                        ? 'bg-emerald-400/10 text-emerald-400'
                        : 'bg-zinc-500/10 text-zinc-500'
                    }`}>
                      {channel.isWritable ? '可输入' : '只读'}
                    </span>
                  </button>
                ))
              )}
            </div>
          </>
        )}
      </div>
    </div>
  )
}
