import { POLL_NAME } from "./constants";
import { useAuth } from "./hooks/useAuth";
import { isPollEnded, formatPollEndDate } from "./utils";
import UserInfo from "./components/UserInfo";
import VotingInterface from "./components/VotingInterface";
import "./App.css";

function App() {
  const { user, handleLogin, handleLogout } = useAuth();

  return (
    <div className="min-h-screen py-4 px-4 sm:py-8 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <UserInfo user={user} onLogin={handleLogin} onLogout={handleLogout} />
        
        {/* Header */}
        <div className="flex justify-between items-center my-6">
          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center flex-1">
            {POLL_NAME}
          </h1>
        </div>

        {/* Poll End Notice */}
        {isPollEnded() && (
          <div className="mb-6 p-4 bg-red-100 border border-red-300 rounded-lg text-center">
            <h2 className="text-xl font-semibold text-red-800 mb-2">
              Poll Has Ended
            </h2>
            <p className="text-sm text-red-700">
              Voting closed on {formatPollEndDate()}. No new votes are being accepted.
            </p>
          </div>
        )}

        {/* Main Content */}
        {user ? (
          <div className="flex flex-col items-center">
            <p className="text-base sm:text-lg lg:text-2xl text-center mb-6 sm:mb-8 max-w-4xl leading-relaxed">
              <span className="hidden sm:inline">
                Drag and drop the maps to vote for a map's{" "}
                <span className="font-bold text-red-500">REMOVAL</span> from the
                pool.
              </span>
              <span className="sm:hidden">
                Arrange the maps to vote for a map's{" "}
                <span className="font-bold text-red-500">REMOVAL</span>. Tap a
                map to select it, then tap another position to move it there.
              </span>
              <span className="block mt-2">
                The order you arrange them in will be your vote, with the map at
                the top-left being your top choice{" "}
                <span className="font-bold text-red-500">FOR REMOVAL</span>.
              </span>
              <span className="block mt-2">
                In other words - put your{" "}
                <span className="font-bold text-red-500">
                  least favorite map first
                </span>
                , and your favorite map last.
              </span>
              {!isPollEnded() && (
                <span className="block mt-4 text-sm text-gray-600">
                  Voting ends: {formatPollEndDate()}
                </span>
              )}
            </p>
            <VotingInterface user={user} />
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-16">
            <div className="text-center max-w-md">
              <h2 className="text-2xl font-bold mb-4">Sign in Required</h2>
              <p className="text-gray-500 mb-6">
                Please sign in with your Steam account to participate in the RGL
                HL Season 22 map poll.
              </p>
              <button
                onClick={handleLogin}
                className="flex items-center space-x-2 bg-black text-white px-6 py-3 rounded-lg hover:bg-gray-800 transition-colors mx-auto"
              >
                <span>🔗</span>
                <span>Sign in with Steam</span>
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;
