import type { SteamUser } from "../types";
import { useVoteLogic } from "../hooks/useVoteLogic";
import MapCard from "./MapCard";
import VoteStatus from "./VoteStatus";
import VoteConfirmation from "./VoteConfirmation";

interface VotingInterfaceProps {
  user: SteamUser;
}

export default function VotingInterface({ user }: VotingInterfaceProps) {
  const {
    cards,
    selectedCard,
    showConfirmation,
    isSubmitted,
    voteTimestamp,
    loading,
    pollEnded,
    handleDragStart,
    handleDragEnter,
    handleDragEnd,
    handleCardTap,
    handleSubmit,
    handleConfirmSubmit,
    handleCancelSubmit,
    handleTouchStart,
    handleTouchMove,
    handleTouchEnd,
  } = useVoteLogic();

  if (loading) {
    return (
      <div className="text-center py-8">
        <div className="text-lg">Loading your vote status...</div>
      </div>
    );
  }

  const showMaps = (!pollEnded || (pollEnded && isSubmitted));

  return (
    <div className="w-full max-w-6xl">
      {showMaps && (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            {cards.map((card, idx) => (
              <MapCard
                key={card.name}
                card={card}
                index={idx}
                isSubmitted={isSubmitted || pollEnded}
                isSelected={selectedCard === idx}
                onDragStart={handleDragStart}
                onDragEnter={handleDragEnter}
                onDragEnd={handleDragEnd}
                onTouchStart={handleTouchStart}
                onTouchMove={handleTouchMove}
                onTouchEnd={handleTouchEnd}
                onClick={handleCardTap}
              />
            ))}
          </div>
        )}

      <VoteStatus
        user={user}
        isSubmitted={isSubmitted}
        selectedCard={selectedCard}
        cards={cards}
        voteTimestamp={voteTimestamp}
        pollEnded={pollEnded}
        onSubmit={handleSubmit}
      />

      <VoteConfirmation
        isOpen={showConfirmation}
        cards={cards}
        onConfirm={handleConfirmSubmit}
        onCancel={handleCancelSubmit}
      />
    </div>
  );
}
