import type { ConsentNotice } from '../core/api';
import { t } from '../core/i18n';
import { safeHref } from '../core/safeUrl';

type Props = {
    notice: ConsentNotice;
    /** True once the visitor pressed Decline — swaps to the refusal copy. */
    declined: boolean;
    accent: string;
    radius: number;
    agentName: string;
    onAccept: () => void;
    onDecline: () => void;
    onClose: () => void;
    scheme?: 'light' | 'dark';
};

/**
 * AI / data-protection consent gate (#532).
 *
 * The EU AI Act (Art. 50) requires the visitor to be told they are
 * talking to a machine BEFORE the interaction begins, and GDPR adds a
 * notice about what happens to what they type. This gate replaces the
 * chat surface until the visitor answers:
 *
 *   Accept  → chat unlocks on the same mount, no reload
 *   Decline → the operator's refusal message; the composer never opens
 *
 * Copy is fully operator-owned and arrives pre-resolved to the widget
 * locale on /init, so this component renders text and never decides it.
 * It deliberately mirrors PreChatGate's shell — same panel, header and
 * palette — so the two gates can never drift apart visually and the
 * bundle carries one look, not two.
 */
export function ConsentGate({
    notice,
    declined,
    accent,
    radius,
    agentName,
    onAccept,
    onDecline,
    onClose,
    scheme,
}: Props) {
    const isDark = scheme === 'dark';
    const surface = isDark ? '#0f172a' : '#ffffff';
    const headerBorder = isDark ? '#1f2937' : '#f1f5f9';
    const closeText = isDark ? '#94a3b8' : '#6b7280';
    const titleText = isDark ? '#e2e8f0' : '#0f172a';
    const bodyText = isDark ? '#cbd5e1' : '#475569';
    const declineBorder = isDark ? '#334155' : '#d1d5db';
    const privacyHref = safeHref(notice.privacy_url);

    return (
        <div
            role="dialog"
            aria-modal="false"
            aria-label={notice.title}
            style={{
                width: 'min(560px, 95vw)',
                background: surface,
                color: titleText,
                borderRadius: radius,
                boxShadow: '0 24px 48px rgba(0,0,0,0.18)',
                overflow: 'hidden',
                animation: 'pitchbar-rise 200ms ease-out',
            }}
        >
            <div
                style={{
                    padding: '10px 14px',
                    borderBottom: `1px solid ${headerBorder}`,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    gap: 8,
                }}
            >
                <strong style={{ fontSize: 13 }}>{agentName}</strong>
                <button
                    type="button"
                    onClick={onClose}
                    aria-label={t('Close')}
                    style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: 26,
                        height: 26,
                        borderRadius: '50%',
                        border: 'none',
                        background: 'transparent',
                        color: closeText,
                        fontSize: 18,
                        lineHeight: 1,
                        cursor: 'pointer',
                    }}
                >
                    ×
                </button>
            </div>

            <div
                style={{
                    padding: 16,
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 12,
                }}
            >
                {declined ? (
                    <p
                        style={{
                            margin: 0,
                            fontSize: 14,
                            lineHeight: 1.5,
                            color: bodyText,
                        }}
                    >
                        {notice.declined_message}
                    </p>
                ) : (
                    <>
                        <p
                            style={{
                                margin: 0,
                                fontSize: 15,
                                fontWeight: 600,
                                color: titleText,
                            }}
                        >
                            {notice.title}
                        </p>
                        <p
                            style={{
                                margin: 0,
                                fontSize: 13,
                                lineHeight: 1.55,
                                color: bodyText,
                                whiteSpace: 'pre-wrap',
                            }}
                        >
                            {notice.body}
                        </p>

                        {privacyHref !== null && (
                            <a
                                href={privacyHref}
                                target="_blank"
                                rel="noopener noreferrer"
                                style={{
                                    fontSize: 13,
                                    lineHeight: 1.5,
                                    color: accent,
                                    textDecoration: 'underline',
                                }}
                            >
                                {notice.privacy_label}
                            </a>
                        )}

                        <div
                            style={{
                                display: 'flex',
                                gap: 8,
                                flexWrap: 'wrap',
                            }}
                        >
                            <button
                                type="button"
                                onClick={onAccept}
                                style={{
                                    flex: '1 1 auto',
                                    background: accent,
                                    color: 'white',
                                    border: 'none',
                                    borderRadius: 8,
                                    padding: '12px 14px',
                                    fontSize: 14,
                                    fontWeight: 600,
                                    cursor: 'pointer',
                                }}
                            >
                                {notice.accept_label}
                            </button>
                            <button
                                type="button"
                                onClick={onDecline}
                                style={{
                                    flex: '0 1 auto',
                                    background: 'transparent',
                                    color: bodyText,
                                    border: `1px solid ${declineBorder}`,
                                    borderRadius: 8,
                                    padding: '12px 14px',
                                    fontSize: 14,
                                    fontWeight: 500,
                                    cursor: 'pointer',
                                }}
                            >
                                {notice.decline_label}
                            </button>
                        </div>
                    </>
                )}
            </div>
        </div>
    );
}