"use client";

import { useState } from "react";
import type {
  Achievement,
  FanGoal,
  FanProfile,
  PassportStats,
  ScreenId,
  Team,
} from "../../types/passport";
import { getTeamById } from "../../utils/passportMetrics";
import MetricCard from "../shared/MetricCard";
import ProgressBar from "../shared/ProgressBar";
import StatusPill from "../shared/StatusPill";

interface FanProfileScreenProps {
  profile: FanProfile;
  teams: Team[];
  fanGoals: FanGoal[];
  achievements: Achievement[];
  stats: PassportStats;
  onNavigate: (screen: ScreenId) => void;
  onUpdateProfile: (updates: Partial<FanProfile>) => void;
}

export default function FanProfileScreen({
  profile,
  teams,
  fanGoals,
  achievements,
  stats,
  onNavigate,
  onUpdateProfile,
}: FanProfileScreenProps) {
  const [isEditing, setIsEditing] = useState(false);
  const [draftName, setDraftName] = useState(profile.displayName);
  const [draftBio, setDraftBio] = useState(profile.bio);
  const [draftFavoriteTeamId, setDraftFavoriteTeamId] = useState(profile.favoriteTeamId);
  const [draftGoalIds, setDraftGoalIds] = useState(profile.selectedGoalIds);

  const favoriteTeam = getTeamById(teams, profile.favoriteTeamId);
  const unlockedAchievements = achievements.filter((achievement) => achievement.unlocked);
  const selectedGoals = fanGoals.filter((goal) => profile.selectedGoalIds.includes(goal.id));

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

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

  function saveProfile() {
    onUpdateProfile({
      displayName: draftName.trim() || profile.displayName,
      bio: draftBio.trim(),
      favoriteTeamId: draftFavoriteTeamId,
      selectedGoalIds: draftGoalIds,
    });
    setIsEditing(false);
  }

  return (
    <section className="screen" aria-labelledby="profile-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Fan profile</p>
          <h1 className="hero-title" id="profile-title">
            Your supporter identity.
          </h1>
          <p className="hero-copy">
            The profile turns a collection app into a fan story: favourite team, personal goals,
            streaks, badges, and shareable supporter style.
          </p>
        </div>

        <aside className="hero-card profile-hero-card">
          <span className="profile-avatar" aria-hidden="true">
            {profile.avatarEmoji}
          </span>
          <div>
            <h2 className="profile-name">{profile.displayName}</h2>
            <p className="card-meta">
              {profile.handle} · {profile.homeCity}
            </p>
            <StatusPill tone="success" icon={favoriteTeam?.flagEmoji}>
              {favoriteTeam?.name ?? "Favourite team"}
            </StatusPill>
          </div>
        </aside>
      </div>

      <div className="metric-grid">
        <MetricCard icon="⭐" label="Passport score" value={stats.totalScore.toLocaleString("en-GB")} />
        <MetricCard icon="🔥" label="Daily streak" value={`${stats.currentStreak} days`} />
        <MetricCard icon="🏅" label="Badges unlocked" value={`${stats.unlockedAchievements}`} />
        <MetricCard icon="🃏" label="Sticker progress" value={`${stats.obtainedStickers}/${stats.totalStickers}`} />
      </div>

      <div className="profile-grid">
        <div>
          <article className="card">
            <div className="card-title-row">
              <div>
                <p className="card-kicker">Profile card</p>
                <h2>{profile.supporterStyle}</h2>
              </div>
              <button
                className={isEditing ? "button-secondary" : "button-ghost"}
                onClick={() => setIsEditing((current) => !current)}
                type="button"
              >
                {isEditing ? "Cancel edit" : "Edit profile"}
              </button>
            </div>

            {!isEditing ? (
              <>
                <p>{profile.bio}</p>
                <div className="goal-list" aria-label="Selected fan goals">
                  {selectedGoals.map((goal) => (
                    <button
                      className="chip"
                      key={goal.id}
                      onClick={() => onNavigate(goal.screen)}
                      type="button"
                    >
                      <span aria-hidden="true">{goal.icon}</span> {goal.title}
                    </button>
                  ))}
                </div>
              </>
            ) : (
              <div className="form-grid">
                <div className="form-field">
                  <label htmlFor="profile-name">Display name</label>
                  <input
                    className="form-input"
                    id="profile-name"
                    maxLength={32}
                    onChange={(event) => setDraftName(event.target.value)}
                    value={draftName}
                  />
                </div>

                <div className="form-field">
                  <label htmlFor="profile-team">Favourite team</label>
                  <select
                    className="form-select"
                    id="profile-team"
                    onChange={(event) => setDraftFavoriteTeamId(event.target.value)}
                    value={draftFavoriteTeamId}
                  >
                    {teams.map((team) => (
                      <option key={team.id} value={team.id}>
                        {team.name}
                      </option>
                    ))}
                  </select>
                </div>

                <div className="form-field">
                  <label htmlFor="profile-bio">Bio</label>
                  <textarea
                    className="form-textarea"
                    id="profile-bio"
                    onChange={(event) => setDraftBio(event.target.value)}
                    value={draftBio}
                  />
                </div>

                <div>
                  <p className="field-label">Fan goals</p>
                  <div className="goal-list">
                    {fanGoals.map((goal) => (
                      <button
                        aria-pressed={draftGoalIds.includes(goal.id)}
                        className={`chip ${draftGoalIds.includes(goal.id) ? "is-active" : ""}`}
                        key={goal.id}
                        onClick={() => toggleDraftGoal(goal.id)}
                        type="button"
                      >
                        <span aria-hidden="true">{goal.icon}</span> {goal.title}
                      </button>
                    ))}
                  </div>
                </div>

                <button className="button-primary" onClick={saveProfile} type="button">
                  Save profile
                </button>
              </div>
            )}
          </article>

          <article className="card">
            <p className="card-kicker">Level progress</p>
            <h2>Level {profile.level}</h2>
            <ProgressBar
              label="XP toward next level"
              max={profile.nextLevelXp}
              tone="gold"
              value={profile.xp}
            />
            <p>
              Level progress will eventually connect to partner rewards, fantasy integrations, and
              post-World Cup competitions.
            </p>
          </article>
        </div>

        <aside>
          <article className="card">
            <p className="card-kicker">Badge shelf</p>
            <h2>{unlockedAchievements.length} achievements unlocked</h2>
            <div className="achievement-grid">
              {unlockedAchievements.slice(0, 6).map((achievement) => (
                <div className="achievement-card is-unlocked" key={achievement.id}>
                  <span className="achievement-icon" aria-hidden="true">
                    {achievement.icon}
                  </span>
                  <strong>{achievement.title}</strong>
                  <p className="card-meta">{achievement.reward}</p>
                </div>
              ))}
            </div>
          </article>
        </aside>
      </div>
    </section>
  );
}