import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '../api/client';
import { Trophy, Lock, CheckCircle, Gift, Star, Coins } from 'lucide-react';

const CATEGORY_LABELS: Record<string, { label: string; emoji: string }> = {
  combat: { label: 'Combat', emoji: '⚔️' },
  progression: { label: 'Progression', emoji: '⭐' },
  zones: { label: 'Zones', emoji: '🗺️' },
  economy: { label: 'Économie', emoji: '💰' },
  equipment: { label: 'Équipement', emoji: '🔨' },
};

const TIER_COLORS: Record<string, string> = {
  bronze: '#cd7f32',
  silver: '#c0c0c0',
  gold: '#f4c94e',
};

interface AchievementProgress {
  id: string;
  key: string;
  name: string;
  description: string;
  category: string;
  tier: string;
  criteriaType: string;
  criteriaValue: number;
  rewardGold: number;
  rewardTitle: string | null;
  progress: number;
  unlocked: boolean;
  unlockedAt: string | null;
  claimed: boolean;
  percentage: number;
}

function AchievementCard({ a }: { a: AchievementProgress }) {
  const qc = useQueryClient();

  const claimMut = useMutation({
    mutationFn: () => api.post(`/achievements/claim/${a.id}`),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['achievements'] });
      qc.invalidateQueries({ queryKey: ['character'] });
    },
  });

  const tierColor = TIER_COLORS[a.tier] ?? '#6b7a99';
  const canClaim = a.unlocked && !a.claimed;

  return (
    <div
      className={`card ${a.unlocked ? 'card-gold' : ''}`}
      style={{ padding: '0.75rem 1rem', opacity: a.unlocked ? 1 : 0.7 }}
    >
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
        {/* Icon */}
        <div style={{
          width: 36, height: 36, borderRadius: 8,
          background: a.unlocked ? tierColor + '22' : '#1e2535',
          border: `2px solid ${a.unlocked ? tierColor : '#2a3448'}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          {a.claimed ? <CheckCircle size={18} color="#3ddc84" />
            : a.unlocked ? <Trophy size={18} color={tierColor} />
            : <Lock size={16} color="#3a4560" />
          }
        </div>

        {/* Content */}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
            <span style={{ fontWeight: 700, fontSize: 13, color: a.unlocked ? tierColor : '#6b7a99' }}>
              {a.name}
            </span>
            <span style={{
              fontSize: 9, padding: '1px 5px', borderRadius: 4,
              background: tierColor + '22', color: tierColor, fontWeight: 700,
              textTransform: 'uppercase',
            }}>
              {a.tier}
            </span>
          </div>
          <p style={{ margin: 0, fontSize: 11, color: '#6b7a99' }}>{a.description}</p>

          {/* Progress bar */}
          {!a.claimed && (
            <div style={{ marginTop: 6 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#6b7a99', marginBottom: 2 }}>
                <span>{a.progress} / {a.criteriaValue}</span>
                <span>{a.percentage}%</span>
              </div>
              <div style={{ background: '#1e2535', borderRadius: 3, height: 4, overflow: 'hidden' }}>
                <div style={{
                  width: `${a.percentage}%`, height: '100%',
                  background: a.unlocked ? tierColor : '#5ba4f5',
                  borderRadius: 3, transition: 'width 0.3s',
                }} />
              </div>
            </div>
          )}

          {/* Rewards */}
          <div style={{ display: 'flex', gap: 10, marginTop: 6, fontSize: 10, color: '#6b7a99' }}>
            {a.rewardGold > 0 && (
              <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
                <Coins size={9} color="#f4c94e" /> {a.rewardGold} or
              </span>
            )}
            {a.rewardTitle && (
              <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
                <Star size={9} color="#a78bfa" /> Titre : {a.rewardTitle}
              </span>
            )}
          </div>

          {/* Claim button */}
          {canClaim && (
            <button
              className="btn btn-gold"
              style={{ marginTop: 6, fontSize: 11, padding: '0.2rem 0.75rem' }}
              disabled={claimMut.isPending}
              onClick={() => claimMut.mutate()}
            >
              <Gift size={12} style={{ display: 'inline', marginRight: 4 }} />
              {claimMut.isPending ? 'Réclamation…' : 'Réclamer'}
            </button>
          )}
          {a.claimed && (
            <div style={{ marginTop: 4, fontSize: 10, color: '#3ddc84', display: 'flex', alignItems: 'center', gap: 4 }}>
              <CheckCircle size={10} /> Réclamé
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export function AchievementsPage() {
  const { data: achievements, isLoading } = useQuery({
    queryKey: ['achievements'],
    queryFn: () => api.get<AchievementProgress[]>('/achievements/me'),
  });

  if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement…</div>;
  if (!achievements) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Aucun succès</div>;

  // Group by category
  const categories = new Map<string, AchievementProgress[]>();
  for (const a of achievements) {
    const list = categories.get(a.category) ?? [];
    list.push(a);
    categories.set(a.category, list);
  }

  const totalUnlocked = achievements.filter(a => a.unlocked).length;
  const totalClaimed = achievements.filter(a => a.claimed).length;
  const claimable = achievements.filter(a => a.unlocked && !a.claimed).length;

  return (
    <div>
      <h2 style={{ margin: '0 0 0.5rem', color: '#f4c94e', fontSize: 20 }}>🏆 Succès</h2>

      {/* Summary */}
      <div className="card" style={{ marginBottom: '1rem', display: 'flex', gap: 24, padding: '0.75rem 1rem' }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: '#f4c94e' }}>{totalUnlocked}</div>
          <div style={{ fontSize: 10, color: '#6b7a99' }}>Débloqués</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: '#3ddc84' }}>{totalClaimed}</div>
          <div style={{ fontSize: 10, color: '#6b7a99' }}>Réclamés</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: '#dce4f0' }}>{achievements.length}</div>
          <div style={{ fontSize: 10, color: '#6b7a99' }}>Total</div>
        </div>
        {claimable > 0 && (
          <div style={{ textAlign: 'center', marginLeft: 'auto' }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: '#f4c94e' }}>🎁 {claimable} à réclamer !</div>
          </div>
        )}
      </div>

      {/* Categories */}
      {Array.from(categories.entries()).map(([cat, achs]) => {
        const info = CATEGORY_LABELS[cat] ?? { label: cat, emoji: '📋' };
        return (
          <div key={cat} style={{ marginBottom: '1.5rem' }}>
            <p style={{ margin: '0 0 0.5rem', fontSize: 13, fontWeight: 700, color: '#9ca3af' }}>
              {info.emoji} {info.label}
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {achs
                .sort((a, b) => {
                  const tierOrder = { bronze: 0, silver: 1, gold: 2 };
                  return (tierOrder[a.tier as keyof typeof tierOrder] ?? 0) - (tierOrder[b.tier as keyof typeof tierOrder] ?? 0);
                })
                .map(a => <AchievementCard key={a.id} a={a} />)
              }
            </div>
          </div>
        );
      })}
    </div>
  );
}
