import { getSortedPostsData } from "@/lib/posts";
import { ProjectCard } from "@/components/project-card";
import { ResumeCard } from "@/components/resume-card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { DATA } from "@/app/resume";
import Markdown from "react-markdown";
import { TextAnimate } from "@/components/magicui/text-animate";
import { BlurFade } from "@/components/magicui/blur-fade";
import { TrackedLink } from "@/components/util-tracked-link";

const BLUR_FADE_DELAY = 0.01;

export default function Page() {
  const posts = getSortedPostsData().slice(0, 6);
  return (
    <main className="flex flex-col min-h-[100dvh] space-y-10">
      <section id="hero">
        <div className="mx-auto w-full max-w-2xl space-y-8">
          <div className="flex flex-col sm:flex-row items-center sm:items-start sm:justify-between gap-4">
            <div className="flex-col flex flex-1 space-y-1.5 items-center sm:items-start">
              <TextAnimate delay={BLUR_FADE_DELAY} className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-center sm:text-left">
                {`Hi, I'm ${DATA.name.split(" ")[0]}`}
              </TextAnimate>
              <TextAnimate className="max-w-[400px] md:text-xl text-center sm:text-left" delay={BLUR_FADE_DELAY}>
                AI Consultant & Researcher with a PhD in Computer Science.
              </TextAnimate>
            </div>
            <div className="flex flex-col items-center gap-y-2">
              <BlurFade delay={BLUR_FADE_DELAY}>
                <Avatar className="size-28 border">
                  <AvatarImage alt={DATA.name} src={DATA.avatarUrl} />
                  <AvatarFallback>{DATA.initials}</AvatarFallback>
                </Avatar>
              </BlurFade>
              <BlurFade delay={BLUR_FADE_DELAY * 2}>
                <TrackedLink href="/illium_cv_censored.pdf" eventName="cd-download" className="w-full" download>
                  <Badge className="flex gap-2 px-3 py-1 text-sm shadow-sm transition-all duration-300 ease-out hover:shadow-lg dark:shadow-[var(--shadow-glow)] dark:hover:shadow-[var(--shadow-glow-hover)]">
                    Download CV
                  </Badge>
                </TrackedLink>
              </BlurFade>
            </div>
          </div>
        </div>
      </section>
      <section id="about">
        <BlurFade delay={BLUR_FADE_DELAY * 3}>
          <h2 className="text-xl font-bold">About</h2>
        </BlurFade>
        <BlurFade delay={BLUR_FADE_DELAY * 4} className="prose max-w-full text-pretty font-sans text-sm text-muted-foreground dark:prose-invert">
          <Markdown >
            {DATA.summary}
          </Markdown>
        </BlurFade>
      </section>
      <section id="projects">
        <div className="space-y-12 w-full py-12">
          <BlurFade delay={BLUR_FADE_DELAY * 11}>
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm">
                  Recent Posts
                </div>
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
                  Check out my latest work
                </h2>
                <p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  I&apos;ve worked on a variety of projects, from scientific research to managing projects. Here are a few of my latest.
                </p>
              </div>
            </div>
          </BlurFade>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 max-w-[1040px] mx-auto">
            {posts
              .filter((post) => post.title)
              .map((post, id) => (
              <BlurFade
                key={post.title}
                delay={BLUR_FADE_DELAY * 12 + id * 0.05}
              >
                <ProjectCard
                  href={post.href}
                  key={post.title}
                  title={post.title!}
                  description={post.excerpt || ""}
                  dates={post.date}
                  tags={post.tags}
                  image={post.image || ""}
                  video={post.video}
                  links={[]}
                />
              </BlurFade>
            ))}
          </div>
        </div>
      </section>
      <section id="skills">
        <div className="flex min-h-0 flex-col gap-y-3">
          <BlurFade delay={BLUR_FADE_DELAY * 9}>
            <h2 className="text-xl font-bold">Skills</h2>
          </BlurFade>
          <div className="flex flex-col gap-y-2">
            {Object.entries(DATA.skills).map(([category, skills], id) => (
              <div key={id}>
                <BlurFade delay={BLUR_FADE_DELAY * 9.5}>
                  <h3 className="text-lg font-semibold">{category}</h3>
                </BlurFade>
                <div className="flex flex-wrap gap-1">
                  {skills.map((skill, id) => (
                    <BlurFade key={skill} delay={BLUR_FADE_DELAY * 10 + id * 0.05}>
                      <Badge key={skill}>{skill}</Badge>
                    </BlurFade>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section id="work">
        <div className="flex min-h-0 flex-col gap-y-3">
          <BlurFade delay={BLUR_FADE_DELAY * 7}>
            <h2 className="text-xl font-bold">Work Experience</h2>
          </BlurFade>
          {DATA.work.map((work, id) => (
            <BlurFade
              key={work.company}
              delay={BLUR_FADE_DELAY * 8 + id * 0.05}
            >
              <ResumeCard
                key={work.company}
                href={work.href}
                logoUrl={work.logoUrl}
                altText={work.company}
                title={work.company}
                subtitle={work.title}
                period={`${work.start} - ${work.end}`}
              />
            </BlurFade>
          ))}
        </div>
      </section>
      <section id="education">
        <div className="flex min-h-0 flex-col gap-y-3">
          <BlurFade delay={BLUR_FADE_DELAY * 7}>
            <h2 className="text-xl font-bold">Education</h2>
          </BlurFade>
          {DATA.education.map((education, id) => (
            <BlurFade
              key={education.school}
              delay={BLUR_FADE_DELAY * 8 + id * 0.05}
            >
              <ResumeCard
                key={education.school}
                href={education.href}
                logoUrl={education.logoUrl}
                altText={education.school}
                title={education.school}
                subtitle={education.degree}
                period={`${education.start} - ${education.end}`}
              />
            </BlurFade>
          ))}
        </div>
      </section>
      <section id="contact">
        <div className="grid items-center justify-center gap-4 px-4 text-center md:px-6 w-full py-12">
            <BlurFade delay={BLUR_FADE_DELAY * 16}>
                <div className="space-y-3">
                    <div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm">
                        Contact
                    </div>
                    <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Get in Touch</h2>
                    <p className="mx-auto max-w-[800px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                        Want to collaborate or have a question?<br/>I&apos;d love to hear from you.
                    </p>
                </div>
            </BlurFade>
          <BlurFade delay={BLUR_FADE_DELAY * 18}>
            <div className="flex flex-wrap gap-2 justify-center">              
              {Object.entries(DATA.contact.social)
                //.filter(([_, social]) => !social.pub)
                .map(([name, social]) => (
                  <TrackedLink href={social.url} key={name} className="group" eventName={`${name}-social`}>
                    <Badge className="cards flex gap-2 px-3 py-1 text-sm">
                      <social.icon className="size-4" />
                      {name}
                    </Badge>
                  </TrackedLink>
                ))}
            </div>
          </BlurFade>
        </div>
      </section>
    </main>
  );
}