"use client";

import { useMemo, useState } from "react";
import type { FanGoal, Team } from "../../types/passport";
import ProgressBar from "../shared/ProgressBar";

export interface OnboardingSelection {
  displayName: string;
  favoriteTeamId: string;
  selectedGoalIds: string[];
}

interface OnboardingScreenProps {
  teams: Team[];
  fanGoals: FanGoal[];
  onComplete: (selection: OnboardingSelection) => void;
}

const steps = ["Identity", "Goals", "Starter pack"];

export default function OnboardingScreen({
  teams,
  fanGoals,
  onComplete,
}: OnboardingScreenProps) {
  const [step, setStep] = useState(0);
  const [displayName, setDisplayName] = useState("Passport Founder");
  const [favoriteTeamId, setFavoriteTeamId] = useState(teams[0]?.id ?? "");
  const [selectedGoalIds, setSelectedGoalIds] = useState<string[]>([
    "goal-england-matches",
    "goal-sticker-album",
  ]);

  const featuredTeams = useMemo(() => teams.slice(0, 8), [teams]);
  const favoriteTeam = teams.find((team) => team.id === favoriteTeamId) ?? teams[0];
  const selectedGoals = fanGoals.filter((goal) => selectedGoalIds.includes(goal.id));
  const canContinue =
    step === 0
      ? displayName.trim().length >= 2 && Boolean(favoriteTeamId)
      : step === 1
        ? selectedGoalIds.length > 0
        : true;

  function toggleGoal(goalId: string) {
    setSelectedGoalIds((current) => {
      if (current.includes(goalId)) {
        return current.filter((id) => id !== goalId);
      }

      return [...current, goalId].slice(-3);
    });
  }

  function handleNext() {
    if (!canContinue) {
      return;
    }

    if (step < steps.length - 1) {
      setStep((current) => current + 1);
      return;
    }

    onComplete({
      displayName: displayName.trim() || "Passport Founder",
      favoriteTeamId,
      selectedGoalIds,
    });
  }

  return (
    <main className="onboarding-page">
      <section aria-labelledby="onboarding-title" className="onboarding-card">
        <div className="onboarding-header">
          <div>
            <p className="eyebrow">FIFA World Cup 2026 prototype</p>
            <h1 className="onboarding-title" id="onboarding-title">
              Your football passport starts here.
            </h1>
            <p>
              Collect teams, stadiums, match stamps, predictions, trivia wins, stickers,
              achievements, leaderboard rank, and tournament memories in one daily fan journey.
            </p>
          </div>

          <div aria-label="Onboarding progress" className="onboarding-stepper">
            {steps.map((label, index) => (
              <span
                aria-current={step === index ? "step" : undefined}
                className="step-dot"
                key={label}
                title={label}
              >
                {index + 1}
              </span>
            ))}
          </div>
        </div>

        <div className="onboarding-layout">
          <div className="onboarding-panel">
            <ProgressBar
              hideValue
              label={`Step ${step + 1} of ${steps.length}: ${steps[step]}`}
              max={steps.length}
              tone="success"
              value={step + 1}
            />

            {step === 0 ? (
              <div>
                <h2>Choose your fan identity</h2>
                <p>
                  Funders can experience the first-run flow: name the passport and pick a
                  favourite team that powers personalised challenges.
                </p>

                <div className="form-field">
                  <label htmlFor="displayName">Display name</label>
                  <input
                    className="form-input"
                    id="displayName"
                    maxLength={32}
                    onChange={(event) => setDisplayName(event.target.value)}
                    value={displayName}
                  />
                </div>

                <div className="team-select-grid">
                  {featuredTeams.map((team) => (
                    <button
                      aria-pressed={favoriteTeamId === team.id}
                      className={`selectable-card ${
                        favoriteTeamId === team.id ? "is-selected" : ""
                      }`}
                      key={team.id}
                      onClick={() => setFavoriteTeamId(team.id)}
                      type="button"
                    >
                      <span className="big-emoji" aria-hidden="true">
                        {team.flagEmoji}
                      </span>
                      <strong>{team.name}</strong>
                      <span>
                        {team.group} · FIFA rank {team.fifaRank}
                      </span>
                    </button>
                  ))}
                </div>
              </div>
            ) : null}

            {step === 1 ? (
              <div>
                <h2>Pick up to three fan goals</h2>
                <p>
                  Goals shape dashboard recommendations and show how the passport becomes a daily
                  habit loop.
                </p>

                <div className="goal-grid">
                  {fanGoals.map((goal) => (
                    <button
                      aria-pressed={selectedGoalIds.includes(goal.id)}
                      className={`selectable-card ${
                        selectedGoalIds.includes(goal.id) ? "is-selected" : ""
                      }`}
                      key={goal.id}
                      onClick={() => toggleGoal(goal.id)}
                      type="button"
                    >
                      <span className="big-emoji" aria-hidden="true">
                        {goal.icon}
                      </span>
                      <strong>{goal.title}</strong>
                      <span>{goal.description}</span>
                    </button>
                  ))}
                </div>
              </div>
            ) : null}

            {step === 2 ? (
              <div>
                <h2>Starter pack ready</h2>
                <p>
                  Your first team page, starter sticker, and daily mission list are prepared. The
                  next tap lands inside the live passport dashboard.
                </p>

                <div className="goal-list" aria-label="Selected goals">
                  {selectedGoals.map((goal) => (
                    <span className="status-pill" data-tone="success" key={goal.id}>
                      <span aria-hidden="true">{goal.icon}</span>
                      {goal.title}
                    </span>
                  ))}
                </div>
              </div>
            ) : null}

            <div className="button-row" style={{ marginTop: "1rem" }}>
              {step > 0 ? (
                <button
                  className="button-ghost"
                  onClick={() => setStep((current) => Math.max(0, current - 1))}
                  type="button"
                >
                  Back
                </button>
              ) : null}
              <button className="button-primary" disabled={!canContinue} onClick={handleNext} type="button">
                {step === steps.length - 1 ? "Enter passport" : "Continue"}
              </button>
            </div>
          </div>

          <aside className="starter-pack" aria-label="Passport starter preview">
            <div className="sticker-preview">
              <div>
                <span className="big-emoji" aria-hidden="true">
                  {favoriteTeam?.flagEmoji ?? "⚽"}
                </span>
                <h2>{favoriteTeam?.name ?? "Favourite team"} page</h2>
                <p>
                  Starter collection includes a team stamp, one sticker reveal, and a personalised
                  first mission.
                </p>
              </div>
            </div>

            <article className="card">
              <p className="card-kicker">Daily loop preview</p>
              <h3>Return tomorrow for a fresh quiz, pack, and prediction prompt.</h3>
              <p>
                The prototype demonstrates how the product creates repeat visits before, during,
                and after matchdays.
              </p>
            </article>
          </aside>
        </div>
      </section>
    </main>
  );
}