import * as React from "react";
import { EmailLayout } from "../components/email-layout";
import { EmailHeader } from "../components/email-header";
import { EmailFooter } from "../components/email-footer";
import { EmailButton } from "../components/email-button";
import { EmailSummaryTable } from "../components/email-field";
import { emailTokens, getEmailBaseUrl } from "../tokens";

export interface AdminResetRequestAlertEmailProps {
  subAdminName: string;
  subAdminEmail: string;
  requestedAt: string;
  reviewUrl?: string;
}

export function AdminResetRequestAlertEmail({
  subAdminName,
  subAdminEmail,
  requestedAt,
  reviewUrl = `${getEmailBaseUrl()}/admin/security/reset-requests`,
}: AdminResetRequestAlertEmailProps) {
  return (
    <EmailLayout previewText={`Password reset request from ${subAdminName}`}>
      <EmailHeader badge="ACTION REQUIRED" />

      <h1
        style={{
          fontFamily: emailTokens.fonts.display,
          fontSize: "24px",
          fontWeight: 700,
          color: emailTokens.colors.textPrimary,
          margin: "0 0 8px",
          lineHeight: "1.25",
          letterSpacing: "-0.5px",
        }}
      >
        Sub-admin Reset Request
      </h1>

      <p
        style={{
          fontSize: "14px",
          color: emailTokens.colors.textSecondary,
          margin: "0 0 20px",
          lineHeight: "1.5",
        }}
      >
        A Sub-administrator has requested a password reset. Because Sub-admins cannot reset credentials
        automatically, your review and authorization is required in the admin control center.
      </p>

      <EmailSummaryTable
        fields={[
          { label: "REQUESTING SUB-ADMIN", value: subAdminName },
          { label: "ACCOUNT EMAIL", value: subAdminEmail },
          { label: "SUBMITTED AT", value: requestedAt },
          { label: "CURRENT STATUS", value: "Pending Main Admin Review" },
        ]}
      />

      <div style={{ textAlign: "center", margin: "24px 0" }}>
        <EmailButton href={reviewUrl}>Open Reset Request Queue</EmailButton>
      </div>

      <EmailFooter />
    </EmailLayout>
  );
}