import { useState, type CSSProperties } from 'react';
import type { HeroState } from '../game/types';
import { BuffType, DebuffType, type ActiveBuff, type ActiveDebuff } from '../game/types';
import { DEBUFF_COLORS } from '../shared/constants';
import { HPBar } from './HPBar';

const BUFF_LABEL: Record<BuffType, string> = {
  [BuffType.Rush]: 'Rush',
  [BuffType.Rage]: 'Rage',
  [BuffType.Shield]: 'Shield',
  [BuffType.Luck]: 'Luck',
  [BuffType.Resurrection]: 'Resurrect',
  [BuffType.Heal]: 'Heal',
  [BuffType.PowerPotion]: 'Power',
  [BuffType.WarCry]: 'War Cry',
};

const DEBUFF_LABEL: Record<DebuffType, string> = {
  [DebuffType.Poison]: 'Poison',
  [DebuffType.Freeze]: 'Freeze',
  [DebuffType.Burn]: 'Burn',
  [DebuffType.Stun]: 'Stun',
  [DebuffType.Slow]: 'Slow',
  [DebuffType.Weaken]: 'Weaken',
};

const wrapStyle: CSSProperties = {
  marginTop: 6,
  borderRadius: 8,
  backgroundColor: 'rgba(0,0,0,0.45)',
  border: '1px solid rgba(255,255,255,0.12)',
  overflow: 'hidden',
  flex: 1,
  minWidth: 0,
};

const headerStyle: CSSProperties = {
  width: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '6px 10px',
  fontSize: 12,
  fontWeight: 700,
  color: '#e8e8e8',
  cursor: 'pointer',
  userSelect: 'none',
  WebkitTapHighlightColor: 'transparent',
  background: 'rgba(255,255,255,0.04)',
  border: 'none',
  fontFamily: 'inherit',
};

const bodyStyle: CSSProperties = {
  padding: '8px 10px 10px',
  fontSize: 11,
  color: '#ccc',
};

const statRow: CSSProperties = {
  display: 'flex',
  justifyContent: 'space-between',
  padding: '2px 0',
  borderBottom: '1px solid rgba(255,255,255,0.06)',
};

const sectionTitle: CSSProperties = {
  fontSize: 10,
  fontWeight: 700,
  color: '#888',
  textTransform: 'uppercase',
  letterSpacing: 0.5,
  marginTop: 10,
  marginBottom: 4,
};

const fxChip: CSSProperties = {
  display: 'inline-flex',
  alignItems: 'center',
  gap: 4,
  padding: '3px 8px',
  borderRadius: 6,
  fontSize: 10,
  fontWeight: 600,
  marginRight: 4,
  marginBottom: 4,
  color: '#fff',
  textShadow: '0 1px 2px rgba(0,0,0,0.7)',
};


function liveBuffRemaining(b: ActiveBuff, nowMs: number): number {
  if (b.expiresAtMs != null) return Math.max(0, b.expiresAtMs - nowMs);
  return b.remainingMs;
}

function liveDebuffRemaining(d: ActiveDebuff, nowMs: number): number {
  if (d.expiresAtMs != null) return Math.max(0, d.expiresAtMs - nowMs);
  return d.remainingMs;
}

interface HeroPanelProps {
  hero: HeroState;
  nowMs: number;
}

function hasActiveBuff(buffs: ActiveBuff[], type: BuffType, nowMs: number): boolean {
  return buffs.some((b) => b.type === type && liveBuffRemaining(b, nowMs) > 0);
}

function hasActiveDebuff(debuffs: ActiveDebuff[], type: DebuffType, nowMs: number): boolean {
  return debuffs.some((d) => d.type === type && liveDebuffRemaining(d, nowMs) > 0);
}

const buffedColor = '#44ff88';
const nerfedColor = '#ff6666';

function StatValue({ value, label, buffed, nerfed }: { value: string; label: string; buffed: boolean; nerfed: boolean }) {
  const color = buffed ? buffedColor : nerfed ? nerfedColor : '#ccc';
  const arrow = buffed ? ' \u25B2' : nerfed ? ' \u25BC' : '';
  return (
    <div style={statRow}>
      <span>{label}</span>
      <span style={{ color, transition: 'color 200ms ease' }}>
        {value}{arrow}
      </span>
    </div>
  );
}


export function HeroPanel({ hero, nowMs }: HeroPanelProps) {
  const [open, setOpen] = useState(false);

  const buffsLive = hero.activeBuffs
    .map((b) => ({
      ...b,
      remainingMs: liveBuffRemaining(b, nowMs),
    }))
    .filter((b) => b.remainingMs > 0);

  const debuffsLive = hero.debuffs
    .map((d) => ({
      ...d,
      remainingMs: liveDebuffRemaining(d, nowMs),
    }))
    .filter((d) => d.remainingMs > 0);

  const atkBuffed = hasActiveBuff(hero.activeBuffs, BuffType.Rage, nowMs)
    || hasActiveBuff(hero.activeBuffs, BuffType.PowerPotion, nowMs);
  const atkNerfed = hasActiveDebuff(hero.debuffs, DebuffType.Weaken, nowMs);
  const spdBuffed = hasActiveBuff(hero.activeBuffs, BuffType.WarCry, nowMs);
  const spdNerfed = hasActiveDebuff(hero.debuffs, DebuffType.Freeze, nowMs);
  const defBuffed = hasActiveBuff(hero.activeBuffs, BuffType.Shield, nowMs);

  return (
    <div style={wrapStyle}>
      <button
        type="button"
        style={headerStyle}
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
      >
        <span>Hero Stats</span>
        <span style={{ opacity: 0.7, fontSize: 11 }}>{open ? '\u25BC' : '\u25B6'}</span>
      </button>
      {open && (
        <div style={bodyStyle}>
          {/* Combat Stats */}
          <StatValue label="ATK" value={String(hero.damage)} buffed={atkBuffed} nerfed={atkNerfed} />
          <StatValue label="DEF" value={String(hero.defense)} buffed={defBuffed} nerfed={false} />
          <StatValue label="Speed" value={`${hero.attackSpeed.toFixed(2)}/s`} buffed={spdBuffed} nerfed={spdNerfed} />
          <StatValue
              label="Move speed"
              value={`${(hero.moveSpeed ?? 1).toFixed(2)}x`}
              buffed={hasActiveBuff(hero.activeBuffs, BuffType.Rush, nowMs)}
              nerfed={hasActiveDebuff(hero.debuffs, DebuffType.Slow, nowMs)}
          />
          <div style={statRow}><span>STR</span><span>{hero.strength}</span></div>
          <div style={statRow}><span>CON</span><span>{hero.constitution}</span></div>
          <div style={statRow}><span>AGI</span><span>{hero.agility}</span></div>
          <div style={statRow}><span>LUCK</span><span>{hero.luck}</span></div>


          {/* XP */}
          <div style={{ ...sectionTitle, marginTop: 12 }}>Experience</div>
          <div style={{ marginBottom: 2 }}>
            <HPBar
              current={hero.xp}
              max={Math.max(1, hero.xpToNext)}
              color="#44aaff"
              height={12}
              showText
              label="XP"
            />
          </div>

          {/* Buffs */}
          <div style={sectionTitle}>Active Buffs</div>
          {buffsLive.length === 0 ? (
            <div style={{ opacity: 0.55, fontStyle: 'italic' }}>None</div>
          ) : (
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
              {buffsLive.map((b) => (
                <span
                  key={b.type}
                  style={{
                    ...fxChip,
                    backgroundColor: 'rgba(68, 170, 255, 0.35)',
                    border: '1px solid rgba(68, 170, 255, 0.6)',
                  }}
                >
                  {BUFF_LABEL[b.type]}
                  <span style={{ opacity: 0.9 }}>{Math.ceil(b.remainingMs / 1000)}s</span>
                </span>
              ))}
            </div>
          )}

          {/* Debuffs */}
          <div style={sectionTitle}>Active Debuffs</div>
          {debuffsLive.length === 0 ? (
            <div style={{ opacity: 0.55, fontStyle: 'italic' }}>None</div>
          ) : (
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
              {debuffsLive.map((d) => {
                const color = DEBUFF_COLORS[d.type] ?? '#999';
                return (
                  <span
                    key={d.type}
                    style={{
                      ...fxChip,
                      backgroundColor: `${color}44`,
                      border: `1px solid ${color}99`,
                    }}
                  >
                    {DEBUFF_LABEL[d.type]}
                    <span style={{ opacity: 0.9 }}>{Math.ceil(d.remainingMs / 1000)}s</span>
                  </span>
                );
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
}
