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

interface ReferralStatsEmailProps {
  userName?: string;
  weekPeriod?: string;
  newReferralsThisWeek?: number;
  newUsersSignedUp?: number;
  totalPaymentsMade?: string;
  paymentCount?: number;
  referralCode?: string;
}

export const ReferralStatsEmail = ({
  userName = 'Kirubel',
  weekPeriod = 'Jan 1 - Jan 7, 2024',
  newReferralsThisWeek = 12,
  newUsersSignedUp = 8,
  totalPaymentsMade = '$2,450.00',
  paymentCount = 15,
  referralCode = 'AMB-KIRU-2024',
}: ReferralStatsEmailProps) => {
  return (
    <EmailLayout
      preview={`Your weekly referral stats: ${newReferralsThisWeek} new referrals this week!`}
    >
      <Section>
        <Heading style={heading}>
          Your Weekly Referral Stats 📊
        </Heading>
        <Text style={text}>
          Hi {userName},
        </Text>
        <Text style={text}>
          Here's your weekly referral performance summary for <strong>{weekPeriod}</strong>. Keep up the great work!
        </Text>
        <Card>
          <Row>
            <Column style={statColumn}>
              <Section style={statItem}>
                <Text style={statLabel}>New Referrals This Week</Text>
                <Text style={statValue}>{newReferralsThisWeek}</Text>
              </Section>
            </Column>
            <Column style={statColumn}>
              <Section style={statItem}>
                <Text style={statLabel}>New Users Signed Up</Text>
                <Text style={statValue}>{newUsersSignedUp}</Text>
              </Section>
            </Column>
          </Row>
          <Row>
            <Column style={statColumn}>
              <Section style={statItem}>
                <Text style={statLabel}>Total Payments Made</Text>
                <Text style={statValue}>{totalPaymentsMade}</Text>
              </Section>
            </Column>
            <Column style={statColumn}>
              <Section style={statItem}>
                <Text style={statLabel}>Number of Transactions</Text>
                <Text style={statValue}>{paymentCount}</Text>
              </Section>
            </Column>
          </Row>
        </Card>
        <Section style={infoCard}>
          <Text style={infoTitle}>Your Referral Code</Text>
          <Text style={codeDisplay}>{referralCode}</Text>
          <Text style={infoText}>
            Share this code with friends and family to keep growing your referrals!
          </Text>
        </Section>
        <Text style={text}>
          You're doing amazing! Continue sharing your referral code to reach even more people and grow the AmbaPay community.
        </Text>
        <Section style={buttonSection}>
          <Button href="https://amba.app/creator/referrals">
            View Detailed Analytics
          </Button>
        </Section>
        <Text style={text}>
          Thank you for being an outstanding AmbaPay creator!
        </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 statColumn = {
  width: '50%',
  padding: '8px',
};

const statItem = {
  textAlign: 'center' as const,
  padding: '16px',
  backgroundColor: theme.colors.background,
  borderRadius: '8px',
  border: `1px solid ${theme.colors.border}`,
  width: '100%',
};

const statLabel = {
  color: theme.colors.text,
  fontSize: '12px',
  fontWeight: '600',
  margin: '0 0 8px',
  textTransform: 'uppercase' as const,
  letterSpacing: '0.5px',
};

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

const infoCard = {
  backgroundColor: theme.colors.primaryLightest,
  borderRadius: '8px',
  padding: '20px',
  margin: '24px 0',
  textAlign: 'center' as const,
  border: `2px solid ${theme.colors.primary}`,
};

const infoTitle = {
  color: theme.colors.primary,
  fontSize: '16px',
  fontWeight: '600',
  margin: '0 0 12px',
};

const codeDisplay = {
  color: theme.colors.primary,
  fontSize: '24px',
  fontWeight: '700',
  margin: '0 0 8px',
  letterSpacing: '2px',
  fontFamily: 'monospace',
};

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

const buttonSection = {
  textAlign: 'center' as const,
  margin: '32px 0',
};

ReferralStatsEmail.PreviewProps = {
  userName: 'Kirubel',
  weekPeriod: 'Jan 1 - Jan 7, 2024',
  newReferralsThisWeek: 12,
  newUsersSignedUp: 8,
  totalPaymentsMade: '$2,450.00',
  paymentCount: 15,
  referralCode: 'AMB-KIRU-2024',
} as ReferralStatsEmailProps;

export default ReferralStatsEmail;