import { useEffect, useRef } from 'react';

/**
 * "Soirée" — a dark, art-deco glamour wedding-site theme.
 * Engraved Cinzel capitals, brushed gold on near-black, symmetric deco
 * ornaments and a formal evening 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;
}

/** Symmetric deco rule with a centre lozenge. */
function Deco() {
    return (
        <span className="so-deco" aria-hidden="true" data-reveal>
            <span className="so-deco__line" />
            <span className="so-deco__chevron" />
            <span className="so-deco__line" />
        </span>
    );
}

export default function SoireeTheme({ 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="soiree">
            <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=Cinzel:wght@400;500;600&family=Jost:wght@300;400;500&display=swap" />
            <style>{SOIREE_CSS}</style>

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

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

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

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

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

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

const SOIREE_CSS = `
.soiree {
    --bg: #14110E;
    --bg-2: #1C1813;
    --ivory: #EFE7D8;
    --muted: #9A8E78;
    --gold: #C6A35A;
    --gold-soft: #c6a35a33;
    --line: #c6a35a2e;
    --serif: 'Cinzel', Georgia, serif;
    --sans: 'Jost', system-ui, sans-serif;
    background: var(--bg); color: var(--ivory); font-family: var(--sans);
    min-height: 100vh; overflow-x: hidden;
    background-image: radial-gradient(circle at 50% 0%, #c6a35a14, transparent 45%);
}
.soiree *, .soiree *::before, .soiree *::after { box-sizing: border-box; }

.so-deco { display: flex; align-items: center; justify-content: center; gap: 12px; width: 150px; margin: 0 auto 26px; }
.so-deco__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.so-deco__line:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.so-deco__chevron { width: 9px; height: 9px; border: 1px solid var(--gold); transform: rotate(45deg); flex-shrink: 0; }

.so-eyebrow, .so-kicker { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin: 0 0 26px; }

.so-h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.18; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 26px; color: var(--ivory); }
.so-prose { font-family: var(--sans); font-weight: 300; font-size: clamp(1.04rem, 1.4vw, 1.2rem); line-height: 1.9; color: #C9BFAD; white-space: pre-line; margin: 0; }

/* Hero */
.so-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: var(--bg-2); }
.so-hero--photo { background-size: cover; background-position: center; }
.so-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,6,0.62), rgba(10,8,6,0.4) 40%, rgba(10,8,6,0.78)); }
.so-hero::before { content: ""; position: absolute; inset: 20px; border: 1px solid var(--gold-soft); pointer-events: none; }
.so-hero::after { content: ""; position: absolute; inset: 26px; border: 1px solid var(--gold-soft); opacity: 0.5; pointer-events: none; }
.so-hero__inner { position: relative; z-index: 2; max-width: 860px; }
.so-names { font-family: var(--serif); font-weight: 600; color: var(--ivory); font-size: clamp(2.4rem, 8vw, 5rem); line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.so-amp { font-family: var(--serif); font-weight: 400; color: var(--gold); font-size: 0.5em; }
.so-date { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); margin: 34px 0 0; }
.so-venue { font-family: var(--sans); font-weight: 300; font-style: italic; font-size: 1.12rem; color: #C9BFAD; margin: 10px 0 0; }
.so-sub { font-family: var(--sans); font-weight: 300; font-size: 1.06rem; line-height: 1.7; color: #B6AB97; max-width: 30rem; margin: 20px auto 0; }
.so-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); }

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

/* Details */
.so-details { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(24px, 5vw, 72px); margin-top: 42px; }
.so-details--single { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; }
.so-detail__label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.so-detail__time { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: 0.04em; margin: 0 0 8px; }
.so-detail__venue { font-family: var(--sans); font-style: italic; font-weight: 300; color: var(--muted); font-size: 1.05rem; margin: 0; }
.so-detail__rule { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, var(--gold-soft), transparent); }

/* Timeline */
.so-timeline { list-style: none; margin: 42px auto 0; padding: 0; max-width: 460px; text-align: left; }
.so-timeline__item { display: grid; grid-template-columns: 84px 1fr; gap: 2px 22px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.so-timeline__time { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; color: var(--gold); }
.so-timeline__title { font-family: var(--serif); font-weight: 500; font-size: 1.16rem; letter-spacing: 0.03em; }
.so-timeline__loc { grid-column: 2; font-family: var(--sans); font-style: italic; color: var(--muted); font-size: 1rem; }

/* Footer */
.so-footer { text-align: center; padding: 78px 28px 60px; border-top: 1px solid var(--line); }
.so-footer .so-deco { margin-bottom: 22px; }
.so-footer__names { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 6px; }
.so-footer__date { font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin: 0 0 24px; }
.so-footer__brand { font-family: var(--sans); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin: 0; }
.so-footer__brand span { font-family: var(--serif); text-transform: none; letter-spacing: 0.03em; font-size: 13px; color: var(--gold); margin-left: 5px; }

@keyframes soRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.so-fade { opacity: 0; animation: soRise 1.2s 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) { .so-fade, [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } }
@media (max-width: 600px) { .so-details { grid-template-columns: 1fr; } .so-detail__rule { width: 60%; height: 1px; justify-self: center; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); } }
`;