"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useParams, useRouter } from 'next/navigation';
import React from 'react';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

interface GoalScorer {
  name: string;
  minute: number;
}

interface Match {
  id: string;
  homeTeam: string;
  awayTeam: string;
  homeScore: number;
  awayScore: number;
  date: string;
  venue: string;
  tournamentStage: string;
  goalScorers: GoalScorer[];
  imageSrc: string;
  imageAlt: string;
}

const dummyMatchData: Record<string, Match> = {
  "match-1": {
    id: "match-1",    homeTeam: "Argentina",    awayTeam: "France",    homeScore: 3,
    awayScore: 3,
    date: "December 18, 2022",    venue: "Lusail Stadium, Qatar",    tournamentStage: "2022 Final",    goalScorers: [
      { name: "Lionel Messi (ARG)", minute: 23 },
      { name: "Ángel Di María (ARG)", minute: 36 },
      { name: "Kylian Mbappé (FRA)", minute: 80 },
      { name: "Kylian Mbappé (FRA)", minute: 81 },
      { name: "Lionel Messi (ARG)", minute: 108 },
      { name: "Kylian Mbappé (FRA)", minute: 118 },
    ],
    imageSrc: "http://img.b2bpic.net/free-photo/spain-vs-switzerland_187299-31172.jpg",    imageAlt: "Argentina vs France World Cup Final 2022"
  },
  "match-2": {
    id: "match-2",    homeTeam: "Brazil",    awayTeam: "Germany",    homeScore: 1,
    awayScore: 7,
    date: "July 8, 2014",    venue: "Estádio Mineirão, Brazil",    tournamentStage: "2014 Semi-final",    goalScorers: [
      { name: "Thomas Müller (GER)", minute: 11 },
      { name: "Miroslav Klose (GER)", minute: 23 },
      { name: "Toni Kroos (GER)", minute: 24 },
      { name: "Toni Kroos (GER)", minute: 26 },
      { name: "Sami Khedira (GER)", minute: 29 },
      { name: "André Schürrle (GER)", minute: 69 },
      { name: "André Schürrle (GER)", minute: 79 },
      { name: "Oscar (BRA)", minute: 90 },
    ],
    imageSrc: "http://img.b2bpic.net/free-photo/ghana-vs-croatia-football_187299-32095.jpg",    imageAlt: "Brazil vs Germany World Cup Semi-final 2014"
  },
  "match-3": {
    id: "match-3",    homeTeam: "Italy",    awayTeam: "Brazil",    homeScore: 0,
    awayScore: 0,
    date: "July 17, 1994",    venue: "Rose Bowl, USA",    tournamentStage: "1994 Final",    goalScorers: [], // No goals in regular/extra time
    imageSrc: "http://img.b2bpic.net/free-photo/soccer-fans-cheering-their-team-stadium_23-2151536180.jpg",    imageAlt: "Italy vs Brazil World Cup Final 1994"
  },
  "match-4": {
    id: "match-4",    homeTeam: "England",    awayTeam: "Germany",    homeScore: 1,
    awayScore: 4,
    date: "June 27, 2010",    venue: "Free State Stadium, South Africa",    tournamentStage: "2010 Round of 16",    goalScorers: [
      { name: "Miroslav Klose (GER)", minute: 20 },
      { name: "Lukas Podolski (GER)", minute: 32 },
      { name: "Matthew Upson (ENG)", minute: 37 },
      { name: "Thomas Müller (GER)", minute: 67 },
      { name: "Thomas Müller (GER)", minute: 70 },
    ],
    imageSrc: "http://img.b2bpic.net/free-photo/men-playing-rugby-field_23-2150062039.jpg",    imageAlt: "England vs Germany World Cup 2010"
  },
  "match-5": {
    id: "match-5",    homeTeam: "Spain",    awayTeam: "Netherlands",    homeScore: 1,
    awayScore: 0,
    date: "July 11, 2010",    venue: "Soccer City, South Africa",    tournamentStage: "2010 Final",    goalScorers: [
      { name: "Andrés Iniesta (ESP)", minute: 116 },
    ],
    imageSrc: "http://img.b2bpic.net/free-photo/soccer-game-concept_23-2151043781.jpg",    imageAlt: "Spain vs Netherlands World Cup Final 2010"
  },
  "match-6": {
    id: "match-6",    homeTeam: "USA",    awayTeam: "Mexico",    homeScore: 2,
    awayScore: 0,
    date: "June 17, 2002",    venue: "Jeonju World Cup Stadium, South Korea",    tournamentStage: "2002 Round of 16",    goalScorers: [
      { name: "Brian McBride (USA)", minute: 8 },
      { name: "Landon Donovan (USA)", minute: 65 },
    ],
    imageSrc: "http://img.b2bpic.net/free-photo/morocco-vs-united-states-football_187299-32225.jpg",    imageAlt: "USA vs Mexico World Cup 2002"
  },
};

export default function MatchDetailPage() {
  const params = useParams();
  const matchId = params.id as string;
  const match = dummyMatchData[matchId];

  if (!match) {
    return (
      <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="none"
        cardStyle="outline"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="extrabold"
      >
        <NavbarLayoutFloatingOverlay
          navItems={[
            { name: "Home", id: "/" },
            { name: "Matches", id: "/" }, // Link back to home page's matches section
            { name: "About", id: "#about" },
            { name: "Stats", id: "#stats" },
            { name: "Fans Say", id: "#testimonials" },
            { name: "FAQ", id: "#faq" },
            { name: "Contact", id: "#contact" },
          ]}
          logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-football-soccer-club-logo_23-2149313711.jpg"
          logoAlt="World Cup Hub Logo"
          brandName="World Cup Hub"
        />
        <div className="flex flex-col items-center justify-center min-h-screen text-center p-8">
          <h1 className="text-4xl font-bold mb-4">Match Not Found</h1>
          <p className="text-lg">The match you are looking for does not exist.</p>
        </div>
        <FooterBaseReveal
          logoText="World Cup Hub"
          columns={[
            { title: "Navigate", items: [{ label: "Home", href: "/" }, { label: "Matches", href: "/" }, { label: "Stats", href: "#stats" }, { label: "Archives", href: "#archives" }] },
            { title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
            { title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] },
          ]}
          copyrightText="© 2024 World Cup Hub. All rights reserved."
        />
      </ThemeProvider>
    );
  }

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <NavbarLayoutFloatingOverlay
        navItems={[
          { name: "Home", id: "/" },
          { name: "Matches", id: "/" }, // Link back to home page's matches section
          { name: "About", id: "#about" },
          { name: "Stats", id: "#stats" },
          { name: "Fans Say", id: "#testimonials" },
          { name: "FAQ", id: "#faq" },
          { name: "Contact", id: "#contact" },
        ]}
        logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-football-soccer-club-logo_23-2149313711.jpg"
        logoAlt="World Cup Hub Logo"
        brandName="World Cup Hub"
      />
      <div className="min-h-screen pt-24 pb-12 flex flex-col items-center justify-center bg-background text-foreground">
        <div className="container max-w-4xl mx-auto px-4">
          <h1 className="text-5xl font-extrabold text-center mb-8 leading-tight">
            <span className="text-primary-cta">Match Details:</span> {match.homeTeam} vs {match.awayTeam}
          </h1>
          <img src={match.imageSrc} alt={match.imageAlt} className="w-full h-80 object-cover rounded-xl shadow-lg mb-8" />

          <div className="bg-card p-8 rounded-xl shadow-md text-center mb-8 border border-border">
            <p className="text-xl font-semibold mb-2">{match.tournamentStage}</p>
            <p className="text-lg mb-4">{match.date} at {match.venue}</p>
            <div className="flex items-center justify-center space-x-4">
              <span className="text-4xl font-bold">{match.homeTeam}</span>
              <span className="text-6xl font-extrabold text-primary-cta">{match.homeScore} - {match.awayScore}</span>
              <span className="text-4xl font-bold">{match.awayTeam}</span>
            </div>
          </div>

          {match.goalScorers.length > 0 && (
            <div className="bg-card p-8 rounded-xl shadow-md border border-border">
              <h2 className="text-3xl font-bold mb-6 text-center">Goal Scorers</h2>
              <ul className="space-y-4">
                {match.goalScorers.map((scorer, index) => (
                  <li key={index} className="flex items-center justify-between bg-background-accent p-4 rounded-lg shadow-sm">
                    <span className="text-lg font-medium">{scorer.name}</span>
                    <span className="text-primary-cta font-semibold">{scorer.minute}'</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
          {match.goalScorers.length === 0 && (
            <div className="bg-card p-8 rounded-xl shadow-md border border-border text-center">
              <h2 className="text-2xl font-bold mb-4">No Goals Scored in Regular Time</h2>
              <p className="text-lg">This match was decided by other means (e.g., penalty shootout).</p>
            </div>
          )}
        </div>
      </div>
      <FooterBaseReveal
        logoText="World Cup Hub"
        columns={[
          { title: "Navigate", items: [{ label: "Home", href: "/" }, { label: "Matches", href: "/" }, { label: "Stats", href: "#stats" }, { label: "Archives", href: "#archives" }] },
          { title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
          { title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] },
        ]}
        copyrightText="© 2024 World Cup Hub. All rights reserved."
      />
    </ThemeProvider>
  );
}
