"use client";

import { useState, useEffect } from "react";

// Window component for Windows 95 style
function Window({
  title,
  icon,
  children,
  className = "",
}: {
  title: string;
  icon?: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={`win95-window ${className}`}>
      <div className="win95-title-bar">
        <div className="flex items-center">
          {icon && <img src={icon} alt="" className="win95-title-icon pixelated" />}
          <span>{title}</span>
        </div>
        <div className="win95-title-buttons">
          <button type="button" className="win95-title-btn">_</button>
          <button type="button" className="win95-title-btn">□</button>
          <button type="button" className="win95-title-btn">
            <img src="https://ext.same-assets.com/3788572766/2764414948.png" alt="×" className="w-3 h-3 pixelated" />
          </button>
        </div>
      </div>
      <div className="win95-content">{children}</div>
    </div>
  );
}

// Bio Window
function BioWindow() {
  return (
    <Window title="bio" icon="https://ext.same-assets.com/3788572766/2702310110.png">
      <div className="text-[11px] space-y-1">
        <p><strong>age:</strong> 25 (i'm old)</p>
        <p className="flex items-center gap-1">
          <strong>pronouns:</strong> she/her/any
          <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-4 h-4 pixelated inline" />
        </p>
        <p className="flex items-center gap-1">
          <strong>nationality:</strong> french
          <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-4 h-4 pixelated inline" />
          <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-4 h-4 pixelated inline" />
        </p>
      </div>
    </Window>
  );
}

// Contact Window
function ContactWindow() {
  return (
    <Window title="contact" icon="https://ext.same-assets.com/3788572766/3864444371.png">
      <div className="text-[11px]">
        <p><strong>mail:</strong></p>
        <p className="text-[#7b68a6]">contact.lilithdev@proton.me</p>
      </div>
    </Window>
  );
}

// Webcam Window
function WebcamWindow() {
  return (
    <Window title="webcam" icon="https://ext.same-assets.com/3788572766/1618106732.png">
      <div className="win95-inset flex items-center justify-center">
        <img
          src="https://ext.same-assets.com/3788572766/49464171.gif"
          alt="webcam"
          className="w-full max-w-[150px] pixelated floating"
        />
      </div>
    </Window>
  );
}

// Chat Window
function ChatWindow() {
  const [messages] = useState([
    { username: "LilithDev [OWNER]", isOwner: true, content: "Rules: Yes this is a real chat. Don't spam. Kids will be nuked. English only." },
    { username: "Anonymous#2953", isOwner: false, content: "Hi" },
    { username: "Anonymous#7324", isOwner: false, content: "how r yall doing" },
  ]);

  return (
    <Window title="chat" icon="https://ext.same-assets.com/3788572766/2530218799.png">
      <div className="win95-inset max-h-[200px] overflow-y-auto mb-2">
        {messages.map((msg, i) => (
          <div key={i} className="chat-message">
            <span className={msg.isOwner ? "chat-owner" : "chat-username"}>{msg.username}</span>
            {msg.isOwner && (
              <div className="my-1">
                <img src="https://ext.same-assets.com/3788572766/1867219465.gif" alt="" className="w-16 h-16 pixelated" />
              </div>
            )}
            <p className="text-[10px] mt-1">{msg.content}</p>
          </div>
        ))}
        <p className="text-[9px] text-[#7b68a6] text-right">Scroll to Bottom?</p>
      </div>
      <div className="flex items-center gap-1">
        <input type="text" placeholder="Message chat" className="chat-input flex-1" />
        <button type="button" className="win95-button px-2">
          <img src="https://ext.same-assets.com/3788572766/2518315651.png" alt="emoji" className="w-4 h-4 pixelated" />
        </button>
      </div>
    </Window>
  );
}

// Credits Window
function CreditsWindow() {
  return (
    <Window title="credits" icon="https://ext.same-assets.com/3788572766/414538263.png">
      <ul className="text-[10px] list-disc pl-4 space-y-1">
        <li>
          The cute Lily art on my homepage by the talented{" "}
          <a href="https://mochynarr.carrd.co/" target="_blank" rel="noopener noreferrer">mochy_narr</a>{" "}
          and gifted by the amazing{" "}
          <a href="https://luvrksknskyejourney.org/" target="_blank" rel="noopener noreferrer">Skye</a>!
        </li>
        <li>
          Most of the assets on this page as well as its design come from{" "}
          <a href="https://store.steampowered.com/app/1451940/NEEDY_STREAMER_OVERLOAD/" target="_blank" rel="noopener noreferrer">Needy Streamer Overload</a>.
        </li>
      </ul>
    </Window>
  );
}

// Navigation Window
function NavigationWindow() {
  const navItems = [
    { label: "sitemap", active: false },
    { label: "shrines", active: false },
    { label: "battle select", active: false },
    { label: "corridor", active: true },
    { label: "omori textbox", active: false },
    { label: "omori battle box", active: false },
    { label: "personal", active: false },
    { label: "heaven", active: false },
    { label: "my nudes", active: false, emoji: true },
  ];

  return (
    <Window title="navigation" icon="https://ext.same-assets.com/3788572766/415338526.png">
      <div className="flex flex-wrap gap-1">
        {navItems.map((item, i) => (
          <button type="button" key={i} className={`nav-button ${item.active ? "active" : ""}`}>
            {item.label}
            {item.emoji && <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-3 h-3 inline ml-1 pixelated" />}
          </button>
        ))}
      </div>
    </Window>
  );
}

// Music Player Window
function MusicPlayerWindow() {
  return (
    <Window title="music player" icon="https://ext.same-assets.com/3788572766/4050397104.png">
      <div className="music-player">
        <img
          src="https://ext.same-assets.com/3788572766/3862269513.jpeg"
          alt="album"
          className="w-16 h-16 pixelated border border-[#45318d]"
        />
        <div className="flex-1">
          <p className="text-[10px] font-bold">Needy Streamer Overload OST - 0</p>
          <p className="text-[9px] text-[#7b68a6]">Uploaded by</p>
          <div className="music-controls mt-2">
            <button type="button" className="music-btn">◀◀</button>
            <button type="button" className="music-btn">▶</button>
            <button type="button" className="music-btn">▶▶</button>
            <button type="button" className="music-btn">◀</button>
            <button type="button" className="music-btn">—</button>
          </div>
          <div className="flex items-center gap-2 mt-1">
            <div className="progress-bar flex-1">
              <div className="progress-fill" />
            </div>
            <span className="text-[9px]">00:00 / 00:00</span>
          </div>
        </div>
      </div>
    </Window>
  );
}

// Home Window
function HomeWindow() {
  return (
    <Window title="home" icon="https://ext.same-assets.com/3788572766/3746481880.png">
      <div className="text-[11px] space-y-3">
        <p className="flex items-center gap-1">
          Hello, you can call me LilithDev!{" "}
          <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-4 h-4 pixelated inline" />
        </p>

        <p>
          Welcome to my website! I made it to serve as a linktree for my other socials a long time ago,
          but nowadays it's mostly where I do webdev projects for fun.
        </p>

        <p className="flex items-start gap-1">
          I'm a computer science major who's still trying to find free time to do what she finds fun,
          what I can't do with layout I can with coding (feel free to take code from my site by the way!
          if you ever need help with anything I'll happily do so{" "}
          <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-4 h-4 pixelated inline" />)
        </p>

        <p className="flex items-start gap-1">
          So I hope you'll enjoy the website and i hope to fill it up with even more cool things for people
          to browse through{" "}
          <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-4 h-4 pixelated inline" />
        </p>

        <p className="flex items-center gap-1">
          Thank you so much for visiting!{" "}
          <span className="text-red-500">❤</span>
        </p>

        <div className="win95-inset mt-4">
          <img
            src="https://ext.same-assets.com/3788572766/1024600910.png"
            alt="Lily art"
            className="w-full pixelated"
          />
        </div>
      </div>
    </Window>
  );
}

// Blog Window
function BlogWindow() {
  const posts = [
    {
      title: "Spooky Scary 2025 Edition Update",
      content: "It do be the fabled halloween update!",
      image: "https://ext.same-assets.com/3788572766/3521338159.webp",
      date: "Wed, 22 Oct 2025 17:24:52 +0000"
    },
    {
      title: "A million of em update",
      content: "Expanded the OMORI battle system, click here to learn more!",
      image: "https://ext.same-assets.com/3788572766/299689577.png",
      date: "Thu, 03 Jul 2025 13:06:23 +0000"
    }
  ];

  return (
    <Window title="blog" icon="https://ext.same-assets.com/3788572766/2175654514.png">
      <div className="space-y-3 max-h-[400px] overflow-y-auto">
        {posts.map((post, i) => (
          <div key={i} className="blog-post">
            <div className="flex items-center gap-2 mb-2">
              <img src="https://ext.same-assets.com/3788572766/3839119025.png" alt="" className="w-8 h-8 pixelated" />
              <div>
                <p className="text-[11px] font-bold flex items-center gap-1">
                  <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-3 h-3 pixelated" />
                  LilithDev
                  <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-3 h-3 pixelated" />
                  <span className="text-[#7b68a6] font-normal">@lilithpup</span>
                </p>
              </div>
            </div>
            <p className="text-[12px] font-bold text-[#a64997]">{post.title}</p>
            <p className="text-[10px] mt-1">{post.content}</p>
            {post.image && (
              <img src={post.image} alt="" className="w-full mt-2 rounded pixelated" />
            )}
            <p className="text-[9px] text-[#7b68a6] mt-2">{post.date}</p>
          </div>
        ))}
      </div>
    </Window>
  );
}

// News Window
function NewsWindow() {
  return (
    <Window title="news" icon="https://ext.same-assets.com/3788572766/2792808937.png">
      <div className="win95-inset text-[10px] text-center py-2">
        <a href="#" className="flex items-center justify-center gap-1">
          <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-3 h-3 pixelated" />
          I'm live! Come say hi~
        </a>
      </div>
    </Window>
  );
}

// Other Sites Window
function OtherSitesWindow() {
  const buttons = [
    "https://ext.same-assets.com/3788572766/1375725395.gif",
    "https://ext.same-assets.com/3788572766/1464091152.png",
    "https://ext.same-assets.com/3788572766/3575876511.gif",
    "https://ext.same-assets.com/3788572766/2144420999.png",
    "https://ext.same-assets.com/3788572766/3814098555.gif",
    "https://ext.same-assets.com/3788572766/353533170.gif",
    "https://ext.same-assets.com/3788572766/1807582436.png",
  ];

  return (
    <Window title="other sites" icon="https://ext.same-assets.com/3788572766/3131674232.png">
      <div className="flex flex-wrap gap-1">
        {buttons.map((btn, i) => (
          <a key={i} href="#" className="site-button">
            <img src={btn} alt="" className="h-[31px] pixelated" />
          </a>
        ))}
      </div>
    </Window>
  );
}

// Webring Window
function WebringWindow() {
  return (
    <Window title="webring" icon="https://ext.same-assets.com/3788572766/177457042.png">
      <div className="space-y-2">
        <div className="flex items-center justify-center gap-2">
          <a href="#"><img src="https://ext.same-assets.com/3788572766/1105774528.png" alt="prev" className="h-6 pixelated" /></a>
          <a href="#"><img src="https://ext.same-assets.com/3788572766/322895202.png" alt="transring" className="h-6 pixelated" /></a>
          <a href="#"><img src="https://ext.same-assets.com/3788572766/1227685928.png" alt="next" className="h-6 pixelated" /></a>
        </div>
        <div className="flex items-center justify-center">
          <a href="#"><img src="https://ext.same-assets.com/3788572766/1695573498.png" alt="needyring" className="h-20 pixelated" /></a>
        </div>
        <p className="text-[10px] text-center">
          this site is part of the needyring!<br />
          <a href="#">index</a> | <a href="#">what is this?</a>
        </p>
        <div className="flex items-center justify-center">
          <a href="#"><img src="https://ext.same-assets.com/3788572766/4143973985.png" alt="webring" className="h-16 pixelated" /></a>
        </div>
      </div>
    </Window>
  );
}

// Embed Me Window
function EmbedMeWindow() {
  return (
    <Window title="embed me" icon="https://ext.same-assets.com/3788572766/597608097.png">
      <div className="text-center mb-2">
        <img src="https://ext.same-assets.com/3788572766/4253450532.gif" alt="button" className="mx-auto pixelated" />
      </div>
      <div className="win95-inset">
        <input
          type="text"
          readOnly
          value='<a href="https://lilithdev...'
          className="w-full bg-white border-none text-[9px] font-mono"
        />
      </div>
    </Window>
  );
}

// Updates Window
function UpdatesWindow() {
  const updates = [
    "22/10/2025 : Halloween update!",
    "03/07/2025 : Expanded the OMORI battle sim.",
    "25/01/2025 : Added the OMORI battle sim and PIEN.",
    "17/11/2024 : WHITEPINE shrine was added.",
  ];

  return (
    <Window title="updates" icon="https://ext.same-assets.com/3788572766/2204866569.png">
      <ul className="updates-list">
        {updates.map((update, i) => (
          <li key={i}>{update}</li>
        ))}
      </ul>
    </Window>
  );
}

// Warning Window
function WarningWindow() {
  return (
    <Window title="warning" icon="https://ext.same-assets.com/3788572766/1453299704.png">
      <p className="text-[10px] text-red-500 flex items-center gap-1">
        <img src="https://ext.same-assets.com/3788572766/2273725915.gif" alt="" className="w-4 h-4 pixelated" />
        this website is still under construction!
      </p>
    </Window>
  );
}

// Taskbar
function Taskbar() {
  const [time, setTime] = useState("");

  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      setTime(now.toLocaleDateString('en-GB'));
    };
    updateTime();
    const interval = setInterval(updateTime, 1000);
    return () => clearInterval(interval);
  }, []);

  const taskbarIcons = [
    "https://ext.same-assets.com/3788572766/1561943910.gif",
    "https://ext.same-assets.com/3788572766/3780738628.png",
    "https://ext.same-assets.com/3788572766/1822394757.gif",
    "https://ext.same-assets.com/3788572766/2281853651.gif",
    "https://ext.same-assets.com/3788572766/3789562941.png",
    "https://ext.same-assets.com/3788572766/1470760562.png",
    "https://ext.same-assets.com/3788572766/1075751645.png",
  ];

  return (
    <div className="taskbar">
      <button type="button" className="start-button">
        <img src="https://ext.same-assets.com/3788572766/1926319223.png" alt="start" className="w-5 h-5 pixelated" />
        <span>START</span>
      </button>
      <div className="taskbar-icons">
        {taskbarIcons.map((icon, i) => (
          <a key={i} href="#" className="taskbar-icon">
            <img src={icon} alt="" className="h-5 pixelated" />
          </a>
        ))}
      </div>
      <div className="taskbar-clock">{time}</div>
    </div>
  );
}

// Header Component
function Header() {
  const socialLinks = [
    { icon: "https://ext.same-assets.com/3788572766/2871938661.png", label: "Trashbin", href: "#" },
    { icon: "https://ext.same-assets.com/3788572766/2930210717.png", label: "Twitter", href: "#" },
    { icon: "https://ext.same-assets.com/3788572766/3261022516.png", label: "Youtube", href: "#" },
    { icon: "https://ext.same-assets.com/3788572766/2194337128.png", label: "Neocities", href: "#" },
    { icon: "https://ext.same-assets.com/3788572766/221061135.png", label: "Discord", href: "#" },
    { icon: "https://ext.same-assets.com/3788572766/3992499999.png", label: "Achievements", href: "#" },
  ];

  return (
    <header className="text-center py-6">
      {/* Lily border decoration */}
      <div className="flex justify-center mb-4">
        <img
          src="https://ext.same-assets.com/3788572766/2276585769.png"
          alt=""
          className="h-12 pixelated"
        />
      </div>

      {/* Logo */}
      <div className="mb-6">
        <img
          src="https://ext.same-assets.com/3788572766/3975929598.gif"
          alt="LilithDev"
          className="mx-auto max-w-[400px] w-full pixelated"
        />
      </div>

      {/* Social icons */}
      <div className="flex justify-center gap-6 flex-wrap">
        {socialLinks.map((link, i) => (
          <a
            key={i}
            href={link.href}
            className="flex flex-col items-center gap-1 text-[11px] text-[#2d1b4e] hover:text-[#a64997] transition-colors"
          >
            <img src={link.icon} alt={link.label} className="w-10 h-10 pixelated" />
            <span>{link.label}</span>
          </a>
        ))}
      </div>
    </header>
  );
}

// Main Page
export default function Home() {
  return (
    <div className="min-h-screen pb-12">
      <Header />

      {/* Main content - 3 column layout */}
      <main className="max-w-7xl mx-auto px-4 pb-16">
        <div className="desktop-layout flex gap-4">
          {/* Left Column */}
          <div className="column w-[240px] flex-shrink-0 space-y-4">
            <BioWindow />
            <ContactWindow />
            <WebcamWindow />
            <ChatWindow />
            <CreditsWindow />
          </div>

          {/* Center Column */}
          <div className="column flex-1 space-y-4">
            <NavigationWindow />
            <MusicPlayerWindow />
            <HomeWindow />
            <BlogWindow />
          </div>

          {/* Right Column */}
          <div className="column w-[200px] flex-shrink-0 space-y-4">
            <NewsWindow />
            <OtherSitesWindow />
            <WebringWindow />
            <EmbedMeWindow />
            <UpdatesWindow />
            <WarningWindow />
          </div>
        </div>
      </main>

      <Taskbar />
    </div>
  );
}