import {
  Heading,
  Section,
  Text,
} from '@react-email/components';
import { EmailLayout } from './components/EmailLayout';
import { Card } from './components/Card';
import { theme } from './theme';

interface TransactionReviewEmailProps {
  userName?: string;
  amount?: string;
  transactionId?: string;
  recipient?: string;
  estimatedTime?: string;
}

export const TransactionReviewEmail = ({
  userName = 'Kirubel',
  amount = '$500.00',
  transactionId = 'TXN-987654321',
  recipient = 'John Doe',
  estimatedTime = '1-2 business days',
}: TransactionReviewEmailProps) => {
  return (
    <EmailLayout
      preview={`Your transaction of ${amount} is under review`}
    >
      <Section>
        <Heading style={heading}>
          Transaction Under Review 🔍
        </Heading>
        <Text style={text}>
          Hi {userName},
        </Text>
        <Text style={text}>
          We wanted to let you know that your recent transaction is currently under review by our security team. This is a standard procedure to ensure the safety and security of all transactions on our platform.
        </Text>
        <Card>
          <Section style={detailRow}>
            <Text style={detailLabel}>Amount:</Text>
            <Text style={detailValue}>{amount}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Recipient:</Text>
            <Text style={detailValue}>{recipient}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Transaction ID:</Text>
            <Text style={detailValue}>{transactionId}</Text>
          </Section>
        </Card>
        <Text style={text}>
          <strong>What happens next?</strong>
        </Text>
        <Text style={text}>
          Our team is reviewing your transaction to verify its legitimacy. This process typically takes {estimatedTime}. We'll notify you immediately once the review is complete.
        </Text>
        <Section style={infoBox}>
          <Text style={infoText}>
            <strong>Note:</strong> Your funds are safe and secure during this review period. If additional information is needed, we'll contact you directly.
          </Text>
        </Section>
        <Text style={text}>
          If you have any questions or concerns about this review, please don't hesitate to contact our support team. We're here to help!
        </Text>
        <Text style={text}>
          Best regards,<br />
          The AmbaPay Team
        </Text>
      </Section>
    </EmailLayout>
  );
};

const heading = {
  color: theme.colors.primary,
  fontSize: '28px',
  fontWeight: '700',
  margin: '0 0 24px',
};

const text = {
  color: theme.colors.textDark,
  fontSize: '16px',
  lineHeight: '24px',
  margin: '0 0 16px',
};

const detailRow = {
  display: 'flex',
  justifyContent: 'space-between',
  marginBottom: '12px',
  paddingBottom: '12px',
  borderBottom: `1px solid ${theme.colors.border}`,
};

const detailLabel = {
  color: theme.colors.text,
  fontSize: '14px',
  fontWeight: '600',
  margin: '0',
  flex: '1',
};

const detailValue = {
  color: theme.colors.textDark,
  fontSize: '14px',
  margin: '0',
  textAlign: 'right' as const,
  flex: '1',
};

const infoBox = {
  backgroundColor: theme.colors.primaryLightest,
  borderRadius: '8px',
  padding: '16px',
  margin: '24px 0',
  borderLeft: `4px solid ${theme.colors.primary}`,
};

const infoText = {
  color: theme.colors.textDark,
  fontSize: '14px',
  lineHeight: '22px',
  margin: '0',
};

TransactionReviewEmail.PreviewProps = {
  userName: 'Kirubel',
  amount: '$500.00',
  transactionId: 'TXN-987654321',
  recipient: 'John Doe',
  estimatedTime: '1-2 business days',
} as TransactionReviewEmailProps;

export default TransactionReviewEmail;