/**
 * Dialogue Modal Component
 * For quest dialogues with NPC choices
 */

import React from 'react';
import { useGameStore } from '../../stores/gameStore';
import { QuestEngine } from '../../systems/QuestEngine';
import { getMusicianById } from '../../data/musicians';
import DraggableModal from '../ui/DraggableModal';
import './DialogueModal.css';

export const DialogueModal = ({ isOpen, onClose, quest, step }: any) => {
  const gameStore = useGameStore();
  const questEngine = new QuestEngine(gameStore);

  if (!quest || !step) return null;

  const npc = getMusicianById(step.npc);

  const handleChoice = (choiceIndex) => {
    questEngine.makeChoice(quest.id, choiceIndex);
    onClose();
  };

  return (
    <DraggableModal
      isOpen={isOpen}
      onClose={onClose}
      title={`💬 Conversation with ${npc?.name || 'NPC'}`}
      width={500}
      showCloseButton={false}
    >
      <div className="dialogue-content">
        {/* NPC Portrait */}
        <div className="npc-portrait">
          <div className="npc-icon">{npc?.icon || '🎵'}</div>
          <div className="npc-info">
            <h4>{npc?.name || 'Unknown'}</h4>
            <p className="npc-era">{npc?.era || 'Unknown Era'}</p>
          </div>
        </div>

        {/* Dialogue Text */}
        <div className="dialogue-box">
          <p className="dialogue-text">"{step.text}"</p>
        </div>

        {/* Choices */}
        {step.choices && step.choices.length > 0 && (
          <div className="dialogue-choices">
            <h5>Your Response:</h5>
            <div className="choices-list">
              {step.choices.map((choice, index) => (
                <button
                  key={index}
                  className="choice-button"
                  onClick={() => handleChoice(index)}
                >
                  <span className="choice-number">{index + 1}.</span>
                  <span className="choice-text">{choice.text}</span>
                  
                  {choice.reputationChange && (
                    <div className="choice-effects">
                      {Object.entries(choice.reputationChange).map(([key, value]) => {
                        const numValue = value as number;
                        return (
                          <span key={key} className={numValue > 0 ? 'positive' : 'negative'}>
                            {numValue > 0 ? '+' : ''}{numValue} {key}
                          </span>
                        );
                      })}
                    </div>
                  )}
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Quest Info */}
        <div className="quest-info">
          <p className="quest-title">{quest.title}</p>
        </div>
      </div>
    </DraggableModal>
  );
};

export default DialogueModal;