"use client";

import { Fragment, useState } from "react";
import React from "react";
import { PhotoWithFallback, VideoModal, VideoPlayButton, Button } from '../elements';
import type { WebsitePhotos } from '../../types/api/website-photos';
import type { CompanyInformation } from '../../types/api/company-information';
import { resolveCtaUrls, isExternalCtaUrl } from '../../lib/cta-urls';

interface HeroHomeProps {
    websitePhotos?: WebsitePhotos | null;
    companyInformation?: CompanyInformation | null;
    headline?: string;
    subhead?: string;
    ctaText?: string;
    /** Optional route override for the main CTA. When not set, uses primary CTA URL (booking or /contact) from company info. */
    ctaHref?: string;
    tagline?: string;
    reviews?: { rating: number; count: number };
    onEmailSubmit?: (email: string) => void;
    videoUrl?: string;
}

export const HeroHome = ({
    websitePhotos,
    companyInformation,
    headline = "",
    subhead = "",
    ctaText = "",
    ctaHref,
    tagline = "",
    videoUrl,
}: HeroHomeProps) => {
    const [showVideo, setShowVideo] = useState(false);
    const resolved = companyInformation ? resolveCtaUrls(companyInformation) : null;
    const effectiveCtaHref = ctaHref ?? resolved?.primaryHref ?? '/contact';
    
    // Match the aman theme structure
    const heroImage = {
        url: websitePhotos?.hero?.url || '',
        alt: websitePhotos?.hero?.alt || '',
    };

    return (
        <Fragment>
            {/* Hero Section - Full screen with overlay text on left */}
            <section className="relative w-full h-[60vh] min-h-[500px] max-h-[550px]">
                {/* Hero Image */}
                <div className="absolute inset-0">
                    <PhotoWithFallback
                        photoUrl={heroImage.url}
                        photoAlt={heroImage.alt}
                        fallbackId="hero-home-barelux"
                        className="w-full h-full object-cover"
                    />
                </div>
                
                {/* Dark overlay for text readability */}
                <div className="absolute inset-0 bg-black/50" />

                {/* Text Content Overlay - Left aligned */}
                <div className="relative h-full flex items-center">
                    <div className="mx-auto max-w-7xl px-4 md:px-8 w-full">
                        <div className="max-w-2xl">
                            {/* Small tagline badge */}
                            {tagline && (
                                <p className="font-body text-sm font-semibold uppercase tracking-widest text-white mb-5">
                                    {tagline}
                                </p>
                            )}
                            
                            {/* Main headline - large serif */}
                            <h1 className="font-display text-display-xl font-normal leading-none text-white mb-4">
                                {headline}
                            </h1>
                            
                            {/* Subheadline */}
                            <p className="font-body text-base md:text-lg leading-normal text-white mb-6 max-w-xl">
                                {subhead}
                            </p>

                            {/* CTA Button (external booking link opens in new tab) */}
                            {ctaText && (
                                <Button
                                    href={effectiveCtaHref}
                                    target={isExternalCtaUrl(effectiveCtaHref) ? '_blank' : undefined}
                                    rel={isExternalCtaUrl(effectiveCtaHref) ? 'noopener noreferrer' : undefined}
                                    color="primary"
                                    size="md"
                                >
                                    {ctaText}
                                </Button>
                            )}
                        </div>
                    </div>
                </div>

                {/* Video play button overlay */}
                {videoUrl && (
                    <div className="absolute inset-0 flex items-center justify-center">
                        <VideoPlayButton onClick={() => setShowVideo(true)} />
                    </div>
                )}
            </section>
            
            {/* Video modal */}
            {videoUrl && (
                <VideoModal 
                    isOpen={showVideo}
                    onClose={() => setShowVideo(false)}
                    videoUrl={videoUrl}
                />
            )}
        </Fragment>
    );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('hero-home', 'barelux', HeroHome);
