import type { SteamUser, MapOption } from "../types";
import { POLL_NAME } from "../constants";
import { formatTimestamp, formatPollEndDate } from "../utils";

interface VoteStatusProps {
  user: SteamUser;
  isSubmitted: boolean;
  selectedCard: number | null;
  cards: MapOption[];
  voteTimestamp: string | null;
  pollEnded: boolean;
  onSubmit: () => void;
}

export default function VoteStatus({
  user,
  isSubmitted,
  selectedCard,
  cards,
  voteTimestamp,
  pollEnded,
  onSubmit,
}: VoteStatusProps) {
  return (
    <>
      {selectedCard !== null && !isSubmitted && !pollEnded && (
        <div className="mb-4 p-3 bg-blue-100 border border-blue-300 rounded-lg text-center">
          <p className="text-sm text-blue-700">
            <strong>{cards[selectedCard]?.name}</strong> is selected. Tap
            another card to move it there, or tap the selected card again to
            cancel.
          </p>
        </div>
      )}

      {pollEnded && !isSubmitted && (
        <div className="mb-4 p-4 bg-red-100 border border-red-300 rounded-lg text-center">
          <h3 className="text-lg font-semibold text-red-800 mb-2">
            Poll Has Ended
          </h3>
          <p className="text-sm text-red-700">
            The voting period for {POLL_NAME} ended on {formatPollEndDate()}.
            No new votes can be submitted.
          </p>
        </div>
      )}

      {isSubmitted && (
        <div className="mb-4 p-4 bg-green-100 border border-green-300 rounded-lg text-center">
          <h3 className="text-lg font-semibold text-green-800 mb-2">
            Vote Submitted Successfully! 🎉
          </h3>
          <p className="text-sm text-green-700">
            Thank you {user.displayName} for participating in the {POLL_NAME}.
            Your vote has been recorded.
          </p>
          {voteTimestamp && (
            <p className="text-xs text-green-600 mt-2">
              Submitted on: {formatTimestamp(voteTimestamp)}
            </p>
          )}
        </div>
      )}

      {!isSubmitted && !pollEnded && (
        <div className="text-center">
          <button
            onClick={onSubmit}
            className="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-colors duration-200 shadow-lg hover:shadow-xl"
          >
            Submit Vote
          </button>
        </div>
      )}
    </>
  );
}
