import { useState } from 'react'
import StatusBadge, { STATUS_BAR_COLOR } from './StatusBadge.jsx'
import { voteSkill } from '../services/api.js'
import { formatSkillDate } from '../services/skillTimestamp.js'

export default function SkillCard({ skill, onClick, onVote, isHot }) {
  const [likeCount, setLikeCount] = useState(skill.like_count ?? 0)
  const [dislikeCount, setDislikeCount] = useState(skill.dislike_count ?? 0)
  const [voting, setVoting] = useState(false)

  const handleVote = async (e, vote) => {
    e.stopPropagation()  // 防止触发卡片 onClick 进详情
    if (voting) return
    setVoting(true)
    try {
      const res = await voteSkill(skill.id, vote)
      setLikeCount(res.like_count ?? 0)
      setDislikeCount(res.dislike_count ?? 0)
      onVote?.(skill.id, { like_count: res.like_count ?? 0, dislike_count: res.dislike_count ?? 0 })
    } catch {}
    finally { setVoting(false) }
  }

  return (
    <div className="bg-white rounded-xl border border-gray-200 hover:border-brand-300 hover:shadow-md transition overflow-hidden flex flex-col">
      <div className={`h-1.5 w-full ${STATUS_BAR_COLOR[skill.status] || 'bg-gray-300'}`} />

      {/* 上半部分：点击进详情 */}
      <div className="p-4 flex-1 flex flex-col cursor-pointer relative" onClick={onClick}>
        {isHot && (
          <span className="absolute top-2 left-3 text-base flame-badge" aria-label="热门">
            🔥
          </span>
        )}
        <div className="absolute top-2 right-2">
          <StatusBadge status={skill.status} />
        </div>
        <div className={`pr-16${isHot ? ' pl-7' : ''}`}>
          <h3 className="text-[15px] font-semibold text-gray-900 line-clamp-2" title={skill.title}>{skill.title}</h3>
        </div>
        <p className="mt-2 text-[13px] text-gray-600 line-clamp-3 flex-1">{skill.description}</p>
        <div className="mt-3 flex items-center gap-2 flex-wrap">
          {(skill.tags || '').split(',').filter(Boolean).slice(0, 3).map((t, i) => (
            <span key={`${t}-${i}`} className="text-[11px] px-1.5 py-0.5 rounded bg-brand-50 text-brand-700">{t}</span>
          ))}
          {skill.category_nodes?.[0] && (
            <span className="text-[11px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-600">
              {skill.category_nodes[0].parent_label} / {skill.category_nodes[0].label}
            </span>
          )}
        </div>
        <div className="mt-3 flex items-center justify-between text-[12px] text-gray-500">
          <span className="flex items-center gap-1">
            <span>👤</span>{skill.author}
          </span>
          <span className="flex items-center gap-1">
            <span>🕒</span>{formatSkillDate(skill.updated_at)}
          </span>
        </div>
      </div>

      {/* 下方独立区域：下载数 + 点赞/踩按钮，点击不进详情 */}
      <div className="px-4 pb-3 pt-2 border-t border-gray-100 flex items-center gap-1 text-[12px]">
        {/* 下载数（仅显示） */}
        <span className="flex items-center gap-0.5 text-gray-400 mr-2" title="下载次数">
          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
          {skill.download_count ?? 0}
        </span>
        {/* 点赞按钮 */}
        <button
          onClick={(e) => handleVote(e, 'like')}
          disabled={voting}
          title="点赞"
          className="flex items-center gap-0.5 px-2 py-1 rounded-md text-gray-500 hover:bg-emerald-50 hover:text-emerald-600 transition disabled:opacity-50"
        >
          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" /></svg>
          {likeCount}
        </button>
        {/* 点踩按钮 */}
        <button
          onClick={(e) => handleVote(e, 'dislike')}
          disabled={voting}
          title="点踩"
          className="flex items-center gap-0.5 px-2 py-1 rounded-md text-gray-500 hover:bg-rose-50 hover:text-rose-500 transition disabled:opacity-50"
        >
          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018c.163 0 .326.02.485.06L17 4m-7 10v2a2 2 0 002 2h.095c.5 0 .905-.405.905-.905 0-.714.211-1.412.608-2.006L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5" /></svg>
          {dislikeCount}
        </button>
        {/* 查看详情入口（右寻） */}
        <button
          onClick={onClick}
          className="ml-auto text-[11px] text-gray-400 hover:text-brand-600 transition px-1"
        >
          详情 ›
        </button>
      </div>
    </div>
  )
}
