import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Player } from '../types';
import { dbService } from '../services/DatabaseService';
import { authService } from '../services/AuthService';
import InventoryGrid from '../components/InventoryGrid';
import EditModal from '../components/EditModal';
import { Icons } from '../components/IconSet';

// Helper function to get advancement icon path
const getAdvancementIconPath = (advancementId: string): string => {
  // Remove 'minecraft:' prefix if present
  const cleanId = advancementId.replace('minecraft:', '');
  
  // Map advancement ID to icon path
  return `/assets/advancement/${cleanId}.png`;
};

// Helper function to get advancement category
const getAdvancementCategory = (advancementId: string): string => {
  const cleanId = advancementId.replace('minecraft:', '');
  
  if (cleanId.startsWith('adventure/')) return 'Abenteuer';
  if (cleanId.startsWith('nether/')) return 'Nether';
  if (cleanId.startsWith('end/')) return 'End';
  if (cleanId.startsWith('husbandry/')) return 'Tierhaltung';
  if (cleanId.startsWith('story/')) return 'Geschichte';
  
  return 'Sonstige';
};

// Helper function to organize advancements by category
const organizeAdvancementsByCategory = (advancements: any[]) => {
  const categories: { [key: string]: any[] } = {};
  
  advancements.forEach(advancement => {
    const category = getAdvancementCategory(advancement.id);
    if (!categories[category]) {
      categories[category] = [];
    }
    categories[category].push(advancement);
  });
  
  return categories;
};

const PlayerProfile: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [player, setPlayer] = useState<Player | null>(null);
  const [currentUser, setCurrentUser] = useState(authService.getUser());

  // Edit State
  const [isEditStoryOpen, setIsEditStoryOpen] = useState(false);
  const [isEditTagsOpen, setIsEditTagsOpen] = useState(false);
  const [isEditOrgOpen, setIsEditOrgOpen] = useState(false);
  const [ownedProjects, setOwnedProjects] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<'story' | 'stats' | 'projects'>('story');

  const handleNavigateToOrg = (orgId: string) => {
    const org = dbService.getOrg(orgId);
    if (org?.type === 'City') {
      navigate(`/cities/${orgId}`);
    } else {
      navigate(`/organizations/${orgId}`);
    }
  };

  const handleNavigateToProject = (projectId: string) => {
    navigate(`/projects/${projectId}`);
  };

  // Is this the logged-in user's profile?
  const isOwner = currentUser?.linkedPlayerUuid === player?.uuid;
  const playerOrg = player ? dbService.getOrg(player.organizationId || '') : null;

  // Check if player is already linked to anyone in our mock/real DB logic
  // Since the Player object doesn't expose 'discordId' publicly in types yet (it's hidden in DB),
  // we use a heuristic or add it. For now, we assume if currentUser has NO link, they can claim.
  const canClaim = !!currentUser && !currentUser.linkedPlayerUuid && !isOwner;

  useEffect(() => {
    if (!id) {
      navigate('/players');
      return;
    }

    // Load player data - try to fetch from API first, fallback to cache
    const loadPlayerData = async () => {
      try {
        const playerData = await dbService.fetchPlayer(id);
        if (playerData) {
          setPlayer(playerData);
        } else {
          // Fallback to cache if API fails
          const cachedPlayer = dbService.getPlayer(id);
          if (cachedPlayer) {
            setPlayer(cachedPlayer);
          } else {
            navigate('/players');
            return;
          }
        }
      } catch (error) {
        console.error('Error loading player data:', error);
        // Fallback to cache
        const cachedPlayer = dbService.getPlayer(id);
        if (cachedPlayer) {
          setPlayer(cachedPlayer);
        } else {
          navigate('/players');
          return;
        }
      }
      setLoading(false);
    };

    loadPlayerData();
  }, [id, navigate]);

  useEffect(() => {
    if (!player) return;

    console.log(player);

    // Load owned projects
    const allProjects = dbService.getProjects();
    const playerProjects = allProjects.filter(p => p.owner === player.username);
    setOwnedProjects(playerProjects);

    // Subscribe to auth to show/hide edit buttons
    const unsub = authService.subscribe(u => setCurrentUser(u));
    return unsub;
  }, [player]);

  if (loading || !player) {
    return (
      <div className="max-w-4xl mx-auto animate-in slide-in-from-right-4 duration-300">
        <div className="flex justify-center py-20">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accentInfo"></div>
        </div>
      </div>
    );
  }

  const handleSaveStory = (newStory: string) => {
    // Update local DB
    dbService.updatePlayer(player.uuid, { storyMarkdown: newStory });
    // Update local state
    setPlayer(prev => ({ ...prev, storyMarkdown: newStory }));
  };

  const handleSaveTags = async (tagsString: string) => {
    const tags = tagsString.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
    // Update via API
    const response = await fetch(`https://vollidioten.ceraticsoft.de/api/players/${player.uuid}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ tags })
    });

    if (response.ok) {
      // Update local state
      setPlayer(prev => ({ ...prev, tags }));
    } else {
      alert('Fehler beim Aktualisieren der Tags');
    }
  };

  const handleSaveOrganization = async (orgId: string) => {
    const response = await fetch(`https://vollidioten.ceraticsoft.de/api/players/${player.uuid}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ organizationId: orgId || null })
    });

    if (response.ok) {
      // Update local state
      setPlayer(prev => ({ ...prev, organizationId: orgId || undefined }));
    } else {
      alert('Fehler beim Aktualisieren der Zugehörigkeit');
    }
  };

  const handleClaim = async () => {
      if (confirm(`Möchtest du den Charakter "${player.username}" mit deinem Discord-Account verknüpfen?`)) {
          const success = await dbService.linkPlayer(player.uuid);
          if (success) {
              // Force refresh auth to get updated linkedPlayerUuid
              await authService.checkSession();
              alert("Erfolgreich verknüpft! Du kannst nun Bearbeitungen vornehmen.");
          } else {
              alert("Fehler beim Verknüpfen. Bitte Backend Logs prüfen.");
          }
      }
  };

  // Simple markdown renderer replacement for demo purposes
  const renderMarkdown = (text: string) => {
    return text.split('\n').map((line, i) => {
      if (line.startsWith('# ')) return <h1 key={i} className="text-2xl font-bold mt-6 mb-3 text-textMain border-b border-border pb-2">{line.replace('# ', '')}</h1>;
      if (line.startsWith('### ')) return <h3 key={i} className="text-lg font-semibold mt-4 mb-2 text-textMain">{line.replace('### ', '')}</h3>;
      if (line.startsWith('> ')) return <blockquote key={i} className="border-l-2 border-accentInfo pl-4 italic text-textMuted my-4 bg-surfaceHighlight/30 py-2 pr-2 rounded-r">{line.replace('> ', '')}</blockquote>;
      if (line.startsWith('* ')) return <li key={i} className="ml-4 list-disc text-textMuted mb-1 marker:text-accentInfo">{line.replace('* ', '')}</li>;
      return <p key={i} className="mb-2 text-textMuted leading-relaxed">{line}</p>;
    });
  };

    console.log(player);
  return (
    <div className="max-w-8xl mx-auto animate-in slide-in-from-right-4 duration-300">
      <div className="flex justify-between items-center mb-6">
        <button onClick={() => navigate('/players')} className="flex items-center gap-2 text-sm text-textMuted hover:text-textMain transition-colors">
            <span className="text-lg">←</span> Zurück zur Liste
        </button>
        {canClaim && (
             <button 
                onClick={handleClaim}
                className="text-xs bg-accentInfo hover:bg-accentInfo/80 text-white px-3 py-1.5 rounded flex items-center gap-2 transition-colors shadow-glow animate-pulse"
             >
                 <Icons.Shield className="w-3 h-3" />
                 Charakter beanspruchen (Test)
             </button>
        )}
      </div>

      {/* Header */}
      <div className="bg-surface border border-border rounded-xl p-6 shadow-card mb-6 relative overflow-hidden">
        {isOwner && (
            <div className="absolute top-0 right-0 bg-accentInfo text-white text-xs font-bold px-3 py-1 rounded-bl-xl shadow-lg flex items-center gap-1 z-10">
                <Icons.Edit className="w-3 h-3" /> Dein Profil
            </div>
        )}
        
        <div className="flex flex-col md:flex-row gap-6 items-start md:items-center">
          <div className="w-20 h-20 rounded-lg flex items-center justify-center shadow-inner shrink-0 relative group">
             <img src={"https://minotar.net/armor/bust/"+player.username+"/500.png"} className="rounded-lg shadow-lg"></img>
             {isOwner && (
                 <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center rounded-lg cursor-pointer">
                     <span className="text-[10px] text-white font-bold">Ändern</span>
                 </div>
             )}
          </div>
          
          <div className="flex-1">
            <div className="flex flex-wrap items-center gap-3 mb-1">
              <h1 className="text-3xl font-bold text-textMain tracking-tight">{player.username}</h1>
              {player.isOnline && (
                <span className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-accentSuccess/10 border border-accentSuccess/20 text-accentSuccess text-xs font-medium">
                  <span className="w-1.5 h-1.5 rounded-full bg-accentSuccess animate-pulse"></span>
                  Online
                </span>
              )}
            </div>
            
            <div className="flex flex-wrap gap-2 mb-4">
              {(player.tags || []).map(tag => (
                <span key={tag} className="text-xs px-2 py-1 bg-surfaceHighlight rounded text-textMuted border border-white/5 font-mono">
                  {tag}
                </span>
              ))}
              {isOwner && (
                  <button
                    onClick={() => setIsEditTagsOpen(true)}
                    className="text-xs px-2 py-1 border border-dashed border-textMuted/50 text-textMuted hover:text-white hover:border-white/50 rounded transition-colors"
                  >
                      + Tag bearbeiten
                  </button>
              )}
            </div>

            <div className="flex gap-6 text-sm">
               <div className="flex items-center gap-2 text-textMuted">
                  <Icons.Terminal className="w-4 h-4" />
                  <span className="font-mono text-textMain">
                    {player.minecraftStats?.statistics?.general?.["minecraft:play_time"]
                      ? `${Math.round((player.minecraftStats.statistics.general["minecraft:play_time"] || 0) / 20 / 3600)}h`
                      : '0h'
                    }
                  </span>
               </div>
               <div className="flex items-center gap-2 text-textMuted">
                  <Icons.Box className="w-4 h-4" />
                  <span className="font-mono text-textMain">
                    Lvl {player.minecraftStats?.char?.xpLevel || player.minecraftStats?.level || 1}
                  </span>
               </div>
               {player.minecraftStats && player.minecraftStats.char && player.minecraftStats.statistics && (
                 <>
                   <div className="flex items-center gap-2 text-textMuted">
                     <Icons.Shield className="w-4 h-4" />
                     <span className="font-mono text-textMain">
                       {player.minecraftStats.char.health}/{player.minecraftStats.char.maxHealth} HP
                     </span>
                   </div>
                   <div className="flex items-center gap-2 text-textMuted">
                     <Icons.Coins className="w-4 h-4" />
                     <span className="font-mono text-textMain">
                       {player.minecraftStats.char.foodLevel}/20 Food
                     </span>
                   </div>
                   <div className="flex items-center gap-2 text-textMuted">
                     <Icons.Hammer className="w-4 h-4" />
                     <span className="font-mono text-textMain">
                       {player.minecraftStats.statistics.general?.["minecraft:mob_kills"] || 0} Kills
                     </span>
                   </div>
                 </>
               )}
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left Col: Inventory & Org */}
        <div className="lg:col-span-1 space-y-6">          
          
          <div className="bg-surface border border-border rounded-xl p-4 shadow-card">
            <h3 className="text-xs font-bold uppercase tracking-wider text-textMuted mb-3">Zugehörigkeit</h3>
            {playerOrg ? (
              <div
                onClick={() => handleNavigateToOrg(playerOrg.id)}
                className="flex items-center gap-3 cursor-pointer hover:bg-surfaceHighlight/50 -m-1 p-1 rounded transition-colors group"
              >
                <div className={`w-10 h-10 rounded flex items-center justify-center text-lg font-bold border border-white/5 ${
                  playerOrg.type === 'City' ? 'bg-blue-500/10 text-blue-400' :
                  playerOrg.type === 'Guild' ? 'bg-amber-500/10 text-amber-400' :
                  'bg-purple-500/10 text-purple-400'
                }`}>
                  {playerOrg.name.charAt(0)}
                </div>
                <div>
                  <div className="text-sm font-medium text-textMain group-hover:text-accentInfo transition-colors">
                    {playerOrg.name}
                  </div>
                  <div className="text-xs text-textMuted">
                    {player.stats?.role || 'Unbekannt'} • Klick zum Anzeigen
                  </div>
                </div>
              </div>
            ) : (
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded flex items-center justify-center text-lg font-bold border border-white/5 bg-surfaceHighlight text-textMuted">
                  <Icons.Map className="w-5 h-5 opacity-50" />
                </div>
                <div>
                  <div className="text-sm font-medium text-textMain">Freiberufler</div>
                  <div className="text-xs text-textMuted">Keine Zugehörigkeit</div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Right Col: Tabs */}
        <div className="lg:col-span-2">
          {/* Tab Navigation */}
          <div className="bg-surface border border-border rounded-xl shadow-card mb-6">
            <div className="flex border-b border-border">
              <button
                onClick={() => setActiveTab('story')}
                className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
                  activeTab === 'story'
                    ? 'text-accentInfo border-b-2 border-accentInfo bg-accentInfo/5'
                    : 'text-textMuted hover:text-textMain hover:bg-surfaceHighlight/50'
                }`}
              >
                <Icons.Scroll className="w-4 h-4 inline mr-2" />
                Charakter-Journal
              </button>
              {player.minecraftStats && (
                <button
                  onClick={() => setActiveTab('stats')}
                  className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
                    activeTab === 'stats'
                      ? 'text-accentInfo border-b-2 border-accentInfo bg-accentInfo/5'
                      : 'text-textMuted hover:text-textMain hover:bg-surfaceHighlight/50'
                  }`}
                >
                  <Icons.Terminal className="w-4 h-4 inline mr-2" />
                  Minecraft Stats
                </button>
              )}
              {ownedProjects.length > 0 && (
                <button
                  onClick={() => setActiveTab('projects')}
                  className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
                    activeTab === 'projects'
                      ? 'text-accentInfo border-b-2 border-accentInfo bg-accentInfo/5'
                      : 'text-textMuted hover:text-textMain hover:bg-surfaceHighlight/50'
                  }`}
                >
                  <Icons.ShoppingBag className="w-4 h-4 inline mr-2" />
                  Projekte ({ownedProjects.length})
                </button>
              )}
            </div>

            {/* Tab Content */}
            <div className="p-6">
              {activeTab === 'story' && (
                <div className="min-h-[400px]">
                  <div className="flex items-center justify-between mb-6">
                    <div className="flex items-center gap-3">
                      <span className="text-xs text-textMuted font-mono">Markdown</span>
                      {isOwner && (
                        <button
                          onClick={() => setIsEditStoryOpen(true)}
                          className="flex items-center gap-1.5 text-xs bg-surfaceHighlight hover:bg-white/10 border border-white/10 px-2 py-1 rounded transition-colors text-white"
                        >
                          <Icons.Edit className="w-3 h-3" /> Bearbeiten
                        </button>
                      )}
                    </div>
                  </div>
                  <div className="prose-custom text-sm">
                    {renderMarkdown(player.storyMarkdown || '')}
                  </div>
                </div>
              )}

              {activeTab === 'stats' && player.minecraftStats && (
                <div className="space-y-6">
                  {/* Last Sync */}
                  <div className="p-3 bg-surfaceHighlight/30 rounded-lg border border-border">
                    <div className="text-sm text-textMuted mb-1">Letzte Synchronisation</div>
                    <div className="text-sm font-mono text-textMain">
                      {new Date(player.minecraftStats.lastSync).toLocaleString('de-DE', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                      })}
                    </div>
                  </div>

                  {/* Statistics */}
                  {player.minecraftStats.statistics && (
                    <div className="space-y-6">
                      {/* General Stats */}
                      {player.minecraftStats.statistics.general && Object.keys(player.minecraftStats.statistics.general).length > 0 && (
                        <div>
                          <h4 className="text-md font-semibold mb-3 text-textMain">Allgemein</h4>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                            {Object.entries(player.minecraftStats.statistics.general)
                              .sort(([, a], [, b]) => (b as number) - (a as number))
                              .map(([key, value]) => (
                                <div key={key} className="flex justify-between items-center p-2 bg-surfaceHighlight/20 rounded border border-white/5">
                                  <span className="text-sm text-textMuted font-mono">{key.replace('minecraft:', '')}</span>
                                  <span className="text-sm font-bold text-textMain">{value.toLocaleString()}</span>
                                </div>
                              ))}
                          </div>
                        </div>
                      )}

                      {/* Kills */}
                      {player.minecraftStats.statistics.kills && Object.keys(player.minecraftStats.statistics.kills).length > 0 && (
                        <div>
                          <h4 className="text-md font-semibold mb-3 text-textMain">Kills</h4>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                            {Object.entries(player.minecraftStats.statistics.kills)
                              .sort(([, a], [, b]) => (b as number) - (a as number))
                              .map(([key, value]) => (
                                <div key={key} className="flex justify-between items-center p-2 bg-surfaceHighlight/20 rounded border border-white/5">
                                  <span className="text-sm text-textMuted font-mono">{key.replace('minecraft:', '')}</span>
                                  <span className="text-sm font-bold text-textMain">{value}</span>
                                </div>
                              ))}
                          </div>
                        </div>
                      )}

                      {/* Killed By */}
                      {player.minecraftStats.statistics.killed_by && Object.keys(player.minecraftStats.statistics.killed_by).length > 0 && (
                        <div>
                          <h4 className="text-md font-semibold mb-3 text-textMain">Gestorben durch</h4>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                            {Object.entries(player.minecraftStats.statistics.killed_by)
                              .sort(([, a], [, b]) => (b as number) - (a as number))
                              .map(([key, value]) => (
                                <div key={key} className="flex justify-between items-center p-2 bg-surfaceHighlight/20 rounded border border-white/5">
                                  <span className="text-sm text-textMuted font-mono">{key.replace('minecraft:', '')}</span>
                                  <span className="text-sm font-bold text-textMain">{value}</span>
                                </div>
                              ))}
                          </div>
                        </div>
                      )}
                    </div>
                  )}

                  {/* Advancements */}
                  {player.minecraftStats.advancements && player.minecraftStats.advancements.length > 0 && (
                    <div>
                      <h4 className="text-md font-semibold mb-3 text-textMain">Erfolge ({player.minecraftStats.advancements.length})</h4>
                      <div className="space-y-6">
                        {Object.entries(organizeAdvancementsByCategory(player.minecraftStats.advancements))
                          .sort(([a], [b]) => a.localeCompare(b))
                          .map(([category, advancements]) => (
                            <div key={category} className="bg-surfaceHighlight/20 rounded-lg border border-white/5 p-4">
                              <div className="flex items-center gap-3 mb-3">
                                <span className="text-sm font-semibold text-accentInfo uppercase tracking-wide">{category}</span>
                                <span className="text-xs text-textMuted">({advancements.length})</span>
                              </div>
                              <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-1">
                                {advancements.map((advancement) => (
                                  <div 
                                    key={advancement.id} 
                                    className="group cursor-pointer hover:bg-white/5 p-2 rounded transition-all"
                                    title={advancement.title}
                                  >
                                    <div className="flex flex-col items-center gap-2">
                                      <div className="bg-white/5 rounded-lg flex items-center justify-center border border-white/10 group-hover:border-white/20 transition-colors">
                                        <img 
                                          src={getAdvancementIconPath(advancement.id)}
                                          alt={advancement.title}
                                          className="w-28 h-28 object-contain"
                                          onError={(e) => {
                                            // Fallback to a default icon if the specific advancement icon doesn't exist
                                            e.currentTarget.src = '/assets/advancement/advancement_categories.png';
                                          }}
                                        />
                                      </div>
                                      <div className="text-xs text-center text-textMuted font-mono truncate w-full">
                                        {advancement.id.replace('minecraft:', '').split('/')[1] || advancement.id.replace('minecraft:', '')}
                                      </div>
                                    </div>
                                  </div>
                                ))}
                              </div>
                            </div>
                          ))}
                      </div>
                    </div>
                  )}
                </div>
              )}

              {activeTab === 'projects' && ownedProjects.length > 0 && (
                <div>
                  <div className="grid grid-cols-1 gap-4">
                    {ownedProjects.map((project) => (
                      <div
                        key={project.id}
                        onClick={() => handleNavigateToProject(project.id)}
                        className="bg-surfaceHighlight/30 border border-border rounded-lg p-4 hover:border-accentInfo/50 transition-all cursor-pointer group"
                      >
                        <div className="flex justify-between items-start mb-2">
                          <h4 className="font-medium text-textMain group-hover:text-accentInfo transition-colors">
                            {project.title}
                          </h4>
                          <span className={`text-xs px-2 py-1 rounded border ${
                            project.status === 'active' ? 'bg-green-500/10 text-green-400 border-green-500/20' :
                            project.status === 'recruiting' ? 'bg-blue-500/10 text-blue-400 border-blue-500/20' :
                            'bg-gray-500/10 text-gray-400 border-gray-500/20'
                          }`}>
                            {project.category}
                          </span>
                        </div>
                        <p className="text-sm text-textMuted mb-3 line-clamp-2">
                          {project.description.split(' ').length > 50
                            ? project.description.split(' ').slice(0, 50).join(' ') + '...'
                            : project.description}
                        </p>
                        <div className="flex items-center justify-between text-xs text-textMuted">
                          <span>Gegründet: {project.foundedDate}</span>
                          <div className="flex items-center gap-2">
                            {project.shopCatalog && project.shopCatalog.length > 0 && (
                              <span className="flex items-center gap-1 text-accentInfo">
                                <Icons.ShoppingBag className="w-3 h-3" />
                                Shop ({project.shopCatalog.length})
                              </span>
                            )}
                            <span className="flex items-center gap-1">
                              <Icons.Users className="w-3 h-3" />
                              {project.employees.length + 1}
                            </span>
                          </div>
                        </div>
                        <div className="text-xs text-accentInfo mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
                          Klick zum Anzeigen →
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Modals */}
      <EditModal
        isOpen={isEditStoryOpen}
        title="Journal bearbeiten"
        initialValue={player.storyMarkdown}
        multiline={true}
        markdown={true}
        onClose={() => setIsEditStoryOpen(false)}
        onSave={handleSaveStory}
      />

      <EditModal
        isOpen={isEditTagsOpen}
        title="Tags bearbeiten"
        initialValue={player.tags.join(', ')}
        multiline={false}
        onClose={() => setIsEditTagsOpen(false)}
        onSave={handleSaveTags}
      />
    </div>
  );
};

export default PlayerProfile;