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

export function AdminInvitationEmail({
  name,
  email,
  roleLabel,
  temporaryPassword,
  loginUrl = `${getEmailBaseUrl()}/admin/login`,
}: AdminInvitationEmailProps) {
  return (
    <EmailLayout previewText="You have been invited to Quto AI Admin">
      <EmailHeader badge="ADMIN ACCESS" />

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

      <p
        style={{
          fontSize: "14px",
          color: emailTokens.colors.textSecondary,
          margin: "0 0 20px",
          lineHeight: "1.5",
        }}
      >
        Hello {name}, your administrative account has been provisioned by the Main Administrator.
        Below are your initial credentials and assigned editorial role.
      </p>

      <EmailSummaryTable
        fields={[
          { label: "ADMIN NAME", value: name },
          { label: "LOGIN EMAIL", value: email },
          { label: "ASSIGNED ROLE", value: roleLabel },
          {
            label: "TEMPORARY ACCESS KEY",
            value: temporaryPassword,
          },
        ]}
      />

      <div
        style={{
          backgroundColor: "#FFFBEB",
          border: "1px solid #FDE68A",
          borderRadius: "8px",
          padding: "14px 16px",
          margin: "20px 0",
        }}
      >
        <p
          style={{
            fontSize: "13px",
            color: "#92400E",
            margin: 0,
            lineHeight: "1.4",
            fontWeight: 500,
          }}
        >
          <strong>Security Notice:</strong> This is a one-time temporary access credential. You will be
          required to establish your permanent password immediately upon your first login before any
          administrative features can be accessed.
        </p>
      </div>

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

      <EmailFooter />
    </EmailLayout>
  );
}