/**
 * IMChannels - IM Channel Management UI
 *
 * Displays and manages IM channel configurations.
 * Supports viewing, configuring, and adding new channels.
 */
import { useState, useEffect } from 'react';
import { Radio, RefreshCw, MessageCircle, Settings2, Plus, X, Check, AlertCircle, ExternalLink } from 'lucide-react';
import { useConnectionStore } from '../../store/connectionStore';
import { useConfigStore, type ChannelInfo } from '../../store/configStore';
import { useAgentStore } from '../../store/agentStore';

const CHANNEL_ICONS: Record<string, string> = {
  feishu: '飞',
  qqbot: 'QQ',
  wechat: '微',
  discord: 'D',
  slack: 'S',
  telegram: 'T',
};

const CHANNEL_CONFIG_FIELDS: Record<string, { key: string; label: string; type: string; placeholder: string; required: boolean }[]> = {
  feishu: [
    { key: 'appId', label: 'App ID', type: 'text', placeholder: 'cli_xxx', required: true },
    { key: 'appSecret', label: 'App Secret', type: 'password', placeholder: '••••••••', required: true },
  ],
  discord: [
    { key: 'botToken', label: 'Bot Token', type: 'password', placeholder: 'OTk2NzY4...', required: true },
    { key: 'guildId', label: 'Guild ID (可选)', type: 'text', placeholder: '123456789', required: false },
  ],
  slack: [
    { key: 'botToken', label: 'Bot Token', type: 'password', placeholder: 'xoxb-...', required: true },
    { key: 'appToken', label: 'App Token', type: 'password', placeholder: 'xapp-...', required: false },
  ],
  telegram: [
    { key: 'botToken', label: 'Bot Token', type: 'password', placeholder: '123456:ABC...', required: true },
  ],
  qqbot: [
    { key: 'appId', label: 'App ID', type: 'text', placeholder: '1234567890', required: true },
    { key: 'token', label: 'Token', type: 'password', placeholder: '••••••••', required: true },
  ],
  wechat: [
    { key: 'corpId', label: 'Corp ID', type: 'text', placeholder: 'wwxxx', required: true },
    { key: 'agentId', label: 'Agent ID', type: 'text', placeholder: '1000001', required: true },
    { key: 'secret', label: 'Secret', type: 'password', placeholder: '••••••••', required: true },
  ],
};

const KNOWN_CHANNELS = [
  { type: 'feishu', label: '飞书 (Feishu/Lark)', description: '企业即时通讯平台' },
  { type: 'discord', label: 'Discord', description: '游戏社区和语音聊天' },
  { type: 'slack', label: 'Slack', description: '团队协作平台' },
  { type: 'telegram', label: 'Telegram', description: '加密即时通讯' },
  { type: 'qqbot', label: 'QQ 机器人', description: '腾讯QQ官方机器人' },
  { type: 'wechat', label: '企业微信', description: '企业微信机器人' },
];

interface ChannelConfigModalProps {
  channel: ChannelInfo | null;
  channelType: string | null;
  isOpen: boolean;
  onClose: () => void;
  onSave: (config: Record<string, string>) => Promise<void>;
  isSaving: boolean;
}

function ChannelConfigModal({ channel, channelType, isOpen, onClose, onSave, isSaving }: ChannelConfigModalProps) {
  const [config, setConfig] = useState<Record<string, string>>({});
  const [error, setError] = useState<string | null>(null);

  const fields = channelType ? CHANNEL_CONFIG_FIELDS[channelType] || [] : [];

  useEffect(() => {
    if (channel?.config) {
      setConfig(channel.config as Record<string, string>);
    } else {
      setConfig({});
    }
    setError(null);
  }, [channel, channelType]);

  if (!isOpen || !channelType) return null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    // Validate required fields
    for (const field of fields) {
      if (field.required && !config[field.key]?.trim()) {
        setError(`请填写 ${field.label}`);
        return;
      }
    }

    try {
      await onSave(config);
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : '保存失败');
    }
  };

  const channelInfo = KNOWN_CHANNELS.find(c => c.type === channelType);

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md mx-4">
        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
            {channel ? `配置 ${channel.label}` : `添加 ${channelInfo?.label || channelType}`}
          </h3>
          <button
            onClick={onClose}
            className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
          >
            <X className="w-5 h-5 text-gray-500" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-4 space-y-4">
          {channelInfo && (
            <p className="text-sm text-gray-500 dark:text-gray-400">
              {channelInfo.description}
            </p>
          )}

          {fields.length === 0 ? (
            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
              <AlertCircle className="w-8 h-8 mx-auto mb-2 opacity-50" />
              <p>该通道类型暂不支持通过 UI 配置</p>
              <p className="text-xs mt-1">请通过配置文件或 CLI 进行配置</p>
            </div>
          ) : (
            fields.map((field) => (
              <div key={field.key}>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  {field.label}
                  {field.required && <span className="text-red-500 ml-1">*</span>}
                </label>
                <input
                  type={field.type}
                  value={config[field.key] || ''}
                  onChange={(e) => setConfig({ ...config, [field.key]: e.target.value })}
                  placeholder={field.placeholder}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>
            ))
          )}

          {error && (
            <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-600 dark:text-red-400">
              {error}
            </div>
          )}

          {fields.length > 0 && (
            <div className="flex gap-3 pt-2">
              <button
                type="button"
                onClick={onClose}
                className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
              >
                取消
              </button>
              <button
                type="submit"
                disabled={isSaving}
                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center gap-2"
              >
                {isSaving ? (
                  <>
                    <RefreshCw className="w-4 h-4 animate-spin" />
                    保存中...
                  </>
                ) : (
                  <>
                    <Check className="w-4 h-4" />
                    保存
                  </>
                )}
              </button>
            </div>
          )}
        </form>
      </div>
    </div>
  );
}

export function IMChannels() {
  const channels = useConfigStore((s) => s.channels);
  const loadChannels = useConfigStore((s) => s.loadChannels);
  const createChannel = useConfigStore((s) => s.createChannel);
  const updateChannel = useConfigStore((s) => s.updateChannel);
  const connectionState = useConnectionStore((s) => s.connectionState);
  const loadPluginStatus = useAgentStore((s) => s.loadPluginStatus);

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedChannel, setSelectedChannel] = useState<ChannelInfo | null>(null);
  const [newChannelType, setNewChannelType] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);
  const [showAddMenu, setShowAddMenu] = useState(false);

  const connected = connectionState === 'connected';
  const loading = connectionState === 'connecting' || connectionState === 'reconnecting' || connectionState === 'handshaking';

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

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

  const handleConfigure = (channel: ChannelInfo) => {
    setSelectedChannel(channel);
    setNewChannelType(channel.type);
    setIsModalOpen(true);
  };

  const handleAddChannel = (type: string) => {
    setSelectedChannel(null);
    setNewChannelType(type);
    setIsModalOpen(true);
    setShowAddMenu(false);
  };

  const handleSaveConfig = async (config: Record<string, string>) => {
    setIsSaving(true);
    try {
      if (selectedChannel) {
        await updateChannel(selectedChannel.id, { config });
      } else if (newChannelType) {
        const channelInfo = KNOWN_CHANNELS.find(c => c.type === newChannelType);
        await createChannel({
          type: newChannelType,
          name: channelInfo?.label || newChannelType,
          config,
          enabled: true,
        });
      }
      await loadChannels();
    } finally {
      setIsSaving(false);
    }
  };

  const availableChannels = KNOWN_CHANNELS.filter(
    (channel) => !channels.some((item) => item.type === channel.type)
  );

  return (
    <div className="max-w-3xl">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-xl font-bold text-gray-900 dark:text-white">IM 频道</h1>
        <div className="flex gap-2">
          <span className="text-xs text-gray-400 flex items-center">
            {connected ? `${channels.length} 个已识别频道` : loading ? '连接中...' : '未连接 Gateway'}
          </span>
          <button
            onClick={handleRefresh}
            disabled={!connected}
            className="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg flex items-center gap-1 transition-colors disabled:opacity-50"
          >
            <RefreshCw className="w-3 h-3" /> 刷新
          </button>
        </div>
      </div>

      {!connected ? (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 h-64 flex flex-col items-center justify-center mb-6 shadow-sm text-gray-400">
          <Radio className="w-8 h-8 mb-3 opacity-40" />
          <span className="text-sm">连接 Gateway 后查看真实 IM 频道状态</span>
        </div>
      ) : (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 mb-6 shadow-sm divide-y divide-gray-100 dark:divide-gray-700">
          {channels.length > 0 ? channels.map((channel) => (
            <div key={channel.id} className="p-4 flex items-center gap-4">
              <div className={`w-10 h-10 rounded-xl flex items-center justify-center text-white text-sm font-semibold ${
                channel.status === 'active'
                  ? 'bg-gradient-to-br from-blue-500 to-indigo-500'
                  : channel.status === 'error'
                    ? 'bg-gradient-to-br from-red-500 to-rose-500'
                    : 'bg-gray-300 dark:bg-gray-600'
              }`}>
                {CHANNEL_ICONS[channel.type] || <MessageCircle className="w-4 h-4" />}
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-sm font-medium text-gray-900 dark:text-white">{channel.label}</div>
                <div className={`text-xs mt-1 ${
                  channel.status === 'active'
                    ? 'text-green-600 dark:text-green-400'
                    : channel.status === 'error'
                      ? 'text-red-500 dark:text-red-400'
                      : 'text-gray-400'
                }`}>
                  {channel.status === 'active' ? '已连接' : channel.status === 'error' ? channel.error || '错误' : '未配置'}
                  {channel.accounts !== undefined && channel.accounts > 0 ? ` · ${channel.accounts} 个账号` : ''}
                </div>
              </div>
              <button
                onClick={() => handleConfigure(channel)}
                className="p-2 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                title="配置"
              >
                <Settings2 className="w-4 h-4" />
              </button>
            </div>
          )) : (
            <div className="h-40 flex items-center justify-center text-sm text-gray-400">
              尚未识别到可用频道
            </div>
          )}
        </div>
      )}

      {/* Add Channel Section */}
      {connected && availableChannels.length > 0 && (
        <div className="mb-6">
          <div className="flex items-center justify-between mb-3">
            <div className="text-xs text-gray-500 dark:text-gray-400">添加新频道</div>
            <div className="relative">
              <button
                onClick={() => setShowAddMenu(!showAddMenu)}
                className="text-xs text-white bg-blue-500 hover:bg-blue-600 px-3 py-1.5 rounded-lg flex items-center gap-1 transition-colors"
              >
                <Plus className="w-3 h-3" /> 添加频道
              </button>
              {showAddMenu && (
                <div className="absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-10">
                  {availableChannels.map((channel) => (
                    <button
                      key={channel.type}
                      onClick={() => handleAddChannel(channel.type)}
                      className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg flex items-center gap-2"
                    >
                      <span className="w-6 h-6 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-xs">
                        {CHANNEL_ICONS[channel.type] || '?'}
                      </span>
                      <div>
                        <div className="font-medium text-gray-900 dark:text-white">{channel.label}</div>
                        <div className="text-xs text-gray-500">{channel.description}</div>
                      </div>
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Planned Channels */}
      <div>
        <div className="text-xs text-gray-500 dark:text-gray-400 mb-3">规划中的接入渠道</div>
        <div className="flex flex-wrap gap-3">
          {availableChannels.map((channel) => (
            <span
              key={channel.type}
              className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-4 py-2 rounded-lg"
            >
              {channel.label}
            </span>
          ))}
          {availableChannels.length === 0 && (
            <div className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1">
              <Check className="w-3 h-3" />
              所有支持的渠道已配置
            </div>
          )}
        </div>
      </div>

      {/* External Link Notice */}
      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
        <div className="flex items-start gap-2">
          <ExternalLink className="w-4 h-4 text-blue-500 mt-0.5" />
          <div className="text-xs text-blue-700 dark:text-blue-300">
            <p className="font-medium mb-1">高级配置</p>
            <p>账号绑定、消息路由等高级功能需要在 Gateway 配置文件中完成。</p>
            <p className="mt-1">配置文件路径: <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">~/.zclaw/zclaw.toml</code></p>
          </div>
        </div>
      </div>

      {/* Config Modal */}
      <ChannelConfigModal
        channel={selectedChannel}
        channelType={newChannelType}
        isOpen={isModalOpen}
        onClose={() => {
          setIsModalOpen(false);
          setSelectedChannel(null);
          setNewChannelType(null);
        }}
        onSave={handleSaveConfig}
        isSaving={isSaving}
      />
    </div>
  );
}