import React, { useState } from "react";
import { Play } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { ResourceModal } from "./resource-modal";
import type { ResourceCenterHeaderProps } from "./types";

export function ResourceCenterHeader({
  title,
  description,
  backgroundImageUrl,
  backgroundVideoUrl,
  watchVideoUrl,
}: ResourceCenterHeaderProps) {
  const [watchModalOpen, setWatchModalOpen] = useState(false);

  const hasBackground = !!backgroundImageUrl || !!backgroundVideoUrl;

  return (
    <>
      <div
        className={cn(
          "relative flex min-h-[480px] w-full items-center overflow-hidden max-[900px]:min-h-[360px] max-[600px]:min-h-[260px]",
        )}
      >
        {/* Background base */}
        <div
          className={cn(
            "absolute inset-0 z-[0]",
            hasBackground
              ? "bg-foreground"
              : "bg-gradient-to-br from-primary to-foreground",
          )}
        />

        {/* Background image */}
        {backgroundImageUrl && !backgroundVideoUrl && (
          <img
            src={backgroundImageUrl}
            alt=""
            aria-hidden="true"
            className="absolute inset-0 h-full w-full object-cover z-[1]"
          />
        )}

        {/* Background video */}
        {backgroundVideoUrl && (
          <video
            className="absolute inset-0 h-full w-full object-cover z-[1]"
            src={backgroundVideoUrl}
            autoPlay
            muted
            loop
            playsInline
          />
        )}

        {/* Overlay tint */}
        <div
          className={cn(
            "absolute inset-0 z-[2]",
            hasBackground ? "bg-black/50" : "bg-black/20",
          )}
        />

        {/* Content */}
        <div className="relative z-[3] flex flex-col gap-4 px-8 py-12 md:px-16 max-w-3xl">
          <h1 className="text-[56px] font-bold text-white leading-none max-[900px]:text-[40px] max-[600px]:text-[32px]">
            {title}
          </h1>
          <p className="text-body-medium text-white/80 leading-relaxed">
            {description}
          </p>
          {watchVideoUrl && (
            <div className="pt-2">
              <Button variant="default" onClick={() => setWatchModalOpen(true)}>
                <Play className="mr-2 size-4" />
                Watch Now
              </Button>
            </div>
          )}
        </div>
      </div>

      {watchVideoUrl && (
        <ResourceModal
          open={watchModalOpen}
          onClose={() => setWatchModalOpen(false)}
          title={title}
          videoUrl={watchVideoUrl}
        />
      )}
    </>
  );
}