import { useMemo, useRef, useState } from 'react'
import { Alert, Button, Card, Checkbox, Empty, Space, Tag, Typography } from '@arco-design/web-react'
import { IconCheckCircle, IconRobot } from '@arco-design/web-react/icon'
import { ApiError } from '../../api/client'
import type { InboxSuggestionDTO } from '../../api/inbox'
import type { InboxConfirmationOutcome, InboxItem, ProjectWorkspace } from './project-types'

const { Title, Text, Paragraph } = Typography

type ProjectInboxProps = {
  activeWorkspace: ProjectWorkspace
  onAnalyze: (inboxId: string) => Promise<InboxSuggestionDTO[]>
  onConfirm: (inboxId: string, suggestionIds: string[]) => Promise<InboxConfirmationOutcome>
}

export function ProjectInbox({ activeWorkspace, onAnalyze, onConfirm }: ProjectInboxProps) {
  const [selectedItemId, setSelectedItemId] = useState(activeWorkspace.inbox[0]?.id ?? '')
  const [draftSuggestions, setDraftSuggestions] = useState<InboxSuggestionDTO[]>([])
  const [selectedSuggestionIds, setSelectedSuggestionIds] = useState<string[]>([])
  const [analyzing, setAnalyzing] = useState(false)
  const [confirming, setConfirming] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')
  const [refreshWarning, setRefreshWarning] = useState('')
  const [locallyConfirmedItemIds, setLocallyConfirmedItemIds] = useState<string[]>([])
  const analysisGeneration = useRef(0)
  const selectedItem = useMemo(
    () => activeWorkspace.inbox.find((item) => item.id === selectedItemId) ?? activeWorkspace.inbox[0],
    [activeWorkspace.inbox, selectedItemId],
  )

  function selectItem(item: InboxItem) {
    analysisGeneration.current += 1
    setSelectedItemId(item.id)
    setDraftSuggestions([])
    setSelectedSuggestionIds([])
    setError('')
    setSuccess('')
    setRefreshWarning('')
    setAnalyzing(false)
  }

  async function analyzeSelectedItem() {
    if (!selectedItem || selectedItem.status !== 'open') return
    setAnalyzing(true)
    setError('')
    setSuccess('')
    setRefreshWarning('')
    const generation = analysisGeneration.current + 1
    analysisGeneration.current = generation
    const analyzedItemId = selectedItem.id
    try {
      const suggestions = await onAnalyze(analyzedItemId)
      if (analysisGeneration.current !== generation || selectedItemId !== analyzedItemId) return
      setDraftSuggestions(suggestions)
      setSelectedSuggestionIds(suggestions.map((suggestion) => suggestion.id))
    } catch (reason) {
      if (analysisGeneration.current !== generation) return
      setError(reason instanceof Error ? reason.message : '分析失败，请稍后重试')
    } finally {
      if (analysisGeneration.current === generation) setAnalyzing(false)
    }
  }

  async function confirmSelectedSuggestions() {
    if (!selectedItem) return
    if (selectedSuggestionIds.length === 0) {
      setError('请至少勾选一条建议')
      return
    }
    setConfirming(true)
    setError('')
    setSuccess('')
    try {
      const outcome = await onConfirm(selectedItem.id, selectedSuggestionIds)
      setLocallyConfirmedItemIds((current) => current.includes(selectedItem.id) ? current : [...current, selectedItem.id])
      setSuccess(`已创建 ${outcome.createdCount} 个对象`)
      setRefreshWarning(outcome.refreshError ?? '')
    } catch (reason) {
      setError(confirmationErrorMessage(reason))
    } finally {
      setConfirming(false)
    }
  }

  function toggleSuggestion(identity: string, checked: boolean) {
    setSelectedSuggestionIds((current) => checked
      ? current.includes(identity) ? current : [...current, identity]
      : current.filter((value) => value !== identity))
  }

  return (
    <div className="project-channel-page project-inbox-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>Inbox 消息流</Title>
          <Text type="secondary">查看原始内容，分析为候选草稿，并在确认后创建正式对象。</Text>
        </div>
      </div>

      {activeWorkspace.inbox.length === 0 ? (
        <Card className="queue-section" bordered>
          <Empty description="当前没有待处理的 Inbox 内容" />
        </Card>
      ) : (
        <div className="mail-layout inbox-workspace">
          <Card className="queue-section mail-list" bordered>
            <div className="section-header">
              <Title heading={6}>收集内容（{activeWorkspace.inbox.length}）</Title>
            </div>
            {activeWorkspace.inbox.map((item) => (
              <button
                key={item.id}
                type="button"
                className={selectedItem?.id === item.id ? 'mail-item active' : 'mail-item'}
                disabled={confirming}
                onClick={() => selectItem(item)}
              >
                <span>{item.title}</span>
                <Text type="secondary" ellipsis={{ showTooltip: true }}>{item.summary || '暂无内容'}</Text>
                <div>
                  <Tag color={isInboxItemProcessed(item, locallyConfirmedItemIds) ? 'green' : 'orange'}>{isInboxItemProcessed(item, locallyConfirmedItemIds) ? '已处理' : '待处理'}</Tag>
                  <time>{item.time}</time>
                </div>
              </button>
            ))}
          </Card>

          <Card className="queue-section mail-detail inbox-detail" bordered>
            {selectedItem ? (
              <>
                <div className="inbox-detail-head">
                  <div>
                    <Space size={8}>
                      <Title heading={5}>{selectedItem.title}</Title>
                      <Tag color={isInboxItemProcessed(selectedItem, locallyConfirmedItemIds) ? 'green' : 'orange'}>
                        {isInboxItemProcessed(selectedItem, locallyConfirmedItemIds) ? '已处理' : '待处理'}
                      </Tag>
                    </Space>
                    <Text type="secondary">{selectedItem.meta} · {selectedItem.time}</Text>
                  </div>
                  <Button
                    icon={<IconRobot />}
                    loading={analyzing}
                    disabled={confirming || isInboxItemProcessed(selectedItem, locallyConfirmedItemIds)}
                    onClick={() => void analyzeSelectedItem()}
                  >
                    分析内容
                  </Button>
                </div>

                <section className="inbox-content" aria-label="Inbox 原始内容">
                  <Text className="inbox-section-label">原始内容</Text>
                  <Paragraph>{selectedItem.summary || '暂无内容'}</Paragraph>
                </section>

                <section className="inbox-draft-section" aria-label="分析建议">
                  <div className="section-header">
                    <Title heading={6}>分析建议</Title>
                    <Text type="secondary">仅勾选内容会在确认后创建</Text>
                  </div>
                  {draftSuggestions.length === 0 ? (
                    <Text type="secondary">点击“分析内容”生成候选草稿，分析不会创建正式对象。</Text>
                  ) : (
                    <div className="inbox-suggestion-list">
                      {draftSuggestions.map((suggestion) => (
                        <Checkbox
                          key={suggestion.id}
                          checked={selectedSuggestionIds.includes(suggestion.id)}
                          disabled={confirming || isInboxItemProcessed(selectedItem, locallyConfirmedItemIds)}
                          onChange={(checked) => toggleSuggestion(suggestion.id, checked)}
                        >
                          <span className="inbox-suggestion-copy">
                            <span>
                              <Tag color={suggestionColor(suggestion.kind)}>{suggestionLabel(suggestion.kind)}</Tag>
                              <strong>{suggestion.title}</strong>
                            </span>
                            <Text type="secondary">{suggestion.body || '暂无补充内容'}</Text>
                          </span>
                        </Checkbox>
                      ))}
                    </div>
                  )}
                </section>

                {error && <Alert className="inbox-feedback" type="error" content={error} />}
                {success && <Alert className="inbox-feedback" type="success" content={success} icon={<IconCheckCircle />} />}
                {refreshWarning && <Alert className="inbox-feedback" type="warning" content={refreshWarning} />}

                <div className="inbox-confirm-bar">
                  <Text type="secondary">正式写入前请核对勾选项</Text>
                  <Button
                    type="primary"
                    loading={confirming}
                    disabled={confirming || analyzing || isInboxItemProcessed(selectedItem, locallyConfirmedItemIds) || draftSuggestions.length === 0}
                    onClick={() => void confirmSelectedSuggestions()}
                  >
                    确认创建
                  </Button>
                </div>
              </>
            ) : null}
          </Card>
        </div>
      )}
    </div>
  )
}

function confirmationErrorMessage(reason: unknown) {
  if (reason instanceof ApiError && (reason.code === 'network_error' || reason.code === 'invalid_response')) {
    return '确认结果未知，服务端支持幂等处理，可安全重试'
  }
  return reason instanceof Error ? reason.message : '确认创建失败，请稍后重试'
}

function isInboxItemProcessed(item: InboxItem, locallyConfirmedItemIds: string[]) {
  return item.status !== 'open' || locallyConfirmedItemIds.includes(item.id)
}

function suggestionLabel(kind: InboxSuggestionDTO['kind']) {
  if (kind === 'task') return '任务'
  if (kind === 'note') return '笔记'
  return '资料'
}

function suggestionColor(kind: InboxSuggestionDTO['kind']) {
  if (kind === 'task') return 'arcoblue'
  if (kind === 'note') return 'green'
  return 'purple'
}