import { useState, useMemo, useCallback } from "react";

const VOTERS_DB = [
  { id: 1, username: "alice", password: "alice123", name: "Alice Martin" },
  { id: 2, username: "bob", password: "bob456", name: "Bob Dupont" },
  { id: 3, username: "claire", password: "claire789", name: "Claire Rousseau" },
  { id: 4, username: "david", password: "david123", name: "David Leroy" },
  { id: 5, username: "emma", password: "emma456", name: "Emma Beaumont" },
  { id: 6, username: "felix", password: "felix789", name: "Félix Moreau" },
  { id: 7, username: "grace", password: "grace123", name: "Grace Petit" },
  { id: 8, username: "hugo", password: "hugo456", name: "Hugo Fontaine" },
  { id: 9, username: "iris", password: "iris789", name: "Iris Lambert" },
  { id: 10, username: "jules", password: "jules123", name: "Jules Simon" },
  { id: 11, username: "lea", password: "lea456", name: "Léa Girard" },
  { id: 12, username: "marc", password: "marc789", name: "Marc Nguyen" },
];

const CANDIDATES = [
  { id: 1, name: "Sophie Beaumont", role: "Coordinatrice", initials: "SB" },
  { id: 2, name: "Lucas Marchand", role: "Animateur", initials: "LM" },
  { id: 3, name: "Chloé Girard", role: "Décoratrice", initials: "CG" },
  { id: 4, name: "Antoine Roux", role: "DJ de la soirée", initials: "AR" },
  { id: 5, name: "Manon Lefebvre", role: "Chef cuisinier", initials: "ML" },
  { id: 6, name: "Raphaël Nguyen", role: "Photographe", initials: "RN" },
];

const ADMIN_CREDS = { username: "admin", password: "admin2024" };
const GOLD = "#c9a84c";
const GOLD_DIM = "rgba(201,168,76,0.25)";
const GOLD_GLOW = "rgba(201,168,76,0.08)";
const TEXT = "#f0e6d0";
const MUTED = "rgba(240,230,208,0.45)";

function StarField() {
  const stars = useMemo(() => Array.from({ length: 60 }, (_, i) => ({
    id: i,
    x: ((i * 137.5) % 100),
    y: ((i * 97.3) % 100),
    size: i % 5 === 0 ? 2 : 1,
    opacity: 0.08 + (i % 7) * 0.04,
  })), []);

  return (
    <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
      {stars.map(s => (
        <div key={s.id} style={{
          position: "absolute", width: s.size, height: s.size,
          background: GOLD, borderRadius: "50%", opacity: s.opacity,
          top: `${s.y}%`, left: `${s.x}%`,
        }} />
      ))}
    </div>
  );
}

function Ornament({ style = {} }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6, ...style }}>
      <div style={{ flex: 1, height: "0.5px", background: GOLD_DIM }} />
      <span style={{ color: GOLD, fontSize: 10, letterSpacing: "0.4em", opacity: 0.7 }}>✦</span>
      <div style={{ flex: 1, height: "0.5px", background: GOLD_DIM }} />
    </div>
  );
}

const screen = {
  minHeight: "100vh",
  background: "radial-gradient(ellipse at 50% -20%, rgba(201,168,76,0.12) 0%, transparent 55%), #07071a",
  display: "flex", flexDirection: "column",
  alignItems: "center", justifyContent: "center",
  padding: "24px", position: "relative", overflow: "hidden",
  fontFamily: "'Segoe UI', system-ui, sans-serif", color: TEXT,
};

const card = (wide = false) => ({
  background: "rgba(255,255,255,0.035)",
  border: `1px solid ${GOLD_DIM}`,
  borderRadius: 20, padding: "40px 36px",
  width: "100%", maxWidth: wide ? 580 : 420,
  position: "relative", zIndex: 1,
  boxSizing: "border-box",
});

const heading = {
  fontFamily: "Georgia, 'Times New Roman', serif",
  fontSize: 30, fontWeight: 300,
  color: GOLD, letterSpacing: "0.08em",
  textAlign: "center", margin: "0 0 4px",
};

const sub = {
  fontSize: 10, letterSpacing: "0.35em",
  color: MUTED, textAlign: "center",
  textTransform: "uppercase", margin: "0 0 28px",
};

const inp = {
  width: "100%", background: "rgba(255,255,255,0.04)",
  border: `1px solid ${GOLD_DIM}`, borderRadius: 10,
  padding: "13px 16px", color: TEXT,
  fontSize: 14, outline: "none",
  boxSizing: "border-box", marginBottom: 10,
  fontFamily: "inherit",
};

const btn = (variant = "gold") => ({
  width: "100%", border: "none", borderRadius: 10,
  padding: "13px", fontSize: 11, fontWeight: 600,
  letterSpacing: "0.22em", textTransform: "uppercase",
  cursor: "pointer", fontFamily: "inherit", marginTop: 6,
  ...(variant === "gold" ? {
    background: `linear-gradient(135deg, ${GOLD}, #a8822e)`,
    color: "#1a1208",
  } : {
    background: "transparent",
    border: `1px solid ${GOLD_DIM}`,
    color: MUTED,
  }),
});

const backBtn = {
  background: "none", border: "none", color: MUTED,
  cursor: "pointer", fontSize: 11, letterSpacing: "0.15em",
  padding: 0, marginBottom: 24, fontFamily: "inherit",
  textTransform: "uppercase",
};

export default function App() {
  const [view, setView] = useState("home");
  const [user, setUser] = useState(null);
  const [votes, setVotes] = useState({});
  const [voted, setVoted] = useState(new Set());
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [showPwd, setShowPwd] = useState(false);
  const [err, setErr] = useState("");
  const [pick, setPick] = useState(null);

  const login = useCallback(() => {
    setErr("");
    if (username === ADMIN_CREDS.username && password === ADMIN_CREDS.password) {
      setUser({ isAdmin: true, name: "Administrateur" });
      setView("results"); setUsername(""); setPassword(""); return;
    }
    const found = VOTERS_DB.find(v => v.username === username.trim().toLowerCase() && v.password === password);
    if (!found) { setErr("Identifiants incorrects. Réessayez."); return; }
    setUser(found); setUsername(""); setPassword("");
    setView(voted.has(found.id) ? "done" : "vote");
  }, [username, password, voted]);

  const submitVote = useCallback(() => {
    if (!pick || !user) return;
    setVotes(p => ({ ...p, [user.id]: pick }));
    setVoted(p => new Set([...p, user.id]));
    setPick(null); setView("done");
  }, [pick, user]);

  const results = useMemo(() => {
    const c = {}; CANDIDATES.forEach(x => { c[x.id] = 0; });
    Object.values(votes).forEach(id => { c[id]++; });
    return [...CANDIDATES].map(x => ({ ...x, count: c[x.id] })).sort((a, b) => b.count - a.count);
  }, [votes]);

  const totalVotes = Object.keys(votes).length;

  // ── HOME ──
  if (view === "home") return (
    <div style={screen}>
      <StarField />
      <div style={{ ...card(), textAlign: "center" }}>
        <div style={{ fontSize: 36, color: GOLD, marginBottom: 12, letterSpacing: "0.1em" }}>✦</div>
        <h1 style={heading}>Soirée de Gala</h1>
        <p style={sub}>Élection de la soirée</p>
        <Ornament />

        <div style={{
          background: "white", padding: 14, borderRadius: 14,
          display: "inline-block", margin: "20px 0 18px",
          boxShadow: `0 0 40px ${GOLD_GLOW}`,
        }}>
          <img
            src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=https://vote.soiree.fr&color=07071a&bgcolor=FFFFFF"
            alt="QR Code voter"
            style={{ display: "block", width: 180, height: 180 }}
            onError={e => { e.target.style.display = "none"; }}
          />
        </div>

        <p style={{ fontSize: 12, color: MUTED, marginBottom: 24, letterSpacing: "0.05em" }}>
          Scannez le QR code pour accéder au vote
        </p>

        <button style={btn()} onClick={() => setView("login")}>
          Voter maintenant
        </button>
        <button style={btn("ghost")} onClick={() => { setUsername(""); setPassword(""); setView("login"); }}>
          Accès résultats (admin)
        </button>
      </div>
    </div>
  );

  // ── LOGIN ──
  if (view === "login") return (
    <div style={screen}>
      <StarField />
      <div style={card()}>
        <button style={backBtn} onClick={() => { setErr(""); setView("home"); }}>← Retour</button>
        <h1 style={heading}>Connexion</h1>
        <p style={sub}>Entrez vos identifiants</p>
        <Ornament />

        <div style={{ marginTop: 16 }}>
          <input style={inp} type="text" placeholder="Nom d'utilisateur"
            value={username} onChange={e => setUsername(e.target.value)}
            onKeyDown={e => e.key === "Enter" && login()} />

          <div style={{ position: "relative" }}>
            <input style={{ ...inp, paddingRight: 44 }}
              type={showPwd ? "text" : "password"} placeholder="Mot de passe"
              value={password} onChange={e => setPassword(e.target.value)}
              onKeyDown={e => e.key === "Enter" && login()} />
            <button onClick={() => setShowPwd(p => !p)} style={{
              position: "absolute", right: 12, top: 13,
              background: "none", border: "none", color: MUTED,
              cursor: "pointer", fontSize: 16, padding: 0, lineHeight: 1,
            }} title="Afficher/Masquer">
              {showPwd ? "○" : "●"}
            </button>
          </div>

          {err && (
            <div style={{
              background: "rgba(200,60,60,0.12)", border: "1px solid rgba(200,60,60,0.3)",
              borderRadius: 8, padding: "10px 14px", fontSize: 12, color: "#ff8080", marginBottom: 8,
            }}>{err}</div>
          )}

          <button style={btn()} onClick={login}>Se connecter</button>
        </div>

        <div style={{
          marginTop: 28, padding: "16px", background: GOLD_GLOW,
          border: `1px solid ${GOLD_DIM}`, borderRadius: 10,
        }}>
          <p style={{ fontSize: 11, color: MUTED, margin: "0 0 8px", letterSpacing: "0.1em", textTransform: "uppercase" }}>
            Comptes de démonstration
          </p>
          {VOTERS_DB.slice(0, 3).map(v => (
            <div key={v.id} style={{ fontSize: 11, color: MUTED, marginBottom: 3 }}>
              <span style={{ color: TEXT }}>{v.username}</span> · {v.password}
            </div>
          ))}
          <div style={{ fontSize: 11, color: MUTED, marginTop: 6 }}>
            Admin : <span style={{ color: TEXT }}>admin</span> · <span style={{ color: TEXT }}>admin2024</span>
          </div>
        </div>
      </div>
    </div>
  );

  // ── VOTE ──
  if (view === "vote") return (
    <div style={screen}>
      <StarField />
      <div style={card(true)}>
        <h1 style={heading}>Votre vote</h1>
        <p style={sub}>Choisissez votre candidat</p>
        <Ornament />

        <p style={{ fontSize: 13, color: MUTED, textAlign: "center", margin: "0 0 24px" }}>
          Bonjour <span style={{ color: TEXT }}>{user?.name}</span>. Sélectionnez la personne que vous souhaitez élire ce soir.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginBottom: 24 }}>
          {CANDIDATES.map(c => {
            const sel = pick === c.id;
            return (
              <div key={c.id} onClick={() => setPick(c.id)} style={{
                background: sel ? "rgba(201,168,76,0.12)" : "rgba(255,255,255,0.025)",
                border: `1px solid ${sel ? GOLD : GOLD_DIM}`,
                borderRadius: 14, padding: "18px 12px",
                cursor: "pointer", textAlign: "center",
                transition: "all 0.15s", position: "relative",
              }}>
                {sel && (
                  <div style={{
                    position: "absolute", top: 8, right: 8,
                    width: 18, height: 18, borderRadius: "50%",
                    background: GOLD, display: "flex", alignItems: "center",
                    justifyContent: "center", fontSize: 10, color: "#1a1208", fontWeight: 700,
                  }}>✓</div>
                )}
                <div style={{
                  width: 50, height: 50, borderRadius: "50%",
                  background: sel ? `rgba(201,168,76,0.25)` : "rgba(255,255,255,0.05)",
                  border: `1px solid ${sel ? GOLD : GOLD_DIM}`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  margin: "0 auto 10px",
                  fontSize: 15, fontWeight: 500,
                  color: sel ? GOLD : MUTED,
                  fontFamily: "Georgia, serif",
                }}>{c.initials}</div>
                <div style={{ fontSize: 13, fontWeight: 500, color: sel ? TEXT : MUTED, marginBottom: 4 }}>
                  {c.name}
                </div>
                <div style={{ fontSize: 10, color: MUTED, letterSpacing: "0.05em" }}>
                  {c.role}
                </div>
              </div>
            );
          })}
        </div>

        <button style={{ ...btn(), opacity: pick ? 1 : 0.4, cursor: pick ? "pointer" : "not-allowed" }}
          onClick={submitVote} disabled={!pick}>
          Confirmer mon vote
        </button>
      </div>
    </div>
  );

  // ── DONE ──
  if (view === "done") {
    const votedFor = user && votes[user.id] ? CANDIDATES.find(c => c.id === votes[user.id]) : null;
    return (
      <div style={screen}>
        <StarField />
        <div style={{ ...card(), textAlign: "center" }}>
          <div style={{
            width: 72, height: 72, borderRadius: "50%",
            background: "rgba(201,168,76,0.15)", border: `1px solid ${GOLD}`,
            display: "flex", alignItems: "center", justifyContent: "center",
            margin: "0 auto 20px", fontSize: 28, color: GOLD,
          }}>✓</div>
          <h1 style={heading}>Vote enregistré</h1>
          <p style={sub}>Merci pour votre participation</p>
          <Ornament />

          {votedFor && (
            <div style={{
              background: GOLD_GLOW, border: `1px solid ${GOLD_DIM}`,
              borderRadius: 12, padding: "18px 24px", margin: "20px 0",
            }}>
              <p style={{ fontSize: 11, color: MUTED, margin: "0 0 6px", letterSpacing: "0.15em", textTransform: "uppercase" }}>
                Vous avez voté pour
              </p>
              <p style={{ fontSize: 22, fontFamily: "Georgia, serif", color: GOLD, margin: 0 }}>
                {votedFor.name}
              </p>
              <p style={{ fontSize: 11, color: MUTED, margin: "4px 0 0" }}>{votedFor.role}</p>
            </div>
          )}

          <p style={{ fontSize: 12, color: MUTED, lineHeight: 1.7 }}>
            Les résultats seront annoncés ce soir.<br />
            Bonne soirée à vous ! ✦
          </p>
        </div>
      </div>
    );
  }

  // ── RESULTS ──
  if (view === "results") {
    const maxVotes = results[0]?.count || 0;
    return (
      <div style={screen}>
        <StarField />
        <div style={{ ...card(true) }}>
          <button style={backBtn} onClick={() => setView("home")}>← Accueil</button>
          <h1 style={heading}>Résultats en direct</h1>
          <p style={sub}>Tableau des votes — Accès administrateur</p>
          <Ornament />

          <div style={{ display: "flex", gap: 12, margin: "20px 0 24px", justifyContent: "center" }}>
            {[
              { label: "Votes exprimés", val: totalVotes },
              { label: "Votants inscrits", val: VOTERS_DB.length },
              { label: "Participation", val: `${Math.round((totalVotes / VOTERS_DB.length) * 100)}%` },
            ].map(s => (
              <div key={s.label} style={{
                background: "rgba(255,255,255,0.025)",
                border: `1px solid ${GOLD_DIM}`, borderRadius: 10,
                padding: "12px 20px", textAlign: "center", flex: 1,
              }}>
                <div style={{ fontSize: 26, color: GOLD, fontFamily: "Georgia, serif", fontWeight: 300 }}>
                  {s.val}
                </div>
                <div style={{ fontSize: 10, color: MUTED, letterSpacing: "0.1em", textTransform: "uppercase" }}>
                  {s.label}
                </div>
              </div>
            ))}
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 24 }}>
            {results.map((c, i) => {
              const elected = i < 2;
              const pct = maxVotes > 0 ? Math.round((c.count / maxVotes) * 100) : 0;
              return (
                <div key={c.id} style={{
                  background: elected ? "rgba(201,168,76,0.07)" : "rgba(255,255,255,0.02)",
                  border: `1px solid ${elected ? GOLD : GOLD_DIM}`,
                  borderRadius: 12, padding: "14px 16px",
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
                    <div style={{
                      width: 36, height: 36, borderRadius: "50%", flexShrink: 0,
                      background: elected ? "rgba(201,168,76,0.2)" : "rgba(255,255,255,0.04)",
                      border: `1px solid ${elected ? GOLD : GOLD_DIM}`,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontSize: 12, color: elected ? GOLD : MUTED,
                      fontFamily: "Georgia, serif",
                    }}>{c.initials}</div>

                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, color: elected ? TEXT : MUTED, fontWeight: 500 }}>
                        {c.name}
                        {elected && (
                          <span style={{
                            marginLeft: 8, fontSize: 9,
                            background: GOLD, color: "#1a1208",
                            padding: "2px 7px", borderRadius: 4, letterSpacing: "0.15em",
                            fontWeight: 700,
                          }}>
                            {i === 0 ? "★ 1ER" : "★ 2ÈME"}
                          </span>
                        )}
                      </div>
                      <div style={{ fontSize: 10, color: MUTED }}>{c.role}</div>
                    </div>

                    <div style={{
                      fontSize: 22, color: elected ? GOLD : MUTED,
                      fontFamily: "Georgia, serif", fontWeight: 300, minWidth: 30, textAlign: "right",
                    }}>{c.count}</div>
                  </div>

                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <div style={{
                      flex: 1, height: 3, background: "rgba(255,255,255,0.07)",
                      borderRadius: 2, overflow: "hidden",
                    }}>
                      <div style={{
                        height: "100%", width: `${pct}%`,
                        background: elected
                          ? `linear-gradient(90deg, ${GOLD}, #e8c76e)`
                          : "rgba(255,255,255,0.2)",
                        borderRadius: 2,
                        transition: "width 0.6s ease",
                      }} />
                    </div>
                    <span style={{ fontSize: 10, color: MUTED, minWidth: 28, textAlign: "right" }}>
                      {pct}%
                    </span>
                  </div>
                </div>
              );
            })}
          </div>

          <p style={{ fontSize: 10, color: MUTED, textAlign: "center", letterSpacing: "0.1em", textTransform: "uppercase" }}>
            Les 2 candidats en tête seront élus · Mis à jour en temps réel
          </p>
        </div>
      </div>
    );
  }

  return null;
}