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

interface PaymentRequestEmailProps {
  userName?: string;
  requesterName?: string;
  amount?: string;
  description?: string;
  requestId?: string;
  dueDate?: string;
}

export const PaymentRequestEmail = ({
  userName = "Kirubel",
  requesterName = "Sarah Johnson",
  amount = "$250.00",
  description = "Dinner bill split - Italian Restaurant",
  requestId = "REQ-987654321",
  dueDate = "July 20, 2024",
}: PaymentRequestEmailProps) => {
  return (
    <EmailLayout
      preview={`${requesterName} has sent you a payment request for ${amount}.`}
    >
      <Section>
        <Heading style={heading}>New Payment Request 💰</Heading>
        <Text style={text}>Hi {userName},</Text>
        <Text style={text}>
          <strong>{requesterName}</strong> has sent you a payment request. Here
          are the details:
        </Text>
        <Card>
          <Section style={detailRow}>
            <Text style={detailLabel}>Requested By:</Text>
            <Text style={detailValue}>{requesterName}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Amount:</Text>
            <Text style={detailAmount}>{amount}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Description:</Text>
            <Text style={detailValue}>{description}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Request ID:</Text>
            <Text style={detailValue}>{requestId}</Text>
          </Section>
          {dueDate && (
            <Section style={detailRow}>
              <Text style={detailLabel}>Due Date:</Text>
              <Text style={detailValue}>{dueDate}</Text>
            </Section>
          )}
        </Card>
        <Text style={text}>
          You can review and pay this request directly from the app. Payment is
          secure and will be processed immediately.
        </Text>
        <Section style={buttonSection}>
          <Button href="https://amba.app/payment-requests">
            View & Pay Request
          </Button>
        </Section>
        <Text style={noteText}>
          <strong>Note:</strong> This payment request will remain pending until
          you complete the payment. You'll receive a confirmation email once the
          payment is processed.
        </Text>
        <Text style={text}>
          Best regards,
          <br />
          The Amba 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}`,
  alignItems: "flex-start",
};

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 detailAmount = {
  color: theme.colors.primary,
  fontSize: "18px",
  fontWeight: "700",
  margin: "0",
  textAlign: "right" as const,
  flex: "1",
};

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

const noteText = {
  color: theme.colors.textDark,
  fontSize: "14px",
  lineHeight: "20px",
  margin: "24px 0 16px",
  padding: "12px",
  backgroundColor: theme.colors.accentLightest,
  borderRadius: "4px",
  borderLeft: `3px solid ${theme.colors.accent}`,
};

PaymentRequestEmail.PreviewProps = {
  userName: "Kirubel",
  requesterName: "Sarah Johnson",
  amount: "$250.00",
  description: "Dinner bill split - Italian Restaurant",
  requestId: "REQ-987654321",
  dueDate: "July 20, 2024",
} as PaymentRequestEmailProps;

export default PaymentRequestEmail;