"use client"

import { Link, useNavigate } from "react-router"

import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
import { useWhatsNewSeen } from "@/components/product-home/product-home-parts"
import { useWhatsNewTimelineUpdates } from "@/components/whats-new-sheet-context"
import { Button } from "@/components/ui/button"
import { useProductSwitch } from "@/contexts/product-route-sync"
import { useProductDashboardHref } from "@/contexts/product-route-sync"
import {
  LEO_WINDOW_COVER_IMAGE,
  LEO_WINDOW_PREVIEW_IMAGE,
} from "@/lib/mock/product-catalog"
import { cn } from "@/lib/utils"

function resolveWhatsNewMediaSrc(
  image: string | undefined,
  fallback?: string,
): string | undefined {
  if (image === LEO_WINDOW_COVER_IMAGE) return LEO_WINDOW_PREVIEW_IMAGE
  return image ?? fallback
}

/** `/whats-new` — release timeline across owned products. */
export default function WhatsNewPage() {
  const dashboardHref = useProductDashboardHref()
  const updates = useWhatsNewTimelineUpdates()
  const { seen, dismiss } = useWhatsNewSeen()
  const navigate = useNavigate()
  const switchProduct = useProductSwitch()
  const seenIds = new Set(seen)

  return (
    <PrimaryPageTemplate
      siteHeader={{
        breadcrumbs: [{ label: "Dashboard", href: dashboardHref }],
        title: "What's new",
      }}
    >
      <div className="px-4 py-8 pb-16 lg:px-6 max-w-2xl">
        <h1 className="sr-only">What&apos;s new</h1>

        {updates.length === 0 ? (
          <p className="text-sm text-muted-foreground leading-relaxed">
            No release notes for your role right now.
          </p>
        ) : (
          <ol className="relative m-0 flex list-none flex-col gap-0 p-0">
            {updates.map((update, index) => {
              const { id, item, card, sourceLabel, brandColor } = update
              const unread = !seenIds.has(id)
              const imageSrc = resolveWhatsNewMediaSrc(
                item.image,
                card?.entry?.screens[0]?.src,
              )
              const productLabel = sourceLabel?.replace(/^New in /, "") ?? null

              function openUpdate() {
                dismiss(id)
                if (card?.href) {
                  navigate(card.href)
                } else if (card) {
                  switchProduct(card.product, card.customIndex)
                }
              }

              return (
                <li key={id} className="relative flex gap-4 pb-10 last:pb-0">
                  {index < updates.length - 1 ? (
                    <span
                      aria-hidden="true"
                      className="absolute start-[11px] top-6 bottom-0 w-px bg-border"
                    />
                  ) : null}
                  <span
                    aria-hidden="true"
                    className={cn(
                      "relative z-[1] mt-1.5 size-[22px] shrink-0 rounded-full border-2 bg-background",
                      unread ? "border-primary" : "border-border",
                    )}
                    style={
                      unread
                        ? { boxShadow: `0 0 0 3px color-mix(in oklch, ${brandColor} 24%, transparent)` }
                        : undefined
                    }
                  />
                  <article className="min-w-0 flex-1">
                    <div className="flex flex-wrap items-center gap-2">
                      {productLabel ? (
                        <span
                          className="rounded-md px-2 py-0.5 text-xs font-medium text-foreground"
                          style={{
                            backgroundColor: `color-mix(in oklch, ${brandColor} 14%, var(--background))`,
                          }}
                        >
                          {productLabel}
                        </span>
                      ) : null}
                      {unread ? (
                        <span className="text-xs font-medium text-primary">Unread</span>
                      ) : null}
                    </div>

                    <h2 className="mt-2 font-heading text-base font-semibold leading-snug text-foreground">
                      {item.title}
                    </h2>

                    {item.eyebrow ? (
                      <p className="mt-1 text-xs font-medium tracking-[0.06em] text-muted-foreground uppercase">
                        {item.eyebrow}
                      </p>
                    ) : null}

                    {imageSrc ? (
                      <div
                        className="mt-3 overflow-hidden rounded-lg border border-border"
                        style={{
                          backgroundImage: `linear-gradient(145deg, color-mix(in oklch, ${brandColor} 28%, var(--background)) 0%, var(--background) 100%)`,
                        }}
                      >
                        <img
                          src={imageSrc}
                          alt=""
                          className="aspect-[16/9] w-full object-cover object-center"
                        />
                      </div>
                    ) : null}

                    {item.highlights && item.highlights.length > 0 ? (
                      <ul className="mt-3 flex list-none flex-col gap-3 p-0">
                        {item.highlights.map(highlight => (
                          <li key={highlight.title} className="flex items-start gap-3">
                            <span
                              aria-hidden="true"
                              className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground"
                            >
                              <i className={`fa-light text-sm ${highlight.icon}`} />
                            </span>
                            <span className="flex min-w-0 flex-col gap-0.5">
                              <span className="text-sm font-medium leading-snug">
                                {highlight.title}
                              </span>
                              <span className="text-sm leading-relaxed text-muted-foreground">
                                {highlight.body}
                              </span>
                            </span>
                          </li>
                        ))}
                      </ul>
                    ) : (
                      <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                        {item.body}
                      </p>
                    )}

                    <div className="mt-4 flex flex-wrap gap-2">
                      {card ? (
                        <Button type="button" size="sm" onClick={openUpdate}>
                          {item.primaryActionLabel ?? "Open"}
                        </Button>
                      ) : null}
                      {unread ? (
                        <Button
                          type="button"
                          size="sm"
                          variant="outline"
                          onClick={() => dismiss(id)}
                        >
                          Mark read
                        </Button>
                      ) : null}
                    </div>
                  </article>
                </li>
              )
            })}
          </ol>
        )}

        <div className="mt-10">
          <Button variant="outline" size="sm" asChild>
            <Link to={dashboardHref}>Back to dashboard</Link>
          </Button>
        </div>
      </div>
    </PrimaryPageTemplate>
  )
}