"use client";

import { type FormEvent, useState } from "react";
import type { Match, Memory, MemoryType, NewMemoryInput, Team } from "../../types/passport";
import { formatMatchDate, getTeamById } from "../../utils/passportMetrics";
import StatusPill from "../shared/StatusPill";

interface MemoryTimelineScreenProps {
  memories: Memory[];
  matches: Match[];
  teams: Team[];
  onAddMemory: (memory: NewMemoryInput) => void;
}

const memoryTypes: { value: MemoryType; label: string; icon: string }[] = [
  { value: "match", label: "Match", icon: "⚽" },
  { value: "stadium", label: "Stadium", icon: "🏟️" },
  { value: "prediction", label: "Prediction", icon: "🔮" },
  { value: "sticker", label: "Sticker", icon: "🃏" },
  { value: "trivia", label: "Trivia", icon: "🧠" },
  { value: "social", label: "Social", icon: "🎙️" },
];

export default function MemoryTimelineScreen({
  memories,
  matches,
  teams,
  onAddMemory,
}: MemoryTimelineScreenProps) {
  const [type, setType] = useState<MemoryType>("match");
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [mood, setMood] = useState("Buzzing");
  const [matchId, setMatchId] = useState("");
  const [teamIds, setTeamIds] = useState<string[]>([]);

  const selectedType = memoryTypes.find((item) => item.value === type) ?? memoryTypes[0];

  function toggleTeam(teamId: string) {
    setTeamIds((current) => {
      if (current.includes(teamId)) {
        return current.filter((id) => id !== teamId);
      }

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

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (title.trim().length === 0 || description.trim().length === 0) {
      return;
    }

    onAddMemory({
      type,
      title: title.trim(),
      description: description.trim(),
      icon: selectedType.icon,
      teamIds,
      matchId: matchId || undefined,
      mood: mood.trim() || "Memorable",
    });

    setTitle("");
    setDescription("");
    setMood("Buzzing");
    setMatchId("");
    setTeamIds([]);
  }

  return (
    <section className="screen" aria-labelledby="memories-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Memory timeline</p>
          <h1 className="hero-title" id="memories-title">
            Save the tournament story.
          </h1>
          <p className="hero-copy">
            Memories make the passport personal. Fans can attach moments to matches, teams, moods,
            sticker pulls, predictions, watch parties, and eventually real rewards.
          </p>
        </div>

        <aside className="hero-card">
          <p className="card-kicker">Timeline count</p>
          <h2>{memories.length} memories saved</h2>
          <p>Prototype entries are local UI state so funders can test the creation flow instantly.</p>
        </aside>
      </div>

      <div className="memory-layout">
        <form className="memory-form card" onSubmit={handleSubmit}>
          <div>
            <p className="card-kicker">Add a memory</p>
            <h2>Capture a passport moment</h2>
          </div>

          <div className="form-grid two">
            <div className="form-field">
              <label htmlFor="memory-type">Memory type</label>
              <select
                className="form-select"
                id="memory-type"
                onChange={(event) => setType(event.target.value as MemoryType)}
                value={type}
              >
                {memoryTypes.map((item) => (
                  <option key={item.value} value={item.value}>
                    {item.icon} {item.label}
                  </option>
                ))}
              </select>
            </div>

            <div className="form-field">
              <label htmlFor="memory-mood">Mood</label>
              <input
                className="form-input"
                id="memory-mood"
                maxLength={24}
                onChange={(event) => setMood(event.target.value)}
                value={mood}
              />
            </div>
          </div>

          <div className="form-field">
            <label htmlFor="memory-title">Title</label>
            <input
              className="form-input"
              id="memory-title"
              maxLength={60}
              onChange={(event) => setTitle(event.target.value)}
              placeholder="e.g. Last-minute winner in the pub"
              value={title}
            />
          </div>

          <div className="form-field">
            <label htmlFor="memory-description">Description</label>
            <textarea
              className="form-textarea"
              id="memory-description"
              onChange={(event) => setDescription(event.target.value)}
              placeholder="What happened, who were you with, and why does it belong in the passport?"
              value={description}
            />
          </div>

          <div className="form-field">
            <label htmlFor="memory-match">Attach match</label>
            <select
              className="form-select"
              id="memory-match"
              onChange={(event) => setMatchId(event.target.value)}
              value={matchId}
            >
              <option value="">No match attached</option>
              {matches.map((match) => {
                const home = getTeamById(teams, match.homeTeamId);
                const away = getTeamById(teams, match.awayTeamId);

                return (
                  <option key={match.id} value={match.id}>
                    {home?.shortName ?? "TBC"} v {away?.shortName ?? "TBC"} ·{" "}
                    {formatMatchDate(match.dateTime)}
                  </option>
                );
              })}
            </select>
          </div>

          <div>
            <p className="field-label">Attach up to three teams</p>
            <div className="goal-list">
              {teams.slice(0, 10).map((team) => (
                <button
                  aria-pressed={teamIds.includes(team.id)}
                  className={`chip ${teamIds.includes(team.id) ? "is-active" : ""}`}
                  key={team.id}
                  onClick={() => toggleTeam(team.id)}
                  type="button"
                >
                  <span aria-hidden="true">{team.flagEmoji}</span> {team.shortName}
                </button>
              ))}
            </div>
          </div>

          <button className="button-primary" disabled={!title.trim() || !description.trim()} type="submit">
            Save memory
          </button>
        </form>

        <div className="memory-feed">
          {memories.map((memory) => {
            const taggedTeams = memory.teamIds
              .map((teamId) => getTeamById(teams, teamId))
              .filter((team): team is Team => Boolean(team));

            return (
              <article className="memory-card" key={memory.id}>
                <span className="memory-icon" aria-hidden="true">
                  {memory.icon}
                </span>
                <div>
                  <div className="card-topline">
                    <div>
                      <h2>{memory.title}</h2>
                      <p className="card-meta">{formatMatchDate(memory.date, "long")}</p>
                    </div>
                    <StatusPill tone="info">{memory.mood}</StatusPill>
                  </div>
                  <p>{memory.description}</p>
                  <div className="memory-tags">
                    <StatusPill>{memory.type}</StatusPill>
                    {taggedTeams.map((team) => (
                      <StatusPill icon={team.flagEmoji} key={team.id} tone="success">
                        {team.shortName}
                      </StatusPill>
                    ))}
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}