import { Person } from "../items";
import { Link } from "react-router-dom";
import { useState } from "react";
import { get_auth_status, refresh_state, get_is_admin } from "./api";
import type { ToastType } from "./Toast";
import "./PersonList.css"

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

export const PersonList = ({ people, onShowToast }: Props) => {
  const [current_user, set_current_user] = useState<string>("");
  const [isRefreshing, setIsRefreshing] = useState(false);

  get_auth_status().then((res) => {
    if (res) {
      set_current_user(res.username);
    }
  });

  const handleRefresh = async () => {
    setIsRefreshing(true);
    try {
      await refresh_state();
      onShowToast?.("State refreshed from file successfully", "success");
      window.location.reload();
    } catch (err) {
      console.error(err);
      onShowToast?.("Failed to refresh state from file", "error");
    } finally {
      setIsRefreshing(false);
    }
  };

  const isAdmin = get_is_admin();

  return (
    <div>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: "1rem",
        }}
      >
        <h2>People List</h2>
        {isAdmin && (
          <button
            onClick={handleRefresh}
            disabled={isRefreshing}
            className="btn-secondary"
            style={{
              padding: "0.5rem 1rem",
              fontSize: "0.9rem",
              display: "flex",
              alignItems: "center",
              gap: "0.5rem",
              opacity: isRefreshing ? 0.7 : 1,
              cursor: isRefreshing ? "not-allowed" : "pointer",
            }}
          >
            {isRefreshing ? (
              <>
                <span
                  style={{
                    width: "14px",
                    height: "14px",
                    border: "2px solid rgba(255,255,255,0.3)",
                    borderTopColor: "currentColor",
                    borderRadius: "50%",
                    animation: "spin 0.8s linear infinite",
                  }}
                ></span>
                Refreshing...
              </>
            ) : (
              <>
                <span>🔄</span>
                Refresh from File
              </>
            )}
          </button>
        )}
      </div>
      <div className="grid-container">
        {people.map((person, index) => {
          if (person.name.toLowerCase() === current_user.toLowerCase()) {
            return (
              <Link
                to={`/games#existing-games`}
                key={index}
                className="list-item"
                style={{
                  textDecoration: "none",
                  color: "inherit",
                  display: "block",
                }}
              >
                <h3>{person.name}</h3>
              </Link>
            );
          }

          return (
            <Link
              to={`/person/${person.name}`}
              key={index}
              className="list-item"
              style={{
                textDecoration: "none",
                color: "inherit",
                display: "block",
              }}
            >
              <h3>{person.name}</h3>
            </Link>
          );
        })}
      </div>
    </div>
  );
};