import { useEffect, useRef } from 'react';

/**
 * "Botanica" — a light, organic garden wedding-site theme.
 * Soft cream + sage, a high-contrast Gilda Display serif, hand-drawn botanical
 * sprig dividers and a relaxed, leafy editorial rhythm. Same section model as
 * every theme.
 */

interface Props {
    wedding: { partner_a_name: string; partner_b_name: string };
    content: (id: string) => Record<string, string>;
    visible: (id: string) => boolean;
    timeline?: { id: string; title: string; start_time: string; location?: string }[];
    coupleNames: string;
    weddingDate: string | null;
    venue: string;
    t: (key: string, replacements?: Record<string, string | number>) => string;
}

/** A small hand-drawn botanical sprig, used to open each section. */
function Sprig() {
    return (
        <svg className="bo-sprig" viewBox="0 0 64 40" fill="none" aria-hidden="true" data-reveal>
            <path d="M32 38 V12" stroke="currentColor" strokeWidth="1" strokeLinecap="round" />
            <path d="M32 24c-6-1-10-5-11-11 6 0 10 4 11 11Z" fill="currentColor" opacity="0.5" />
            <path d="M32 20c6-1 10-5 11-11-6 0-10 4-11 11Z" fill="currentColor" opacity="0.5" />
            <path d="M32 30c-5 0-8-3-9-8 5 0 8 3 9 8Z" fill="currentColor" opacity="0.35" />
            <path d="M32 27c5 0 8-3 9-8-5 0-8 3-9 8Z" fill="currentColor" opacity="0.35" />
            <circle cx="32" cy="9" r="2.4" fill="currentColor" />
        </svg>
    );
}

export default function BotanicaTheme({ wedding, content, visible, timeline, coupleNames, weddingDate, venue, t }: Props) {
    const rootRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const els = rootRef.current?.querySelectorAll<HTMLElement>('[data-reveal]');
        if (!els || !els.length) return;
        const io = new IntersectionObserver(
            (entries) => entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } }),
            { rootMargin: '0px 0px -12% 0px', threshold: 0.12 },
        );
        els.forEach((el) => io.observe(el));
        return () => io.disconnect();
    }, []);

    const hero = content('hero');
    const heroImg = hero.backgroundUrl?.trim();
    const story = content('story');
    const details = content('details');
    const hasCeremony = !!details.ceremonyTime;
    const hasReception = !!details.receptionTime;
    const rsvp = content('rsvp');
    const registry = content('registry');
    const faq = content('faq');

    return (
        <div ref={rootRef} className="botanica">
            <link rel="preconnect" href="https://fonts.googleapis.com" />
            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gilda+Display&family=Mulish:wght@300;400;500;600&display=swap" />
            <style>{BOTANICA_CSS}</style>

            {visible('hero') && (
                <header className={`bo-hero${heroImg ? ' bo-hero--photo' : ''}`} style={heroImg ? { backgroundImage: `url(${heroImg})` } : undefined}>
                    {heroImg && <div className="bo-hero__veil" aria-hidden="true" />}
                    <div className="bo-hero__inner">
                        <p className="bo-eyebrow bo-fade" style={{ animationDelay: '0.15s' }}>{t('wsite.eyebrow_wedding')}</p>
                        <h1 className="bo-names bo-fade" style={{ animationDelay: '0.3s' }}>
                            <span>{wedding.partner_a_name}</span>
                            <span className="bo-amp">&amp;</span>
                            <span>{wedding.partner_b_name}</span>
                        </h1>
                        {weddingDate && <p className="bo-date bo-fade" style={{ animationDelay: '0.5s' }}>{weddingDate}</p>}
                        {venue && <p className="bo-venue bo-fade" style={{ animationDelay: '0.6s' }}>{venue}</p>}
                        {hero.subheading && <p className="bo-sub bo-fade" style={{ animationDelay: '0.72s' }}>{hero.subheading}</p>}
                    </div>
                    <span className="bo-scroll bo-fade" style={{ animationDelay: '1s' }}>{t('wsite.scroll')}</span>
                </header>
            )}

            {visible('story') && story.body && (
                <section className="bo-section bo-section--narrow"><Sprig /><div data-reveal>
                    <p className="bo-kicker">{t('wsite.chapter_1')}</p>
                    <h2 className="bo-h2">{story.heading || t('wsite.our_story')}</h2>
                    <p className="bo-prose">{story.body}</p>
                </div></section>
            )}

            {visible('details') && (hasCeremony || hasReception) && (
                <section className="bo-section"><Sprig /><div data-reveal>
                    <p className="bo-kicker bo-center">{t('wsite.chapter_2')}</p>
                    <h2 className="bo-h2 bo-center">{details.heading || t('wsite.event_details')}</h2>
                    <div className={`bo-details${hasCeremony && hasReception ? '' : ' bo-details--single'}`}>
                        {hasCeremony && (
                            <article className="bo-detail">
                                <p className="bo-detail__label">{t('wsite.ceremony')}</p>
                                <p className="bo-detail__time">{details.ceremonyTime}</p>
                                {details.ceremonyVenue && <p className="bo-detail__venue">{details.ceremonyVenue}</p>}
                            </article>
                        )}
                        {hasReception && (
                            <article className="bo-detail">
                                <p className="bo-detail__label">{t('wsite.reception')}</p>
                                <p className="bo-detail__time">{details.receptionTime}</p>
                                {details.receptionVenue && <p className="bo-detail__venue">{details.receptionVenue}</p>}
                            </article>
                        )}
                    </div>
                </div></section>
            )}

            {visible('timeline') && timeline && timeline.length > 0 && (
                <section className="bo-section bo-section--narrow"><Sprig /><div data-reveal>
                    <p className="bo-kicker bo-center">{t('wsite.the_day')}</p>
                    <h2 className="bo-h2 bo-center">{content('timeline').heading?.trim() || t('timeline.title')}</h2>
                    <ol className="bo-timeline">
                        {timeline.map((ev) => (
                            <li key={ev.id} className="bo-timeline__item">
                                <span className="bo-timeline__time">{ev.start_time}</span>
                                <span className="bo-timeline__title">{ev.title}</span>
                                {ev.location && <span className="bo-timeline__loc">{ev.location}</span>}
                            </li>
                        ))}
                    </ol>
                </div></section>
            )}

            {visible('rsvp') && rsvp.body?.trim() && (
                <section className="bo-section bo-section--narrow bo-center"><Sprig /><div data-reveal>
                    <p className="bo-kicker bo-center">{t('wsite.reply')}</p>
                    <h2 className="bo-h2">{rsvp.heading?.trim() || t('rsvp.title')}</h2>
                    <p className="bo-prose">{rsvp.body}</p>
                </div></section>
            )}
            {visible('registry') && registry.body?.trim() && (
                <section className="bo-section bo-section--narrow bo-center"><Sprig /><div data-reveal>
                    <p className="bo-kicker bo-center">{t('wsite.with_gratitude')}</p>
                    <h2 className="bo-h2">{registry.heading?.trim() || t('wsite.registry')}</h2>
                    <p className="bo-prose">{registry.body}</p>
                </div></section>
            )}
            {visible('faq') && faq.body?.trim() && (
                <section className="bo-section bo-section--narrow"><Sprig /><div data-reveal>
                    <p className="bo-kicker bo-center">{t('wsite.good_to_know')}</p>
                    <h2 className="bo-h2 bo-center">{faq.heading?.trim() || t('wsite.faq')}</h2>
                    <p className="bo-prose">{faq.body}</p>
                </div></section>
            )}

            <footer className="bo-footer"><Sprig />
                <p className="bo-footer__names">{coupleNames}</p>
                {weddingDate && <p className="bo-footer__date">{weddingDate}</p>}
                <p className="bo-footer__brand">{t('common.powered_by')} <span>WedFlow</span></p>
            </footer>
        </div>
    );
}

const BOTANICA_CSS = `
.botanica {
    --paper: #F2F1E6;
    --ink: #2C322A;
    --muted: #76806E;
    --sage: #6E8B6A;
    --sage-soft: #6e8b6a33;
    --line: #2c322a17;
    --serif: 'Gilda Display', Georgia, serif;
    --sans: 'Mulish', system-ui, sans-serif;
    background: var(--paper); color: var(--ink); font-family: var(--serif);
    min-height: 100vh; overflow-x: hidden;
    background-image: radial-gradient(circle at 12% 8%, #6e8b6a14, transparent 40%), radial-gradient(circle at 88% 92%, #6e8b6a12, transparent 44%);
}
.botanica *, .botanica *::before, .botanica *::after { box-sizing: border-box; }

.bo-sprig { display: block; width: 56px; height: 36px; margin: 0 auto 22px; color: var(--sage); }
.bo-eyebrow, .bo-kicker {
    font-family: var(--sans); font-weight: 500; font-size: 11px;
    letter-spacing: 0.34em; text-transform: uppercase; color: var(--sage); margin: 0 0 22px;
}
.bo-center { text-align: center; }
.bo-kicker.bo-center { text-align: center; }

.bo-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.12; margin: 0 0 22px; letter-spacing: 0.005em; }
.bo-prose { font-family: var(--sans); font-weight: 300; font-size: clamp(1.04rem, 1.4vw, 1.22rem); line-height: 1.95; color: #44493F; white-space: pre-line; margin: 0; }

/* Hero */
.bo-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 96px 28px 72px; background: #EAE9DA; }
.bo-hero--photo { background-size: cover; background-position: center; }
.bo-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,38,30,0.34), rgba(34,38,30,0.12) 40%, rgba(34,38,30,0.5)); }
.bo-hero__inner { position: relative; z-index: 2; max-width: 860px; }
.bo-hero--photo .bo-eyebrow, .bo-hero--photo .bo-date { color: rgba(255,255,255,0.92); }
.bo-names { font-family: var(--serif); font-weight: 400; color: #fff; font-size: clamp(3rem, 11vw, 6.6rem); line-height: 1.02; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bo-hero:not(.bo-hero--photo) .bo-names { color: var(--ink); }
.bo-amp { font-style: italic; color: var(--sage); font-size: 0.5em; margin: 8px 0; }
.bo-date { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage); margin: 32px 0 0; }
.bo-hero--photo .bo-venue, .bo-hero--photo .bo-sub { color: rgba(255,255,255,0.85); }
.bo-venue { font-style: italic; font-family: var(--serif); font-size: 1.2rem; color: #5A6353; margin: 8px 0 0; }
.bo-sub { font-family: var(--sans); font-weight: 300; font-size: 1.08rem; line-height: 1.7; color: #5A6353; max-width: 30rem; margin: 20px auto 0; }
.bo-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage); }
.bo-hero--photo .bo-scroll { color: rgba(255,255,255,0.8); }

/* Sections */
.bo-section { max-width: 1000px; margin: 0 auto; padding: clamp(64px, 11vw, 120px) 28px; border-top: 1px solid var(--line); }
.bo-section--narrow { max-width: 680px; }

/* Details */
.bo-details { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); margin-top: 40px; }
.bo-details--single { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; }
.bo-detail { text-align: center; background: #fbfaf3; border: 1px solid var(--line); border-radius: 18px; padding: 34px 24px; }
.bo-detail__label { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sage); margin: 0 0 14px; }
.bo-detail__time { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 6px; }
.bo-detail__venue { font-style: italic; color: var(--muted); font-size: 1.05rem; margin: 0; }

/* Timeline */
.bo-timeline { list-style: none; margin: 40px 0 0; padding: 0; }
.bo-timeline__item { display: grid; grid-template-columns: 88px 1fr; gap: 2px 22px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.bo-timeline__time { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; color: var(--sage); }
.bo-timeline__title { font-family: var(--serif); font-size: 1.32rem; }
.bo-timeline__loc { grid-column: 2; font-style: italic; color: var(--muted); font-size: 1rem; }

/* Footer */
.bo-footer { text-align: center; padding: 76px 28px 60px; border-top: 1px solid var(--line); }
.bo-footer .bo-sprig { margin-bottom: 18px; }
.bo-footer__names { font-family: var(--serif); font-size: 1.7rem; margin: 0 0 4px; }
.bo-footer__date { font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin: 0 0 24px; }
.bo-footer__brand { font-family: var(--sans); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin: 0; }
.bo-footer__brand span { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--sage); margin-left: 4px; }

@keyframes boRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.bo-fade { opacity: 0; animation: boRise 1.1s cubic-bezier(0.2,0.7,0.2,1) forwards; }
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s cubic-bezier(0.2,0.7,0.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bo-fade, [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } }
@media (max-width: 600px) { .bo-details { grid-template-columns: 1fr; } }
`;