import React, { ChangeEventHandler, FC } from 'react';
import { Musician } from '../../types/data.types';

export interface ArtistEncounterChallenge {
  icon?: string;
  name: string;
  description?: string;
  location?: string;
  timePeriod?: string;
  rewards?: {
    fans?: number;
    streams?: number;
    credits?: number;
    sunoCredits?: number;
  };
  cost?: {
    sunoCredits?: number;
  };
}

export interface ArtistEncounterModalProps {
  challenge: ArtistEncounterChallenge;
  musician: Musician | null;
  sunoLink: string;
  onSunoLinkChange: ChangeEventHandler<HTMLInputElement>;
  onComplete: () => void;
  onCancel: () => void;
  mentorTip?: string;
  signatureAbility?: string;
}

const ArtistEncounterModal: FC<ArtistEncounterModalProps> = ({
  challenge,
  musician,
  sunoLink,
  onSunoLinkChange,
  onComplete,
  onCancel,
  mentorTip,
  signatureAbility,
}) => {
  const rewards = challenge.rewards ?? {};
  const creditReward = rewards.credits ?? rewards.sunoCredits;

  return (
    <div className="shop-modal">
      <div className="shop-content">
        <h3>
          {challenge.icon} {challenge.name}
        </h3>

        {musician ? (
          <div className="musician-info">
            <div className="musician-header">
              <p className="musician-description">
                <strong>{musician.name}</strong> - {musician.description}
              </p>
              <p className="musician-context">{musician.historicalContext}</p>
            </div>
            <div className="musician-details">
              {challenge.location && (
                <p>
                  <strong>📍 Location:</strong> {challenge.location}
                </p>
              )}
              {challenge.timePeriod && (
                <p>
                  <strong>⏰ Era:</strong> {challenge.timePeriod}
                </p>
              )}
              <p>
                <strong>🎵 Genre:</strong> {musician.genres.join(', ')}
              </p>
              <p>
                <strong>🎹 Style:</strong> {musician.stylePrompt}
              </p>
            </div>
            {(mentorTip || musician.mentorTip) && (
              <div className="style-unlock-preview">
                <p>
                  <strong>💡 Mentor Tip:</strong> {mentorTip ?? musician.mentorTip}
                </p>
              </div>
            )}
            {signatureAbility && (
              <p className="musician-context">
                <strong>⭐ Signature Ability:</strong> {signatureAbility}
              </p>
            )}
            <div className="style-unlock-preview">
              <p>
                <strong>✨ You will unlock:</strong> {musician.name}&apos;s {musician.genres[0]} style
              </p>
              <p className="unlock-hint">Use this style in future song generation!</p>
            </div>
          </div>
        ) : (
          <p className="challenge-description">{challenge.description}</p>
        )}

        <div className="challenge-rewards-display">
          <h4>Rewards:</h4>
          <div className="rewards-list">
            {rewards.fans ? <p>👥 {rewards.fans} new fans</p> : null}
            {rewards.streams ? <p>🎧 {rewards.streams} streams</p> : null}
            {creditReward ? <p>💰 ${creditReward} Suno Credits</p> : null}
          </div>
          {challenge.cost?.sunoCredits ? (
            <div className="challenge-cost">
              <p className="cost-warning">⚠️ Cost: ${challenge.cost.sunoCredits} Credits</p>
            </div>
          ) : null}
        </div>

        <div className="suno-link-section">
          <h4>Submit Your Song:</h4>
          <p>Paste your Suno song link below to complete the challenge:</p>
          <input
            type="text"
            value={sunoLink}
            onChange={onSunoLinkChange}
            placeholder="https://suno.com/song/..."
            className="suno-link-input"
          />
        </div>

        <div className="modal-actions">
          <button type="button" onClick={onComplete} className="complete-button">
            Complete Challenge
          </button>
          <button type="button" onClick={onCancel} className="cancel-button">
            Back to Map
          </button>
        </div>
      </div>
    </div>
  );
};

export default ArtistEncounterModal;