"use client";

import Link from "next/link";
import { ClueList } from "@/components/clue-list";
import { CrosswordPlayer } from "@/components/crossword-player";
import { useCrosswordData } from "@/components/use-crossword-data";
import type { Locale } from "@/lib/i18n";

type CrosswordRuntimePageProps = {
  id: string;
  locale: Locale;
  labels: {
    player: {
      topic: string;
      difficulty: string;
      lexicon: string;
    };
    clues: {
      across: string;
      down: string;
    };
    play: {
      overviewTitle: string;
      boardTitle: string;
      cluesTitle: string;
      instructions: string;
      actions: {
        newCrossword: string;
        viewSolution: string;
      };
      stats: {
        words: string;
        intersections: string;
        filledCells: string;
        topicWords: string;
      };
    };
    loading: string;
    errorPrefix: string;
  };
};

export function CrosswordRuntimePage({ id, locale, labels }: CrosswordRuntimePageProps) {
  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 play-overview">
        <div className="play-overview__header">
          <div>
            <span className="hero__badge hero__badge--soft">{crossword.summary.title}</span>
            <h2>{labels.play.overviewTitle}</h2>
            <p className="muted">{labels.play.instructions}</p>
          </div>
          <div className="play-overview__actions">
            <Link className="button" href={`/${locale}/new`}>
              {labels.play.actions.newCrossword}
            </Link>
            <Link className="button button--secondary" href={`/${locale}/crosswords/${id}/solution`}>
              {labels.play.actions.viewSolution}
            </Link>
          </div>
        </div>

        <div className="kpi-grid kpi-grid--play">
          <div className="kpi">
            <span className="muted">{labels.play.stats.words}</span>
            <strong>{crossword.summary.total_words}</strong>
          </div>
          <div className="kpi">
            <span className="muted">{labels.play.stats.intersections}</span>
            <strong>{crossword.summary.intersections}</strong>
          </div>
          <div className="kpi">
            <span className="muted">{labels.play.stats.filledCells}</span>
            <strong>{crossword.diagnostics.filled_cells}</strong>
          </div>
          <div className="kpi">
            <span className="muted">{labels.play.stats.topicWords}</span>
            <strong>{crossword.diagnostics.topic_words}</strong>
          </div>
        </div>
      </div>

      <div className="card play-stage">
        <div className="play-stage__header">
          <h2>{labels.play.boardTitle}</h2>
          <p className="muted">{crossword.summary.subtitle}</p>
        </div>
        <CrosswordPlayer crossword={crossword} labels={labels.player} />
      </div>

      <section className="card play-sidebar play-sidebar--bottom">
        <div className="play-stage__header play-stage__header--tight">
          <h2>{labels.play.cluesTitle}</h2>
          <p className="muted">{crossword.summary.title}</p>
        </div>
        <ClueList crossword={crossword} labels={labels.clues} />
      </section>
    </section>
  );
}