import React, { useState, useEffect } from 'react';
import { Project } from '../types';
import { Icons } from '../components/IconSet';
import { dbService } from '../services/DatabaseService';
import { authService } from '../services/AuthService';
import { DiscordUser } from '../types';
import CreateProjectModal from '../components/CreateProjectModal';

interface ProjectsProps {
    onSelectProject?: (id: string) => void;
}

const StatusBadge = ({ status, hiring }: { status: Project['status'], hiring: boolean }) => {
  const styles = {
    'active': 'bg-accentInfo/10 text-accentInfo border-accentInfo/20',
    'recruiting': 'bg-accentSuccess/10 text-accentSuccess border-accentSuccess/20',
    'private': 'bg-textMuted/10 text-textMuted border-textMuted/20',
    'completed': 'bg-textMuted/10 text-textMuted border-textMuted/20',
  };

  const labels = {
    'active': 'Aktives Geschäft',
    'recruiting': 'Offener Story-Arc',
    'private': 'Privat / Versteckt',
    'completed': 'Archiviert'
  };

  return (
    <div className="flex gap-2">
      <span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded-full border ${styles[status]}`}>
        {labels[status]}
      </span>
      {hiring && (
        <span className="text-[10px] uppercase font-bold px-2 py-0.5 rounded-full border bg-purple-500/10 text-purple-400 border-purple-500/20 animate-pulse">
          Stellen
        </span>
      )}
    </div>
  );
};

const VentureCard = ({ project, onClick }: { project: Project, onClick?: () => void }) => (
  <div 
    onClick={onClick}
    className="bg-surface border border-border rounded-xl p-5 hover:border-accentInfo/40 transition-all duration-200 hover:shadow-card group flex flex-col h-full relative overflow-hidden cursor-pointer"
  >
    {/* Background accent for certain types */}
    {project.category === 'Black Market' && (
      <div className="absolute top-0 right-0 w-20 h-20 bg-red-900/10 blur-xl rounded-full -mr-10 -mt-10 pointer-events-none" />
    )}

    <div className="flex justify-between items-start mb-3 relative z-10">
      <div className={`text-xs font-mono px-2 py-1 rounded border border-white/5 ${
        project.category === 'Story Arc' ? 'bg-orange-500/10 text-orange-400' :
        project.category === 'Black Market' ? 'bg-red-500/10 text-red-400' :
        'bg-surfaceHighlight text-textMuted'
      }`}>
        {project.category}
      </div>
      <StatusBadge status={project.status} hiring={project.hiring} />
    </div>

    <div className="flex items-center gap-2 mb-1 relative z-10">
      {project.logoUrl ? (
        <img
          src={project.logoUrl}
          alt={`${project.title} Logo`}
          className="w-12 h-12 rounded border border-white/10 object-cover"
        />
      ) : (
        <div className="w-12 h-12 rounded bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center text-xs font-bold text-textMuted">
          {project.title.charAt(0)}
        </div>
      )}
      <h3 className="text-lg font-bold text-textMain group-hover:text-accentInfo transition-colors">
        {project.title}
      </h3>
    </div>
    
    <div className="flex items-center gap-2 mb-4 text-xs text-textMuted relative z-10">
      <span>Inhaber</span>
      <span className="text-textMain font-medium bg-white/5 px-1.5 py-0.5 rounded flex items-center gap-1.5">
        <div className="w-3 h-3 rounded-full bg-gradient-to-tr from-accentInfo to-blue-400"></div>
        {project.owner}
      </span>
    </div>
    
    <p className="text-sm text-textMuted mb-6 flex-1 leading-relaxed relative z-10">
      {project.description}
    </p>

    <div className="pt-4 border-t border-white/5 space-y-3 relative z-10">
      {/* Reputation / Progress Bar */}
      <div>
        <div className="flex justify-between text-xs mb-1">
          <span className="text-textMuted">
            {project.category === 'Story Arc' ? 'Story Fortschritt' : 'Ruf'}
          </span>
          <span className="font-mono text-textMain">{project.progress}%</span>
        </div>
        <div className="h-1 bg-surfaceHighlight rounded-full overflow-hidden">
          <div 
            className={`h-full rounded-full ${
              project.category === 'Black Market' ? 'bg-red-500/70' : 'bg-accentInfo/70'
            }`} 
            style={{ width: `${project.progress}%` }} 
          />
        </div>
      </div>

      <div className="flex items-center justify-between text-xs text-textMuted">
         <div className="flex items-center gap-2">
            <Icons.Users className="w-3 h-3" />
            <span>{project.employees.length} Mitglieder</span>
         </div>
         <div className="flex gap-3">
             {project.shopCatalog && project.shopCatalog.length > 0 && (
                 <div className="flex items-center gap-1 text-accentInfo">
                    <Icons.ShoppingBag className="w-3 h-3" />
                    <span className="font-bold">Shop</span>
                 </div>
             )}
             {project.foundedDate && <span>Gegr. {project.foundedDate}</span>}
         </div>
      </div>
    </div>
  </div>
);

const Projects: React.FC<ProjectsProps> = ({ onSelectProject }) => {
  const [filter, setFilter] = useState<'all' | Project['status']>('all');
  const [projects, setProjects] = useState<Project[]>([]);
  const [user, setUser] = useState<DiscordUser | null>(null);
  const [loading, setLoading] = useState(true);
  const [showCreateForm, setShowCreateForm] = useState(false);

  // Subscribe to auth and data updates
  useEffect(() => {
    const unsubAuth = authService.subscribe(setUser);
    const unsubDb = dbService.subscribe(() => {
      setProjects(dbService.getProjects());
    });

    // Initial data load
    setProjects(dbService.getProjects());
    setLoading(false);

    return () => {
      unsubAuth();
      unsubDb();
    };
  }, []);

  const filteredProjects = projects.filter(p =>
    filter === 'all' ? true : p.status === filter
  );

  // Berechne den Namen des verknüpften Charakters für die Modal-Anzeige
  const getLinkedPlayerName = () => {
    if (!user) return null;
    if (user.linkedPlayerUuid) {
      const linkedPlayer = dbService.getPlayer(user.linkedPlayerUuid);
      return linkedPlayer ? linkedPlayer.username : null;
    }
    return null;
  };

  const linkedPlayerName = getLinkedPlayerName();

  const createProject = async (projectData: { title: string; description: string; category: Project['category'] }) => {
    if (!user) {
      throw new Error('Nicht eingeloggt');
    }

    console.log('Creating project with data:', projectData);
    console.log('User will be resolved to Minecraft name in backend');

    const success = await dbService.createProject(projectData);

    if (!success) {
      throw new Error('Fehler beim Erstellen des Projekts');
    }
  };

  const handleCreateClick = () => {
    if (!user) {
      // Redirect to login or show message
      alert('Sie müssen sich zuerst anmelden, um ein Unternehmen zu erstellen.');
      authService.login();
      return;
    }
    setShowCreateForm(true);
  };

  const tabs = [
    { id: 'all', label: 'Alle Unternehmen' },
    { id: 'active', label: 'Aktive Firmen' },
    { id: 'recruiting', label: 'Story Arcs' },
    { id: 'private', label: 'Privat' },
  ];

  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-2">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
           <h1 className="text-3xl font-bold mb-1">Unternehmen & Projekte</h1>
           <p className="text-textMuted">Spielergeführte Firmen, aktive Rollenspiel-Stränge und Dienstleister.</p>
        </div>
        <button
          onClick={handleCreateClick}
          className="bg-textMain text-background hover:bg-white font-medium px-4 py-2 rounded-lg text-sm transition-colors flex items-center gap-2"
        >
          <Icons.ShoppingBag className="w-4 h-4" />
          <span>+ Firma registrieren</span>
        </button>
      </div>

      {/* Filter Tabs */}
      <div className="flex flex-wrap gap-2 border-b border-border pb-1">
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => setFilter(tab.id as any)}
            className={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors relative top-[1px] ${
              filter === tab.id 
                ? 'text-textMain border-b-2 border-accentInfo bg-surfaceHighlight/20' 
                : 'text-textMuted hover:text-textMain hover:bg-white/5'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
        {filteredProjects.map(project => (
          <div key={project.id}>
            <VentureCard
              project={project}
              onClick={() => onSelectProject && onSelectProject(project.id)}
            />
          </div>
        ))}
      </div>
      
      {filteredProjects.length === 0 && (
        <div className="text-center py-20 text-textMuted">
          <p>Keine Unternehmen in dieser Kategorie gefunden.</p>
        </div>
      )}

      {/* Create Project Modal */}
      <CreateProjectModal
        isOpen={showCreateForm}
        onClose={() => setShowCreateForm(false)}
        onCreate={createProject}
        linkedPlayerName={linkedPlayerName}
      />
    </div>
  );
};

export default Projects;