import type { CSSProperties } from "react";
import { Link, useParams } from "react-router-dom";
import { Panel } from "../components/ui";
import { getChampionById } from "../features/champions/championLookup";

export function ChampionDetailPage() {
  const { championId } = useParams();
  const champion = getChampionById(championId);

  if (!champion) {
    return (
      <div className="page-stack">
        <Panel title="Champion not found" subtitle="The requested mock champion does not exist.">
          <Link className="text-link" to="/champions">
            Return to champions
          </Link>
        </Panel>
      </div>
    );
  }

  return (
    <div className="page-stack">
      <section className="champion-detail-hero">
        <div className="champion-portrait" style={{ "--champion-accent": champion.accentColor } as CSSProperties}>
          {champion.name.charAt(0)}
        </div>
        <div>
          <span className="eyebrow">{champion.role}</span>
          <h2>{champion.name}</h2>
          <p>{champion.shortDescription}</p>
          <div className="tag-row">
            {champion.tags.map((tag) => (
              <span key={tag}>{tag}</span>
            ))}
          </div>
        </div>
      </section>

      <div className="dashboard-grid">
        <Panel title="Combat Profile" subtitle="Placeholder values for future tuning">
          <dl className="stat-list">
            <div>
              <dt>Difficulty</dt>
              <dd>{champion.difficulty}</dd>
            </div>
            <div>
              <dt>Primary Role</dt>
              <dd>{champion.role}</dd>
            </div>
            <div>
              <dt>Theme Hint</dt>
              <dd>{champion.accentColor ?? "Default accent"}</dd>
            </div>
          </dl>
        </Panel>

        <Panel title="Future Detail Modules" subtitle="Prepared but not implemented">
          <p>Abilities, skins, progression, lore, and build recommendations can be added as independent modules.</p>
          <Link className="action-link action-link-inline" to="/champions">
            Back to overview
          </Link>
        </Panel>
      </div>
    </div>
  );
}