import Link from "next/link";
import { Instagram, Mail, Rss, Sparkles } from "lucide-react";

import { ThemeToggle } from "@/components/theme-toggle";
import { getHomeInsights, getSiteMeta, loadSiteData } from "@/lib/site-data";

const nav = [
  { href: "/", label: "Home" },
  { href: "/works", label: "Projects" },
  { href: "/blog", label: "Journal" },
  { href: "/contact", label: "Contact" },
];

function initials(name: string) {
  return name
    .split(" ")
    .map((part) => part[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
}

export function SiteShell({ children }: { children: React.ReactNode }) {
  const site = getSiteMeta();
  const data = loadSiteData();
  const hero = getHomeInsights().hero;
  const email = data.settings.adminEmail || "hello@deviltools.in";

  return (
    <div className="relative min-h-screen overflow-hidden bg-[var(--background)] text-[var(--foreground)]">
      <div className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_15%_12%,var(--secondary-soft),transparent_24%),radial-gradient(circle_at_82%_14%,var(--accent-soft),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(193,18,31,0.08),transparent_30%)]" />
        <div className="absolute inset-x-0 top-0 h-[34rem] bg-[linear-gradient(180deg,rgba(255,255,255,0.35),transparent)] dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)]" />
      </div>

      <header className="sticky top-0 z-50 border-b border-[var(--border)] bg-[color:var(--background-elevated)]/85 backdrop-blur-xl">
        <div className="mx-auto flex w-full max-w-7xl items-center justify-between px-5 py-4 sm:px-6 lg:px-8">
          <Link href="/" className="flex items-center gap-3 text-sm font-semibold uppercase tracking-[0.18em] text-[var(--foreground)]">
            <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[linear-gradient(135deg,var(--accent-strong),var(--secondary))] text-white shadow-lg">
              {initials(site.name)}
            </span>
            <span className="hidden sm:block">{site.name}</span>
          </Link>

          <nav className="hidden items-center gap-2 md:flex">
            {nav.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="rounded-full border border-[var(--border)] px-4 py-2 text-sm text-[var(--muted)] transition hover:-translate-y-0.5 hover:bg-[var(--background-soft)] hover:text-[var(--foreground)]"
              >
                {item.label}
              </Link>
            ))}
          </nav>

          <div className="flex items-center gap-3">
            <a
              href="/contact"
              className="hidden rounded-full bg-[linear-gradient(135deg,var(--accent),var(--secondary))] px-4 py-2 text-sm font-medium text-white transition hover:-translate-y-0.5 hover:brightness-105 sm:inline-flex"
            >
              Contact
            </a>
            <ThemeToggle />
          </div>
        </div>
      </header>

      <main className="mx-auto flex w-full max-w-7xl flex-1 flex-col px-5 pb-16 pt-8 sm:px-6 lg:px-8">{children}</main>

      <footer className="border-t border-[var(--border)] bg-[color:var(--background-elevated)]/85 px-5 py-8 backdrop-blur-xl sm:px-6 lg:px-8">
        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 md:flex-row md:items-end md:justify-between">
          <div className="max-w-xl space-y-3">
            <div className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] px-3 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-[var(--muted)]">
              <Sparkles className="h-3.5 w-3.5" />
              Current work
            </div>
            <h2 className="text-2xl font-semibold tracking-tight text-[var(--foreground)]">A sharper presentation for tools, releases, and experiments that deserve attention.</h2>
            <p className="text-sm leading-7 text-[var(--muted)]">Everything on the site is organized to make the work easier to explore, understand, and remember.</p>
          </div>

          <div className="flex flex-col gap-4 text-sm text-[var(--muted)]">
            <div className="flex items-center gap-4">
              {hero.socials[0]?.href ? <a href={hero.socials[0].href} aria-label="Instagram" className="hover:text-[var(--foreground)]"><Instagram className="h-4 w-4" /></a> : null}
              <a href={`mailto:${email}`} aria-label="Email" className="hover:text-[var(--foreground)]"><Mail className="h-4 w-4" /></a>
              <Link href="/blog" aria-label="Blog" className="hover:text-[var(--foreground)]"><Rss className="h-4 w-4" /></Link>
            </div>
            <p>© {new Date().getFullYear()} {site.name}. Curated by Aryan Ajudiya.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}