import { useState, useCallback } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
import { combatApi, characterApi } from '../api/endpoints';
import type { Monster, CombatResult, MultiCombatResult, CombatLog } from '../api/types';
import { Swords, Trophy, Skull, Clock, Zap, Heart, Lock } from 'lucide-react';

const COMBAT_COST = 5;
const REST_COST = 10;

const ATTACK_TYPES = [
  { id: 'melee',  label: 'Mêlée',    emoji: '⚔️',  stat: 'Force × 1.5' },
  { id: 'ranged', label: 'Distance', emoji: '🏹',  stat: 'Agilité × 1.5' },
  { id: 'magic',  label: 'Magie',    emoji: '✨',  stat: 'Intelligence × 1.5' },
];

function MonsterCard({ m, selected, onSelect, playerLevel }: { m: Monster; selected: boolean; onSelect: () => void; playerLevel: number }) {
  const tooHard = m.minLevel > playerLevel + 2;
  const tooEasy = m.maxLevel < playerLevel - 3;

  return (
    <div
      className={`card card-hover ${selected ? 'card-gold' : ''}`}
      onClick={onSelect}
      style={{ cursor: 'pointer', transition: 'all 0.15s', opacity: tooHard ? 0.4 : 1 }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
        <span style={{ fontWeight: 700, fontSize: 14, color: selected ? '#f4c94e' : '#dce4f0' }}>{m.name}</span>
        <span className={tooHard ? 'badge badge-red' : tooEasy ? 'badge' : 'badge badge-green'} style={{ fontSize: 10 }}>
          Niv. {m.minLevel}–{m.maxLevel}
        </span>
      </div>
      <div style={{ display: 'flex', gap: 12, fontSize: 12, color: '#6b7a99' }}>
        <span>❤️ {m.hp}</span>
        <span>⚔️ {m.attack}</span>
        <span>🛡️ {m.defense}</span>
        <span>⭐ {m.xpReward} XP</span>
        <span>💰 {m.goldMin}–{m.goldMax}</span>
      </div>
      {tooHard && <div style={{ fontSize: 10, color: '#e84040', marginTop: 4 }}>Niveau trop élevé</div>}
    </div>
  );
}

function CombatLogView({ result }: { result: CombatResult }) {
  const won = result.winner === 'player';
  return (
    <div className="card" style={{ marginTop: '1rem' }}>
      <div style={{ textAlign: 'center', padding: '0.75rem 0', marginBottom: '0.75rem', borderBottom: '1px solid #2a3448' }}>
        {won
          ? <div style={{ color: '#3ddc84', fontWeight: 800, fontSize: 18 }}>
              <Trophy size={20} style={{ display: 'inline', marginRight: 8 }} />
              Victoire ! +{result.rewards.xp} XP  +{result.rewards.gold} or
            </div>
          : <div style={{ color: '#e84040', fontWeight: 800, fontSize: 18 }}>
              <Skull size={20} style={{ display: 'inline', marginRight: 8 }} />
              Défaite… Retour à l'auberge
            </div>
        }
        {result.rewards.loot && (
          <div style={{ fontSize: 13, color: '#f4c94e', marginTop: 4 }}>
            🎁 Loot : {result.rewards.loot.name} ×{result.rewards.loot.quantity}
          </div>
        )}
        {result.rewards.levelUp && (
          <div style={{ fontSize: 13, color: '#a78bfa', marginTop: 4 }}>
            🎉 LEVEL UP ! Niveau {result.rewards.newLevel} — +{result.rewards.statPointsGained} points de stats
          </div>
        )}
      </div>

      <p style={{ margin: '0 0 6px', fontSize: 12, fontWeight: 700, color: '#6b7a99' }}>
        Log — {result.rounds.length} tour{result.rounds.length > 1 ? 's' : ''}
      </p>
      <div className="combat-log">
        {result.rounds.flatMap(r =>
          r.log.map((line, i) => {
            const cls = line.includes('CRITIQUE') ? 'log-crit'
              : line.includes('esquive') ? 'log-crit'
              : line.includes('HP') ? 'log-system'
              : i === 0 ? 'log-player'
              : 'log-monster';
            return <div key={`${r.round}-${i}`} className={cls}>[T{r.round}] {line}</div>;
          })
        )}
        {won
          ? <div className="log-system">══ Victoire ══</div>
          : <div className="log-monster">══ Défaite ══</div>
        }
      </div>
    </div>
  );
}

function MultiCombatView({ result }: { result: MultiCombatResult }) {
  const t = result.totals;
  return (
    <div className="card" style={{ marginTop: '1rem' }}>
      <div style={{ textAlign: 'center', padding: '0.75rem 0', marginBottom: '0.75rem', borderBottom: '1px solid #2a3448' }}>
        <div style={{ fontWeight: 800, fontSize: 18, color: t.losses > 0 ? '#e84040' : '#3ddc84' }}>
          {t.losses > 0 ? <Skull size={20} style={{ display: 'inline', marginRight: 8 }} /> : <Trophy size={20} style={{ display: 'inline', marginRight: 8 }} />}
          {result.count} combat{result.count > 1 ? 's' : ''} — {t.wins}V / {t.losses}D
        </div>
        <div style={{ fontSize: 14, color: '#dce4f0', marginTop: 6 }}>
          +{t.xp} XP  +{t.gold} Or
          {t.goldLost > 0 && <span style={{ color: '#e84040' }}>  −{t.goldLost} Or</span>}
        </div>
        {t.levelsGained > 0 && (
          <div style={{ fontSize: 13, color: '#a78bfa', marginTop: 4 }}>
            🎉 {t.levelsGained} level up{t.levelsGained > 1 ? 's' : ''} !
          </div>
        )}
        {t.loot.length > 0 && (
          <div style={{ fontSize: 13, color: '#f4c94e', marginTop: 4 }}>
            🎁 Loot : {t.loot.reduce((sum, l) => sum + l.quantity, 0)} matériaux
          </div>
        )}
        {t.losses > 0 && (
          <div style={{ fontSize: 11, color: '#6b7a99', marginTop: 4 }}>
            Série interrompue par une défaite
          </div>
        )}
      </div>
    </div>
  );
}

function HistoryEntry({ h }: { h: CombatLog }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', borderBottom: '1px solid #1e2535' }}>
      <span style={{ color: h.winner === 'player' ? '#3ddc84' : '#e84040' }}>
        {h.winner === 'player' ? '✓' : '✗'} {h.monster.name}
      </span>
      <span style={{ color: '#6b7a99' }}>
        {h.winner === 'player'
          ? `+${h.xpEarned}xp +${h.goldEarned}or${h.lootQuantity > 0 ? ` 🎁×${h.lootQuantity}` : ''}`
          : `${h.totalRounds} tours`
        }
      </span>
    </div>
  );
}

export function CombatPage() {
  const qc = useQueryClient();
  const [selectedMonster, setSelectedMonster] = useState<Monster | null>(null);
  const [attackType, setAttackType] = useState('melee');
  const [lastResult, setLastResult] = useState<CombatResult | null>(null);
  const [lastMultiResult, setLastMultiResult] = useState<MultiCombatResult | null>(null);
  const [cooldown, setCooldown] = useState(false);

  const { data: char } = useQuery({ queryKey: ['character'], queryFn: characterApi.me });
  const endurance = char?.enduranceCurrent ?? 0;
  const playerLevel = char?.level ?? 1;
  const canFight = endurance >= COMBAT_COST;
  const needsHeal = char ? char.hpCurrent < char.hpMax : false;
  const canHeal = needsHeal && endurance >= REST_COST;

  const healMut = useMutation({
    mutationFn: () => characterApi.rest(),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['character'] }),
  });

  const { data: monsters, isLoading } = useQuery({
    queryKey: ['monsters'],
    queryFn: combatApi.monsters,
  });

  const { data: zones } = useQuery({
    queryKey: ['zones'],
    queryFn: combatApi.zones,
  });

  const { data: history } = useQuery({
    queryKey: ['combatHistory'],
    queryFn: combatApi.history,
  });

  const startCooldown = useCallback(() => {
    setCooldown(true);
    setTimeout(() => setCooldown(false), 1500);
  }, []);

  const fight = useMutation({
    mutationFn: (count: number = 1) => combatApi.start(selectedMonster!.id, attackType, count),
    onSuccess: (result) => {
      if (result.mode === 'multi') {
        setLastMultiResult(result as MultiCombatResult);
        setLastResult(null);
      } else {
        setLastResult(result as CombatResult);
        setLastMultiResult(null);
      }
      qc.invalidateQueries({ queryKey: ['character'] });
      qc.invalidateQueries({ queryKey: ['combatHistory'] });
      qc.invalidateQueries({ queryKey: ['questsActive'] });
      qc.invalidateQueries({ queryKey: ['materialsInventory'] });
      startCooldown();
    },
    onError: (err: Error) => { toast.error(err.message); startCooldown(); },
  });

  if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement des monstres…</div>;

  // Group monsters by zone
  const monstersByZone = new Map<string, Monster[]>();
  for (const m of (monsters ?? [])) {
    const zone = (m as any).zone ?? 'marais';
    const list = monstersByZone.get(zone) ?? [];
    list.push(m);
    monstersByZone.set(zone, list);
  }

  const ZONE_LABELS: Record<string, { name: string; emoji: string }> = {
    marais: { name: 'Les Marais', emoji: '🌿' },
    egouts: { name: 'Les Égouts', emoji: '🕳️' },
    desert: { name: 'Le Désert', emoji: '🏜️' },
  };

  // Locked zones (zones not in monsters response = locked)
  const lockedZones = (zones ?? []).filter((z: any) => !z.unlocked);

  return (
    <div>
      <h2 style={{ margin: '0 0 1rem', color: '#f4c94e', fontSize: 20 }}>⚔️ Combat</h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '1rem' }}>
        {/* Choix monstre par zone */}
        <div>
          {Array.from(monstersByZone.entries()).map(([zone, zoneMonsters]) => {
            const info = ZONE_LABELS[zone] ?? { name: zone, emoji: '📍' };
            return (
              <div key={zone} style={{ marginBottom: '1rem' }}>
                <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#9ca3af' }}>
                  {info.emoji} {info.name}
                </p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {zoneMonsters
                    .sort((a, b) => a.minLevel - b.minLevel)
                    .map(m => (
                    <MonsterCard
                      key={m.id}
                      m={m}
                      selected={selectedMonster?.id === m.id}
                      onSelect={() => setSelectedMonster(m)}
                      playerLevel={playerLevel}
                    />
                  ))}
                </div>
              </div>
            );
          })}

          {/* Zones verrouillées */}
          {lockedZones.map((z: any) => (
            <div key={z.id} className="card" style={{ marginBottom: '0.5rem', opacity: 0.4, textAlign: 'center', padding: '1rem' }}>
              <Lock size={16} color="#6b7a99" style={{ display: 'inline', marginRight: 6 }} />
              <span style={{ fontSize: 13, color: '#6b7a99' }}>
                {z.emoji} {z.name} — Complétez l'arc précédent pour débloquer
              </span>
            </div>
          ))}
        </div>

        {/* Panneau droite */}
        <div>
          {/* Type d'attaque */}
          <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}>
            Type d'attaque
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: '1rem' }}>
            {ATTACK_TYPES.map(a => (
              <div
                key={a.id}
                className={`card card-hover ${attackType === a.id ? 'card-gold' : ''}`}
                onClick={() => setAttackType(a.id)}
                style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}
              >
                <span style={{ fontSize: 18 }}>{a.emoji}</span>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 13, color: attackType === a.id ? '#f4c94e' : '#dce4f0' }}>{a.label}</div>
                  <div style={{ fontSize: 11, color: '#6b7a99' }}>{a.stat}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Soins rapide */}
          {needsHeal && (
            <button
              className="btn btn-ghost"
              style={{ width: '100%', marginBottom: 8, fontSize: 12, display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center', opacity: canHeal ? 1 : 0.5 }}
              disabled={healMut.isPending || !canHeal}
              onClick={() => healMut.mutate()}
            >
              <Heart size={12} color="#e84040" />
              {healMut.isPending ? 'Soins…' : `Soins (+50% PV, ${REST_COST}⚡)`}
              <span style={{ color: '#6b7a99', fontSize: 11 }}>— {char!.hpCurrent}/{char!.hpMax} PV</span>
            </button>
          )}

          {/* Coût endurance */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginBottom: 6, fontSize: 12, color: canFight ? '#5ba4f5' : '#e84040' }}>
            <Zap size={12} /> Coût : {COMBAT_COST} endurance — Disponible : {endurance}
            {canFight && <span style={{ color: '#6b7a99' }}>({Math.floor(endurance / COMBAT_COST)} combats)</span>}
          </div>

          {/* Boutons combattre */}
          <div style={{ display: 'flex', gap: 6 }}>
            {[1, 5, 10].map(n => (
              <button
                key={n}
                className="btn btn-red"
                style={{ flex: n === 1 ? 2 : 1, fontSize: n === 1 ? 14 : 12, padding: '0.75rem 0.5rem', opacity: canFight && !cooldown ? 1 : 0.5 }}
                disabled={!selectedMonster || fight.isPending || !canFight || cooldown}
                onClick={() => fight.mutate(n)}
              >
                {fight.isPending ? (
                  <span><Swords size={14} style={{ display: 'inline', marginRight: 4 }} />Combat…</span>
                ) : (
                  n === 1
                    ? <span>⚔️ Combat ({COMBAT_COST}⚡)</span>
                    : <span>×{n} ({COMBAT_COST * n}⚡)</span>
                )}
              </button>
            ))}
          </div>

          {fight.isError && (
            <p style={{ color: '#e84040', fontSize: 12, marginTop: 8 }}>{(fight.error as Error).message}</p>
          )}

          {/* Historique récent */}
          {history && history.length > 0 && (
            <div style={{ marginTop: '1rem' }}>
              <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase', display:'flex', alignItems:'center', gap:4 }}>
                <Clock size={11} /> Historique récent
              </p>
              <div className="card" style={{ padding: '0.75rem' }}>
                {history.slice(0, 10).map(h => <HistoryEntry key={h.id} h={h} />)}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Résultat du dernier combat */}
      {lastMultiResult && <MultiCombatView result={lastMultiResult} />}
      {lastResult && <CombatLogView result={lastResult} />}
    </div>
  );
}
