import { useState, useCallback, useEffect, useRef } from 'react'
import { ClipboardList, ChevronUp, ChevronDown, Circle } from 'lucide-react'
import type { TodoItemSummary, Command } from '../../types/protocol'

interface TodoPanelProps {
  todos: TodoItemSummary[]
  requestTodoList: () => Command
  sendCommand: (cmd: Command) => void
}

/* ── status helpers ───────────────────────────────────── */

interface StatusStyle { label: string; border: string; dot: string; text: string; icon: string }

const STATUS: Record<string, StatusStyle> = {
  in_progress: { label: '进行中', border: 'border-amber-400/60', dot: 'bg-amber-400 shadow-[0_0_6px_#fbbf24]', text: 'text-amber-300', icon: '●' },
  pending:     { label: '待处理', border: 'border-slate-500/50',   dot: 'bg-slate-500', text: 'text-slate-400', icon: '○' },
  completed:   { label: '已完成', border: 'border-emerald-400/40',  dot: 'bg-emerald-400', text: 'text-emerald-400', icon: '✓' },
  cancelled:   { label: '已取消', border: 'border-red-400/40',     dot: 'bg-red-400', text: 'text-red-400', icon: '✕' },
}

function statusStyle(s: string): StatusStyle {
  return STATUS[s] ?? { label: s, border: 'border-[var(--border-color)]', dot: 'bg-[var(--text-muted)]', text: 'text-[var(--text-muted)]', icon: '?' }
}

const PRIORITY: Record<string, string> = {
  high: 'text-rose-400',
  medium: 'text-amber-400',
  low: 'text-slate-400',
}

function priorityDot(p: string) { return PRIORITY[p] ?? 'text-slate-400' }

/* ── group helpers ────────────────────────────────────── */

const GROUP_ORDER = ['in_progress', 'pending', 'completed', 'cancelled']
const COLLAPSED_DEFAULT = new Set(['completed', 'cancelled'])

function groupTodos(todos: TodoItemSummary[]): Map<string, TodoItemSummary[]> {
  const map = new Map<string, TodoItemSummary[]>()
  for (const t of todos) {
    const list = map.get(t.status) ?? []
    list.push(t)
    map.set(t.status, list)
  }
  return map
}

/* ── pulse dot ────────────────────────────────────────── */

function PulseDot() {
  return (
    <span className="relative flex h-2 w-2">
      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75" />
      <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-400 shadow-[0_0_6px_#fbbf24]" />
    </span>
  )
}

/* ── TodoPanel ────────────────────────────────────────── */

export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProps) {
  const [expanded, setExpanded] = useState(() => {
    try { return localStorage.getItem('picobot-todo-panel-open') === 'true' } catch { return false }
  })
  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(() => new Set(COLLAPSED_DEFAULT))
  const prevTodoIdsRef = useRef<Set<string>>(new Set())

  // 持久化展开状态
  useEffect(() => {
    localStorage.setItem('picobot-todo-panel-open', String(expanded))
  }, [expanded])

  // 当有新 todo 出现时自动展开
  useEffect(() => {
    const newIds = new Set(todos.map(t => t.id))
    const hasNewItems = todos.some(t => !prevTodoIdsRef.current.has(t.id))
    if (hasNewItems && todos.length > 0) {
      setExpanded(true)
    }
    prevTodoIdsRef.current = newIds
  }, [todos])

  const grouped = groupTodos(todos)
  const inProgressCount = grouped.get('in_progress')?.length ?? 0
  const totalCount = todos.length

  const toggleGroup = useCallback((status: string) => {
    setCollapsedGroups(prev => {
      const next = new Set(prev)
      if (next.has(status)) next.delete(status); else next.add(status)
      return next
    })
  }, [])

  // ── 空状态 ──
  if (totalCount === 0) {
    return (
      <div className="fixed bottom-4 right-4 z-50">
        <button
          onClick={() => sendCommand(requestTodoList())}
          className="flex items-center gap-2 px-3 py-2 rounded-xl bg-[var(--bg-tertiary)]/70 backdrop-blur-sm border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border-accent)] transition-all duration-300 shadow-lg text-xs"
          title="刷新待办"
        >
          <ClipboardList className="h-3.5 w-3.5" />
          <span>待办</span>
        </button>
      </div>
    )
  }

  // ── 折叠态 ──
  if (!expanded) {
    return (
      <div className="fixed bottom-4 right-4 z-50">
        <button
          onClick={() => setExpanded(true)}
          className="flex items-center gap-2 px-3 py-2 rounded-xl bg-[var(--bg-tertiary)]/80 backdrop-blur-sm border border-[var(--border-color)] hover:border-[var(--accent-cyan)]/30 transition-all duration-300 shadow-lg group"
        >
          {inProgressCount > 0 ? <PulseDot /> : <ClipboardList className="h-3.5 w-3.5 text-[var(--text-muted)]" />}
          <span className="text-sm font-medium text-[var(--text-secondary)] group-hover:text-[var(--accent-cyan)] transition-colors">
            待办 ({totalCount})
          </span>
          <ChevronUp className="h-3.5 w-3.5 text-[var(--text-muted)]" />
        </button>
      </div>
    )
  }

  // ── 展开态 ──
  return (
    <div className="fixed bottom-4 right-4 z-50 w-72 max-h-[60vh] flex flex-col rounded-xl border border-[var(--border-color)] bg-[var(--bg-tertiary)]/95 backdrop-blur-md shadow-2xl overflow-hidden transition-all duration-300">
      {/* 标题栏 */}
      <div className="shrink-0 flex items-center justify-between px-3 py-2.5 border-b border-[var(--border-color)]">
        <div className="flex items-center gap-2">
          <ClipboardList className="h-4 w-4 text-[var(--accent-cyan)]" />
          <span className="text-sm font-semibold text-[var(--text-primary)]">待办事项</span>
          <span className="text-[11px] text-[var(--text-muted)] tabular-nums">共 {totalCount} 项</span>
        </div>
        <button
          onClick={() => setExpanded(false)}
          className="p-1 rounded hover:bg-[var(--overlay-subtle)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
        >
          <ChevronDown className="h-4 w-4" />
        </button>
      </div>

      {/* 列表区 */}
      <div className="flex-1 overflow-y-auto scrollbar-hide px-2 py-2 space-y-2">
        {GROUP_ORDER.map(status => {
          const items = grouped.get(status)
          if (!items || items.length === 0) return null

          const style = statusStyle(status)
          const isCollapsed = collapsedGroups.has(status)
          const isTerminal = status === 'completed' || status === 'cancelled'

          return (
            <div key={status}>
              {/* 分组标题 */}
              <button
                onClick={() => toggleGroup(status)}
                className="flex items-center gap-1.5 w-full px-1 py-1 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
              >
                {isCollapsed ? (
                  <ChevronUp className="h-3 w-3" />
                ) : (
                  <ChevronDown className="h-3 w-3" />
                )}
                <span className={style.text}>{style.icon}</span>
                <span>{style.label}</span>
                <span className="tabular-nums">({items.length})</span>
              </button>

              {/* 卡片列表 */}
              {!isCollapsed && (
                <div className="space-y-1">
                  {items.map(item => (
                    <div
                      key={item.id}
                      className={`rounded-lg border-l-2 ${style.border} border border-[var(--border-color)] bg-[var(--overlay-hover)]/50 px-2.5 py-1.5 transition-colors hover:border-[var(--border-accent)]`}
                    >
                      <div className="flex items-start gap-2">
                        <span className={`mt-0.5 shrink-0 ${priorityDot(item.priority)}`}>
                          <Circle className="h-2 w-2 fill-current" />
                        </span>
                        <div className="min-w-0 flex-1">
                          <p className={`text-[13px] leading-snug text-[var(--text-primary)] break-words ${
                            isTerminal ? 'line-through opacity-50' : ''
                          }`}>
                            {item.content}
                          </p>
                          <div className="flex items-center gap-2 mt-0.5">
                            <span className={`text-[10px] ${priorityDot(item.priority)}`}>
                              {item.priority}
                            </span>
                            <span className={`text-[10px] ${style.text}`}>
                              {style.icon} {style.label}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )
        })}
      </div>

      {/* 底部刷新 */}
      <div className="shrink-0 border-t border-[var(--border-color)] px-3 py-1.5">
        <button
          onClick={() => sendCommand(requestTodoList())}
          className="text-[10px] text-[var(--text-muted)] hover:text-[var(--accent-cyan)] transition-colors"
        >
          刷新
        </button>
      </div>
    </div>
  )
}
