"use client"

import * as React from "react"
import { Link } from "react-router"

import {
  FloatingSheetPanel,
  FloatingSheetPanelBody,
  FloatingSheetPanelContent,
  FloatingSheetPanelHeader,
  FloatingSheetPanelToolbar,
} from "@/lib/floating-sheet-panel"
import { Button } from "@/components/ui/button"
import { FilterChipGroup } from "@/components/ui/filter-chip-group"
import { StatusBadge } from "@/components/ui/status-badge"
import { Tip } from "@/components/ui/tip"
import {
  NOTIFICATION_CATEGORY_LABEL,
  type NotificationItem,
} from "@/lib/mock/notifications"
import {
  filterNotifications,
  groupNotificationsByTime,
  notificationVariantTint,
  type NotificationFilter,
} from "@/lib/notifications"
import { cn } from "@/lib/utils"

export interface NotificationSheetProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  items: NotificationItem[]
  onMarkRead: (id: string) => void
  onMarkAllRead: () => void
}

export function NotificationSheet({
  open,
  onOpenChange,
  items,
  onMarkRead,
  onMarkAllRead,
}: NotificationSheetProps) {
  const [filter, setFilter] = React.useState<NotificationFilter>("all")
  const filtered = filterNotifications(items, filter)
  const groups = groupNotificationsByTime(filtered)
  const unreadCount = items.filter(item => !item.read).length

  React.useEffect(() => {
    if (!open) setFilter("all")
  }, [open])

  const filterOptions = React.useMemo(
    () => [
      { value: "all" as const, label: "All" },
      {
        value: "unread" as const,
        label: "Unread",
        count: unreadCount > 0 ? unreadCount : undefined,
      },
    ],
    [unreadCount],
  )

  return (
    <FloatingSheetPanel open={open} onOpenChange={onOpenChange}>
      <FloatingSheetPanelContent contentSlot="notification-sheet" size="sm">
        <FloatingSheetPanelToolbar
          showSize={false}
          actions={
            <>
              {unreadCount > 0 ? (
                <Button type="button" variant="ghost" size="sm" onClick={onMarkAllRead}>
                  Mark all read
                </Button>
              ) : null}
              <Tip label="Notification settings" side="bottom">
                <Button
                  type="button"
                  variant="ghost"
                  size="icon-sm"
                  aria-label="Notification settings"
                  asChild
                >
                  <Link to="/settings/profile" onClick={() => onOpenChange(false)}>
                    <i className="fa-light fa-sliders text-xs" aria-hidden="true" />
                  </Link>
                </Button>
              </Tip>
            </>
          }
        />
        <FloatingSheetPanelHeader title="Notifications" />
        <div className="shrink-0 border-b border-border px-4 py-3">
          <FilterChipGroup
            value={filter}
            onValueChange={setFilter}
            options={filterOptions}
            variant="muted"
            size="sm"
            aria-label="Notification filter"
          />
        </div>
        <FloatingSheetPanelBody className="px-2 py-2">
          {groups.length === 0 ? (
            <p className="px-2 py-8 text-center text-sm text-muted-foreground">
              {filter === "unread" ? "No unread notifications." : "You are all caught up."}
            </p>
          ) : (
            groups.map(group => (
              <section key={group.label} aria-labelledby={`notif-group-${group.label}`}>
                <h2
                  id={`notif-group-${group.label}`}
                  className="px-2 pb-1 pt-3 text-xs font-medium text-muted-foreground"
                >
                  {group.label}
                </h2>
                <ul className="flex flex-col gap-0.5">
                  {group.items.map(item => (
                    <li key={item.id}>
                      <NotificationRow
                        item={item}
                        onActivate={() => onMarkRead(item.id)}
                      />
                    </li>
                  ))}
                </ul>
              </section>
            ))
          )}
        </FloatingSheetPanelBody>
      </FloatingSheetPanelContent>
    </FloatingSheetPanel>
  )
}

function NotificationRow({
  item,
  onActivate,
}: {
  item: NotificationItem
  onActivate: () => void
}) {
  const tintClassName = notificationVariantTint(item.variant)
  const categoryLabel = NOTIFICATION_CATEGORY_LABEL[item.category]

  const inner = (
    <div
      className={cn(
        "flex w-full flex-col gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        !item.read && "bg-sidebar-accent/40",
      )}
    >
      <div className="flex flex-wrap items-center gap-1.5">
        <StatusBadge
          label={categoryLabel}
          tintClassName={tintClassName}
          size="sm"
        />
        <span className="ms-auto text-2xs text-muted-foreground">{item.timestamp}</span>
      </div>
      <span className="text-sm font-medium text-foreground">{item.title}</span>
    </div>
  )

  if (item.href) {
    return (
      <Link to={item.href} onClick={onActivate} className="block rounded-md">
        {inner}
      </Link>
    )
  }

  return (
    <button type="button" onClick={onActivate} className="block w-full rounded-md">
      {inner}
    </button>
  )
}