import { useState } from 'react';

import { Icon } from '../Icon';
import { Modal } from '../Modal';
import { CreateNominationForm } from './CreateNominationForm';
import { NominationCard } from './NominationCard';
import { CallToPlayActions } from '../../hooks/useCallToPlay';
import { Game, Nomination } from '../../lib/types';

interface Props {
    nominations: ReadonlyArray<Nomination>;
    games: ReadonlyArray<Game>;
    actorId: string | null;
    actions: CallToPlayActions;
    focusId: string | null;
    transportReady: boolean;
    error: string | null;
    getThumbnail: (gameId: string) => string | null | undefined;
    totalPeerCount: number;
    onLaunch: (game: Game) => void;
    onClose: () => void;
}

export const CallToPlayOverlay = ({
    nominations,
    games,
    actorId,
    actions,
    focusId,
    transportReady,
    error,
    getThumbnail,
    totalPeerCount,
    onLaunch,
    onClose,
}: Props) => {
    const [showCreate, setShowCreate] = useState(false);
    const gameById = new Map(games.map(game => [game.id, game]));
    const sorted = [...nominations].sort((left, right) =>
        Number(left.state === 'started') - Number(right.state === 'started')
        || left.deadline - right.deadline
    );

    return (
        <Modal onClose={onClose} className="ctp-modal">
            <button className="modal-close" onClick={onClose} aria-label="Close">
                <Icon.close />
            </button>
            <div className="ctp-head">
                <h2>Call to Play</h2>
                <p className="ctp-head-sub">
                    Rally the LAN around a game and a time — right now, or scheduled for later with
                    an “I’m in” RSVP. The caller decides when it actually starts.
                </p>
                {!showCreate && (
                    <button
                        className="act-btn act-play ctp-head-new"
                        disabled={!transportReady}
                        onClick={() => setShowCreate(true)}
                    ><Icon.flag /><span>Call a new match</span></button>
                )}
                {!transportReady && !error && (
                    <div className="ctp-transport-note">Connecting Call to Play to the LAN…</div>
                )}
                {error && <div className="ctp-transport-note is-error">{error}</div>}
            </div>
            <div className="ctp-body">
                {showCreate && (
                    <CreateNominationForm
                        games={games}
                        onCancel={() => setShowCreate(false)}
                        onCreate={(gameId, maxPlayers, duration, scheduledFor) => {
                            actions.createNomination(gameId, maxPlayers, duration, scheduledFor);
                            setShowCreate(false);
                        }}
                    />
                )}
                {sorted.length === 0 && !showCreate && (
                    <div className="ctp-empty">
                        No active calls right now — be the one to start something.
                    </div>
                )}
                {sorted.map(nomination => {
                    const game = gameById.get(nomination.gameId);
                    if (!game) return null;
                    return (
                        <NominationCard
                            key={nomination.id}
                            nomination={nomination}
                            game={game}
                            actorId={actorId}
                            actions={actions}
                            focused={nomination.id === focusId}
                            thumbnailUrl={getThumbnail(game.id)}
                            totalPeerCount={totalPeerCount}
                            onLaunch={onLaunch}
                        />
                    );
                })}
            </div>
        </Modal>
    );
};