import Image, { ImageProps } from 'next/image'
import { type ElementType } from 'react'

import Button from '@/components/client/Button'
import Card, {
  CardCta,
  CardDescription,
  CardEyebrow,
  CardTags,
  CardTitle,
} from '@/components/server/Card'
import Container from '@/components/server/Container'
import HybridLink, {
  type Props as HybridLinkProps,
} from '@/components/server/HybridLink'
import Tag from '@/components/server/Tag'
import {
  CodebergIcon,
  GitHubIcon,
  type IconProps,
  MastodonLogo,
  RSSIcon,
} from '@/components/server/icons'
import EmmaLogo from '@/images/logos/emma.jpeg'
import FarfetchLogo from '@/images/logos/farfetch.png'
import ThreeSigmaLogo from '@/images/logos/threeSigma.png'
import formatDate from '@/lib/formatDate'
import { getFirstBlogPosts } from '@/lib/notion/content/blogPosts'
import { SelectColor } from '@/lib/notion/types'
import richTextAsPlainText from '@/lib/notion/utils/richTextToPlainText'

function BriefcaseIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path
        d="M2.75 9.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
        className="stroke-current"
      />
      <path
        d="M3 14.25h6.249c.484 0 .952-.002 1.316.319l.777.682a.996.996 0 0 0 1.316 0l.777-.682c.364-.32.832-.319 1.316-.319H21M8.75 6.5V4.75a2 2 0 0 1 2-2h2.5a2 2 0 0 1 2 2V6.5"
        className="stroke-current"
      />
    </svg>
  )
}

function ArrowDownIcon(props: IconProps) {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}>
      <path
        d="M4.75 8.75 8 12.25m0 0 3.25-3.5M8 12.25v-8.5"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

function BlogPost({
  slug,
  title,
  description,
  publishDate,
  topics,
}: {
  slug: string
  title: string
  description: string
  publishDate: string

  topics: { name: string; color: SelectColor }[]
}) {
  return (
    <Card as="article">
      <CardTitle href={`/blog/${slug}`}>{title}</CardTitle>
      <CardEyebrow as="time" dateTime={publishDate} decorate>
        {formatDate(publishDate)}
      </CardEyebrow>
      <CardDescription>{description}</CardDescription>
      <CardTags>
        {topics.map((topic) => (
          <Tag notionColorName={topic.color} key={topic.name}>
            {topic.name}
          </Tag>
        ))}
      </CardTags>
      <CardCta>Lê o artigo</CardCta>
    </Card>
  )
}

function SocialLink({
  icon: Icon,
  ...props
}: HybridLinkProps & { icon: ElementType }) {
  return (
    <HybridLink className="group -m-1 p-1" {...props}>
      <Icon className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300" />
    </HybridLink>
  )
}

function StayUpToDate() {
  return (
    <div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
      <h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
        <RSSIcon className="h-6 w-6 flex-none text-teal-500" />
        <span className="ml-3">Mantém-te atualizade</span>
      </h2>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
        Subscreve o <i>feed</i> de RSS{' '}
        <span className="group/rsspopover relative">
          <span className="pointer-events-none absolute top-0 left-1/2 w-64 -translate-x-1/2 -translate-y-full rounded border px-3 py-2 opacity-0 backdrop-blur transition-all after:absolute after:left-0 after:top-full after:h-4 after:w-full group-hover/rsspopover:pointer-events-auto group-hover/rsspopover:-top-2 group-hover/rsspopover:opacity-100 dark:border-zinc-700/40 dark:text-white">
            Vais precisar de um leitor de RSS! Pessoalmente, recomendo o{' '}
            <HybridLink
              className="underline transition hover:text-teal-500"
              href="https://hyliu.me/fluent-reader-lite/"
            >
              Fluent Reader
            </HybridLink>{' '}
            ou o{' '}
            <HybridLink
              className="underline transition hover:text-teal-500"
              href="https://feedly.com"
            >
              Feedly
            </HybridLink>{' '}
            :)
          </span>
          <HybridLink
            className="underline transition hover:text-teal-500"
            href={`${process.env.NEXT_PUBLIC_SITE_URL}/rss/feed.xml`}
          >
            aqui
          </HybridLink>
        </span>
        !
      </p>
    </div>
  )
}

function Resume() {
  const resume: {
    company: string
    title: string
    logo: ImageProps['src']
    start:
      | {
          label: string
          dateTime: string
        }
      | string
    end:
      | {
          label: string
          dateTime: string
        }
      | string
  }[] = [
    {
      company: 'Farfetch',
      title: 'Junior Frontend Software Eng.',
      start: '2020',
      end: '2021',
      logo: FarfetchLogo,
    },
    {
      company: 'Emma - The Sleep Company',
      title: 'Frontend Software Eng.',
      start: '2022',
      end: '2022',
      logo: EmmaLogo,
    },
    {
      company: 'Three Sigma',
      title: 'Frontend Software Eng.',
      start: '2022',
      end: 'Present',
      logo: ThreeSigmaLogo,
    },
  ]

  return (
    <div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
      <h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
        <BriefcaseIcon className="h-6 w-6 flex-none text-teal-500" />
        <span className="ml-3">Trabalho</span>
      </h2>
      <ol className="mt-6 space-y-4">
        {resume.map((role, roleIndex) => (
          <li key={roleIndex} className="flex gap-4">
            <Image src={role.logo} alt="" className="h-10 w-10 rounded" />
            <dl className="flex flex-auto flex-wrap gap-x-2">
              <dt className="sr-only">Company</dt>
              <dd className="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
                {role.company}
              </dd>
              <dt className="sr-only">Role</dt>
              <dd className="text-xs text-zinc-500 dark:text-zinc-400">
                {role.title}
              </dd>
              <dt className="sr-only">Date</dt>
              <dd
                className="ml-auto text-xs text-zinc-400 dark:text-zinc-500"
                aria-label={`${
                  typeof role.start === 'string' ? role.start : role.start.label
                } until ${
                  typeof role.end === 'string' ? role.end : role.end.label
                }`}
              >
                <time
                  dateTime={
                    typeof role.start === 'string'
                      ? role.start
                      : role.start.dateTime
                  }
                >
                  {typeof role.start === 'string'
                    ? role.start
                    : role.start.label}
                </time>{' '}
                <span aria-hidden="true">—</span>{' '}
                <time
                  dateTime={
                    typeof role.end === 'string' ? role.end : role.end.dateTime
                  }
                >
                  {typeof role.end === 'string' ? role.end : role.end.label}
                </time>
              </dd>
            </dl>
          </li>
        ))}
      </ol>
      <Button href="/CV.pdf" variant="colored" className="group mt-6 w-full">
        O meu CV
        <ArrowDownIcon className="h-4 w-4 stroke-current" />
      </Button>
    </div>
  )
}

export default async function Home() {
  const { results: blogPosts } = await getFirstBlogPosts()

  return (
    <>
      <Container className="mt-9">
        <div className="max-w-2xl">
          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
            Olá! Sou o Filipe :)
          </h1>
          <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
            Sou um engenheiro de UX (não me perguntem o que é que nem eu sei
            bem).
          </p>
          <p className="mt-2 text-base text-zinc-600 dark:text-zinc-400">
            Gosto de programar interfaces e aplicações web, mas também de
            política, de ler sobre economia e de animais. Não gosto de cozinhar
            nem de vento frio. 🥶
          </p>
          <p className="mt-2 text-base text-zinc-600 dark:text-zinc-400">
            Estou a tentar trazer à superfície o potencial da humanidade. Sou a
            favor de standards, software de código aberto (como é este site!),
            licenças{' '}
            <HybridLink
              href="https://pt.wikipedia.org/wiki/Copyleft"
              className="underline transition-colors hover:text-teal-500"
            >
              <i>copyleft</i>
            </HybridLink>{' '}
            e de cooperativas em vez de monopólios. ✊
          </p>
          <p className="mt-2 text-base text-zinc-600 dark:text-zinc-400">
            Sou apaixonado pela{' '}
            <HybridLink
              href="https://doughnuteconomics.org/about-doughnut-economics"
              className="underline transition-colors hover:text-teal-500"
            >
              <i>Economia do Donut</i>
            </HybridLink>{' '}
            e por economia social e ambiental. Gostava de, um dia, ser
            economista em vez de programador. Quem sabe, para a União Europeia.
            🇪🇺
          </p>
          <p className="mt-2 text-base text-zinc-600 dark:text-zinc-400">
            Moro em Oeiras, Lisboa, Portugal.
          </p>
          <div className="mt-6 flex gap-6">
            <SocialLink
              href="https://mastodon.green/@filipesm"
              aria-label="Segue-me no Fediverse"
              icon={MastodonLogo}
            />
            <SocialLink
              href="https://codeberg.org/filipesm"
              aria-label="Segue-me no Codeberg"
              icon={CodebergIcon}
            />
            <SocialLink
              href="https://github.com/filipesmedeiros"
              aria-label="Segue-me no GitHub"
              icon={GitHubIcon}
            />
          </div>
        </div>
      </Container>
      <Container className="mt-24 md:mt-28">
        <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
          <div className="flex flex-col gap-16">
            {blogPosts.map((blogPost) => (
              <BlogPost
                key={richTextAsPlainText(blogPost.properties.Slug.rich_text)}
                title={richTextAsPlainText(blogPost.properties.Name.title)}
                description={richTextAsPlainText(
                  blogPost.properties.Description.rich_text,
                )}
                topics={blogPost.properties.Topics.multi_select.map(
                  ({ name, color }) => ({
                    name,
                    color,
                  }),
                )}
                slug={richTextAsPlainText(blogPost.properties.Slug.rich_text)}
                publishDate={richTextAsPlainText(
                  blogPost.properties.PublishDate.date?.start ??
                    blogPost.created_time,
                )}
              />
            ))}
          </div>
          <div className="space-y-10 lg:pl-16 xl:pl-24">
            <StayUpToDate />
            <Resume />
          </div>
        </div>
      </Container>
    </>
  )
}