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 AdminPasswordResetEmailProps {
  name: string;
  email: string;
  temporaryPassword: string;
  loginUrl?: string;
}

export function AdminPasswordResetEmail({
  name,
  email,
  temporaryPassword,
  loginUrl = `${getEmailBaseUrl()}/admin/login`,
}: AdminPasswordResetEmailProps) {
  return (
    <EmailLayout previewText="Your Quto AI Admin password has been reset">
      <EmailHeader badge="SECURITY ALERT" />

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

      <p
        style={{
          fontSize: "14px",
          color: emailTokens.colors.textSecondary,
          margin: "0 0 20px",
          lineHeight: "1.5",
        }}
      >
        Hello {name}, the Main Administrator has approved your password reset request and provisioned a
        new temporary access credential.
      </p>

      <EmailSummaryTable
        fields={[
          { label: "ADMIN ACCOUNT", value: email },
          { label: "TEMPORARY ACCESS KEY", value: temporaryPassword },
        ]}
      />

      <div
        style={{
          backgroundColor: "#FEF2F2",
          border: "1px solid #FECACA",
          borderRadius: "8px",
          padding: "14px 16px",
          margin: "20px 0",
        }}
      >
        <p
          style={{
            fontSize: "13px",
            color: "#991B1B",
            margin: 0,
            lineHeight: "1.4",
            fontWeight: 500,
          }}
        >
          <strong>Session Termination Notice:</strong> All previously active browser and device sessions
          for your account have been revoked immediately. You will be prompted to choose a new permanent
          password upon signing in.
        </p>
      </div>

      <div style={{ textAlign: "center", margin: "24px 0" }}>
        <EmailButton href={loginUrl}>Sign In to Quto AI Admin</EmailButton>
      </div>

      <EmailFooter />
    </EmailLayout>
  );
}