/* OLIS Legal Modal - Agreement & Terms */
(function () {


  const i18n = window.i18nConfig;

  function LegalModal({ onClose, type = 'agreement' }) {
    const [showDownload, setShowDownload] = React.useState(false);

    const content = {
      agreement: {
        titleKey: 'legalAgreementTitle',
        contentKey: 'legalAgreementText',
        buttonKey: 'btnDownloadAgreement',
      },
      terms: {
        titleKey: 'legalTermsTitle',
        contentKey: 'legalTermsText',
        buttonKey: 'btnViewTerms',
      },
      privacy: {
        titleKey: 'legalPrivacyTitle',
        contentKey: 'legalPrivacyText',
        buttonKey: 'btnViewPrivacy',
      },
      risk: {
        titleKey: 'legalRiskTitle',
        contentKey: 'legalRiskText',
        buttonKey: 'btnViewRisk',
      },
    };

    const section = content[type] || content.agreement;

    return (
      <div
        style={{
          position: 'fixed',
          inset: 0,
          background: 'rgba(3,8,6,0.72)',
          backdropFilter: 'blur(6px)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 100,
          padding: 20,
        }}
        onClick={onClose}
      >
        <div
          style={{
            background: 'white',
            borderRadius: 'var(--radius-lg)',
            padding: 30,
            width: 'min(700px, 100%)',
            maxHeight: '90vh',
            overflowY: 'auto',
            boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
          }}
          onClick={(e) => e.stopPropagation()}
        >
          {/* Close Button */}
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 20 }}>
            <button
              onClick={onClose}
              style={{
                background: 'none',
                border: 'none',
                color: 'var(--text-muted)',
                cursor: 'pointer',
                fontSize: 24,
                padding: 0,
              }}
            >
              ×
            </button>
          </div>

          {/* Title */}
          <h2 style={{ fontSize: 24, fontWeight: 600, marginBottom: 20 }}>
            {i18n.t(section.titleKey) || 'Legal Document'}
          </h2>

          {/* Content */}
          <div
            style={{
              fontSize: 14,
              lineHeight: 1.8,
              color: 'var(--text-body)',
              marginBottom: 24,
              whiteSpace: 'pre-wrap',
              fontFamily: '"Segoe UI", Tahoma, Geneva, Verdana, sans-serif',
            }}
          >
            {i18n.t(section.contentKey) ||
              `This is the ${type} document. Please read carefully before proceeding.`}
          </div>

          {/* Risk Disclosure (if agreement) */}
          {type === 'agreement' && (
            <div
              style={{
                background: 'var(--surface-inset)',
                border: '1px solid var(--border-subtle)',
                borderRadius: 'var(--radius-md)',
                padding: 16,
                marginBottom: 24,
                fontSize: 12,
                lineHeight: 1.6,
                color: 'var(--text-muted)',
              }}
            >
              <strong style={{ color: 'var(--text-strong)' }}>⚠️ {i18n.t('riskDisclosure') || 'Risk Disclosure'}</strong>
              <p style={{ marginTop: 8, marginBottom: 0 }}>
                {i18n.t('riskDisclosureText') ||
                  'This investment carries market risk. Past performance does not guarantee future results. You may lose part or all of your investment. This is not a bank deposit and is not FDIC insured.'}
              </p>
            </div>
          )}

          {/* Action Buttons */}
          <div style={{ display: 'flex', gap: 12 }}>
            {type === 'agreement' && (
              <button
                onClick={() => setShowDownload(!showDownload)}
                style={{
                  flex: 1,
                  padding: '12px 16px',
                  borderRadius: 'var(--radius-md)',
                  border: '1px solid var(--border-soft)',
                  background: 'var(--surface-canvas)',
                  color: 'var(--text-strong)',
                  cursor: 'pointer',
                  fontWeight: 600,
                  fontSize: 14,
                }}
              >
                {showDownload ? '✓ ' : '⬇︎ '}
                {i18n.t(section.buttonKey) || 'Download'}
              </button>
            )}
            <button
              onClick={onClose}
              style={{
                flex: 1,
                padding: '12px 16px',
                borderRadius: 'var(--radius-md)',
                border: 'none',
                background: 'var(--brand)',
                color: 'white',
                cursor: 'pointer',
                fontWeight: 600,
                fontSize: 14,
              }}
            >
              {i18n.t('btnClose') || 'Close'}
            </button>
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { OLISLegalModal: LegalModal });
})();