import { Section, Text, Heading, Hr } from "@react-email/components";
import { EmailLayout } from "../../components/EmailLayout";
import { Button } from "../../components/Button";
import { useBrandingConfig } from "../../hooks/useBrandingConfig";

interface PasswordResetEmailProps {
  playerName?: string;
  resetLink?: string;
  resetCode?: string;
  expirationTime?: number; // in minutes
  ipAddress?: string;
  supportEmail?: string;
}

export const PasswordResetEmail = ({
  playerName = "John",
  resetLink = "https://example.com/reset-password?token=abc123",
  resetCode,
  expirationTime = 30,
  ipAddress,
  supportEmail,
}: PasswordResetEmailProps) => {
  const config = useBrandingConfig();

  return (
    <EmailLayout title="🔐 Password Reset Request">
      <Section>
        <Text style={{ fontSize: "18px", lineHeight: "26px", marginBottom: "20px" }}>
          Hi {playerName},
        </Text>

        <Text style={{ fontSize: "16px", lineHeight: "24px", marginBottom: "20px" }}>
          We received a request to reset your password for your {config.companyName} account. If
          you made this request, click the button below to reset your password.
        </Text>

        <Section
          style={{
            backgroundColor: config.colors.primary + "10",
            padding: "20px",
            borderRadius: "8px",
            margin: "30px 0",
            border: `2px solid ${config.colors.primary}`,
            textAlign: "center" as const,
          }}
        >
          <Button href={resetLink}>Reset Password</Button>
        </Section>

        {resetCode && (
          <Section
            style={{
              backgroundColor: config.colors.background,
              padding: "20px",
              borderRadius: "8px",
              margin: "30px 0",
            }}
          >
            <Text
              style={{
                fontSize: "14px",
                color: config.colors.text,
                margin: "0 0 10px 0",
                fontWeight: "bold",
              }}
            >
              Or enter this reset code:
            </Text>
            <Text
              style={{
                fontSize: "28px",
                fontWeight: "bold",
                color: config.colors.primary,
                letterSpacing: "4px",
                textAlign: "center" as const,
                fontFamily: "monospace",
                margin: 0,
              }}
            >
              {resetCode}
            </Text>
          </Section>
        )}

        <Hr style={{ borderColor: config.colors.primary, margin: "30px 0" }} />

        <Section
          style={{
            backgroundColor: "#fff3cd",
            padding: "15px",
            borderRadius: "4px",
            border: "1px solid #ffc107",
            marginBottom: "20px",
          }}
        >
          <Text style={{ fontSize: "13px", color: "#856404", margin: "0 0 5px 0", fontWeight: "bold" }}>
            ⏰ Important:
          </Text>
          <Text style={{ fontSize: "13px", color: "#856404", margin: 0 }}>
            This password reset link will expire in {expirationTime} minutes for security
            purposes.
          </Text>
        </Section>

        <Text style={{ fontSize: "14px", lineHeight: "22px", marginBottom: "10px" }}>
          If the button doesn't work, copy and paste this link into your browser:
        </Text>
        <Text
          style={{
            fontSize: "12px",
            color: config.colors.primary,
            wordBreak: "break-all",
            marginBottom: "20px",
          }}
        >
          {resetLink}
        </Text>

        <Section
          style={{
            backgroundColor: "#d1ecf1",
            padding: "15px",
            borderRadius: "4px",
            border: "1px solid #bee5eb",
            marginBottom: "20px",
          }}
        >
          <Text style={{ fontSize: "13px", color: "#0c5460", margin: "0 0 5px 0", fontWeight: "bold" }}>
            🔒 Security Notice:
          </Text>
          <Text style={{ fontSize: "13px", color: "#0c5460", margin: 0 }}>
            If you didn't request a password reset, please ignore this email. Your password will
            remain unchanged.
          </Text>
          {ipAddress && (
            <Text style={{ fontSize: "12px", color: "#0c5460", margin: "5px 0 0 0" }}>
              Request originated from: {ipAddress}
            </Text>
          )}
        </Section>

        {supportEmail && (
          <Text style={{ fontSize: "12px", color: "#666666", marginTop: "30px" }}>
            If you have concerns about your account security, please contact us immediately at{" "}
            {supportEmail}
          </Text>
        )}
      </Section>
    </EmailLayout>
  );
};