"use client";

import { useState, useEffect } from "react";
import MissionControlDashboard from "@/components/mission-control/MissionControlDashboard";
import { MissionControlProvider } from "@/lib/mission-control/store";

const CORRECT_USER = "Marshall";
const CORRECT_PASS = "#1284YallaHorus";

export default function MissionControlPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    const saved = localStorage.getItem("sitemente:mc-auth");
    if (saved === "true") {
      setIsAuthenticated(true);
    }
    setMounted(true);
  }, []);

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (username === CORRECT_USER && password === CORRECT_PASS) {
      localStorage.setItem("sitemente:mc-auth", "true");
      setIsAuthenticated(true);
      setError("");
    } else {
      setError("Invalid credentials");
    }
  };

  const handleLogout = () => {
    localStorage.removeItem("sitemente:mc-auth");
    setIsAuthenticated(false);
    setUsername("");
    setPassword("");
  };

  // Show loading until we've checked localStorage on mount
  if (!mounted) {
    return (
      <div className="min-h-screen bg-[#1a1625] flex items-center justify-center p-4">
        <div className="w-full max-w-md">
          <div className="text-center mb-8">
            <div className="text-5xl mb-4">👁️</div>
            <h1 className="text-3xl font-bold text-white mb-2">Mission Control</h1>
            <p className="text-white/60">Loading...</p>
          </div>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-[#1a1625] flex items-center justify-center p-4">
        <div className="w-full max-w-md">
          <div className="text-center mb-8">
            <div className="text-5xl mb-4">👁️</div>
            <h1 className="text-3xl font-bold text-white mb-2">Mission Control</h1>
            <p className="text-white/60">SiteMente Operations</p>
          </div>
          
          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label className="block text-sm text-white/70 mb-1">Username</label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder:text-white/40 focus:outline-none focus:border-brand-pink"
                placeholder="Enter username"
              />
            </div>
            
            <div>
              <label className="block text-sm text-white/70 mb-1">Password</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder:text-white/40 focus:outline-none focus:border-brand-pink"
                placeholder="Enter password"
              />
            </div>
            
            {error && (
              <p className="text-red-400 text-sm">{error}</p>
            )}
            
            <button
              type="submit"
              className="w-full py-3 bg-brand-pink rounded-lg font-semibold text-white hover:bg-[#ff7bc0] transition"
            >
              Access Control
            </button>
          </form>
          
          <p className="text-center text-white/30 text-xs mt-6">
            Restricted access. Authorized personnel only.
          </p>
        </div>
      </div>
    );
  }

  return (
    <MissionControlProvider>
      <MissionControlDashboard onLogout={handleLogout} />
    </MissionControlProvider>
  );
}