'use client'

import { useEffect, useRef, useState } from "react";
import { LandingImage } from "./landing-image";

export const NolaGlitch = () => {
  const ascii = useRef<HTMLDivElement>(null);

  const chars = "asdfghjklzxcvbnmqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP1234567890";
  const symbols = "10!@#$%^&*~|\;,./?<>:";

  function randomChar(len: number) {
    let char = "";
    for (let i = 0; i <= len; i++) {
      const cindex = Math.floor(Math.random() * chars.length);
      char += chars[cindex];
    }
    return char;
  }
  
  function randomSymbol(len: number = 1) {
    let char = "";
    for (let i = 0; i <= len; i++) {
      const cindex = Math.floor(Math.random() * symbols.length);
      char += symbols[cindex];
    }
    return char;
  }

  useEffect(() => {
    const art = ascii.current as HTMLDivElement;
    const artasci = art.innerHTML;
    
    const interval = setInterval(() => {
      const glitch_probality = Math.floor(Math.random() * 3);
      
      if (glitch_probality == 1) {
        art.innerHTML = [...artasci].map(v => {
          const char_probality = Math.floor(Math.random() * 50);
          const delchar_probablity = Math.floor(Math.random() * 40);
    
          if (delchar_probablity == 1) {
            return ' ';
          }
          else {
            if (v == "⠀") {
              return char_probality == 1 ? randomSymbol(0) : v;
            }
            else if (v === " ") {
              return char_probality == 1 ? "-" : v;
            }
          }
    
          return v;
        }).
        join("");
      }
      else {
        art.innerHTML = artasci;
      }
    }, 60);

    return () => {
      clearInterval(interval);
    }
  }, []);

  return (
    <div ref={ascii}>
            ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⣴⠶⠶⠿⠿⢶⣶⠶⠶⠿⠛⠻⠷⠶⣦⣄⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⡾⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠷⣦⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠀⠀⠀⠀⠀⣀⣴⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢷⣄⠀⠀⠀⠀⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠀⠀⠀⠀⣴⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣷⡀⠀⠀⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠀⠀⠀⣾⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⡄⠀⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠀⠀⢸⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣷⠀⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠀⠀⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⡆⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠀⢰⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠀⣾⠇⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⠀⠀⠀⠀<br/>
            ⠀⠀⠀⢠⡿⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⢠⣶⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⣆⠀⠀⠀⠀⠀⠀⠀⠀⢻⡆⠀⠀⠀<br/>
            ⠀⠀⠀⣾⠇⠀⠀⠀⠀⢰⣿⠀⠀⢀⣀⣤⣿⣧⠀⠀⠀⠀⠀⢠⡄⠀⣤⣤⣤⣤⣤⡹⣧⡀⠀⠀⠀⠀⠀⠀⠈⢿⡄⠀⠀<br/>
            ⠀⠀⢰⡿⠀⠀⠀⠀⠀⢸⣿⣤⣾⠛⠋⠁⢙⣿⣧⣀⡀⠀⠀⢸⣷⡀⠀⠀⠀⠀⠈⣹⡿⣧⠀⠀⠀⢻⣆⠀⠀⠘⣿⡀⠀<br/>
            ⠀⠀⣾⠃⠀⠀⠀⠀⠀⢸⣿⠉⠙⠛⠛⠛⠛⢉⣈⡉⠛⠛⠿⠿⠛⠛⠛⠛⠛⠛⠛⠋⠀⢻⡆⠀⠀⠀⢿⡆⠀⠀⠘⣷⠀<br/>
            ⠀⣸⡏⠀⠀⢠⡦⠀⠀⢸⣿⠀⠀⢀⣤⣶⣿⣿⣯⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠄⠘⣷⠀⠀⠀⠈⣿⡀⠀⠀⢹⡇<br/>
            ⢠⡿⠀⠀⠀⣼⠇⠀⠀⢸⣿⠀⠾⠛⠁⢿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⢤⣤⠴⠶⠛⠉⠀⠀⣿⡄⠀⠀⠀⢸⡇⠀⠀⠈⣿<br/>
            ⢸⡇⠀⠀⠀⣿⠀⠀⠀⠈⣿⠀⠀⠀⠀⠘⠿⠿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡇⠀⠀⠀⠘⣿⠀⠀⢠⡿<br/>
            ⠘⣷⠀⠀⠀⣿⠀⠀⠀⠀⢻⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣀⣠⣶⠀⠀⠀⠀⠀⠀⣸⡇⠀⠀⠀⠀⣿⠀⣀⣾⠃<br/>
            ⠀⠹⣧⠀⠀⣿⠀⠀⠀⠀⠸⣧⠀⠀⠀⠀⠀⠀⠀⠻⠷⠿⠛⠉⠉⠉⠉⠀⠀⠀⢀⣀⣤⡾⣿⡇⠀⠀⠀⢰⣿⡾⠛⠁⠀<br/>
            ⠀⠀⠙⣷⡄⢹⡇⠀⠀⠀⠀⢿⣶⣦⣤⣀⣀⣀⣀⣀⣀⣀⣀⣤⣤⣤⣴⠶⠶⠿⠛⠋⠁⠀⣿⠀⠀⠀⢀⣿⠃⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠈⠻⣾⣿⡀⠀⠀⠀⠘⣷⡀⠉⠉⠉⠛⠛⠛⠋⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡏⠀⣀⣴⠟⠁⠀⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠀⠀⠈⠙⢷⡄⠀⠀⠀⠹⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡿⠿⠛⠋⠁⠀⠀⠀⠀⠀⠀⠀<br/>
            ⠀⠀⠀⠀⠀⠀⠀⠈⠛⠷⣦⣤⣤⣽⡧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/>
    </div>
  )
}

export const NolaGlitchClientOnly = () => {
  const [willTheyLucky, setLucky] = useState(false);
  const probability = 18;

  useEffect(() => {
    const rand = Math.floor(Math.random() * probability)
    setLucky(rand == 1);
  }, []);

  if (!willTheyLucky) {
    return <LandingImage />
  }

  return <div className="text-[6px] xs:text-[9px] leading-[0.53rem] xs:leading-[0.8rem] h-[230px] xs:h-[320px] text-center max-w-[240px] xs:max-w-max mx-auto">
    <NolaGlitch />
  </div>
}