/**
 * Quest Log Component
 * Displays active and completed quests
 */

import React, { useMemo } from 'react';
import { useGameStore } from '../../stores/gameStore';
import { QuestEngine } from '../../systems/QuestEngine';
import { questlines } from '../../data/questlines';
import { musicians } from '../../data/musicians';
import DraggableModal from '../ui/DraggableModal';
import ProgressBar from '../ui/ProgressBar';
import './QuestLog.css';

export const QuestLog = ({ isOpen, onClose }: any) => {
  const { world } = useGameStore() as any;
  const questEngine = useMemo(() => new QuestEngine(useGameStore), []);
  const questDictionary = useMemo(() => {
    return questlines.reduce((acc, quest) => {
      acc[quest.id] = quest;
      return acc;
    }, {} as Record<string, any>);
  }, []);

  const challengeDictionary = useMemo(() => {
    const map = new Map<string, { title: string; summary?: string }>();
    musicians.forEach((musician) => {
      if (musician.recommendedChallenges) {
        musician.recommendedChallenges.forEach((challenge) => {
          map.set(challenge.id, { title: challenge.title, summary: challenge.summary });
        });
      }
    });
    return map;
  }, []);

  const activeQuests = world.activeQuests || [];
  const completedQuests = world.completedQuests || [];

  const renderActiveQuest = (quest) => {
    const questMeta = questDictionary[quest.id];
    const progress = questEngine.getQuestProgress(quest.id);
    const currentStep = questEngine.getCurrentStep(quest.id);
    const objective = currentStep?.objective;

    const recommendations = objective?.recommendedChallengeIds
      ? objective.recommendedChallengeIds
          .map((challengeId: string) => challengeDictionary.get(challengeId)?.title || challengeId)
          .filter(Boolean)
      : [];

    return (
      <div key={quest.id} className="quest-card active">
        <div className="quest-header">
          <h4>{quest.title}</h4>
          <span className="quest-status active-status">Active</span>
        </div>

        {questMeta?.description && (
          <p className="quest-description">{questMeta.description}</p>
        )}

        <div className="quest-step">
          <p className="step-text">{currentStep?.text || 'Continue the quest...'}</p>
          
          {currentStep?.type === 'objective' && currentStep.objective && (
            <div className="objective-tracker">
              <p className="objective-description">
                {currentStep.objective.type === 'complete_challenge' && 
                  `Complete ${currentStep.objective.count} ${currentStep.objective.genre} challenge${currentStep.objective.count > 1 ? 's' : ''}`
                }
              </p>
              <div className="objective-progress">
                {quest.progress?.[currentStep.id] || 0} / {currentStep.objective.count}
              </div>
            </div>
          )}

          {recommendations.length > 0 && (
            <p className="objective-recommendations">
              Suggested challenges: {recommendations.join(', ')}
            </p>
          )}
        </div>

        <ProgressBar
          current={progress}
          max={100}
          label="Quest Progress"
          color="#3498db"
          height={12}
        />

        <div className="quest-rewards">
          <span>🎁 Rewards on completion</span>
        </div>
      </div>
    );
  };

  const renderCompletedQuest = (questId) => {
    const questMeta = questDictionary[questId];
    return (
      <div key={questId} className="quest-card completed">
        <div className="quest-header">
          <h4>{questMeta?.title || questId}</h4>
          <span className="quest-status completed-status">✓ Completed</span>
        </div>
        {questMeta?.description && (
          <p className="quest-description">{questMeta.description}</p>
        )}
      </div>
    );
  };

  return (
    <DraggableModal
      isOpen={isOpen}
      onClose={onClose}
      title="📜 Quest Log"
      width={500}
      minimizable={true}
    >
      <div className="quest-log-content">
        {activeQuests.length > 0 && (
          <section className="quests-section">
            <h3>Active Quests ({activeQuests.length})</h3>
            <div className="quests-list">
              {activeQuests.map(renderActiveQuest)}
            </div>
          </section>
        )}

        {completedQuests.length > 0 && (
          <section className="quests-section">
            <h3>Completed Quests ({completedQuests.length})</h3>
            <div className="quests-list">
              {completedQuests.slice(-5).map(renderCompletedQuest)}
            </div>
          </section>
        )}

        {activeQuests.length === 0 && completedQuests.length === 0 && (
          <div className="empty-state">
            <p>📜 No active quests</p>
            <p>Explore the world and meet musicians to discover quests!</p>
          </div>
        )}
      </div>
    </DraggableModal>
  );
};

export default QuestLog;