"use client";

import { useState } from "react";
import type { Prediction } from "../../types/passport";
import { formatMatchDate } from "../../utils/passportMetrics";
import MetricCard from "../shared/MetricCard";
import ProgressBar from "../shared/ProgressBar";
import StatusPill from "../shared/StatusPill";

interface PredictionCenterScreenProps {
  predictions: Prediction[];
  onChoosePrediction: (predictionId: string, optionId: string) => void;
}

export default function PredictionCenterScreen({
  predictions,
  onChoosePrediction,
}: PredictionCenterScreenProps) {
  const [confidenceByPrediction, setConfidenceByPrediction] = useState<Record<string, number>>(
    () =>
      Object.fromEntries(
        predictions.map((prediction) => [prediction.id, prediction.confidence]),
      ),
  );

  const submittedCount = predictions.filter((prediction) => Boolean(prediction.userPickOptionId)).length;
  const openCount = predictions.filter((prediction) => prediction.status === "open").length;
  const potentialPoints = predictions.reduce((total, prediction) => total + prediction.points, 0);

  return (
    <section className="screen" aria-labelledby="predictions-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Prediction center</p>
          <h1 className="hero-title" id="predictions-title">
            Back your football instincts.
          </h1>
          <p className="hero-copy">
            Prediction cards add stakes to every matchday: safe picks, underdog multipliers, locked
            tournament futures, and resolved-state rewards.
          </p>
        </div>
        <aside className="hero-card">
          <p className="card-kicker">Prediction status</p>
          <div className="metric-grid">
            <MetricCard icon="🔮" label="Submitted" value={submittedCount} />
            <MetricCard icon="⏳" label="Open" value={openCount} />
            <MetricCard icon="⭐" label="Potential" value={potentialPoints} />
            <MetricCard icon="🐉" label="Giant-kill picks" value={1} />
          </div>
        </aside>
      </div>

      <div className="prediction-grid">
        {predictions.map((prediction) => {
          const confidence = confidenceByPrediction[prediction.id] ?? prediction.confidence;
          const isLocked = prediction.status !== "open";

          return (
            <article className="prediction-card" key={prediction.id}>
              <div className="card-topline">
                <div>
                  <StatusPill
                    tone={
                      prediction.status === "open"
                        ? "success"
                        : prediction.status === "locked"
                          ? "warning"
                          : prediction.result === "won"
                            ? "success"
                            : "danger"
                    }
                  >
                    {prediction.status === "resolved"
                      ? prediction.result === "won"
                        ? "Won"
                        : "Resolved"
                      : prediction.status}
                  </StatusPill>
                  {prediction.featured ? (
                    <StatusPill tone="gold" icon="✨">
                      Featured
                    </StatusPill>
                  ) : null}
                </div>
                <span className="card-meta">{prediction.points} pts</span>
              </div>

              <div>
                <h2>{prediction.title}</h2>
                <p>{prediction.description}</p>
                <p className="card-meta">Closes {formatMatchDate(prediction.closesAt, "long")}</p>
              </div>

              <div className="option-list" role="group" aria-label={`${prediction.title} options`}>
                {prediction.options.map((option) => (
                  <button
                    aria-pressed={prediction.userPickOptionId === option.id}
                    className="prediction-option"
                    disabled={isLocked}
                    key={option.id}
                    onClick={() => onChoosePrediction(prediction.id, option.id)}
                    type="button"
                  >
                    <strong>{option.label}</strong>
                    <span className="card-meta" style={{ display: "block" }}>
                      {option.helper}
                    </span>
                  </button>
                ))}
              </div>

              <div className="confidence-row">
                <label className="field-label" htmlFor={`confidence-${prediction.id}`}>
                  Confidence: {confidence}%
                </label>
                <input
                  disabled={isLocked}
                  id={`confidence-${prediction.id}`}
                  max={100}
                  min={0}
                  onChange={(event) =>
                    setConfidenceByPrediction((current) => ({
                      ...current,
                      [prediction.id]: Number(event.target.value),
                    }))
                  }
                  type="range"
                  value={confidence}
                />
                <ProgressBar hideValue label="Confidence meter" max={100} tone="gold" value={confidence} />
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}