"use client";

import Link from "next/link";
import { CrosswordAnswerKey } from "@/components/crossword-answer-key";
import { CrosswordPlayer } from "@/components/crossword-player";
import { useCrosswordData } from "@/components/use-crossword-data";
import type { Locale } from "@/lib/i18n";

type CrosswordSolutionRuntimePageProps = {
  id: string;
  locale: Locale;
  labels: {
    player: {
      topic: string;
      difficulty: string;
      lexicon: string;
    };
    clues: {
      across: string;
      down: string;
    };
    solution: {
      solvedGridTitle: string;
      answersTitle: string;
      backToGame: string;
      answer: string;
      clue: string;
    };
    loading: string;
    errorPrefix: string;
  };
};

export function CrosswordSolutionRuntimePage({
  id,
  locale,
  labels,
}: CrosswordSolutionRuntimePageProps) {
  const { crossword, errorMessage, isLoading } = useCrosswordData(id, locale);

  if (errorMessage) {
    return <p className="form-error">{labels.errorPrefix}: {errorMessage}</p>;
  }

  if (isLoading || !crossword) {
    return <p className="muted">{labels.loading}</p>;
  }

  return (
    <section className="stack">
      <div className="card solution-topbar">
        <Link className="button button--secondary" href={`/${locale}/crosswords/${id}`}>
          {labels.solution.backToGame}
        </Link>
      </div>

      <div className="card play-stage">
        <div className="play-stage__header">
          <h2>{labels.solution.solvedGridTitle}</h2>
          <p className="muted">{crossword.summary.title}</p>
        </div>
        <CrosswordPlayer
          crossword={crossword}
          labels={labels.player}
          readOnly
          revealSolution
        />
      </div>

      <section className="card play-sidebar play-sidebar--bottom">
        <div className="play-stage__header play-stage__header--tight">
          <h2>{labels.solution.answersTitle}</h2>
          <p className="muted">{crossword.summary.subtitle}</p>
        </div>
        <CrosswordAnswerKey
          crossword={crossword}
          labels={{
            across: labels.clues.across,
            down: labels.clues.down,
            answer: labels.solution.answer,
            clue: labels.solution.clue,
          }}
        />
      </section>
    </section>
  );
}