"use client";

import * as React from "react";
import { Reveal } from "./Reveal";
import { H1, LeadText } from "./Typography";
import { cn } from "../utils/cn";
import { Share2, Clock, Calendar } from "lucide-react";
import { ShareModal } from "./ShareModal";
import { useAnalytics } from "./analytics/useAnalytics";

interface PageHeaderProps {
  title: React.ReactNode;
  description?: string;
  backgroundSymbol?: string;
  className?: string;
  variant?: "default" | "blog";
  showShare?: boolean;
  date?: string;
  readingTime?: number;
  slug?: string;
}

export const PageHeader: React.FC<PageHeaderProps> = ({
  title,
  description,
  backgroundSymbol,
  className = "",
  variant = "default",
  showShare = false,
  date,
  readingTime,
  slug,
}) => {
  const [isShareModalOpen, setIsShareModalOpen] = React.useState(false);
  const { trackEvent } = useAnalytics();
  const isBlog = variant === "blog";

  const handleOpenShare = () => {
    setIsShareModalOpen(true);
    trackEvent("header_share_opened", {
      title: typeof title === "string" ? title : "Blog Post",
      slug: slug,
    });
  };

  const currentUrl = typeof window !== "undefined" ? window.location.href : "";

  return (
    <section
      className={cn(
        "narrow-container relative overflow-hidden md:overflow-visible",
        isBlog
          ? "pt-32 pb-8 md:pt-48 md:pb-12"
          : "pt-24 pb-16 md:pt-40 md:pb-24",
        className,
      )}
    >
      {backgroundSymbol && (
        <div
          className={cn(
            "absolute font-bold text-slate-50 select-none -z-10 opacity-40 tracking-tighter leading-none",
            isBlog
              ? "-left-4 md:-left-8 top-12 text-[10rem] md:text-[16rem]"
              : "-left-12 md:-left-24 -top-8 md:-top-12 text-[15rem] md:text-[24rem]",
          )}
        >
          {backgroundSymbol}
        </div>
      )}

      {isBlog && (
        <div
          className="absolute left-0 top-32 w-px h-12 bg-slate-200"
          aria-hidden="true"
        />
      )}

      <div
        className={cn(
          "space-y-4 md:space-y-12 relative",
          isBlog && "max-w-7xl",
        )}
      >
        <div className="space-y-4 md:space-y-8">
          <Reveal>
            <div className="flex items-start justify-between gap-6">
              <h1
                className={cn(
                  "font-bold text-slate-900 tracking-tighter leading-[1.1] flex-1",
                  isBlog ? "text-xl md:text-6xl" : "text-2xl md:text-7xl",
                )}
              >
                {title}
              </h1>
              {showShare && isBlog && (
                <button
                  onClick={handleOpenShare}
                  className="flex-shrink-0 inline-flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition-all text-xs font-medium mt-1"
                  aria-label="Artikel teilen"
                >
                  <Share2 className="w-3.5 h-3.5" />
                  <span className="hidden md:inline">Teilen</span>
                </button>
              )}
            </div>
          </Reveal>

          {description && (
            <Reveal delay={0.2}>
              <p
                className={cn(
                  "font-serif italic text-slate-400 leading-relaxed",
                  isBlog
                    ? "text-sm md:text-xl max-w-xl"
                    : "text-base md:text-2xl max-w-2xl",
                )}
              >
                {description}
              </p>
            </Reveal>
          )}
        </div>

        {isBlog && (
          <Reveal delay={0.3}>
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 py-6 border-y border-slate-100">
              <div className="flex items-center gap-8 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">
                {date && (
                  <div className="flex items-center gap-2">
                    <Calendar className="w-3 h-3 text-slate-300" />
                    <time dateTime={date}>{date}</time>
                  </div>
                )}
                {readingTime && (
                  <div className="flex items-center gap-2">
                    <Clock className="w-3 h-3 text-slate-300" />
                    <span>{readingTime} min Lesezeit</span>
                  </div>
                )}
              </div>
              <div className="flex items-center gap-4">
                <span className="text-[8px] font-mono text-slate-300 uppercase tracking-[0.5em]">
                  Technical ID: {slug?.substring(0, 4).toUpperCase() || "BLOG"}-
                  {Math.random().toString(36).substring(7).toUpperCase()}
                </span>
                <span
                  className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"
                  title="System Live"
                />
              </div>
            </div>
          </Reveal>
        )}
      </div>

      <ShareModal
        isOpen={isShareModalOpen}
        onClose={() => setIsShareModalOpen(false)}
        url={currentUrl}
        title={typeof title === "string" ? title : "Mintel Blog"}
      />
    </section>
  );
};
