import { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import { Person } from "../items";
import { apiFetch } from "./api";
import { GameImage } from "./GameImage";
import { LoadingState, EmptyState } from "./components/EmptyState";

export const PersonDetails = () => {
  const { name } = useParams<{ name: string }>();
  const [person, setPerson] = useState<Person | null>(null);
  const [loading, setLoading] = useState(!!name);
  const [error, setError] = useState<string | null>(name ? null : "Person name is missing");

  useEffect(() => {
    if (!name) return;

    (async () => {
      try {
        const res = await apiFetch(`/api/${name}`);
        if (!res.ok) {
          throw new Error("Person not found");
        }
        const buffer = await res.arrayBuffer();
        setPerson(Person.decode(new Uint8Array(buffer)));
      } catch (e) {
        console.error("Failed to decode person:", e);
        setError(e instanceof Error ? e.message : "Failed to load person data");
      } finally {
        setLoading(false);
      }
    })();
  }, [name]);

  if (loading) return <LoadingState message="Loading person details..." />;
  if (error) return <EmptyState icon="⚠️" title="Error" description={error} />;
  if (!person) return <EmptyState icon="👤" title="Person not found" description="This person doesn't exist" />;

  return (
    <div>
      <div style={{ marginBottom: "2rem" }}>
        <h2>{person.name}</h2>
        {person.opinion.length === 0 ? (
          <EmptyState
            icon="🎮"
            title="No opinions yet"
            description={`${person.name} hasn't shared any game opinions`}
          />
        ) : (
          <ul className="grid-container">
            {person.opinion.map((op, i) => (
              <Link
                to={`/game/${encodeURIComponent(op.title)}`}
                key={i}
                className="list-item"
                style={{
                  textDecoration: "none",
                  color: "inherit",
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
                }}
              >
                <strong>{op.title}</strong>

                <GameImage game={op.title} />
              </Link>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};