import { Terminal, FolderSync, ArrowRightLeft, Globe, Plus, Zap, Clock } from 'lucide-react'
import { useSessionStore } from '../stores'
import { useTabStore } from '../stores/tabStore'
import EmptyState from './common/EmptyState'

interface WelcomeViewProps {
  onNewSession?: () => void
  onQuickConnect?: () => void
}

export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeViewProps) {
  const { addTab } = useTabStore()
  const sessions = useSessionStore((s) => s.sessions)

  // 取最近 5 个会话作为最近连接
  const recentSessions = sessions.slice(-5).reverse()

  const handleSessionClick = (session: typeof sessions[number]) => {
    addTab({
      title: session.name || session.host,
      type: 'terminal',
      sessionId: session.id,
    })
  }

  return (
    <div className="h-full flex flex-col items-center justify-start bg-dark-900 p-8 overflow-y-auto">
      <div className="text-center mb-12 pt-8">
        <div className="w-20 h-20 bg-dark-700 rounded-2xl flex items-center justify-center mx-auto shadow-lg">
          <Terminal className="w-10 h-10 text-content-primary" />
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4 w-full max-w-2xl mb-12">
        <button
          onClick={onQuickConnect}
          className="flex items-center gap-4 p-6 bg-dark-800 hover:bg-dark-700 rounded-xl border border-dark-700/30 hover:border-accent-blue transition-all group"
        >
          <div className="w-12 h-12 bg-surface-baseccent-blue/20 rounded-lg flex items-center justify-center group-hover:bg-surface-baseccent-blue/30 transition-colors">
            <Zap className="w-6 h-6 text-accent-blue" />
          </div>
          <div className="text-left">
            <div className="font-semibold text-content-primary">快速连接</div>
            <div className="text-sm text-txt-muted">输入地址快速建立连接</div>
          </div>
        </button>

        <button
          onClick={onNewSession}
          className="flex items-center gap-4 p-6 bg-dark-800 hover:bg-dark-700 rounded-xl border border-dark-700/30 hover:border-accent-green transition-all group"
        >
          <div className="w-12 h-12 bg-surface-baseccent-green/20 rounded-lg flex items-center justify-center group-hover:bg-surface-baseccent-green/30 transition-colors">
            <Plus className="w-6 h-6 text-content-primary" />
          </div>
          <div className="text-left">
            <div className="font-semibold text-content-primary">新建会话</div>
            <div className="text-sm text-txt-muted">创建并保存新的会话</div>
          </div>
        </button>

        <button
          onClick={() => addTab({ title: 'SFTP', type: 'sftp' })}
          className="flex items-center gap-4 p-6 bg-dark-800 hover:bg-dark-700 rounded-xl border border-dark-700/30 hover:border-accent-purple transition-all group"
        >
          <div className="w-12 h-12 bg-surface-baseccent-purple/20 rounded-lg flex items-center justify-center group-hover:bg-surface-baseccent-purple/30 transition-colors">
            <FolderSync className="w-6 h-6 text-accent-purple" />
          </div>
          <div className="text-left">
            <div className="font-semibold text-content-primary">SFTP 传输</div>
            <div className="text-sm text-txt-muted">可视化文件管理</div>
          </div>
        </button>

        <button
          onClick={() => addTab({ title: '端口转发', type: 'portforward' })}
          className="flex items-center gap-4 p-6 bg-dark-800 hover:bg-dark-700 rounded-xl border border-dark-700/30 hover:border-accent-orange transition-all group"
        >
          <div className="w-12 h-12 bg-orange-500/20 rounded-lg flex items-center justify-center group-hover:bg-orange-500/30 transition-colors">
            <ArrowRightLeft className="w-6 h-6 text-orange-400" />
          </div>
          <div className="text-left">
            <div className="font-semibold text-content-primary">端口转发</div>
            <div className="text-sm text-txt-muted">本地/远程/SOCKS5 代理</div>
          </div>
        </button>
      </div>

      {/* Recent connections */}
      <div className="w-full max-w-2xl">
        <h3 className="text-sm font-medium text-txt-muted mb-4">最近连接</h3>
        {recentSessions.length === 0 ? (
          <EmptyState
            icon={Clock}
            title="暂无最近连接"
            description="开始你的第一次连接吧"
          />
        ) : (
          <div className="space-y-2">
            {recentSessions.map((session) => (
              <button
                key={session.id}
                onClick={() => handleSessionClick(session)}
                className="w-full flex items-center justify-between p-4 bg-dark-800 hover:bg-dark-700 rounded-lg border border-dark-700/30 hover:border-accent-blue/50 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <Globe className="w-5 h-5 text-accent-blue" />
                  <div className="text-left">
                    <div className="font-medium text-content-primary">{session.name}</div>
                    <div className="text-sm text-txt-muted">
                      {session.username}@{session.host}{session.port !== 22 ? `:${session.port}` : ''}
                    </div>
                  </div>
                </div>
                <span className="text-xs text-txt-muted">--</span>
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Shortcuts hint */}
      <div className="mt-12 flex items-center gap-6 text-sm text-txt-muted">
        <span>快捷键:</span>
        <span><kbd className="px-2 py-1 bg-dark-800 rounded">Ctrl+N</kbd> 新建会话</span>
        <span><kbd className="px-2 py-1 bg-dark-800 rounded">Ctrl+K</kbd> 快速连接</span>
        <span><kbd className="px-2 py-1 bg-dark-800 rounded">Ctrl+T</kbd> 新建标签</span>
      </div>
    </div>
  )
}