import { useState } from 'react'
import { FolderOpen, ChevronDown, Hash } from 'lucide-react'
import type { Session } from '../../hooks/useChat'

interface SessionSelectorProps {
  sessions: Session[]
  selectedSession: string | null
  channelId: string  // 使用 channelId 而不是 channelName
  onSelectSession: (sessionId: string) => void
}

export function SessionSelector({
  sessions,
  selectedSession,
  channelId,
  onSelectSession,
}: SessionSelectorProps) {
  const [isOpen, setIsOpen] = useState(false)

  const selected = sessions.find((s) => s.id === selectedSession)

  // 按通道 ID 筛选 Session
  const channelSessions = sessions.filter(
    (s) => s.channel_name === channelId
  )

  return (
    <div className="relative">
      {/* Header */}
      <div className="flex items-center justify-between border-b border-white/8 px-4 py-3">
        <h2 className="font-semibold text-white flex items-center gap-2 text-sm">
          <FolderOpen className="h-4 w-4 text-[#00f0ff]" />
          Session
        </h2>
      </div>

      {/* Session Dropdown */}
      <div className="px-3 py-2">
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="w-full flex items-center justify-between rounded-lg border border-white/10 bg-[#1a1a25]/80 px-3 py-2.5 text-left hover:bg-[#1a1a25] transition-all"
        >
          <div className="flex items-center gap-2.5">
            <span className="text-zinc-400">
              <FolderOpen className="h-4 w-4" />
            </span>
            <div className="flex flex-col">
              <span className="text-sm font-medium text-white truncate max-w-[160px]">
                {selected?.title || '选择 Session'}
              </span>
              {selected && (
                <span className="text-xs text-zinc-500">
                  {selected.message_count} 条消息
                </span>
              )}
            </div>
          </div>
          <ChevronDown
            className={`h-4 w-4 text-zinc-500 transition-transform ${isOpen ? 'rotate-180' : ''}`}
          />
        </button>

        {/* Dropdown Menu */}
        {isOpen && (
          <>
            <div
              className="fixed inset-0 z-10"
              onClick={() => setIsOpen(false)}
            />
            <div className="absolute left-3 right-3 z-20 mt-1 rounded-lg border border-white/10 bg-[#1a1a25] shadow-xl shadow-black/50 overflow-hidden">
              {channelSessions.length === 0 ? (
                <div className="px-3 py-3 text-sm text-zinc-500 text-center">
                  暂无 Session
                </div>
              ) : (
                channelSessions.map((session, index) => (
                  <button
                    key={session.id}
                    onClick={() => {
                      onSelectSession(session.id)
                      setIsOpen(false)
                    }}
                    className={`w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-white/5 transition-colors ${
                      session.id === selectedSession ? 'bg-[#00f0ff]/10' : ''
                    }`}
                  >
                    <div className="flex items-center gap-2.5">
                      <span className={session.id === selectedSession ? 'text-[#00f0ff]' : 'text-zinc-400'}>
                        <Hash className="h-4 w-4" />
                      </span>
                      <div className="flex flex-col">
                        <span className={`text-sm truncate max-w-[140px] ${
                          session.id === selectedSession ? 'text-white font-medium' : 'text-zinc-300'
                        }`}>
                          {session.title}
                        </span>
                        <span className="text-xs text-zinc-500">
                          {session.message_count} 条消息
                        </span>
                      </div>
                    </div>
                    <span className="text-xs text-zinc-600 font-mono">
                      {index + 1}
                    </span>
                  </button>
                ))
              )}
            </div>
          </>
        )}
      </div>
    </div>
  )
}
