import { useEffect, useState } from 'react';
import type { RawMessage } from '../../shared/chat-model';
import { extractText, isInternalMessage } from '../../shared/chat-model';
import { taskCenterList, type TaskCenterItem } from '../../constants/taskCenterList';
import {
  ChatComposer,
  ChatHistoryPanel,
  ChatMessageList,
  TaskBoard,
  type ChatHistoryBucket,
  type ChatMessageItem,
  type TaskItem,
  type TaskTabValue,
} from '../../components/chat';
import { IPC_EVENTS } from '../../lib/constants';
import { invokeIpc } from '../../lib/host-api';
import {
  agentsStore,
  channelStore,
  chatStore,
  getCompletedTasks,
  getPendingTasks,
  taskStore,
  useAgentsStore,
  useChannelStore,
  useChatStore,
  useTaskStore,
  type StagedAttachment,
} from '../../stores';
import { AddChannelDialog, TaskOperationDialog } from './components';

type SessionBucketKey = 'today' | 'yesterday' | 'withinWeek' | 'withinTwoWeeks' | 'withinMonth' | 'older';

const HISTORY_BUCKET_META: Array<{ key: SessionBucketKey; label: string }> = [
  { key: 'today', label: '今天' },
  { key: 'yesterday', label: '昨天' },
  { key: 'withinWeek', label: '近7天' },
  { key: 'withinTwoWeeks', label: '近14天' },
  { key: 'withinMonth', label: '近30天' },
  { key: 'older', label: '更早' },
];

function getMessageTime(timestamp?: number): string {
  if (!timestamp) return '--';
  const date = new Date(timestamp < 1e12 ? timestamp * 1000 : timestamp);
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
  });
}

function getHistoryBucket(activityMs: number, currentMs: number): SessionBucketKey {
  if (!activityMs || activityMs <= 0) return 'older';

  const now = new Date(currentMs);
  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
  const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;

  if (activityMs >= startOfToday) return 'today';
  if (activityMs >= startOfYesterday) return 'yesterday';

  const daysAgo = (startOfToday - activityMs) / (24 * 60 * 60 * 1000);
  if (daysAgo <= 7) return 'withinWeek';
  if (daysAgo <= 14) return 'withinTwoWeeks';
  if (daysAgo <= 30) return 'withinMonth';
  return 'older';
}

function formatHistoryTime(activityMs: number, currentMs: number): string {
  if (!activityMs || activityMs <= 0) return '--';

  const date = new Date(activityMs);
  const current = new Date(currentMs);
  const sameDay = date.toDateString() === current.toDateString();
  if (sameDay) {
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
  }

  const yesterday = new Date(current);
  yesterday.setDate(current.getDate() - 1);
  if (date.toDateString() === yesterday.toDateString()) {
    return `昨天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;
  }

  return `${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}

function getTaskDateLabel(createdAt?: string): string {
  if (!createdAt) return '执行时段';

  const current = new Date(createdAt);
  const today = new Date();
  const y = today.getFullYear();
  const m = today.getMonth();
  const d = today.getDate();

  const cy = current.getFullYear();
  const cm = current.getMonth();
  const cd = current.getDate();

  if (cy === y && cm === m && cd === d) return '今天';

  const yesterday = new Date(y, m, d - 1);
  if (cy === yesterday.getFullYear() && cm === yesterday.getMonth() && cd === yesterday.getDate()) {
    return '昨天';
  }

  return `${String(cm + 1).padStart(2, '0')}/${String(cd).padStart(2, '0')}`;
}

function getTaskRoomTypeLabel(task: { roomType: string; roomList: Array<{ id?: string; pmsName?: string }> }): string {
  const matchedRoom = Array.isArray(task.roomList)
    ? task.roomList.find((item) => item.id === task.roomType)
    : null;

  return matchedRoom?.pmsName || task.roomType;
}

function mapMessages(messages: RawMessage[], streamingMessage: RawMessage | null): ChatMessageItem[] {
  const visibleMessages = messages
    .filter((message) => !isInternalMessage(message))
    .filter((message) => {
      if (message.role === 'user' || message.role === 'assistant') return true;
      return Boolean(extractText(message).trim());
    })
    .map((message): ChatMessageItem => ({
      id: message.id || `msg-${message.timestamp || Math.random()}`,
      role: message.role === 'user' ? 'user' : 'assistant',
      name: message.role === 'user' ? '你' : 'YINIAN',
      time: getMessageTime(message.timestamp),
      content: extractText(message),
      attachments: message._attachedFiles,
      isError: Boolean(message.isError),
    }));

  if (streamingMessage && extractText(streamingMessage).trim()) {
    visibleMessages.push({
      id: streamingMessage.id || `stream-${Date.now()}`,
      role: 'assistant',
      name: 'YINIAN',
      time: getMessageTime(streamingMessage.timestamp),
      content: extractText(streamingMessage),
      attachments: streamingMessage._attachedFiles,
      isStreaming: true,
    });
  }

  return visibleMessages;
}

export default function HomePage() {
  const agentsState = useAgentsStore();
  const chat = useChatStore();
  const taskState = useTaskStore();
  const channelState = useChannelStore();
  const [inputMessage, setInputMessage] = useState('');
  const [attachments, setAttachments] = useState<StagedAttachment[]>([]);
  const [activeTaskTab, setActiveTaskTab] = useState<TaskTabValue>('pending');
  const [taskCenterNotice, setTaskCenterNotice] = useState<string | null>(null);
  const [taskDialogOpen, setTaskDialogOpen] = useState(false);
  const [addChannelDialogOpen, setAddChannelDialogOpen] = useState(false);

  useEffect(() => {
    void agentsStore.init();
    void chatStore.init();
    void taskStore.init();
    void channelStore.init();
  }, []);

  const currentMs = Date.now();
  const historyBuckets: ChatHistoryBucket[] = HISTORY_BUCKET_META.map((bucket) => ({
    ...bucket,
    sessions: [],
  }));
  const bucketMap = new Map(historyBuckets.map((bucket) => [bucket.key, bucket]));

  for (const session of [...chat.sessions].sort((left, right) => {
    const leftTime = chat.sessionLastActivity[left.key] || left.updatedAt || 0;
    const rightTime = chat.sessionLastActivity[right.key] || right.updatedAt || 0;
    return rightTime - leftTime;
  })) {
    const activityMs = chat.sessionLastActivity[session.key] || session.updatedAt || 0;
    const bucketKey = getHistoryBucket(activityMs, currentMs);
    const targetBucket = bucketMap.get(bucketKey);
    if (!targetBucket) continue;

    targetBucket.sessions.push({
      conversationId: session.key,
      title: chat.sessionLabels[session.key] || session.displayName || session.key,
      updatedAt: formatHistoryTime(activityMs, currentMs),
    });
  }

  const pendingTasks = getPendingTasks(taskState.tasks);
  const completedTasks = getCompletedTasks(taskState.tasks);
  const pendingTaskItems: TaskItem[] = pendingTasks.flatMap((task) => task.subTasks.map((subTask) => ({
    id: subTask.id,
    removeTaskId: task.id,
    title: subTask.name,
    description: subTask.message || task.title,
    status: subTask.status,
    meta: task.title,
  })));
  const completedTaskItems: TaskItem[] = completedTasks.map((task) => ({
    id: task.id,
    title: task.title,
    description: `${task.operation === 'open' ? '开启' : '关闭'} ${getTaskRoomTypeLabel(task)}`,
    status: task.status,
    meta: `${task.dateRange[0]} ~ ${task.dateRange[1]}`,
  }));
  const currentTaskSource = activeTaskTab === 'pending' ? pendingTasks : completedTasks;
  const latestTask = currentTaskSource[0];

  const visibleMessages = mapMessages(chat.messages, chat.streamingMessage);
  const selectedAgentId = agentsState.agents.some((agent) => agent.id === chat.currentAgentId)
    ? chat.currentAgentId
    : agentsState.defaultAgentId;
  const currentAgent = agentsState.agents.find((agent) => agent.id === selectedAgentId) || null;

  async function handleSendMessage(): Promise<void> {
    const sent = await chatStore.sendMessage(inputMessage, attachments);
    if (sent) {
      setInputMessage('');
      setAttachments([]);
    }
  }

  async function handleAttach(files: File[]): Promise<void> {
    const stagedFiles = await chatStore.stageAttachmentFiles(files);
    setAttachments((currentAttachments) => [...currentAttachments, ...stagedFiles]);
  }

  async function handleTaskCenterItem(item: TaskCenterItem): Promise<void> {
    setTaskCenterNotice(null);

    if (item.type === 'channel') {
      if (!channelState.selectedChannels.length) {
        setTaskCenterNotice('请先在当前项目里配置“已选渠道”，再执行一键打开。');
        return;
      }

      try {
        await invokeIpc(IPC_EVENTS.OPEN_CHANNEL, channelState.selectedChannels);
        setTaskCenterNotice('已触发“打开渠道”操作。');
      } catch (error) {
        setTaskCenterNotice(error instanceof Error ? error.message : String(error));
      }
      return;
    }

    setTaskDialogOpen(true);
  }

  async function handleSaveChannels(items: typeof channelState.selectedChannels): Promise<void> {
    await channelStore.saveSelectedChannels(items);
    setTaskCenterNotice('已更新“打开渠道”配置。');
    setAddChannelDialogOpen(false);
  }

  async function handleCreateTask(options: Parameters<typeof taskStore.createAndExecuteTask>[0]): Promise<void> {
    const { task, result } = await taskStore.createAndExecuteTask(options);
    setTaskDialogOpen(false);

    if (result.success) {
      setTaskCenterNotice(`已创建任务“${task.title}”。`);
      return;
    }

    setTaskCenterNotice(result.error || `任务“${task.title}”创建后执行失败。`);
  }

  async function handleRetryTask(taskId: string): Promise<void> {
    const result = await taskStore.retryFailedSubTasks(taskId);
    if (result.success) {
      setTaskCenterNotice('已重新触发失败子任务。');
      return;
    }

    setTaskCenterNotice(result.error || '重试失败，请稍后再试。');
  }

  return (
    <section className="h-full w-full min-h-0">
      <div className="flex h-full w-full min-h-0 flex-col gap-2 md:flex-row">
        <ChatHistoryPanel
          buckets={historyBuckets}
          loading={!chat.initialized}
          selectedConversationId={chat.currentSessionKey}
          onNewChat={() => {
            void chatStore.newSession(selectedAgentId || undefined);
          }}
          onSelectConversation={(conversationId) => {
            chatStore.switchSession(conversationId);
          }}
          onRenameConversation={(conversationId) => {
            const currentLabel = chat.sessionLabels[conversationId]
              || chat.sessions.find((session) => session.key === conversationId)?.displayName
              || '';
            const nextLabel = window.prompt('重命名对话', currentLabel);
            if (nextLabel) {
              chatStore.renameSession(conversationId, nextLabel);
            }
          }}
          onDeleteConversation={(conversationId) => {
            const confirmed = window.confirm('确定删除该会话吗？删除后将无法恢复。');
            if (confirmed) {
              void chatStore.deleteSession(conversationId);
            }
          }}
        />

        <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[20px] bg-white shadow-[0_10px_30px_rgba(15,23,42,0.08)] dark:bg-[#1b1b1d]">
          <div className="flex items-center justify-between border-b border-[#edf2f7] px-6 py-4 dark:border-[#2a2a2d]">
            <div>
              <h2 className="text-base font-semibold text-[#171717] dark:text-gray-100">智能对话</h2>
              <div className="mt-1 text-xs text-[#99A0AE] dark:text-gray-500">
                网关状态：{chat.gatewayStatus === 'connected' ? '已连接' : chat.gatewayStatus === 'reconnecting' ? '重连中' : '未连接'}
                {currentAgent ? ` · 当前代理：${currentAgent.name}` : ''}
              </div>
            </div>
            <div className="flex items-center gap-3">
              <label className="flex items-center gap-2 text-xs text-[#525866] dark:text-gray-300">
                <span>代理</span>
                <select
                  className="rounded-full border border-[#E5E8EE] bg-white px-3 py-1.5 text-xs text-[#525866] outline-none transition-colors hover:border-[#2B7FFF] dark:border-[#2a2a2d] dark:bg-[#232327] dark:text-gray-300"
                  disabled={agentsState.loading || agentsState.agents.length === 0}
                  value={selectedAgentId}
                  onChange={(event) => {
                    chatStore.selectAgent(event.target.value);
                  }}
                >
                  {agentsState.agents.map((agent) => (
                    <option key={agent.id} value={agent.id}>
                      {agent.name}
                    </option>
                  ))}
                </select>
              </label>
              <button
                type="button"
                className="rounded-full border border-[#E5E8EE] px-3 py-1.5 text-xs text-[#525866] transition-colors hover:border-[#2B7FFF] hover:text-[#2B7FFF] dark:border-[#2a2a2d] dark:text-gray-300"
                onClick={() => {
                  void agentsStore.load();
                  void chatStore.loadSessions();
                  void chatStore.loadHistory();
                }}
              >
                刷新会话
              </button>
            </div>
          </div>

          <div className="flex min-h-0 flex-1 flex-col">
            <ChatMessageList loading={chat.loading} messages={visibleMessages} />
            <ChatComposer
              attachments={attachments}
              error={chat.error}
              isSending={chat.sending}
              value={inputMessage}
              onAttach={handleAttach}
              onChange={setInputMessage}
              onDismissError={() => chatStore.clearError()}
              onRemoveAttachment={(index) => {
                setAttachments((currentAttachments) => currentAttachments.filter((_, currentIndex) => currentIndex !== index));
              }}
              onSend={() => {
                void handleSendMessage();
              }}
              onStop={() => {
                void chatStore.abortRun();
              }}
            />
          </div>

          <div className="border-t border-[#edf2f7] dark:border-[#2a2a2d]">
            <div className="px-4 py-3">
              <div className="flex items-center justify-between pb-3">
                <h3 className="text-base font-semibold text-[#171717] dark:text-gray-100">任务中心</h3>
                <div className="text-xs text-[#99A0AE] dark:text-gray-500">沿用当前视觉与入口结构</div>
              </div>

              {taskCenterNotice ? (
                <div className="mb-3 rounded-[12px] border border-[#dfeaf6] bg-[#f8fbff] px-4 py-3 text-sm text-[#525866] dark:border-[#2a2a2d] dark:bg-[#232327] dark:text-gray-300">
                  {taskCenterNotice}
                </div>
              ) : null}

              <div className="grid grid-cols-2 gap-4 max-[800px]:grid-cols-1">
                {taskCenterList.map((item) => (
                  <button
                    key={item.id}
                    type="button"
                    className="relative flex items-start gap-3 rounded-[10px] border border-[#dfeaf6] bg-white p-3.5 text-left transition-colors hover:bg-[#F5F7FA] dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:hover:bg-[#2a2a2d]"
                    onClick={() => {
                      void handleTaskCenterItem(item);
                    }}
                  >
                    {item.type === 'channel' ? (
                      <span
                        role="button"
                        tabIndex={0}
                        className="absolute right-2 top-2 rounded-full p-1 text-[#99A0AE] transition-colors hover:text-[#525866] dark:hover:text-gray-200"
                        onClick={(event) => {
                          event.stopPropagation();
                          setTaskCenterNotice(null);
                          void channelStore.refreshAvailableChannels();
                          setAddChannelDialogOpen(true);
                        }}
                        onKeyDown={(event) => {
                          if (event.key === 'Enter' || event.key === ' ') {
                            event.preventDefault();
                            event.stopPropagation();
                            setTaskCenterNotice(null);
                            void channelStore.refreshAvailableChannels();
                            setAddChannelDialogOpen(true);
                          }
                        }}
                        aria-label="配置渠道"
                      >
                        <svg viewBox="0 0 24 24" className="h-4 w-4 fill-none stroke-current" strokeWidth="1.8">
                          <path
                            d="M12 3V6M12 18V21M4.93 4.93L7.05 7.05M16.95 16.95L19.07 19.07M3 12H6M18 12H21M4.93 19.07L7.05 16.95M16.95 7.05L19.07 4.93M15 12A3 3 0 1 1 9 12A3 3 0 0 1 15 12Z"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </span>
                    ) : null}
                    <div className="flex h-11 w-11 items-center justify-center rounded-lg border border-dashed border-[#9fc0e8] bg-[#EFF6FF] text-[23px] text-[#3b82f6] dark:border-gray-700 dark:bg-[#222225]">
                      {item.icon}
                    </div>
                    <div>
                      <div className="font-semibold text-[#171717] dark:text-gray-100">{item.title}</div>
                      <div className="mt-1.5 text-[13px] text-[#9aa5b1] dark:text-gray-400">{item.desc}</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>

        <TaskBoard
          activeTab={activeTaskTab}
          completedItems={completedTaskItems}
          currentDateLabel={latestTask ? getTaskDateLabel(latestTask.createdAt) : '执行时段'}
          currentTime={latestTask ? `${latestTask.dateRange[0]} ~ ${latestTask.dateRange[1]}` : '--'}
          pendingItems={pendingTaskItems}
          onRemoveTask={(taskId) => {
            taskStore.removeTask(taskId);
          }}
          onRetryTask={(taskId) => {
            void handleRetryTask(taskId);
          }}
          onTabChange={setActiveTaskTab}
        />
      </div>

      <TaskOperationDialog
        open={taskDialogOpen}
        onClose={() => setTaskDialogOpen(false)}
        onConfirm={handleCreateTask}
      />

      <AddChannelDialog
        open={addChannelDialogOpen}
        loading={channelState.loading}
        availableChannels={channelState.availableChannels}
        initialSelected={channelState.selectedChannels}
        onClose={() => setAddChannelDialogOpen(false)}
        onConfirm={handleSaveChannels}
      />
    </section>
  );
}