import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";

// Snowy - Single-file React component
// Requirements: TailwindCSS configured in your project and framer-motion installed
// Save as SnowyPage.jsx and include in your app (e.g. App.jsx -> <SnowyPage />)
// Image used: https://cdn.discordapp.com/avatars/1308988260852437044/bb54beb3e09e6b2ea1274f8a7826d68e.png?size=1024

export default function SnowyPage() {
  const defaultContent = {
    name: "Snowy",
    tagline: "Friendly furry adventurer & storyteller",
    bio:
      "Snowy is a playful, creative fursona who loves late-night stargazing, cozy cafés, and pixel art. This site showcases Snowy's art, stories, and links to socials.",
    highlights: [
      "Illustration",
      "Short stories",
      "Commissions open",
      "Cosplay guides",
    ],
  };

  const [content, setContent] = useState(() => {
    try {
      const raw = localStorage.getItem("snowy_content");
      return raw ? JSON.parse(raw) : defaultContent;
    } catch (e) {
      return defaultContent;
    }
  });

  const [editing, setEditing] = useState(false);
  const [dark, setDark] = useState(() => {
    const cached = localStorage.getItem("snowy_theme");
    return cached ? cached === "dark" : true;
  });

  useEffect(() => {
    document.documentElement.classList.toggle("dark", dark);
    localStorage.setItem("snowy_theme", dark ? "dark" : "light");
  }, [dark]);

  useEffect(() => {
    localStorage.setItem("snowy_content", JSON.stringify(content));
  }, [content]);

  function onEditField(field, value) {
    setContent((c) => ({ ...c, [field]: value }));
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-900 dark:text-gray-100 transition-colors">
      <header className="max-w-5xl mx-auto p-6 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <img
            src="https://cdn.discordapp.com/avatars/1308988260852437044/bb54beb3e09e6b2ea1274f8a7826d68e.png?size=1024"
            alt="Snowy avatar"
            className="w-16 h-16 rounded-full border-2 border-white shadow-lg dark:border-gray-700 object-cover"
          />
          <div>
            <h1 className="text-2xl font-semibold">{content.name}</h1>
            <p className="text-sm text-gray-600 dark:text-gray-300">{content.tagline}</p>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <button
            onClick={() => setEditing((s) => !s)}
            className="px-3 py-1 rounded-md bg-indigo-600 text-white text-sm shadow-sm hover:bg-indigo-500"
          >
            {editing ? "Stop editing" : "Edit"}
          </button>

          <button
            onClick={() => setDark((d) => !d)}
            aria-label="Toggle theme"
            className="px-3 py-1 rounded-md border bg-white dark:bg-gray-700 text-sm"
          >
            {dark ? "Dark" : "Light"}
          </button>
        </div>
      </header>

      <main className="max-w-5xl mx-auto p-6 grid grid-cols-1 md:grid-cols-3 gap-8">
        <motion.section
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4 }}
          className="md:col-span-2 bg-white dark:bg-gray-900 rounded-2xl shadow p-6"
        >
          <div className="flex items-start gap-6">
            <div className="w-40 h-40 flex-shrink-0 rounded-xl overflow-hidden shadow-inner">
              <img
                src="https://cdn.discordapp.com/avatars/1308988260852437044/bb54beb3e09e6b2ea1274f8a7826d68e.png?size=1024"
                alt="Snowy large"
                className="w-full h-full object-cover"
              />
            </div>

            <div className="flex-1">
              <div className="flex items-center justify-between">
                <h2 className="text-2xl font-bold">About {content.name}</h2>
                <div className="text-sm text-gray-500">Last edited: <em>auto</em></div>
              </div>

              <div className="mt-4 text-gray-700 dark:text-gray-200 leading-relaxed">
                {editing ? (
                  <textarea
                    value={content.bio}
                    onChange={(e) => onEditField("bio", e.target.value)}
                    className="w-full min-h-[120px] p-3 rounded-md border bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700"
                  />
                ) : (
                  <p>{content.bio}</p>
                )}
              </div>

              <div className="mt-6">
                <h3 className="font-semibold">Highlights</h3>
                <div className="mt-3 flex flex-wrap gap-2">
                  {content.highlights.map((h, i) => (
                    <span
                      key={i}
                      className="px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800 text-sm"
                    >
                      {editing ? (
                        <input
                          value={h}
                          onChange={(e) => {
                            const copy = [...content.highlights];
                            copy[i] = e.target.value;
                            onEditField("highlights", copy);
                          }}
                          className="bg-transparent outline-none"
                        />
                      ) : (
                        h
                      )}
                    </span>
                  ))}

                  {editing && (
                    <button
                      onClick={() => onEditField("highlights", [...content.highlights, "New"])}
                      className="px-3 py-1 rounded-full border text-sm"
                    >
                      +
                    </button>
                  )}
                </div>
              </div>

              <div className="mt-8 flex gap-3">
                <a
                  href="#"
                  className="px-4 py-2 rounded-md bg-emerald-500 text-white shadow-sm"
                >
                  View Gallery
                </a>
                <a
                  href="#contact"
                  className="px-4 py-2 rounded-md border bg-white dark:bg-gray-800"
                >
                  Message Snowy
                </a>
              </div>
            </div>
          </div>
        </motion.section>

        <aside className="space-y-6">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.15 }}
            className="bg-white dark:bg-gray-900 rounded-2xl shadow p-4"
          >
            <h4 className="font-semibold">Quick links</h4>
            <ul className="mt-3 space-y-2 text-sm text-gray-600 dark:text-gray-300">
              <li>
                <a href="#gallery" className="hover:underline">
                  Gallery
                </a>
              </li>
              <li>
                <a href="#stories" className="hover:underline">
                  Stories
                </a>
              </li>
              <li>
                <a href="#contact" className="hover:underline">
                  Contact
                </a>
              </li>
            </ul>
          </motion.div>

          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.25 }}
            className="bg-white dark:bg-gray-900 rounded-2xl shadow p-4"
          >
            <h4 className="font-semibold">Social</h4>
            <div className="mt-3 flex flex-col gap-2 text-sm">
              <a className="hover:underline" href="#">Discord</a>
              <a className="hover:underline" href="#">Twitter/X</a>
              <a className="hover:underline" href="#">Ko-fi</a>
            </div>
          </motion.div>
        </aside>

        <section id="gallery" className="md:col-span-3 bg-white dark:bg-gray-900 rounded-2xl shadow p-6">
          <h3 className="font-bold text-lg">Gallery</h3>
          <p className="text-sm text-gray-500 mt-2">A few example images and sketches.</p>

          <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="rounded-lg overflow-hidden bg-gray-50 dark:bg-gray-800 h-36 flex items-center justify-center">
                <img
                  src={`https://cdn.discordapp.com/avatars/1308988260852437044/bb54beb3e09e6b2ea1274f8a7826d68e.png?size=1024`}
                  alt={`gallery-${i}`}
                  className="w-full h-full object-cover"
                />
              </div>
            ))}
          </div>
        </section>

        <section id="stories" className="md:col-span-3 bg-white dark:bg-gray-900 rounded-2xl shadow p-6">
          <h3 className="font-bold text-lg">Stories</h3>
          <div className="mt-4 space-y-4">
            <article className="p-4 border rounded-md bg-gray-50 dark:bg-gray-800">
              <h4 className="font-semibold">Night Train (short)</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                Snowy took the midnight train and found a constellation only visible from the caboose...
              </p>
            </article>

            <article className="p-4 border rounded-md bg-gray-50 dark:bg-gray-800">
              <h4 className="font-semibold">Paper Crowns</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                A cozy story about rainy afternoons and secret maps drawn in the margins of library books.
              </p>
            </article>
          </div>
        </section>

        <section id="contact" className="md:col-span-3 bg-white dark:bg-gray-900 rounded-2xl shadow p-6">
          <h3 className="font-bold text-lg">Contact</h3>
          <p className="text-sm text-gray-500 mt-2">Send a message to Snowy (this form is local-only demo)</p>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              const fd = new FormData(e.target);
              alert(`Message saved locally: ${fd.get("name")} — ${fd.get("message")}`);
              e.target.reset();
            }}
            className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-3"
          >
            <input name="name" placeholder="Your name" className="p-2 rounded-md border bg-gray-50 dark:bg-gray-800" />
            <input name="email" placeholder="Email (optional)" className="p-2 rounded-md border bg-gray-50 dark:bg-gray-800" />
            <button className="px-4 py-2 rounded-md bg-indigo-600 text-white">Send</button>

            <textarea name="message" placeholder="Message" className="md:col-span-3 p-3 rounded-md border bg-gray-50 dark:bg-gray-800" />

            <div className="md:col-span-3 text-sm text-gray-500">
              Tip: This demo form does not send messages to a server. Hook it up to your backend or an email service to receive messages.
            </div>
          </form>
        </section>

        <footer className="md:col-span-3 text-center text-sm text-gray-500 mt-6 pb-12">
          © <strong>{content.name}</strong> — Built with ❤️ — Editable locally. Save a copy of this file to your project.
        </footer>
      </main>
    </div>
  );
}