Header Greeting

"use client";

import { useId } from "react";
import { Bell, Search, Upload, Video, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderGreetingProps {
  name?: string;
  summary?: string;
  quickActions?: { label: string; href: string; icon: "record" | "upload" | "ask" }[];
  notifications?: number;
  onSearch?: (q: string) => void;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";
const ICONS = { record: Video, upload: Upload, ask: Sparkles };

/** Dashboard header: time-of-day greeting with a day summary, a large glass “Ask Halo” search, quick-action chips and a notification bell. */
export function HeaderGreeting({
  name = "Amara",
  summary = "You have 4 meetings today and 3 recaps waiting for review.",
  quickActions = [
    { label: "Record a video", href: "#record", icon: "record" },
    { label: "Upload a recording", href: "#upload", icon: "upload" },
    { label: "Ask about last week", href: "#ask", icon: "ask" },
  ],
  notifications = 5,
  onSearch,
  className,
}: HeaderGreetingProps) {
  const id = useId();
  const hour = new Date().getHours();
  const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";

  return (
    <header className={cn("px-4 pt-8 pb-6 text-da-fg sm:px-8", className)}>
      <div className="mx-auto max-w-5xl">
        <div className="flex items-start justify-between gap-4">
          <div>
            <h1 className="font-da-display text-[clamp(1.75rem,4vw,2.5rem)] leading-tight font-semibold tracking-da-display" suppressHydrationWarning>
              {greeting}, {name}
            </h1>
            <p className="mt-1 text-da-muted-fg">{summary}</p>
          </div>
          <a href="#notifications" className={cn("da-focus relative grid size-11 shrink-0 place-items-center rounded-full shadow-da-sm", GLASS)}>
            <Bell aria-hidden className="size-5" />
            <span className="sr-only">Notifications ({notifications} unread)</span>
            {notifications > 0 && (
              <span
                aria-hidden
                className="absolute -top-0.5 -right-0.5 grid size-5 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent text-[10px] font-semibold text-da-primary-fg ring-2 ring-da-bg"
              >
                {notifications}
              </span>
            )}
          </a>
        </div>
        <form
          role="search"
          className={cn(
            "mt-6 flex items-center gap-2 rounded-da-lg p-2 pl-5 shadow-da-md has-focus-visible:ring-(length:--da-ring-width) has-focus-visible:ring-da-ring",
            GLASS,
          )}
          onSubmit={(e) => {
            e.preventDefault();
            onSearch?.(String(new FormData(e.currentTarget).get("q")));
          }}
        >
          <Search aria-hidden className="size-5 shrink-0 text-da-muted-fg" />
          <label htmlFor={id} className="sr-only">
            Ask Halo
          </label>
          <input
            id={id}
            name="q"
            placeholder="Ask Halo anything — “what did we decide about pricing?”"
            className="h-12 min-w-0 flex-1 bg-transparent text-[15px] outline-none placeholder:text-da-muted-fg"
          />
          <button
            type="submit"
            className="da-focus inline-flex h-11 shrink-0 items-center gap-1.5 rounded-da-md bg-gradient-to-r from-da-primary to-da-accent px-4 text-sm font-semibold text-da-primary-fg shadow-da-sm"
          >
            <Sparkles aria-hidden className="size-4" />
            <span className="max-sm:sr-only">Ask</span>
          </button>
        </form>
        <ul className="mt-4 flex flex-wrap gap-2">
          {quickActions.map((a) => {
            const Icon = ICONS[a.icon];
            return (
              <li key={a.href}>
                <a
                  href={a.href}
                  className={cn(
                    "da-focus da-transition inline-flex items-center gap-2 rounded-da-pill px-3.5 py-2 text-sm font-medium shadow-da-sm hover:-translate-y-0.5",
                    GLASS,
                  )}
                >
                  <Icon aria-hidden className="size-4 text-da-primary" />
                  {a.label}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    </header>
  );
}

export default HeaderGreeting;