import React, { FC, useMemo } from 'react';
import ArtistInsight from './ArtistInsight';

/**
 * Data required to render the quest tracker card.
 */
export interface QuestRecommendation {
  id: string;
  title: string;
  tags: string[];
  difficulty?: string;
}

export interface QuestTrackerData {
  id: string;
  title: string;
  icon?: string;
  description?: string;
  stepText?: string;
  genre?: string;
  genreId?: string;
  recommendedChallenges: QuestRecommendation[];
  progressValue: number;
  progressMax: number;
  progressPercent: number;
  artistName?: string;
  artistId?: string;
  mentorTip?: string;
  signatureAbility?: string;
  objectiveType?: string;
}

export interface QuestTrackerProps {
  /**
   * Active quest data to display in the tracker.
   */
  quest: QuestTrackerData | null;
  /**
   * Handler invoked when the player wants to open the quest log.
   */
  onOpenQuestLog: () => void;
}

/**
 * Compact quest tracker surface that highlights the current active quest,
 * next objective, and recommended challenges. Displays nothing when no quest
 * is active to avoid visual noise.
 *
 * @param quest Active quest data or null if no active quest exists.
 * @param onOpenQuestLog Callback used to open the full quest log modal.
 * @returns Quest tracker card JSX or null.
 */
const QuestTracker: FC<QuestTrackerProps> = ({ quest, onOpenQuestLog }) => {
  if (!quest) {
    return null;
  }

  const progressPercent = Math.min(100, Math.max(0, Math.round(quest.progressPercent)));
  const progressLabel = `${quest.progressValue}/${quest.progressMax}`;
  const objectiveLabel = useMemo(() => {
    if (!quest.objectiveType) {
      return null;
    }
    return quest.objectiveType
      .replace(/_/g, ' ')
      .replace(/\b\w/g, (char) => char.toUpperCase());
  }, [quest.objectiveType]);

  return (
    <div className="quest-tracker-card" aria-label={`Active quest ${quest.title}`}>
      <div className="quest-tracker-header">
        <div className="quest-tracker-title">
          <span className="quest-tracker-icon" aria-hidden="true">
            {quest.icon || '📜'}
          </span>
          <div>
            <p className="quest-tracker-label">Active Quest</p>
            <h5>{quest.title}</h5>
          </div>
        </div>
        <button
          type="button"
          className="quest-tracker-log-button"
          onClick={onOpenQuestLog}
          title="Open Quest Log"
        >
          Log
        </button>
      </div>

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

      {quest.stepText && (
        <p className="quest-tracker-step" aria-live="polite">
          {quest.stepText}
        </p>
      )}

      <div className="quest-tracker-progress">
        <div className="quest-tracker-progress-bar">
          <span style={{ width: `${progressPercent}%` }} />
        </div>
        <div className="quest-tracker-progress-meta">
          <span>{progressLabel}</span>
          <span>{progressPercent}%</span>
        </div>
      </div>

      <ArtistInsight
        artistName={quest.artistName}
        signatureAbility={quest.signatureAbility}
        mentorTip={quest.mentorTip}
      />

      {(objectiveLabel || quest.genre) && (
        <div className="quest-objective-row">
          {objectiveLabel && (
            <span className={`quest-objective-pill quest-objective-pill--${quest.objectiveType}`}>
              {objectiveLabel}
            </span>
          )}
          {quest.genre && <span className="quest-genre-focus">Genre Focus: {quest.genre}</span>}
        </div>
      )}

      {quest.recommendedChallenges.length > 0 && (
        <div className="quest-tracker-recommendations">
          {quest.recommendedChallenges.map((challenge) => (
            <div key={challenge.id} className="quest-challenge-chip">
              <div className="quest-challenge-chip-header">
                <span>{challenge.title}</span>
                {challenge.difficulty && (
                  <span className="quest-challenge-difficulty">{challenge.difficulty}</span>
                )}
              </div>
              {challenge.tags.length > 0 && (
                <div className="quest-challenge-tags">
                  {challenge.tags.map((tag) => (
                    <span key={tag} className="quest-challenge-tag">
                      {tag}
                    </span>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default QuestTracker;