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

interface UserSuspensionEmailProps {
  userId?: string;
  username?: string;
  email?: string;
  suspensionType?: "temporary" | "permanent" | "warning";
  suspensionReason?: string;
  suspensionDuration?: number; // in days
  suspensionStartDate?: Date | string;
  suspensionEndDate?: Date | string;
  violationDetails?: string[];
  administrator?: string;
  appealInformation?: string;
}

export const UserSuspensionEmail = ({
  userId = "ACC-12345",
  username = "player123",
  email = "player@example.com",
  suspensionType = "temporary",
  suspensionReason = "Violation of terms of service - Suspicious betting patterns detected",
  suspensionDuration = 30,
  suspensionStartDate = new Date(),
  suspensionEndDate = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
  violationDetails = [
    "Multiple accounts detected",
    "Violation of betting rules",
    "Suspicious activity patterns",
  ],
  administrator = "Security Team",
  appealInformation = "To appeal this decision, please contact support@example.com within 7 days.",
}: UserSuspensionEmailProps) => {
  const config = useBrandingConfig();

  const getSuspensionColor = (type: string) => {
    switch (type) {
      case "permanent":
        return "#dc3545"; // Red
      case "temporary":
        return "#ffc107"; // Yellow
      case "warning":
        return "#17a2b8"; // Blue
      default:
        return config.colors.primary;
    }
  };

  const getSuspensionLabel = (type: string) => {
    switch (type) {
      case "permanent":
        return "Permanent Suspension";
      case "temporary":
        return "Temporary Suspension";
      case "warning":
        return "Account Warning";
      default:
        return "Account Action";
    }
  };

  return (
    <EmailLayout title={`🚫 ${getSuspensionLabel(suspensionType)} - Action Required`}>
      <Section>
        <Section
          style={{
            backgroundColor: getSuspensionColor(suspensionType) + "15",
            padding: "20px",
            borderRadius: "8px",
            marginBottom: "20px",
            border: `2px solid ${getSuspensionColor(suspensionType)}`,
          }}
        >
          <Heading
            style={{
              fontSize: "24px",
              color: getSuspensionColor(suspensionType),
              marginTop: 0,
              marginBottom: "10px",
            }}
          >
            {getSuspensionLabel(suspensionType)}
          </Heading>
          <Text style={{ fontSize: "16px", fontWeight: "bold", margin: "5px 0" }}>
            User: {username}
          </Text>
          <Text style={{ fontSize: "14px", color: "#666666", margin: "5px 0" }}>
            Account ID: {userId}
          </Text>
        </Section>

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

        {/* User Information */}
        <Section style={{ marginBottom: "25px" }}>
          <Heading
            style={{
              fontSize: "20px",
              color: config.colors.text,
              marginTop: "20px",
              marginBottom: "15px",
            }}
          >
            👤 Account Information
          </Heading>
          <Section
            style={{
              backgroundColor: config.colors.background,
              padding: "15px",
              borderRadius: "4px",
            }}
          >
            <Text style={{ fontSize: "14px", margin: "8px 0" }}>
              <strong>Username:</strong> {username}
            </Text>
            <Text style={{ fontSize: "14px", margin: "8px 0" }}>
              <strong>Email:</strong> {email}
            </Text>
            <Text style={{ fontSize: "14px", margin: "8px 0" }}>
              <strong>Account ID:</strong> {userId}
            </Text>
          </Section>
        </Section>

        {/* Suspension Details */}
        <Section style={{ marginBottom: "25px" }}>
          <Heading
            style={{
              fontSize: "20px",
              color: config.colors.text,
              marginTop: "20px",
              marginBottom: "15px",
            }}
          >
            ⚠️ Suspension Details
          </Heading>
          <Section
            style={{
              backgroundColor: "#fff3cd",
              padding: "15px",
              borderRadius: "4px",
              border: "1px solid #ffc107",
            }}
          >
            <Text style={{ fontSize: "14px", fontWeight: "bold", margin: "0 0 10px 0" }}>
              Reason:
            </Text>
            <Text style={{ fontSize: "14px", margin: "0 0 20px 0" }}>{suspensionReason}</Text>

            {suspensionType === "temporary" && (
              <>
                <Text style={{ fontSize: "14px", fontWeight: "bold", margin: "0 0 10px 0" }}>
                  Suspension Period:
                </Text>
                <Text style={{ fontSize: "14px", margin: "5px 0" }}>
                  <strong>Start Date:</strong> {formatDate(suspensionStartDate)}
                </Text>
                <Text style={{ fontSize: "14px", margin: "5px 0" }}>
                  <strong>End Date:</strong> {formatDate(suspensionEndDate)}
                </Text>
                <Text style={{ fontSize: "14px", margin: "5px 0 0 0" }}>
                  <strong>Duration:</strong> {suspensionDuration} days
                </Text>
              </>
            )}

            {suspensionType === "permanent" && (
              <Text style={{ fontSize: "14px", margin: "10px 0 0 0", fontWeight: "bold" }}>
                This suspension is permanent. Your account access has been revoked indefinitely.
              </Text>
            )}
          </Section>
        </Section>

        {/* Violation Details */}
        {violationDetails && violationDetails.length > 0 && (
          <Section style={{ marginBottom: "25px" }}>
            <Heading
              style={{
                fontSize: "20px",
                color: config.colors.text,
                marginTop: "20px",
                marginBottom: "15px",
              }}
            >
              📋 Violation Details
            </Heading>
            <Section
              style={{
                backgroundColor: config.colors.background,
                padding: "15px",
                borderRadius: "4px",
              }}
            >
              <ul style={{ margin: 0, paddingLeft: "20px" }}>
                {violationDetails.map((detail, index) => (
                  <li key={index} style={{ fontSize: "14px", margin: "8px 0" }}>
                    {detail}
                  </li>
                ))}
              </ul>
            </Section>
          </Section>
        )}

        {/* Appeal Information */}
        {appealInformation && (
          <Section style={{ marginBottom: "25px" }}>
            <Heading
              style={{
                fontSize: "20px",
                color: config.colors.text,
                marginTop: "20px",
                marginBottom: "15px",
              }}
            >
              📞 Appeal Process
            </Heading>
            <Section
              style={{
                backgroundColor: config.colors.primary + "10",
                padding: "15px",
                borderRadius: "4px",
                border: `1px solid ${config.colors.primary}`,
              }}
            >
              <Text style={{ fontSize: "14px", margin: 0 }}>{appealInformation}</Text>
            </Section>
          </Section>
        )}

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

        <Text style={{ fontSize: "12px", color: "#666666", fontStyle: "italic" }}>
          This is an automated notification from the {config.companyName} security system.
          <br />
          Processed by: {administrator}
          <br />
          Timestamp: {new Date().toLocaleString()}
        </Text>
      </Section>
    </EmailLayout>
  );
};