import { useState, useEffect, useMemo, useCallback } from "react";
import {
  Game,
  Source,
  GameList as GameListProto,
  Person as PersonProto,
  Opinion,
  AddOpinionRequest,
  RemoveOpinionRequest,
} from "../items";
import { Link, useLocation } from "react-router-dom";
import { apiFetch, get_auth_status } from "./api";
import { GameImage } from "./GameImage";
import type { ToastType } from "./Toast";
import { EmptyState } from "./components/EmptyState";

interface Props {
  onShowToast?: (message: string, type?: ToastType) => void;
}

export function GameList({ onShowToast }: Props) {
  const [games, setGames] = useState<Game[]>([]);
  const [title, setTitle] = useState("");
  const [source, setSource] = useState<Source>(Source.STEAM);
  const [minPlayers, setMinPlayers] = useState(1);
  const [maxPlayers, setMaxPlayers] = useState(1);
  const [price, setPrice] = useState(0);
  const [remoteId, setRemoteId] = useState(0);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [titleError, setTitleError] = useState("");
  const [playersError, setPlayersError] = useState("");
  const [remoteIdError, setRemoteIdError] = useState("");
  const [opinions, setOpinions] = useState<Opinion[]>([]);
  const [gamesLoading, setGamesLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");

  const filteredGames = useMemo(() => {
    if (!searchQuery) return games;
    return games.filter(game =>
      game.title.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }, [games, searchQuery]);

  const fetchGames = useCallback(() => {
    setGamesLoading(true);
    apiFetch("/api/games")
      .then((res) => res.arrayBuffer())
      .then((buffer) => {
        try {
          const list = GameListProto.decode(new Uint8Array(buffer));
          setGames(list.games);
        } catch (e) {
          console.error("Failed to decode games:", e);
          onShowToast?.("Failed to load games", "error");
        }
      })
      .catch((err) => {
        console.error(err);
        onShowToast?.("Failed to fetch games", "error");
      })
      .finally(() => setGamesLoading(false));
  }, [onShowToast]);

  useEffect(() => {
    get_auth_status().then((user) => {
      apiFetch(`/api/${user?.username}`)
        .then((res) => res.arrayBuffer())
        .then((buffer) => {
          try {
            const person = PersonProto.decode(new Uint8Array(buffer));
            const opinions = person.opinion;
            setOpinions(opinions);
          } catch (e) {
            console.error("Failed to decode games:", e);
          }
        });
    });
  }, []);

  // Scroll to Existing Games section if hash is present
  const location = useLocation();
  useEffect(() => {
    if (location.hash === "#existing-games") {
      const el = document.getElementById("existing-games");
      if (el) {
        setTimeout(() => {
          el.scrollIntoView({ behavior: "smooth", block: "start" });
        }, 100);
      } else {
        console.error("Element not found");
      }
    }
  }, [location]);

  useEffect(() => {
    fetchGames();
  }, [fetchGames]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    setTitleError("");
    setPlayersError("");
    setRemoteIdError("");

    let hasErrors = false;

    if (!title.trim()) {
      setTitleError("Game title is required");
      hasErrors = true;
    }

    if (minPlayers < 1) {
      setPlayersError("Minimum players must be at least 1");
      hasErrors = true;
    }

    if (maxPlayers < minPlayers) {
      setPlayersError("Maximum players cannot be less than minimum players");
      hasErrors = true;
    }

    if (remoteId === 0) {
      setRemoteIdError("Remote ID must be greater than 0");
      hasErrors = true;
    }

    if (hasErrors) return;

    setIsSubmitting(true);
    const game = {
      title: title.trim(),
      source,
      minPlayers,
      maxPlayers,
      price,
      remoteId,
    };

    try {
      const encoded = Game.encode(game).finish();
      const res = await apiFetch("/api/game", {
        method: "POST",
        headers: {
          "Content-Type": "application/octet-stream",
        },
        body: encoded,
      });

      if (res.ok) {
        onShowToast?.("Game added successfully!", "success");
        clearForm();
        fetchGames();
      } else {
        const errorText = await res.text();
        onShowToast?.(errorText || "Failed to add game. Please try again.", "error");
      }
    } catch (err) {
      console.error(err);
      onShowToast?.("An error occurred while adding the game.", "error");
    } finally {
      setIsSubmitting(false);
    }
  };

  const clearForm = () => {
    setTitle("");
    setMinPlayers(1);
    setMaxPlayers(1);
    setPrice(0);
    setRemoteId(0);
    setTitleError("");
    setPlayersError("");
    setRemoteIdError("");
  };

  const formCardStyles: React.CSSProperties = {
    background:
      "linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
    borderRadius: "20px",
    padding: "0",
    maxWidth: "520px",
    boxShadow: "0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--border-color)",
    overflow: "hidden",
  };

  const formHeaderStyles: React.CSSProperties = {
    background:
      "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
    padding: "1.5rem 2rem",
    display: "flex",
    alignItems: "center",
    gap: "1rem",
  };

  const formBodyStyles: React.CSSProperties = {
    padding: "2rem",
  };

  const sectionStyles: React.CSSProperties = {
    marginBottom: "1.5rem",
  };

  const sectionTitleStyles: React.CSSProperties = {
    fontSize: "0.75rem",
    textTransform: "uppercase",
    letterSpacing: "0.1em",
    color: "var(--text-muted)",
    marginBottom: "1rem",
    display: "flex",
    alignItems: "center",
    gap: "0.5rem",
  };

  const inputGroupStyles: React.CSSProperties = {
    position: "relative",
    marginBottom: "1rem",
  };

  const labelStyles: React.CSSProperties = {
    fontSize: "0.85rem",
    color: "var(--text-muted)",
    marginBottom: "0.5rem",
    display: "block",
    fontWeight: 500,
  };

  const inputStyles: React.CSSProperties = {
    width: "100%",
    padding: "0.875rem 1rem",
    backgroundColor: "var(--tertiary-bg)",
    border: "2px solid var(--border-color)",
    borderRadius: "12px",
    color: "var(--text-color)",
    fontSize: "1rem",
    transition: "all 0.2s ease",
    boxSizing: "border-box",
  };

  const gridStyles: React.CSSProperties = {
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: "1rem",
  };

  const dividerStyles: React.CSSProperties = {
    height: "1px",
    background:
      "linear-gradient(90deg, transparent, var(--border-color), transparent)",
    margin: "1.5rem 0",
  };

  const submitButtonStyles: React.CSSProperties = {
    width: "100%",
    padding: "1rem",
    background:
      "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
    border: "none",
    borderRadius: "12px",
    color: "white",
    fontSize: "1rem",
    fontWeight: 600,
    cursor: isSubmitting ? "not-allowed" : "pointer",
    transition: "all 0.3s ease",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "0.5rem",
    opacity: isSubmitting ? 0.7 : 1,
    transform: isSubmitting ? "none" : undefined,
  };

  return (
    <div>
      <style>
        {`
          @keyframes slideIn {
            from {
              opacity: 0;
              transform: translateY(-10px);
            }
            to {
              opacity: 1;
              transform: translateY(0);
            }
          }
          .add-game-input:focus {
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 4px rgba(9, 109, 192, 0.15) !important;
            outline: none;
          }
          .add-game-input:hover:not(:focus) {
            border-color: var(--text-muted);
          }
          .submit-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(9, 109, 192, 0.4);
          }
          .submit-btn:active:not(:disabled) {
            transform: translateY(0);
          }
        `}
      </style>

      <div style={formCardStyles}>
        <div style={formHeaderStyles}>
          <div
            style={{
              width: "48px",
              height: "48px",
              borderRadius: "14px",
              backgroundColor: "rgba(255, 255, 255, 0.2)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontSize: "1.5rem",
            }}
          >
            🎮
          </div>
          <div>
            <h2
              style={{
                margin: 0,
                fontSize: "1.5rem",
                fontWeight: 700,
                color: "white",
              }}
            >
              Add New Game
            </h2>
            <p
              style={{
                margin: 0,
                fontSize: "0.9rem",
                color: "rgba(255, 255, 255, 0.8)",
              }}
            >
              Add a game to your collection
            </p>
          </div>
        </div>

        <div style={formBodyStyles}>
          <form onSubmit={handleSubmit}>
            {/* Basic Info Section */}
            <div style={sectionStyles}>
              <div style={sectionTitleStyles}>
                <span>📝</span>
                Basic Information
              </div>

              <div style={inputGroupStyles}>
                <label style={labelStyles}>Game Title</label>
                <input
                  type="text"
                  value={title}
                  onChange={(e) => {
                    setTitle(e.target.value);
                    if (titleError) setTitleError("");
                  }}
                  required
                  placeholder="Enter game title..."
                  style={{
                    ...inputStyles,
                    borderColor: titleError ? "#f44336" : undefined
                  }}
                  className="add-game-input"
                />
                {titleError && (
                  <div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
                    {titleError}
                  </div>
                )}
              </div>

              <div style={inputGroupStyles}>
                <label style={labelStyles}>Platform Source</label>
                <select
                  value={source}
                  onChange={(e) => setSource(Number(e.target.value))}
                  style={{
                    ...inputStyles,
                    cursor: "pointer",
                    appearance: "none",
                    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a0a0a0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E")`,
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "right 1rem center",
                    paddingRight: "2.5rem",
                  }}
                  className="add-game-input"
                >
                  <option value={Source.STEAM}>🎮 Steam</option>
                  <option value={Source.ROBLOX}>🟢 Roblox</option>
                </select>
              </div>
            </div>

            <div style={dividerStyles}></div>

            {/* Player Count Section */}
            <div style={sectionStyles}>
              <div style={sectionTitleStyles}>
                <span>👥</span>
                Player Count
              </div>

              <div style={gridStyles}>
                <div style={inputGroupStyles}>
                  <label style={labelStyles}>Minimum Players</label>
                  <input
                    type="number"
                    value={minPlayers}
                    onChange={(e) => {
                      setMinPlayers(Number(e.target.value));
                      if (playersError) setPlayersError("");
                    }}
                    min="1"
                    style={{
                      ...inputStyles,
                      borderColor: playersError ? "#f44336" : undefined
                    }}
                    className="add-game-input"
                  />
                </div>
                <div style={inputGroupStyles}>
                  <label style={labelStyles}>Maximum Players</label>
                  <input
                    type="number"
                    value={maxPlayers}
                    onChange={(e) => {
                      setMaxPlayers(Number(e.target.value));
                      if (playersError) setPlayersError("");
                    }}
                    min="1"
                    style={{
                      ...inputStyles,
                      borderColor: playersError ? "#f44336" : undefined
                    }}
                    className="add-game-input"
                  />
                </div>
              </div>
              {playersError && (
                <div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
                  {playersError}
                </div>
              )}
            </div>

            <div style={dividerStyles}></div>

            {/* Additional Info Section */}
            <div style={sectionStyles}>
              <div style={sectionTitleStyles}>
                <span>💰</span>
                Additional Details
              </div>

              <div style={gridStyles}>
                <div style={inputGroupStyles}>
                  <label style={labelStyles}>Price (€)</label>
                  <input
                    type="number"
                    value={price}
                    onChange={(e) => setPrice(Math.ceil(Number(e.target.value.replace(',', '.'))))}
                    min="0"
                    step="1"
                    style={inputStyles}
                    className="add-game-input"
                  />
                </div>
                <div style={inputGroupStyles}>
                  <label style={labelStyles}>Remote ID</label>
                  <input
                    type="number"
                    value={remoteId}
                    onChange={(e) => {
                      setRemoteId(Number(e.target.value));
                      setRemoteIdError("");
                    }}
                    min="0"
                    style={{
                      ...inputStyles,
                      borderColor: remoteIdError ? "#f44336" : undefined,
                    }}
                    className="add-game-input"
                  />
                  {remoteIdError && (
                    <div
                      style={{
                        color: "#f44336",
                        fontSize: "0.75rem",
                        marginTop: "0.25rem",
                      }}
                    >
                      {remoteIdError}
                    </div>
                  )}
                </div>
              </div>
            </div>

            <div style={{ display: "flex", gap: "0.75rem", marginTop: "1rem" }}>
              <button
                type="button"
                onClick={clearForm}
                disabled={isSubmitting || (!title && minPlayers === 1 && maxPlayers === 1 && price === 0 && remoteId === 0)}
                style={{
                  ...submitButtonStyles,
                  background: "var(--tertiary-bg)",
                  flex: 1
                }}
              >
                Clear
              </button>
              <button
                type="submit"
                disabled={isSubmitting}
                style={submitButtonStyles}
                className="submit-btn"
              >
                {isSubmitting ? (
                  <>
                    <span
                      style={{
                        width: "18px",
                        height: "18px",
                        border: "2px solid rgba(255,255,255,0.3)",
                        borderTopColor: "white",
                        borderRadius: "50%",
                        animation: "spin 0.8s linear infinite",
                      }}
                    ></span>
                    Adding Game...
                  </>
                ) : (
                  <>
                    <span style={{ fontSize: "1.1rem" }}>➕</span>
                    Add Game to Collection
                  </>
                )}
              </button>
            </div>
          </form>
        </div>
      </div>

      <style>
        {`
          @keyframes spin {
            to { transform: rotate(360deg); }
          }
        `}
      </style>

      <div style={{ marginTop: "3rem" }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: "1rem",
            flexWrap: "wrap",
            gap: "1rem"
          }}
        >
          <h3
            id="existing-games"
            style={{
              scrollMarginBottom: "0",
              margin: 0
            }}
          >
            Existing Games {filteredGames.length > 0 && <span style={{ fontSize: "0.7em", color: "var(--text-muted)" }}>({filteredGames.length})</span>}
          </h3>
          <input
            type="text"
            placeholder="🔍 Search games..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            style={{
              padding: "0.5rem 1rem",
              fontSize: "0.9rem",
              minWidth: "200px"
            }}
          />
        </div>
        {gamesLoading ? (
          <div className="grid-container">
            {Array.from({ length: 6 }).map((_, i) => (
              <div
                key={i}
                style={{
                  backgroundColor: "var(--secondary-alt-bg)",
                  border: "1px solid var(--border-color)",
                  borderRadius: "5px",
                  padding: "1rem",
                  minHeight: "100px",
                  animation: "shimmer 1.5s infinite"
                }}
              >
                <div
                  style={{
                    width: "70%",
                    height: "20px",
                    backgroundColor: "var(--tertiary-bg)",
                    borderRadius: "4px",
                    marginBottom: "0.75rem",
                    animation: "shimmer 1.5s infinite"
                  }}
                ></div>
                <div
                  style={{
                    width: "40%",
                    height: "40px",
                    backgroundColor: "var(--tertiary-bg)",
                    borderRadius: "8px",
                    marginTop: "0.5rem",
                    animation: "shimmer 1.5s infinite 0.2s"
                  }}
                ></div>
              </div>
            ))}
            <style>{`
              @keyframes shimmer {
                0%, 100% { opacity: 0.5; }
                50% { opacity: 1; }
              }
            `}</style>
          </div>
        ) : filteredGames.length === 0 ? (
          <EmptyState
            icon="🎮"
            title={searchQuery ? "No games found" : "No games yet"}
            description={searchQuery ? "Try a different search term" : "Add your first game to get started"}
          />
        ) : (
          <ul className="grid-container">
          {filteredGames.map((game) => {
            const opinion = opinions.find((op) => op.title === game.title);
            function handleOpinion(title: string, number: number): void {
              if (number == 2) {
                apiFetch("/api/opinion", {
                  method: "PATCH",
                  headers: {
                    "Content-Type": "application/octet-stream",
                  },
                  body: RemoveOpinionRequest.encode(
                    RemoveOpinionRequest.create({
                      gameTitle: title,
                    })
                  ).finish(),
                })
                  .then((res) => res.arrayBuffer())
                  .then((resBuffer) => {
                    const response = PersonProto.decode(
                      new Uint8Array(resBuffer)
                    );

                    setOpinions(response.opinion);
                    onShowToast?.(`Updated opinion for ${title}`, "info");
                  })
                  .catch((err) => {
                    console.error(err);
                    onShowToast?.("Failed to update opinion", "error");
                  });
                return;
              }
              const wouldPlay = number == 1;
              apiFetch(`/api/opinion`, {
                method: "POST",
                headers: {
                  "Content-Type": "application/octet-stream",
                },
                body: AddOpinionRequest.encode(
                  AddOpinionRequest.create({
                    gameTitle: title,
                    wouldPlay,
                  })
                ).finish(),
              })
                .then((res) => res.arrayBuffer())
                .then((resBuffer) => {
                  const response = PersonProto.decode(
                    new Uint8Array(resBuffer)
                  );

                  setOpinions(response.opinion);
                  onShowToast?.(`Updated opinion for ${title}`, "info");
                })
                .catch((err) => {
                  console.error(err);
                  onShowToast?.("Failed to update opinion", "error");
                });
            }

            return (
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  height: "100%",
                }}
              >
                <Link
                  to={`/game/${encodeURIComponent(game.title)}`}
                  key={game.title}
                  className="list-item"
                  style={{
                    textDecoration: "none",
                    color: "inherit",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    flex: "1",
                    borderColor: opinion
                      ? opinion.wouldPlay
                        ? "#4caf50" // would play (green)
                        : "#f44336" // would not play (red)
                      : "#ffff00", // no opinion (yellow)
                  }}
                >
                  <strong
                    style={{
                      textShadow: opinion
                        ? opinion.wouldPlay
                          ? "0 0 10px #4caf50" // would play (green)
                          : "0 0 10px #f44336" // would not play (red)
                        : "0 0 10px #ffff00", // no opinion (yellow)
                    }}
                  >
                    {game.title}
                  </strong>
                  <GameImage game={game.title} />
                </Link>
                <div
                  style={{
                    display: "flex",
                    gap: "1rem",
                    marginTop: "1rem",
                    width: "100%",
                  }}
                >
                  <button
                    onClick={() => handleOpinion(game.title, 1)}
                    className="theme-btn game-btn"
                    style={{
                      width: "33%",
                      borderColor: opinion?.wouldPlay
                        ? "#4caf50"
                        : "transparent",
                      background: "rgba(76, 175, 80, 0.1)",
                      fontSize: "1.2rem",
                    }}
                    title="Would Play"
                  >
                    👍
                  </button>
                  <button
                    onClick={() => handleOpinion(game.title, 2)}
                    className="theme-btn game-btn"
                    style={{
                      width: "33%",
                      borderColor: !opinion ? "#ffff00" : "transparent",
                      background: "rgba(255, 255, 0, 0.1)",
                      fontSize: "1.2rem",
                    }}
                    title="Neutral"
                  >
                    😐
                  </button>
                  <button
                    onClick={() => handleOpinion(game.title, 0)}
                    className="theme-btn game-btn"
                    style={{
                      width: "33%",
                      borderColor:
                        opinion && !opinion.wouldPlay
                          ? "#f44336"
                          : "transparent",
                      background: "rgba(244, 67, 54, 0.1)",
                      fontSize: "1.2rem",
                    }}
                    title="Would Not Play"
                  >
                    👎
                  </button>
                </div>
              </div>
            );
          })}
        </ul>
        )}
      </div>
    </div>
  );
}