import { Button } from '@/Components/ui';
import type { TemplatesTeaserSection as TemplatesTeaserSectionData } from '@/marketing/cms-types';

import { SanitizedHtmlBody, SanitizedHtmlInline } from '@/marketing/sanitized-html';
import { CrossMark, Reveal, useKitCta } from '@/marketing/shared';
import { Link } from '@inertiajs/react';
import { ArrowRight } from 'lucide-react';

export type KitTeaserMeta = {
    key: string;
    name: string;
    description: string;
    category: string;
    tagline: string;
    screen_count: number;
    is_featured: boolean;
    is_premium: boolean;
    screens: { name: string; preview_path: string }[];
};

export function TemplatesTeaserSection({
    section,
    kits,
}: {
    section: TemplatesTeaserSectionData;
    kits: KitTeaserMeta[];
}) {
    if (kits.length === 0) {
        return null;
    }

    return (
        <section className="ms-section-teaser border-t border-border/60">
            <div className="relative mx-auto max-w-6xl border-x border-border/60 px-6 py-24 lg:px-8 lg:py-24">
                <CrossMark className="left-0 top-0" />
                <CrossMark className="left-full top-0" />
                <Reveal>
                    <div className="ms-head max-w-3xl">
                        {section.eyebrow && (
                            <div className="ms-badge mb-6 inline-flex items-center rounded-full bg-accent px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-accent-foreground">
                                <SanitizedHtmlInline html={section.eyebrow} />
                            </div>
                        )}
                        <h2 className="font-display text-4xl font-medium leading-[1.1] tracking-tight text-foreground sm:text-5xl [&_em]:font-display [&_em]:italic [&_em]:text-accent">
                            <SanitizedHtmlInline html={section.heading} />
                        </h2>
                        {section.subhead && (
                            <SanitizedHtmlBody
                                html={section.subhead}
                                className="mt-6 text-lg"
                            />
                        )}
                    </div>
                </Reveal>
                <Reveal delay={0.1}>
                    <div className="-mx-6 mt-12 grid gap-px border-y border-border/60 bg-border/60 sm:grid-cols-2 lg:-mx-8 lg:grid-cols-3">
                        {kits.map((kit) => (
                            <TeaserKitCard key={kit.key} kit={kit} />
                        ))}
                    </div>
                </Reveal>
                <div className="mt-12 text-center">
                    <Link href="/templates">
                        <Button variant="secondary" size="md">
                            {section.ctaLabel}
                            <ArrowRight className="h-4 w-4" />
                        </Button>
                    </Link>
                </div>
            </div>
        </section>
    );
}

function TeaserKitCard({ kit }: { kit: KitTeaserMeta }) {
    const cta = useKitCta(kit);
    return (
        <>
        <Link
            href={cta.href}
            onClick={cta.onClick}
            data-premium={kit.is_premium ? 'true' : undefined}
            className="ms-card group flex flex-col bg-card p-8 transition-colors hover:bg-background lg:p-10"
        >
            <div className="flex items-end gap-2 overflow-hidden">
                {kit.screens.map((screen, idx) => (
                    <img
                        key={idx}
                        src={screen.preview_path}
                        alt={`${kit.name} — ${screen.name}`}
                        loading="lazy"
                        className="h-[110px] w-[51px] shrink-0 rounded-[10px] border-2 border-foreground bg-foreground object-cover shadow-md"
                    />
                ))}
            </div>
            <div className="mt-8">
                {(kit.category || kit.is_premium) && (
                    <div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-wider text-muted-foreground">
                        {kit.category && <span>{kit.category}</span>}
                        {kit.is_premium && (
                            <span className="inline-flex items-center rounded-full bg-accent/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-accent">
                                Pro
                            </span>
                        )}
                    </div>
                )}
                <h3 className="mt-2 font-display text-2xl font-semibold text-foreground transition-colors group-hover:text-accent">
                    {kit.name}
                </h3>
                {kit.tagline && (
                    <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                        {kit.tagline}
                    </p>
                )}
                <div className="mt-5 flex items-center justify-between text-xs text-muted-foreground">
                    <span>
                        {kit.screen_count} screens · 8 device sizes
                    </span>
                    <span className="inline-flex items-center gap-1 text-sm font-medium text-accent transition-opacity group-hover:opacity-80">
                        Use this kit
                        <ArrowRight className="h-3.5 w-3.5" />
                    </span>
                </div>
            </div>
        </Link>
        {cta.modal}
        </>
    );
}
