import Image from "next/image";
import { WeightDoubleSlider } from "@/features/predictions/components/fields/weight-double-slider";
import {
  predictionMetricsFont,
  predictionTitleFont,
} from "@/features/predictions/components/tiles/prediction-tile-fonts";
import type { PredictionTheme } from "@/features/predictions/domain/prediction-theme";
import type { PredictionTileController } from "@/features/predictions/hooks/use-prediction-tile-controller";
import styles from "@/features/predictions/styles/predictions.module.css";
import type { PredictionCard } from "@/types/predictions";

type WeightPredictionTileProps = {
  card: PredictionCard;
  controller: PredictionTileController;
  disabled?: boolean;
  showSubmitButton?: boolean;
  theme?: PredictionTheme;
};

export function WeightPredictionTile({
  card,
  controller,
  disabled,
  showSubmitButton,
  theme = "boy",
}: WeightPredictionTileProps) {
  const mainField = card.fields[0];
  const pointsLabel =
    card.basePoints > 0
      ? card.basePoints
      : (mainField?.points ?? 0) > 0
        ? (mainField?.points ?? 0)
        : card.code === "legacy_weight"
          ? 100
          : 0;
  const currentValue =
    controller.draftValues.find((value) => value.fieldId === mainField?.id)?.valueNumber ?? null;

  const minKg = mainField?.minNumber ?? 1;
  const maxKg = mainField?.maxNumber ?? 6;

  if (!mainField) {
    return null;
  }

  const balanceBabyImage =
    theme === "girl"
      ? "/depotARanger/bebe-sur-une-balance-girl.png"
      : "/depotARanger/bebe-sur-une-balance.png";

  return (
    <div className={styles.weightTileWrapper}>
      {/* Medal: outside the article so it overflows the card */}
      <Image
        src="/images/pictos/medaille.png"
        alt=""
        width={44}
        height={44}
        className={styles.weightMedalIcon}
      />
      <article className={`${styles.tile} ${styles.weightTile}`}>
        {/* Left: illustration */}
        <div className={styles.weightTileLeft}>
          <div className={`${styles.weightTileLeftCircle} ${theme === "girl" ? styles.weightTileLeftCircleGirl : ""}`} />
          <Image
            src={balanceBabyImage}
            alt=""
            width={460}
            height={420}
            sizes="(max-width: 520px) 43vw, 22vw"
            className={styles.weightTileLeftImg}
          />
        </div>

        {/* Right: content */}
        <div className={styles.weightTileRight}>

        {/* Title block */}
        <div className={`${styles.weightTitleBlock} ${predictionTitleFont.className}`}>
          <p className={styles.weightTitleLine}>LE GRAND DÉFI :</p>
          <p className={styles.weightTitleLineSub}>Poid de Bubulle !</p>
          {pointsLabel > 0 ? (
            <p className={styles.weightTitleLine}>GAGNEZ {pointsLabel} POINTS !</p>
          ) : null}
        </div>

        {/* Weight double slider */}
        <WeightDoubleSlider
          valueKg={currentValue}
          minKg={minKg}
          maxKg={maxKg}
          disabled={disabled}
          theme={theme}
          labelFontClassName={predictionTitleFont.className}
          valueFontClassName={predictionMetricsFont.className}
          metaFontClassName={predictionMetricsFont.className}
          onChange={(nextValueKg) => {
            const rounded = Math.round(nextValueKg * 200) / 200;
            controller.setNumber(mainField.id, rounded);
          }}
        />

        {/* Footer */}
        <div className={styles.weightTileFooter}>
          {showSubmitButton ? (
            <button
              className="btn btn-primary"
              onClick={() => void controller.submit()}
              disabled={controller.saving || disabled}
            >
              {controller.saving ? "Validation..." : "Valider mon pronostic"}
            </button>
          ) : null}
          {controller.dirty ? (
            <span className={styles.dirty}>Modifications non enregistrées</span>
          ) : null}
          {controller.successMessage ? (
            <p className={styles.success}>{controller.successMessage}</p>
          ) : null}
          {controller.errorMessage ? (
            <p className={styles.error}>{controller.errorMessage}</p>
          ) : null}
        </div>
        </div>
      </article>
    </div>
  );
}

