"use client";
import useSWR from "swr";
import Image from "next/image";
import Link from "next/link";
import BottomFooter from "@components/BottomFooter";
import { createPoster } from "@utils/axiosHelpers";
import getMagnitudeColor from "@utils/getMagnitudeColour";
import { TbHexagon } from "react-icons/tb";

// formats the date
function getRelativeDate(dateString: string): string {
  const date = new Date(dateString);
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
  if (diffDays === 0) return "today";
  if (diffDays === 1) return "yesterday";
  return date.toLocaleDateString();
}

// copied from sidebar
function MagnitudeNumber({ magnitude }: { magnitude: number }) {
	const magnitudeStr = magnitude.toFixed(1);
	const [whole, decimal] = magnitudeStr.split(".");

	return (
		<div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
			<TbHexagon size={40} className="drop-shadow-sm" />
			<div className="absolute inset-0 flex items-center justify-center">
				<div className="flex items-baseline font-mono font-bold tracking-tight">
					<span className="text-xl -mr-1">{whole}</span>
					<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
					<span className="text-xs -mr-[1px]">{decimal}</span>
				</div>
			</div>
		</div>
	);
}

export default function Home() {
  const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 6 }));

  // Take 5 most recent
  const recents = (data?.earthquakes ?? [])
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
    .slice(0, 5);

  return (
    <main className="min-h-screen text-black">
      <div className="w-full relative">
        <div>
          <Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg" />
        </div>
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>
        <div className="absolute inset-0 top-[30%]">
          <Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png" />
        </div>
      </div>
      <p className="mt-2"></p>
      <div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
        <Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
          <Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
          <h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
          <p className="text-md text-black text-center max-w-xs opacity-90">
            Log new earthquakes with their required details or search past seismic events
          </p>
        </Link>
        <Link
          href="/observatories"
          className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
        >
          <Image height={100} width={100} src="/observatory.jpg" alt="Research Icon" className="h-40 w-40 mb-4" />
          <h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
          <p className="text-md text-black text-center max-w-xs opacity-90">
            Find recently active observatories, and newly opened/closed sites
          </p>
        </Link>
        <Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
          <Image height={100} width={100} src="/artifactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
          <h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
          <p className="text-md text-black text-center max-w-xs opacity-90">
            View or purchase recently discovered artefacts from seismic events
          </p>
        </Link>
      </div>
      <p className="mt-18"></p>
      <section className="min-h-screen text-black">
        <div className="w-full relative z-40">
          <div>
            <Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg" />
          </div>
          <div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
            <section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
              <h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
                Welcome to Tremor Tracker
              </h1>
              <p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
                TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission
                is seismic education and preparation for all
              </p>
              <p className="mt-20"></p>
              <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
              <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
                Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range
                in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of
                earthquakes happen every day—but most are too small to feel.
              </p>
              <p className="mt-20"></p>
              <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
                How do we log earthquakes?
              </p>
              <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
                What information are we interested in?
              </p>
              <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
              <p className="mt-20"></p>
              <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
                What are observatories?
              </p>
              <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is their role?</p>
              <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
            </section>
          </div>
        </div>
      </section>
      <p className="mt-20"></p>
      <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
        <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
          Recent Earthquake Events
        </h1>
        <p className="text-lg md:text-xl text-black drop-shadow-md">
          Learn about the most recent earthquake events from around the world:
        </p>
      </section>
      <p className="mt-6"></p>
      <div className="mx-auto w-5/6 px-2">
        {error && (
          <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
            <p>Failed to load earthquakes.</p>
          </div>
        )}
        {isLoading && (
          <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
            <p>Loading...</p>
          </div>
        )}
        {!isLoading && recents.length === 0 && (
          <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
            <p>No earthquakes found.</p>
          </div>
        )}
        <div className="flex flex-col gap-4">
          {recents.map((eq) => (
            <div
            key={eq.code}
            className="flex items-center justify-between p-4 bg-white rounded-xl shadow border"
          >
            <div>
              <div className="font-semibold">
                Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}
              </div>
              <div className="text-sm text-gray-500">
                    {getRelativeDate(eq.date)}
              </div>
            </div>
            <MagnitudeNumber magnitude={eq.magnitude} />
            </div>
          ))}

        </div>
      </div>
      <p className="mt-20"></p>
      <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
        <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
          Contact Information
        </h1>
        <p className="text-lg md:text-xl text-black drop-shadow-md">
          Learn about Tremor Tracker's mission, our team or contact us directly:
        </p>
      </section>
      <p className="mt-2"></p>
      <div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
        <Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
          <Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
          <h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
          <p className="text-md text-black text-center max-w-xs opacity-90">
            Visit our socials or leave us a message via phone or email.
          </p>
        </Link>
        <Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
          <Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
          <h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
          <p className="text-md text-black text-center max-w-xs opacity-90">
            Find out more about our purpose and the features we offer.
          </p>
        </Link>
        <Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
          <Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
          <h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
          <p className="text-md text-black text-center max-w-xs opacity-90">
            Learn about our team leads and their responsibilities.
          </p>
        </Link>
      </div>
      <p className="mt-10"></p>
      <section style={{ height: 500 }} className="text-black">
        <div className="w-full relative overflow-hidden z=10">
          <div>
            <Image height={1000} width={2000} alt="Background Image" src="/scientists.png" />
          </div>
          <BottomFooter />
        </div>
      </section>
    </main>
  );


	//   return (
	//     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
	//       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
	//         <Image
	//           className="dark:invert"
	//           src="/next.svg"
	//           alt="Next.js logo"
	//           width={180}
	//           height={38}
	//           priority
	//         />
	//         <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
	//           <li className="mb-2">
	//             Get started by editing{" "}
	//             <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
	//               src/app/page.tsx
	//             </code>
	//             .
	//           </li>
	//           <li>Save and see your changes instantly.</li>
	//         </ol>

	//         <div className="flex gap-4 items-center flex-col sm:flex-row">
	//           <a
	//             className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
	//             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
	//             target="_blank"
	//             rel="noopener noreferrer"
	//           >
	//             <Image
	//               className="dark:invert"
	//               src="/vercel.svg"
	//               alt="Vercel logomark"
	//               width={20}
	//               height={20}
	//             />
	//             Deploy now
	//           </a>
	//           <a
	//             className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
	//             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
	//             target="_blank"
	//             rel="noopener noreferrer"
	//           >
	//             Read our docs
	//           </a>
	//         </div>
	//       </main>
	//       <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
	//         <a
	//           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
	//           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
	//           target="_blank"
	//           rel="noopener noreferrer"
	//         >
	//           <Image
	//             aria-hidden
	//             src="/file.svg"
	//             alt="File icon"
	//             width={16}
	//             height={16}
	//           />
	//           Learn
	//         </a>
	//         <a
	//           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
	//           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
	//           target="_blank"
	//           rel="noopener noreferrer"
	//         >
	//           <Image
	//             aria-hidden
	//             src="/window.svg"
	//             alt="Window icon"
	//             width={16}
	//             height={16}
	//           />
	//           Examples
	//         </a>
	//         <a
	//           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
	//           href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
	//           target="_blank"
	//           rel="noopener noreferrer"
	//         >
	//           <Image
	//             aria-hidden
	//             src="/globe.svg"
	//             alt="Globe icon"
	//             width={16}
	//             height={16}
	//           />
	//           Go to nextjs.org →
	//         </a>
	//       </footer>
	//     </div>
	//   );
}