A!leys Galerie

use std::{
    collections::HashMap,
    env,
    fs::File,
    io::{self, Read, Write},
    path::Path,
    process,
    thread,
    time::Duration,
};
use csv::ReaderBuilder;
use itertools::Itertools;
use ratatui::{
    backend::CrosstermBackend,
    layout::{Constraint, Direction, Layout, Rectangle},
    style::{Color, Modifier, Style},
    text::{Span, Spans},
    widgets::{Block, Borders, Paragraph, Tabs},
    Terminal,
};
use crossterm::{
    execute,
    event::{Event, KeyCode},
    terminal::{
        disable_raw_mode, enable_raw_mode, EnterAltScreen, LeaveAltScreen,
    },
};
use serde::Deserialize;
use sqlparser::{
    parser::Parser,
    dialect::GenericDialect,
    ast::{Statement, Expression, BinaryOpExpression, Ident, Table, TableWithJoins, Value},
};

// Glassmorphism UI Constants
const GLASS_BG: Color = Color::Rgb(30, 30, 40);
const GLASS_BORDER: Color = Color::Rgb(50, 50, 60);
const GLASS_TEXT: Color = Color::Rgb(220, 220, 230);
const NEON_HIGHLIGHT: Color = Color::Rgb(100, 200, 255);

// SQL Dialect Customization
const DIALECT: &str = "GenericDialect";

#[derive(Debug, Default)]
struct QueryResult {
    columns: Vec<String>,
    data: Vec<Vec<String>>,
}

#[derive(Debug, Default)]
struct AppState {
    csv_file: Option<String>,
    csv_data: Vec<HashMap<String, String>>,
    query: String,
    results: QueryResult,
    query_history: Vec<String>,
    history_index: usize,
    is_running: bool,
}

impl AppState {
    fn new() -> Self {
        AppState {
            csv_file: None,
            csv_data: Vec::new(),
            query: String::new(),
            results: QueryResult::default(),
            query_history: Vec::new(),
            history_index: 0,
            is_running: true,
        }
    }

    fn load_csv(&mut self, path: &str) -> io::Result<()> {
        let file = File::open(path)?;
        let mut reader = ReaderBuilder::new()
            .has_headers(true)
            .from_reader(file);

        self.csv_data.clear();
        self.results = QueryResult::default();

        for result in reader.records(|r| r.field_ref().map(|_| ())) {
            match result {
                Ok(record) => {
                    let mut row = HashMap::new();
                    for (i, field) in record.iter().enumerate() {
                        if let Some(header) = reader.headers().ok().and_then(|h| h.get(i)) {
                            row.insert(header.to_string(), field.to_string());
                        }
                    }
                    self.csv_data.push(row);
                }
                Err(e) => eprintln!("CSV Read Error: {}", e),
            }
        }
        Ok(())
    }

    fn execute_query(&mut self) {
        if self.csv_data.is_empty() || self.query.trim().is_empty() {
            self.results = QueryResult::default();
            return;
        }

        // Parse SQL
        let parsed = Parser::parse_sql(&self.query).unwrap_or_default();
        if parsed.is_empty() {
            self.results = QueryResult::default();
            return;
        }

        let statement = parsed[0].clone();

        // Validate SELECT statement
        if let Statement::Query(query) = statement {
            if let Some(select) = query.body {
                if let Statement::Select(select) = select {
                    let columns = if let Some( Expression::Select select_expr) = select.expr {
                        // Complex projection handling
                        let col_names = select_expr.projection.iter()
                            .filter_map(|expr| match expr {
                                Expression::Ident(ident) => Some(ident.name.clone()),
                                _ => None,
                            })
                            .collect::<Vec<_>>();
                        if col_names.is_empty() {
                            self.csv_data[0].keys().cloned().collect()
                        } else {
                            col_names
                        }
                    } else {
                        self.csv_data[0].keys().cloned().collect()
                    };

                    let mut filtered_data = Vec::new();

                    // Handle WHERE clause
                    if let Some( Expression::BinaryOpExpression(where_expr)) = select.expr.as_ref().and_then(|e| e.expr.as_ref()) {
                        if let BinaryOpExpression { left, op, right } = where_expr {
                            let column = if let Expression::Ident(ident) = left {
                                ident.name.clone()
                            } else {
                                return;
                            };

                            for row in &self.csv_data {
                                if let Some(value) = row.get(&column) {
                                    let condition_met = match op {
                                        // Equality
                                        BinaryOpExpression::Eq => value == right.to_string(),
                                        // Inequality
                                        BinaryOpExpression::Neq => value != right.to_string(),
                                        // Greater than
                                        BinaryOpExpression::Gt => value.parse::<f64>().unwrap_or(0.0) > right.to_string().parse::<f64>().unwrap_or(0.0),
                                        // Less than
                                        BinaryOpExpression::Lt => value.parse::<f64>().unwrap_or(0.0) < right.to_string().parse::<f64>().unwrap_or(0.0),
                                        // Like pattern matching
                                        BinaryOpExpression::Like => value.contains(&right.to_string()),
                                        _ => false,
                                    };

                                    if condition_met {
                                        let mut filtered_row = Vec::new();
                                        for col in &columns {
                                            filtered_row.push(row.get(col).cloned().unwrap_or_default());
                                        }
                                        filtered_data.push(filtered_row);
                                    }
                                }
                            }
                        }
                    } else {
                        // No WHERE clause - select all matching columns
                        for row in &self.csv_data {
                            let mut filtered_row = Vec::new();
                            for col in &columns {
                                filtered_row.push(row.get(col).cloned().unwrap_or_default());
                            }
                            filtered_data.push(filtered_row);
                        }
                    }

                    // Handle ORDER BY (simplified)
                    if let Some( Expression::OrderBy(order_by)) = select.expr.as_ref() {
                        if let Some( Expression::Ident(ident)) = order_by {
                            if let Ok(index) = columns.iter().position(|c| c == ident.name) {
                                filtered_data.sort_by(|a, b| {
                                    a[index].cmp(b[index])
                                });
                            }
                        }
                    }

                    // Update results
                    self.results.columns = columns;
                    self.results.data = filtered_data;
                }
            }
        }

        // Save to history
        if !self.query.trim().is_empty() {
            self.query_history.push(self.query.clone());
            self.history_index = self.query_history.len();
        }
    }

    fn previous_query(&mut self) {
        if !self.query_history.is_empty() && self.history_index > 0 {
            self.history_index -= 1;
            self.query = self.query_history[self.history_index].clone();
        }
    }

    fn next_query(&mut self) {
        if !self.query_history.is_empty() && self.history_index < self.query_history.len() - 1 {
            self.history_index += 1;
            self.query = self.query_history[self.history_index].clone();
        }
    }
}

fn main() {
    // Initialize terminal
    let mut terminal = Terminal::new(CrosstermBackend::new(io::stdout())).unwrap();
    terminal.hide_cursor().unwrap();

    // Enable raw mode and alt screen
    enable_raw_mode().unwrap();
    execute!(io::stdout(), EnterAltScreen).unwrap();

    // Load Glassmorphism assets
    let glass_assets = vec![
        Span::styled("Loading...", Style::default().fg(GLASS_TEXT)),
        Span::styled("NeonQuery", Style::default().add_modifier(Modifier::BOLD).fg(NEON_HIGHLIGHT)),
    ];

    // Main application loop
    let mut app = AppState::new();

    loop {
        terminal.draw(|f| {
            let size = f.size();

            // Glassmorphism layout
            let glass_layout = Layout::new(
                Direction::Vertical,
                Constraint::Percentage(90),
            )
            .bordered()
            .style(Style::default().bg(GLASS_BG));

            let header = Paragraph::new(Spans::from(glass_assets))
                .block(Block::default().borders(Borders::ALL).style(Style::default().bg(GLASS_BG).fg(GLASS_BORDER)))
                .style(Style::default().add_modifier(Modifier::BOLD));

            let main_layout = Layout::new(
                Direction::Vertical,
                vec![
                    Constraint::Percentage(10),
                    Constraint::Percentage(80),
                    Constraint::Percentage(10),
                ],
            );

            let csv_display = if let Some(file) = &app.csv_file {
                let status = if app.csv_data.is_empty() {
                    Spans::from(vec![
                        Span::styled("CSV file loaded, but no data read yet.", Style::default().fg(GLASS_TEXT)),
                    ])
                } else {
                    Spans::from(vec![
                        Span::styled(format!("Loaded: {}", app.csv_data.len()), Style::default().fg(GLASS_TEXT)),
                        Span::styled(format!(", Columns: {}", app.csv_data[0].keys().count()), Style::default().fg(GLASS_TEXT)),
                    ])
                };

                Paragraph::new(csv_display)
                    .block(Block::default().borders(Borders::ALL).style(Style::default().bg(GLASS_BG).fg(GLASS_BORDER)))
            } else {
                Paragraph::new(Spans::from(vec![
                    Span::styled("No CSV file loaded", Style::default().fg(GLASS_TEXT)),
                ]))
                .block(Block::default().borders(Borders::ALL).style(Style::default().bg(GLASS_BG).fg(GLASS_BORDER)))
            };

            let query_input = Paragraph::new(Spans::from(vec![
                Span::styled("SQL Query: ", Style::default().add_modifier(Modifier::BOLD)),
                Span::styled(&app.query, Style::default().fg(GLASS_TEXT)),
            ]))
            .block(Block::default().borders(Borders::ALL).style(Style::default().bg(GLASS_BG).fg(GLASS_BORDER)));

            let results_display = if app.results.data.is_empty() {
                Paragraph::new(Spans::from(vec![
                    Span::styled("Query results will appear here", Style::default().fg(GLASS_TEXT)),
                ]))
                .block(Block::default().borders(Borders::ALL).style(Style::default().bg(GLASS_BG).fg(GLASS_BORDER)))
            } else {
                // Results with alternating row colors
                let mut result_text = Vec::new();

                // Header row
                result_text.push(Span::styled(
                    app.results.columns.join(" | "),
                    Style::default().add_modifier(Modifier::BOLD).fg(GLASS_TEXT),
                ));

                // Data rows
                for (i, row) in app.results.data.iter().enumerate() {
                    let row_text = row.join(" | ");
                    let row_span = if i % 2 == 0 {
                        Span::styled(row_text, Style::default().fg(GLASS_TEXT))
                    } else {
                        Span::styled(row_text, Style::default().add_modifier(Modifier::REVERSED).fg(GLASS_TEXT))
                    };
                    result_text.push(row_span);
                }

                Paragraph::new(Spans::from(result_text))
                    .block(Block::default().borders(Borders::ALL).style(Style::default().bg(GLASS_BG).fg(GLASS_BORDER)))
            };

            f.render_widget(header, size);
            f.render_widget(
                main_layout,
                size,
            );

            let inner = main_layout.inner(size);
            f.render_widget(csv_display, inner[0]);
            f.render_widget(query_input, inner[1]);
            f.render_widget(results_display, inner[2]);

            // Status bar
            let status = if app.is_running {
                Span::styled("NeonQuery - Press ? for help", Style::default().fg(GLASS_TEXT))
            } else {
                Span::styled("Exiting...", Style::default().add_modifier(Modifier::BOLD).fg(NEON_HIGHLIGHT))
            };

            f.render_widget(
                Paragraph::new(Spans::from(vec![status]))
                    .style(Style::default().bg(GLASS_BG).fg(GLASS_BORDER))
                    .block(Block::default().borders(Borders::ALL)),
                size,
            );
        }).unwrap();

        // Handle events
        if let Event::Key(key) = crossterm::event::poll(0)? {
            match key.code {
                KeyCode::Char(c) => {
                    app.query.push(c);
                }
                KeyCode::Enter => {
                    app.execute_query();
                    app.query = String::new();
                }
                KeyCode::Backspace => {
                    app.query.pop();
                }
                KeyCode::Up => {
                    app.previous_query();
                }
                KeyCode::Down => {
                    app.next_query();
                }
                KeyCode::Char('q') => {
                    app.is_running = false;
                }
                KeyCode::Char('?') => {
                    show_help();
                    continue; // Don't process other events while help is shown
                }
                KeyCode::Char('l') => {
                    if let Some(file) = &app.csv_file {
                        if let Ok(_) = app.load_csv(file) {
                            // Success - nothing to show to user
                        }
                    }
                }
                KeyCode::Char('o') => {
                    let path = r#"C:\Users\<username>\Downloads\"#; // Default path
                    let mut file_path = String::from(path);

                    // Let user input custom path
                    let mut input = String::new();
                    io::stdin().read_line(&mut input).unwrap();
                    file_path.push_str(&input.trim());

                    if Path::new(&file_path).exists() {
                        if let Ok(_) = app.load_csv(&file_path) {
                            app.csv_file = Some(file_path);
                        }
                    }
                }
                _ => {}
            }
        }

        if !app.is_running {
            break;
        }

        // Small delay to prevent CPU overload
        thread::sleep(Duration::from_millis(50));
    }

    // Cleanup
    disable_raw_mode().unwrap();
    execute!(io::stdout(), LeaveAltScreen).unwrap();
    terminal.show_cursor().unwrap();
}

fn show_help() {
    let help_text = vec![
        Span::styled("NeonQuery Help", Style::default().add_modifier(Modifier::BOLD).fg(NEON_HIGHLIGHT)),
        Span::styled("=======================================", Style::default().fg(GLASS_TEXT)),
        Span::styled("Commands:", Style::default().add_modifier(Modifier::BOLD).fg(NEON_HIGHLIGHT)),
        Span::styled("  o - Load CSV file", Style::default().fg(GLASS_TEXT)),
        Span::styled("  l - Reload current CSV file", Style::default().fg(GLASS_TEXT)),
        Span::styled("  ↑/↓ - Navigate query history", Style::default().fg(GLASS_TEXT)),
        Span::styled("  ? - Show this help", Style::default().fg(GLASS_TEXT)),
        Span::styled("  q - Quit NeonQuery", Style::default().fg(GLASS_TEXT)),
        Span::styled("SQL Syntax Examples:", Style::default().add_modifier(Modifier::BOLD).fg(NEON_HIGHLIGHT)),
        Span::styled("  SELECT * FROM data WHERE column = 'value'", Style::default().fg(GLASS_TEXT)),
        Span::styled("  SELECT column1, column2 FROM data ORDER BY column1", Style::default().fg(GLASS_TEXT)),
        Span::styled("  SELECT * FROM data WHERE column LIKE '%pattern%'", Style::default().fg(GLASS_TEXT)),
    ];

    let help_terminal = Terminal::new(CrosstermBackend::new(io::stdout())).unwrap();
    help_terminal.draw(|f| {
        let size = f.size();
        let help_paragraph = Paragraph::new(Spans::from(help_text))
            .block(Block::default().borders(Borders::ALL).title("Help").style(Style::default().bg(GLASS_BG).fg(GLASS_BORDER)));

        f.render_widget(help_paragraph, size);
    }).unwrap();

    // Wait for user to close help
    loop {
        if let Event::Key(key) = crossterm::event::poll(0).unwrap() {
            if key.code == KeyCode::Char('?') || key.code == KeyCode::Esc {
                break;
            }
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neon Memory Flip</title>
  <style>
    :root {
      --neon-pink: #ff3a75;
      --neon-blue: #1e90ff;
      --neon-purple: #a226c9;
      --neon-green: #00ff88;
      --neon-orange: #ff7700;
      --neon-yellow: #ffff00;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: 'Arial', sans-serif;
      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      overflow-x: hidden;
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      text-shadow: 0 0 10px var(--neon-pink);
      animation: pulse 2s infinite alternate;
    }

    .game-container {
      width: 800px;
      margin: 2rem auto;
      perspective: 1000px;
    }

    .game-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      width: 100%;
      max-width: 800px;
    }

    .card {
      position: relative;
      width: 100px;
      height: 100px;
      background: #1a1a2e;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s;
      cursor: pointer;
      transform-style: preserve-3d;
    }

    .card.flipped {
      transform: rotateY(180deg);
    }

    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: transform 0.6s;
      transform: translateY(-100px);
      background: linear-gradient(135deg, #1a1a2e, #2d1b69);
    }

    .card.flipped .card-inner {
      transform: translateY(0);
    }

    .card-back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #1a1a2e, #2d1b69);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.5rem;
      color: #ffffff;
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    }

    .card-front {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #1a1a2e, #2d1b69);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    }

    .card-front .symbol {
      font-size: 3rem;
      margin-bottom: 0.5rem;
    }

    .card-front .card-value {
      font-size: 1rem;
      opacity: 0.8;
    }

    .flipped .card-back {
      transform: rotateY(180deg);
    }

    .card-match {
      background: linear-gradient(135deg, var(--neon-pink), var(--neon-blue));
      box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.3);
      transform: rotateY(180deg) scale(1.1);
    }

    .stats {
      margin-top: 2rem;
      text-align: center;
      font-size: 1.2rem;
    }

    .sound-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: 2px solid var(--neon-pink);
      color: var(--neon-pink);
      padding: 8px 12px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.3s;
    }

    .sound-btn:hover {
      background: var(--neon-pink);
      color: white;
    }

    .sound-btn.off {
      border-color: #555;
      color: #555;
    }

    .sound-btn.off:hover {
      background: none;
    }

    .restart-btn {
      margin-top: 1rem;
      padding: 0.8rem 1.5rem;
      background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
      border: none;
      border-radius: 5px;
      color: white;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }

    .restart-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
    }

    .highscore {
      margin-top: 1rem;
      padding: 0.5rem;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      font-size: 1rem;
    }

    @keyframes pulse {
      0% {
        text-shadow: 0 0 5px var(--neon-pink);
      }
      100% {
        text-shadow: 0 0 20px var(--neon-pink);
      }
    }

    @keyframes explode {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }

    .particle {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      box-shadow: 0 0 10px 5px var(--neon-pink);
      pointer-events: none;
    }
  </style>
</head>
<body>
  <button class="sound-btn" id="soundToggle">🔇 SOUND</button>
  <h1>NEON MEMORY FLIP</h1>
  <div class="game-container">
    <div class="game-grid" id="gameGrid"></div>
  </div>
  <div class="stats">
    <p>Moves: <span id="moves">0</span></p>
    <button class="restart-btn" id="restartBtn">NEW GAME</button>
    <div class="highscore">Highscore: <span id="highscore">0</span></div>
  </div>

  <audio id="flipSound" src="data:audio/wav;base64,UklGRh8gIlNOCISKZCg2IAAAAAQAAAAABAAEAKglhbGxvc3QsIG5vYm94ZCBpbnN0YW5jZXMgaW4gdGhlIGltYWdlcyBpcyBwcmVmaXggeW91ciBib2FyZGF5IG1vZGUgYmFzZWQgd2lkZ2V0cywgc2FsdA=="></audio>
  <audio id="matchSound" src="data:audio/wav;base64,UklGRiFwXAZnNISIwAEASQAAAAQAAAAYAAEAKgVsYW5kYXJ5IGJlYXJlcyBzZWxlY3RzIGlzIHVzdG9tYXRlcyBpbiBhZ21hIGZhc2hzb24gd2lkZ2V0cyBpcyBwcmVmaXggdGhlIGZpbHRlZCBnb29kZQ=="></audio>
  <audio id="winSound" src="data:audio/wav;base64,UklGRmwvMFVvNISIwAEASQAAAAQAAAAYAAEAKgVuZW50b3RoIGJlYXJlcyBzZWxlY3RzIGlzIHVzdG9tYXRlcyBpbiBhZ21hIGZhc2hzb24gd2lkZ2V0cyBpcyBwcmVmaXggdGhlIGZpbHRlZCBnb29kZQ=="></audio>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const gameGrid = document.getElementById('gameGrid');
      const movesDisplay = document.getElementById('moves');
      const highscoreDisplay = document.getElementById('highscore');
      const restartBtn = document.getElementById('restartBtn');
      const soundToggle = document.getElementById('soundToggle');

      let gameState = {
        cards: [],
        flippedCards: [],
        moves: 0,
        highscore: localStorage.getItem('neonMemoryHighscore') || 0,
        soundOn: true
      };

      // Initialize the game
      initGame();
      renderHighscore();
      updateSoundButton();

      // Event listeners
      restartBtn.addEventListener('click', initGame);
      soundToggle.addEventListener('click', toggleSound);

      // Functions
      function initGame() {
        gameState.cards = createCards();
        gameState.flippedCards = [];
        gameState.moves = 0;
        movesDisplay.textContent = gameState.moves;
        renderCards();
        shuffleCards();
      }

      function createCards() {
        const symbols = ['✦', '△', '☺', '🌕', '⚡', '💎', '🔥', '🌟'];
        const cards = [];

        // Create pairs of cards
        for (let i = 0; i < symbols.length; i++) {
          cards.push({
            id: i,
            symbol: symbols[i],
            flipped: false,
            matched: false
          });
          cards.push({
            id: i,
            symbol: symbols[i],
            flipped: false,
            matched: false
          });
        }

        return cards;
      }

      function shuffleCards() {
        // Fisher-Yates shuffle algorithm
        for (let i = gameState.cards.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [gameState.cards[i], gameState.cards[j]] = [gameState.cards[j], gameState.cards[i]];
        }
      }

      function renderCards() {
        gameGrid.innerHTML = '';

        gameState.cards.forEach((card, index) => {
          const cardElement = document.createElement('div');
          cardElement.className = 'card';
          if (card.flipped) cardElement.classList.add('flipped');
          if (card.matched) cardElement.classList.add('card-match');

          cardElement.innerHTML = `
            <div class="card-back">
              <div class="back-symbol">🚀</div>
            </div>
            <div class="card-front">
              <div class="symbol">${card.symbol}</div>
              <div class="card-value">${index + 1}</div>
            </div>
          `;

          cardElement.addEventListener('click', () => handleCardClick(index));
          gameGrid.appendChild(cardElement);
        });
      }

      function handleCardClick(index) {
        if (gameState.flippedCards.length === 2 || gameState.cards[index].flipped || gameState.cards[index].matched) {
          return;
        }

        gameState.moves++;
        movesDisplay.textContent = gameState.moves;

        gameState.cards[index].flipped = true;
        gameState.flippedCards.push(index);

        renderCards();

        if (gameState.flippedCards.length === 2) {
          setTimeout(checkForMatch, 300);
        }
      }

      function checkForMatch() {
        const [index1, index2] = gameState.flippedCards;

        if (gameState.cards[index1].symbol === gameState.cards[index2].symbol) {
          gameState.cards[index1].matched = true;
          gameState.cards[index2].matched = true;

          if (gameState.soundOn) {
            document.getElementById('matchSound').play();
          }

          // Create explosion particles
          createExplosion(index1);
          createExplosion(index2);

          gameState.flippedCards = [];
          renderCards();

          checkWinCondition();

          return;
        }

        // If no match, flip cards back
        setTimeout(() => {
          gameState.cards[index1].flipped = false;
          gameState.cards[index2].flipped = false;
          gameState.flippedCards = [];

          if (gameState.soundOn) {
            document.getElementById('flipSound').play();
          }

          renderCards();
        }, 500);
      }

      function createExplosion(index) {
        const cardElement = gameGrid.children[index];
        const rect = cardElement.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;

        for (let i = 0; i < 30; i++) {
          const particle = document.createElement('div');
          particle.className = 'particle';

          // Random color based on the card's color
          const hue = Math.floor(Math.random() * 60) + 200;
          particle.style.background = `hsl(${hue}, 100%, 50%)`;
          particle.style.boxShadow = `0 0 10px 5px hsl(${hue}, 100%, 50%)`;

          // Random position around the center
          const angle = Math.random() * Math.PI * 2;
          const distance = Math.random() * 30 + 20;
          const x = Math.cos(angle) * distance;
          const y = Math.sin(angle) * distance;

          particle.style.left = `${centerX + x}px`;
          particle.style.top = `${centerY + y}px`;

          // Random animation duration
          const duration = Math.random() * 0.5 + 0.5;
          particle.style.animation = `explode ${duration}s linear`;

          document.body.appendChild(particle);

          // Remove particle after animation
          setTimeout(() => {
            particle.remove();
          }, duration * 1000);
        }
      }

      function checkWinCondition() {
        const allMatched = gameState.cards.every(card => card.matched);

        if (allMatched) {
          if (gameState.moves < gameState.highscore) {
            gameState.highscore = gameState.moves;
            localStorage.setItem('neonMemoryHighscore', gameState.highscore);
          }
          renderHighscore();

          if (gameState.soundOn) {
            document.getElementById('winSound').play();
          }

          setTimeout(() => {
            alert(`You won in ${gameState.moves} moves! New highscore: ${gameState.highscore}`);
          }, 500);
        }
      }

      function renderHighscore() {
        highscoreDisplay.textContent = gameState.highscore;
      }

      function toggleSound() {
        gameState.soundOn = !gameState.soundOn;
        updateSoundButton();
      }

      function updateSoundButton() {
        if (gameState.soundOn) {
          soundToggle.textContent = '🔇 SOUND';
          soundToggle.classList.remove('off');
        } else {
          soundToggle.textContent = '🔊 SOUND';
          soundToggle.classList.add('off');
        }
      }
    });
  </script>
</body>
</html>