<div class="container flex flex-col mx-auto px-4 py-6">
    <.admin_page_header
      back={PhoenixKit.Utils.Routes.path("/admin/settings")}
      title={gettext("Email Tracking Settings")}
      subtitle={gettext("Configure email tracking system behavior and data retention")}
    />

    <%!-- Main Content --%>
    <div class="max-w-4xl mx-auto space-y-8">
      <%= if @email_tracking_enabled do %>
        <%!-- Tracking Options Card --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-adjustments-horizontal" class="w-6 h-6" /> {gettext("Tracking Options")}
            </h2>

            <%!-- Save Email Bodies --%>
            <div class="form-control mb-4">
              <label class="label cursor-pointer">
                <span class="label-text text-lg">
                  <span class="font-semibold">{gettext("Save Email Bodies")}</span>
                  <div class="text-sm text-base-content/70 mt-1">
                    {gettext("Store the full content of sent emails for debugging and analysis")}
                  </div>
                </span>
                <input
                  type="checkbox"
                  class="toggle toggle-secondary"
                  checked={@email_tracking_save_body}
                  phx-click="toggle_email_tracking_save_body"
                />
              </label>
            </div>

            <div class="divider"></div>

            <%!-- AWS SES Events --%>
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text text-lg">
                  <span class="font-semibold">{gettext("AWS SES Events Tracking")}</span>
                  <div class="text-sm text-base-content/70 mt-1">
                    {gettext("Track delivery, bounce, and complaint events from Amazon SES")}
                  </div>
                </span>
                <input
                  type="checkbox"
                  class="toggle toggle-accent"
                  checked={@email_tracking_ses_events}
                  phx-click="toggle_email_tracking_ses_events"
                />
              </label>
            </div>
          </div>
        </div>

        <%!-- Data Retention Card --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-archive-box" class="w-6 h-6" /> {gettext("Data Retention")}
            </h2>

            <div class="form-control">
              <label class="label">
                <span class="label-text text-lg font-semibold">{gettext("Email Retention Period")}</span>
              </label>
              <div class="input-group">
                <input
                  type="number"
                  placeholder={gettext("Enter retention days")}
                  class="input input-bordered w-full max-w-xs"
                  value={@email_tracking_retention_days}
                  min="1"
                  max="365"
                  phx-blur="update_email_tracking_retention"
                  phx-value-retention_days={assigns[:email_tracking_retention_days]}
                />
                <span class="bg-base-200 px-4 py-3 text-sm">{gettext("days")}</span>
              </div>
              <label class="label">
                <span class="label-text-alt text-base-content/70">
                  {gettext("How long to keep email tracking data before automatic cleanup (1-365 days)")}
                </span>
              </label>
            </div>

            <div class="alert alert-warning mt-4">
              <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
              <div>
                <h3 class="font-bold">{gettext("Data Privacy Notice")}</h3>
                <p class="text-sm mt-1">
                  {gettext("Email tracking data will be automatically deleted after the retention period expires. This helps maintain privacy compliance and reduces storage requirements.")}
                </p>
              </div>
            </div>
          </div>
        </div>

        <%!-- Current Configuration Summary --%>
        <div class="alert alert-info">
          <.icon name="hero-information-circle" class="w-5 h-5" />
          <div>
            <h3 class="font-bold">{gettext("Current Configuration")}</h3>
            <div class="text-sm mt-1">
              <p>{gettext("System:")} <span class="font-semibold">{gettext("Enabled")}</span></p>
              <p>
                {gettext("Save email bodies:")}
                <span class="font-semibold">
                  {if @email_tracking_save_body, do: gettext("Yes"), else: gettext("No")}
                </span>
              </p>
              <p>
                {gettext("AWS SES events:")}
                <span class="font-semibold">
                  {if @email_tracking_ses_events, do: gettext("Yes"), else: gettext("No")}
                </span>
              </p>
              <p>
                {gettext("Retention period:")}
                <span class="font-semibold">{@email_tracking_retention_days} {gettext("days")}</span>
              </p>
            </div>
          </div>
        </div>
      <% else %>
        <%!-- Disabled State Information --%>
        <div class="alert alert-warning">
          <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
          <div>
            <h3 class="font-bold">{gettext("Email Tracking Disabled")}</h3>
            <p class="text-sm mt-1">
              {gettext("Enable the email tracking system above to access configuration options and start tracking email delivery events.")}
            </p>
          </div>
        </div>

        <%!-- Benefits Card when Disabled --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-light-bulb" class="w-6 h-6" /> {gettext("Email Tracking Benefits")}
            </h2>

            <div class="space-y-3">
              <div class="flex items-start gap-3">
                <.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
                <div>
                  <h3 class="font-semibold">{gettext("Delivery Monitoring")}</h3>
                  <p class="text-sm text-base-content/70">
                    {gettext("Track successful email deliveries and identify issues")}
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-3">
                <.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
                <div>
                  <h3 class="font-semibold">{gettext("Engagement Analytics")}</h3>
                  <p class="text-sm text-base-content/70">
                    {gettext("Monitor email opens, clicks, and user engagement")}
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-3">
                <.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
                <div>
                  <h3 class="font-semibold">{gettext("Debugging Support")}</h3>
                  <p class="text-sm text-base-content/70">
                    {gettext("Store email content for troubleshooting delivery issues")}
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-3">
                <.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
                <div>
                  <h3 class="font-semibold">{gettext("AWS SES Integration")}</h3>
                  <p class="text-sm text-base-content/70">
                    {gettext("Automatic webhook handling for bounce and complaint events")}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
