import { Fragment } from "react";
import Image from "next/image";
import { Button, Form, Input } from '../elements';
import { cx } from '../../utils/cx';
import IconComponent from '../elements/IconComponent';
import type { WebsitePhotos } from '../../types/api/website-photos';

interface HomeHeroComponentProps {
    headline: string;
    subhead: string;
    email_signup?: {
        placeholder?: string;
        button_text?: string;
        privacy_policy_link?: string;
    };
    reviews?: {
        rating?: number;
        count?: number;
        avatars?: Array<{
            url: string;
            alt: string;
        }>;
    };
    statistics?: Array<{
        number: string;
        label: string;
        icon: string;
        color: string;
    }>;
    onEmailSubmit?: (email: string) => void;
    websitePhotos?: WebsitePhotos | null;
}

const AvatarsWithReview = ({ 
    count = 200, 
    avatars = [
        { url: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80", alt: "Olivia Rhye" },
        { url: "https://www.untitledui.com/images/avatars/phoenix-baker?fm=webp&q=80", alt: "Phoenix Baker" },
        { url: "https://www.untitledui.com/images/avatars/lana-steiner?fm=webp&q=80", alt: "Lana Steiner" },
        { url: "https://www.untitledui.com/images/avatars/demi-wilkinson?fm=webp&q=80", alt: "Demi Wilkinson" },
        { url: "https://www.untitledui.com/images/avatars/candice-wu?fm=webp&q=80", alt: "Candice Wu" },
    ],
    className 
}: { 
    count?: number; 
    avatars?: Array<{ url: string; alt: string }>;
    className?: string;
}) => {
    return (
        <div className={cx("flex items-center gap-4", className)}>
            <div className="inline-flex -space-x-3 overflow-hidden">
                {avatars.map((avatar, index) => (
                    <Image
                        key={index}
                        className="inline-block size-10 rounded-full ring-[1.5px] ring-bg-primary outline-1 -outline-offset-1 outline-avatar-contrast-border"
                        src={avatar.url}
                        alt={avatar.alt}
                        width={40}
                        height={40}
                    />
                ))}
            </div>
            <div className="flex flex-col gap-0.5">
                <div className="flex items-center gap-2">
                    <div className="flex items-center gap-1">
                        {Array(5)
                            .fill(null)
                            .map((_, index) => {
                                const clipId0 = `clip0_star_${index}`;
                                const clipId1 = `clip1_star_${index}`;
                                return (
                                    <svg
                                        key={index}
                                        width={20}
                                        height={20}
                                        viewBox="0 0 20 20"
                                        fill="none"
                                        className="relative size-5 shrink-0 grow-0"
                                        preserveAspectRatio="none"
                                    >
                                        <g clipPath={`url(#${clipId0})`}>
                                            <path
                                                d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                                                className="fill-bg-tertiary"
                                            />
                                            <g clipPath={`url(#${clipId1})`}>
                                                <path
                                                    d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                                                    className="fill-warning-300"
                                                />
                                            </g>
                                        </g>
                                        <defs>
                                            <clipPath id={clipId0}>
                                                <rect width={20} height={20} fill="white" />
                                            </clipPath>
                                            <clipPath id={clipId1}>
                                                <rect width={20} height={20} fill="white" />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                );
                            })}
                    </div>
                </div>
                <p className="text-md font-medium text-tertiary">from {count}+ reviews</p>
            </div>
        </div>
    );
};

export const HomeHeroComponent = ({
    headline,
    subhead,
    email_signup,
    reviews,
    statistics,
    onEmailSubmit,
    websitePhotos,
}: HomeHeroComponentProps) => {
    // Get hero image from website photos prop
    const heroImage = websitePhotos?.hero ? {
        url: websitePhotos.hero.url,
        alt: websitePhotos.hero.alt
    } : null;
    
    return (
        <Fragment>
            <section className="bg-primary py-16 md:pb-24">
                <div className="mx-auto grid max-w-container grid-cols-1 items-center gap-16 px-4 md:px-8 lg:grid-cols-2 lg:gap-8">
                    <div className="flex max-w-3xl flex-col items-start lg:pr-8">
                        <h1 className="text-display-md font-semibold text-primary md:text-display-lg lg:text-display-xl">
                            {headline}
                        </h1>
                        <p className="mt-4 max-w-lg text-lg text-balance text-tertiary md:mt-6 md:text-xl">
                            {subhead}
                        </p>

                        {email_signup && (
                            <Form
                                onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
                                    e.preventDefault();
                                    const formData = new FormData(e.currentTarget);
                                    const email = formData.get("email") as string;
                                    if (onEmailSubmit) {
                                        onEmailSubmit(email);
                                    } else {
                                        console.log("Email signup:", email);
                                    }
                                }}
                                className="mt-8 flex w-full flex-col items-stretch gap-4 md:mt-12 md:max-w-120 md:flex-row md:items-start"
                            >
                                <Input
                                    isRequired
                                    size="md"
                                    name="email"
                                    type="email"
                                    placeholder={email_signup.placeholder || "Enter your email"}
                                    wrapperClassName="py-0.5"
                                    hint={
                                        <span>
                                            We care about your data in our{" "}
                                            <a
                                                href={email_signup.privacy_policy_link || "#"}
                                                className="rounded-xs underline underline-offset-3 outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
                                            >
                                                privacy policy
                                            </a>
                                            .
                                        </span>
                                    }
                                />
                                <Button type="submit" color="primary" size="xl">
                                    {email_signup.button_text || "Get started"}
                                </Button>
                            </Form>
                        )}

                        <AvatarsWithReview 
                            count={reviews?.count}
                            avatars={reviews?.avatars}
                            className="mt-8 md:mt-12"
                        />

                        {/* Statistics in 2x2 grid */}
                        {statistics && statistics.length > 0 && (
                            <dl className="mt-8 grid grid-cols-2 gap-x-6 gap-y-4 md:mt-12">
                                {statistics.slice(0, 4).map((stat, index) => {
                                    const IconWrapper = ({ className }: { className?: string }) => (
                                        <div className={className}>
                                            <IconComponent 
                                                icon={stat.icon} 
                                                color={stat.color || 'blue'}
                                                className="w-full h-full"
                                            />
                                        </div>
                                    );
                                    
                                    return (
                                        <div key={index} className="flex flex-col gap-2">
                                            <div className="flex items-center gap-2">
                                                <IconWrapper className="size-5 shrink-0" />
                                                <dd className="text-lg font-semibold text-primary md:text-xl">{stat.number}</dd>
                                            </div>
                                            <dt className="text-sm font-medium text-tertiary md:text-md">{stat.label}</dt>
                                        </div>
                                    );
                                })}
                            </dl>
                        )}
                    </div>

                    {heroImage && heroImage.url && (
                        <div className="relative lg:h-full lg:min-h-160">
                            <Image
                                className="inset-0 h-70 w-full object-cover md:h-110 lg:absolute lg:h-full"
                                src={heroImage.url}
                                alt={heroImage.alt}
                                width={1200}
                                height={800}
                            />
                        </div>
                    )}
                </div>
            </section>
        </Fragment>
    );
};
