import { User, TrendingUp, Activity } from "lucide-react"
import { cn } from "@/lib/utils"

interface StatusBarProps {
  nickname?: string
  level?: number
  exp?: number
  nextLevelExp?: number
  gold?: number
  tickets?: number
  normalFertilizerHours?: number
  organicFertilizerHours?: number
  status?: 'running' | 'stopped' | 'error'
  avatarUrl?: string
}

export function StatusBar({ 
  nickname = "Farmer", 
  level = 1, 
  exp = 0, 
  nextLevelExp = 100, 
  gold = 0,
  tickets = 0,
  normalFertilizerHours = 0,
  organicFertilizerHours = 0,
  status = 'stopped',
  avatarUrl
}: StatusBarProps) {
  const expPercentage = Math.min(100, Math.max(0, (exp / nextLevelExp) * 100))

  return (
    <div className="w-full bg-white/60 backdrop-blur-md border border-white/50 shadow-sm rounded-3xl p-4 flex flex-col md:flex-row items-center justify-between gap-4 transition-all hover:shadow-md">
      {/* User Info */}
      <div className="flex items-center gap-4 w-full md:w-auto">
        <div className="h-12 w-12 rounded-full bg-gradient-to-br from-blue-200 to-pink-200 flex items-center justify-center shadow-inner ring-2 ring-white overflow-hidden">
          {avatarUrl ? (
            <img src={avatarUrl} alt="Avatar" className="h-full w-full object-cover" />
          ) : (
            <User className="h-6 w-6 text-slate-600" />
          )}
        </div>
        <div className="flex flex-col">
          <span className="font-bold text-slate-700 text-lg">{nickname}</span>
          <div className="flex items-center gap-2 text-xs text-slate-500 font-medium">
            <span className={cn(
              "flex items-center gap-1 px-2 py-0.5 rounded-full",
              status === 'running' ? "bg-green-100 text-green-700" : "bg-slate-100 text-slate-600"
            )}>
              <Activity className="h-3 w-3" />
              {status === 'running' ? '运行中' : '已停止'}
            </span>
            <span className="bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full flex items-center gap-1">
              {level} 级
            </span>
          </div>
        </div>
      </div>

      {/* Stats Group */}
      <div className="flex items-center gap-4 w-full md:w-auto justify-between md:justify-end flex-1">
        {/* Experience Bar */}
        <div className="flex flex-col gap-1 flex-1 max-w-[200px]">
          <div className="flex justify-between text-xs text-slate-500 font-medium px-1">
            <span className="flex items-center gap-1"><TrendingUp className="h-3 w-3" /> 经验</span>
            <span>{Math.floor(expPercentage)}%</span>
          </div>
          <div className="h-2.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200/50">
            <div 
              className="h-full bg-gradient-to-r from-blue-300 to-purple-300 transition-all duration-500 ease-out"
              style={{ width: `${expPercentage}%` }}
            />
          </div>
        </div>

        <div className="bg-sky-50/80 border border-sky-100 px-4 py-2 rounded-2xl flex items-center gap-3 shadow-sm min-w-[120px]">
          <div className="bg-sky-200 p-1.5 rounded-full">
            <img src="/verified_items/1002_点券_50_bd489f54.png" alt="点券" className="h-5 w-5 object-contain" />
          </div>
          <div className="flex flex-col leading-none">
            <span className="text-[10px] text-sky-600 font-bold uppercase tracking-wider">点券</span>
            <span className="text-lg font-bold text-slate-700 font-mono">{tickets.toLocaleString()}</span>
          </div>
        </div>

        <div className="bg-emerald-50/80 border border-emerald-100 px-4 py-2 rounded-2xl flex items-center gap-3 shadow-sm min-w-[140px]">
          <div className="bg-emerald-200 p-1.5 rounded-full">
            <img src="/verified_items/1011_普通化肥容器_12_3ad710ed.png" alt="普通化肥" className="h-5 w-5 object-contain" />
          </div>
          <div className="flex flex-col leading-none">
            <span className="text-[10px] text-emerald-600 font-bold uppercase tracking-wider">普通化肥余量</span>
            <span className="text-lg font-bold text-slate-700 font-mono">{normalFertilizerHours.toFixed(1)}h</span>
          </div>
        </div>

        <div className="bg-teal-50/80 border border-teal-100 px-4 py-2 rounded-2xl flex items-center gap-3 shadow-sm min-w-[140px]">
          <div className="bg-teal-200 p-1.5 rounded-full">
            <img src="/verified_items/1012_有机化肥容器_49_fe1c87b7.png" alt="有机化肥" className="h-5 w-5 object-contain" />
          </div>
          <div className="flex flex-col leading-none">
            <span className="text-[10px] text-teal-600 font-bold uppercase tracking-wider">有机化肥余量</span>
            <span className="text-lg font-bold text-slate-700 font-mono">{organicFertilizerHours.toFixed(1)}h</span>
          </div>
        </div>

        <div className="bg-yellow-50/80 border border-yellow-100 px-4 py-2 rounded-2xl flex items-center gap-3 shadow-sm min-w-[120px]">
          <div className="bg-yellow-200 p-1.5 rounded-full">
            <img src="/verified_items/1001_金币_4_65088be3.png" alt="金币" className="h-5 w-5 object-contain" />
          </div>
          <div className="flex flex-col leading-none">
            <span className="text-[10px] text-yellow-600 font-bold uppercase tracking-wider">金币</span>
            <span className="text-lg font-bold text-slate-700 font-mono">{gold.toLocaleString()}</span>
          </div>
        </div>
      </div>
    </div>
  )
}
