import { useEffect } from 'react';
import { useGatewayStore } from '../store/gatewayStore';
import { Radio, RefreshCw, MessageCircle, Settings } from 'lucide-react';

const CHANNEL_ICONS: Record<string, string> = {
  feishu: '飞',
  qqbot: 'QQ',
  wechat: '微',
};

interface ChannelListProps {
  onOpenSettings?: () => void;
}

export function ChannelList({ onOpenSettings }: ChannelListProps) {
  const { channels, connectionState, loadChannels, loadPluginStatus } = useGatewayStore();

  const connected = connectionState === 'connected';

  useEffect(() => {
    if (connected) {
      loadPluginStatus().then(() => loadChannels());
    }
  }, [connected]);

  const handleRefresh = () => {
    loadPluginStatus().then(() => loadChannels());
  };

  if (!connected) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-gray-400 text-xs px-4 text-center">
        <Radio className="w-8 h-8 mb-2 opacity-30" />
        <p>IM 频道</p>
        <p className="mt-1">连接 Gateway 后可用</p>
      </div>
    );
  }

  return (
    <div className="h-full flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200">
        <span className="text-xs font-medium text-gray-500">频道列表</span>
        <button
          onClick={handleRefresh}
          className="p-1 text-gray-400 hover:text-orange-500 rounded"
          title="刷新"
        >
          <RefreshCw className="w-3.5 h-3.5" />
        </button>
      </div>

      <div className="flex-1 overflow-y-auto custom-scrollbar">
        {/* Configured channels */}
        {channels.map((ch) => (
          <div
            key={ch.id}
            className="flex items-center gap-3 px-3 py-3 hover:bg-gray-100 border-b border-gray-50"
          >
            <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-white text-xs font-bold flex-shrink-0 ${
              ch.status === 'active'
                ? 'bg-gradient-to-br from-blue-500 to-indigo-500'
                : 'bg-gray-300'
            }`}>
              {CHANNEL_ICONS[ch.type] || <MessageCircle className="w-4 h-4" />}
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-xs font-medium text-gray-900 truncate">{ch.label}</div>
              <div className={`text-[11px] ${
                ch.status === 'active' ? 'text-green-500' : ch.status === 'error' ? 'text-red-500' : 'text-gray-400'
              }`}>
                {ch.status === 'active' ? '已连接' : ch.status === 'error' ? ch.error || '错误' : '未配置'}
                {ch.accounts !== undefined && ch.accounts > 0 && ` · ${ch.accounts} 个账号`}
              </div>
            </div>
          </div>
        ))}

        {/* Always show available channels that aren't configured */}
        {!channels.find(c => c.type === 'feishu') && (
          <div className="flex items-center gap-3 px-3 py-3 hover:bg-gray-100 border-b border-gray-50 opacity-60">
            <div className="w-8 h-8 rounded-lg flex items-center justify-center text-white text-xs font-bold flex-shrink-0 bg-gray-300">
              飞
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-xs font-medium text-gray-600">飞书 (Feishu)</div>
              <div className="text-[11px] text-gray-400">未配置</div>
            </div>
          </div>
        )}
        {!channels.find(c => c.type === 'qqbot') && (
          <div className="flex items-center gap-3 px-3 py-3 hover:bg-gray-100 border-b border-gray-50 opacity-60">
            <div className="w-8 h-8 rounded-lg flex items-center justify-center text-white text-xs font-bold flex-shrink-0 bg-gray-300">
              QQ
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-xs font-medium text-gray-600">QQ 机器人</div>
              <div className="text-[11px] text-gray-400">未安装插件</div>
            </div>
          </div>
        )}

        {/* Help text */}
        <div className="px-3 py-4 text-center">
          <p className="text-[11px] text-gray-400 mb-2">在设置中配置 IM 频道</p>
          {onOpenSettings && (
            <button
              onClick={onOpenSettings}
              className="inline-flex items-center gap-1 text-xs text-orange-500 hover:text-orange-600"
            >
              <Settings className="w-3 h-3" />
              打开设置
            </button>
          )}
        </div>
      </div>
    </div>
  );
}