'use client'

import React, { useState } from 'react'
import './EmailDeliverabilityInfo.scss'

/**
 * Info-Komponente mit SPF/DKIM Hinweisen für E-Mail-Zustellbarkeit
 */
export const EmailDeliverabilityInfo: React.FC = () => {
  const [isExpanded, setIsExpanded] = useState(false)

  return (
    <div className="email-deliverability-info">
      <button
        type="button"
        className="email-deliverability-info__toggle"
        onClick={() => setIsExpanded(!isExpanded)}
        aria-expanded={isExpanded}
      >
        <svg
          className={`email-deliverability-info__icon ${isExpanded ? 'email-deliverability-info__icon--expanded' : ''}`}
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
        >
          <polyline points="9 18 15 12 9 6" />
        </svg>
        <span className="email-deliverability-info__title">
          Hinweise zur E-Mail-Zustellbarkeit (SPF/DKIM/DMARC)
        </span>
      </button>

      {isExpanded && (
        <div className="email-deliverability-info__content">
          <div className="email-deliverability-info__section">
            <h4>SPF (Sender Policy Framework)</h4>
            <p>
              SPF definiert, welche Server E-Mails für Ihre Domain senden dürfen. Fügen Sie einen
              TXT-Eintrag in Ihren DNS-Einstellungen hinzu:
            </p>
            <code className="email-deliverability-info__code">
              v=spf1 include:_spf.ihremailserver.de ~all
            </code>
            <p className="email-deliverability-info__hint">
              Ersetzen Sie <em>_spf.ihremailserver.de</em> mit dem SPF-Include Ihres E-Mail-Providers.
            </p>
          </div>

          <div className="email-deliverability-info__section">
            <h4>DKIM (DomainKeys Identified Mail)</h4>
            <p>
              DKIM signiert ausgehende E-Mails kryptografisch. Die Einrichtung erfolgt über Ihren
              E-Mail-Provider. Typischerweise erhalten Sie einen TXT-Eintrag wie:
            </p>
            <code className="email-deliverability-info__code">
              selector._domainkey.ihredomain.de → v=DKIM1; k=rsa; p=MIGf...
            </code>
          </div>

          <div className="email-deliverability-info__section">
            <h4>DMARC (Domain-based Message Authentication)</h4>
            <p>
              DMARC kombiniert SPF und DKIM und definiert, wie mit fehlgeschlagenen Prüfungen
              umgegangen werden soll:
            </p>
            <code className="email-deliverability-info__code">
              _dmarc.ihredomain.de → v=DMARC1; p=quarantine; rua=mailto:dmarc@ihredomain.de
            </code>
          </div>

          <div className="email-deliverability-info__tips">
            <h4>Tipps für bessere Zustellbarkeit</h4>
            <ul>
              <li>Verwenden Sie immer eine Absender-Adresse der konfigurierten Domain</li>
              <li>Testen Sie die Konfiguration mit dem &quot;Test-E-Mail senden&quot; Button</li>
              <li>
                Prüfen Sie Ihre DNS-Einträge mit Tools wie{' '}
                <a
                  href="https://mxtoolbox.com/spf.aspx"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  MXToolbox
                </a>{' '}
                oder{' '}
                <a
                  href="https://www.mail-tester.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Mail-Tester
                </a>
              </li>
              <li>Bei Problemen kontaktieren Sie Ihren E-Mail-Provider für DKIM-Keys</li>
            </ul>
          </div>
        </div>
      )}
    </div>
  )
}

export default EmailDeliverabilityInfo
