import React, { useEffect, useState } from "react";

const STORAGE_KEY = "gorilla-tag-tracker-v1";

function uid() {
  return Math.random().toString(36).slice(2, 9);
}

export default function GorillaTagTracker() {
  const [players, setPlayers] = useState([]);
  const [form, setForm] = useState({
    name: "",
    platform: "Quest",
    steamId: "",
    notes: "",
  });
  const [filter, setFilter] = useState("");

  // Load saved players from localStorage
  useEffect(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) setPlayers(JSON.parse(saved));
  }, []);

  // Save players when changed
  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(players));
  }, [players]);

  function addPlayer(e) {
    e?.preventDefault();
    if (!form.name.trim()) return;
    const p = {
      id: uid(),
      name: form.name.trim(),
      platform: form.platform,
      steamId: form.steamId.trim() || null,
      notes: form.notes || "",
      sessions: [],
      createdAt: Date.now(),
    };
    setPlayers([p, ...players]);
    setForm({ name: "", platform: "Quest", steamId: "", notes: "" });
  }

  function removePlayer(id) {
    if (!confirm("Remove player and all their session data?")) return;
    setPlayers(players.filter((p) => p.id !== id));
  }

  function startSession(id) {
    setPlayers(
      players.map((p) => {
        if (p.id !== id) return p;
        const active = p.sessions.some((s) => !s.end);
        if (active) return p;
        return {
          ...p,
          sessions: [{ start: Date.now(), end: null }, ...p.sessions],
        };
      })
    );
  }

  function stopSession(id) {
    setPlayers(
      players.map((p) => {
        if (p.id !== id) return p;
        const sessions = p.sessions.slice();
        const idx = sessions.findIndex((s) => !s.end);
        if (idx === -1) return p;
        sessions[idx] = { ...sessions[idx], end: Date.now() };
        return { ...p, sessions };
      })
    );
  }

  function totalPlaytime(p) {
    return p.sessions.reduce((acc, s) => {
      const end = s.end || Date.now();
      return acc + (end - s.start);
    }, 0);
  }

  function fmtMs(ms) {
    const sec = Math.floor(ms / 1000);
    const h = Math.floor(sec / 3600);
    const m = Math.floor((sec % 3600) / 60);
    const s = sec % 60;
    return `${h}h ${m}m ${s}s`;
  }

  const visible = players.filter((p) =>
    p.name.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white p-6">
      <div className="max-w-5xl mx-auto">
        <h1 className="text-4xl font-extrabold mb-6 text-center text-cyan-300 drop-shadow-lg">
          🦍 Gorilla Tag Player Tracker
        </h1>

        {/* Add Player Form */}
        <form
          onSubmit={addPlayer}
          className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-5 mb-8 shadow-lg"
        >
          <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
            <input
              value={form.name}
              onChange={(e) => setForm({ ...form, name: e.target.value })}
              placeholder="Player name"
              className="p-3 rounded-lg bg-white/10 border border-white/20 focus:ring-2 focus:ring-cyan-400"
            />
            <select
              value={form.platform}
              onChange={(e) => setForm({ ...form, platform: e.target.value })}
              className="p-3 rounded-lg bg-white/10 border border-white/20 focus:ring-2 focus:ring-cyan-400"
            >
              <option>Quest</option>
              <option>PCVR</option>
              <option>SteamVR</option>
            </select>
            <input
              value={form.steamId}
              onChange={(e) => setForm({ ...form, steamId: e.target.value })}
              placeholder="SteamID64 (optional)"
              className="p-3 rounded-lg bg-white/10 border border-white/20 focus:ring-2 focus:ring-cyan-400"
            />
            <button className="bg-cyan-500 hover:bg-cyan-400 text-black font-semibold py-3 rounded-lg transition">
              Add Player
            </button>
          </div>
          <textarea
            value={form.notes}
            onChange={(e) => setForm({ ...form, notes: e.target.value })}
            placeholder="Notes (favorite map, play style, etc.)"
            className="mt-4 w-full p-3 rounded-lg bg-white/10 border border-white/20 focus:ring-2 focus:ring-cyan-400"
          />
        </form>

        {/* Search bar */}
        <div className="flex items-center gap-3 mb-6">
          <input
            placeholder="Search players..."
            value={filter}
            onChange={(e) => setFilter(e.target.value)}
            className="flex-1 p-3 rounded-lg bg-white/10 border border-white/20 focus:ring-2 focus:ring-cyan-400"
          />
          <div className="text-sm text-slate-300">
            Total players: {players.length}
          </div>
        </div>

        {/* Player cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          {visible.map((p) => (
            <div
              key={p.id}
              className="bg-white/10 border border-white/20 backdrop-blur-xl rounded-2xl p-5 shadow-xl hover:border-cyan-400 transition"
            >
              <div className="flex justify-between items-center mb-3">
                <div>
                  <input
                    value={p.name}
                    onChange={(e) =>
                      setPlayers((prev) =>
                        prev.map((x) =>
                          x.id === p.id ? { ...x, name: e.target.value } : x
                        )
                      )
                    }
                    className="bg-transparent text-xl font-semibold text-cyan-200 focus:outline-none"
                  />
                  <p className="text-sm text-slate-400">
                    {p.platform} • {p.steamId ? p.steamId : "No Steam ID"}
                  </p>
                </div>
                <div className="text-right text-sm text-slate-300">
                  <div>Total: {fmtMs(totalPlaytime(p))}</div>
                  <div className="text-xs text-slate-500">
                    Sessions: {p.sessions.length}
                  </div>
                </div>
              </div>

              <p className="text-sm text-slate-300 mb-4">
                {p.notes || "No notes yet"}
              </p>

              <div className="flex flex-wrap gap-2">
                <button
                  onClick={() => startSession(p.id)}
                  className="bg-cyan-500 hover:bg-cyan-400 text-black px-3 py-1.5 rounded-lg text-sm font-medium transition"
                >
                  Start
                </button>
                <button
                  onClick={() => stopSession(p.id)}
                  className="bg-green-500 hover:bg-green-400 text-black px-3 py-1.5 rounded-lg text-sm font-medium transition"
                >
                  Stop
                </button>
                <button
                  onClick={() => {
                    const txt = prompt("Edit notes for " + p.name, p.notes || "");
                    if (txt !== null)
                      setPlayers((prev) =>
                        prev.map((x) =>
                          x.id === p.id ? { ...x, notes: txt } : x
                        )
                      );
                  }}
                  className="bg-yellow-400 hover:bg-yellow-300 text-black px-3 py-1.5 rounded-lg text-sm font-medium transition"
                >
                  Edit Notes
                </button>
                <button
                  onClick={() => removePlayer(p.id)}
                  className="bg-red-500 hover:bg-red-400 text-black px-3 py-1.5 rounded-lg text-sm font-medium transition"
                >
                  Remove
                </button>
              </div>

              {p.sessions.length > 0 && (
                <details className="mt-4 text-sm text-slate-300">
                  <summary className="cursor-pointer text-cyan-300">
                    Recent Sessions
                  </summary>
                  <div className="mt-2 space-y-1">
                    {p.sessions.map((s, i) => (
                      <div
                        key={i}
                        className="border-b border-white/10 pb-1 text-xs"
                      >
                        {new Date(s.start).toLocaleString()} —{" "}
                        {s.end
                          ? new Date(s.end).toLocaleString()
                          : "active"}{" "}
                        ({fmtMs((s.end || Date.now()) - s.start)})
                      </div>
                    ))}
                  </div>
                </details>
              )}
            </div>
          ))}

          {visible.length === 0 && (
            <div className="col-span-full text-center text-slate-400 bg-white/5 p-6 rounded-xl border border-white/10">
              No players found. Add someone above 👆
            </div>
          )}
        </div>
      </div>
    </div>
  );
}