import {
  Body,
  Button,
  Column,
  Container,
  Font,
  Head,
  Heading,
  Hr,
  Html,
  Img,
  Preview,
  Row,
  Section,
  Text,
} from "@react-email/components";
import { Tailwind } from "@react-email/tailwind";

interface PnrConfirmationProps {
  uid: string;
  origin: string;
  destination: string;
  departureDate: string;
  passengerName: string;
  returnDate?: string;
  baseUrl?: string;
  logoPath?: string;
  companyName: string;
}

export function PnrConfirmationEmail({
  uid,
  origin,
  destination,
  passengerName,
  departureDate,
  returnDate,
  baseUrl,
  logoPath,
  companyName,
}: PnrConfirmationProps) {
  const previewText = `Flight Confirmation: ${origin} to ${destination} - PNR: ${uid}`;

  // Format dates for better display
  const formattedDepartureDate = new Date(departureDate).toLocaleDateString(
    "en-US",
    {
      weekday: "long",
      month: "long",
      day: "numeric",
      year: "numeric",
    },
  );

  const formattedReturnDate = returnDate
    ? new Date(returnDate).toLocaleDateString("en-US", {
        weekday: "long",
        month: "long",
        day: "numeric",
        year: "numeric",
      })
    : null;

  return (
    <Html>
      <Head>
        <Font
          fontFamily="Poppins"
          fallbackFontFamily={["Verdana", "Arial", "sans-serif"]}
          webFont={{
            url: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap",
            format: "woff2",
          }}
          fontWeight={400}
          fontStyle="normal"
        />
        <Font
          fontFamily="Poppins"
          fallbackFontFamily={["Verdana", "Arial", "sans-serif"]}
          webFont={{
            url: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap",
            format: "woff2",
          }}
          fontWeight={600}
          fontStyle="normal"
        />
      </Head>
      <Preview>{previewText}</Preview>
      <Tailwind
        config={{
          theme: {
            extend: {
              colors: {
                brand: {
                  50: "#fcf3f7",
                  100: "#fbe8f1",
                  200: "#f8d2e5",
                  300: "#f4adce",
                  400: "#ec7aad",
                  500: "#e2528d",
                  600: "#d5467a",
                  700: "#b42253",
                  800: "#951f45",
                  900: "#7d1e3c",
                  950: "#4c0b20",
                },
                primary: "#e2528d",
                accent: "#f4adce",
                light: "#fcf3f7",
                dark: "#4c0b20",
              },
              fontFamily: {
                sans: ["Poppins", "Helvetica", "Arial", "sans-serif"],
              },
            },
          },
        }}
      >
        <Body className="bg-light font-sans">
          <Container className="mx-auto pt-8 pb-8 mb-0">
            <Section className="bg-white rounded-lg p-8 shadow-lg mb-8">
              {/* Header with Logo */}
              <Row>
                <Column className="text-center">
                  {logoPath && (
                    <Img
                      src={logoPath}
                      alt={`${companyName} logo`}
                      width="120"
                      height="auto"
                      className="mx-auto mb-4"
                    />
                  )}
                  <Text className="text-center text-brand-400 text-sm mb-6">
                    Your journey begins here
                  </Text>
                </Column>
              </Row>

              <Hr className="border-t border-brand-100 my-6" />

              {/* Booking Confirmation */}
              <Heading className="text-brand-900 text-xl font-bold mb-4">
                Booking Confirmation
              </Heading>

              <Text className="text-brand-800 mb-4">Hey {passengerName},</Text>

              <Text className="text-brand-800 mb-4">
                Your flight has been successfully booked! Below are the details
                of your trip.
              </Text>

              {/* PNR Highlight Box */}
              <Section className="bg-brand-50 border-l-4 border-primary p-4 mb-6">
                <Text className="font-bold text-brand-900 mb-1">
                  Booking Reference (PNR):
                </Text>
                <Text className="text-2xl font-semibold text-primary mb-0">
                  {uid}
                </Text>
              </Section>

              {/* Flight Details - Outbound */}
              <Section className="bg-white border border-brand-100 rounded-lg p-4 mb-6">
                <Heading className="text-lg font-bold text-primary mb-4">
                  Outbound Flight
                </Heading>

                <Row>
                  <Column className="pr-4">
                    <Text className="font-bold text-brand-900 mb-1">Date:</Text>
                    <Text className="text-brand-800 mb-3">
                      {formattedDepartureDate}
                    </Text>
                  </Column>

                  <Column>
                    <Text className="font-bold text-brand-900 mb-1">
                      Route:
                    </Text>
                    <Text className="text-brand-800 mb-3">
                      {origin} → {destination}
                    </Text>
                  </Column>
                </Row>
              </Section>

              {/* Flight Details - Return (conditional) */}
              {returnDate && (
                <Section className="bg-white border border-brand-100 rounded-lg p-4 mb-6">
                  <Heading className="text-lg font-bold text-primary mb-4">
                    Return Flight
                  </Heading>

                  <Row>
                    <Column className="pr-4">
                      <Text className="font-bold text-brand-900 mb-1">
                        Date:
                      </Text>
                      <Text className="text-brand-800 mb-3">
                        {formattedReturnDate}
                      </Text>
                    </Column>

                    <Column>
                      <Text className="font-bold text-brand-900 mb-1">
                        Route:
                      </Text>
                      <Text className="text-brand-800 mb-3">
                        {destination} → {origin}
                      </Text>
                    </Column>
                  </Row>
                </Section>
              )}

              <Text className="text-brand-700 mb-4 text-center text-sm">
                Please note that it may take up to 48 hours for the payment to
                be processed and your flight to be confirmed with the airline.
              </Text>

              {/* Call to action */}
              <Section className="text-center mt-8 mb-6">
                <Button
                  className="bg-primary text-white font-bold px-6 py-3 rounded-md"
                  href={`${baseUrl}/track?uid=${uid}`}
                >
                  View Booking Online
                </Button>
              </Section>

              <Text className="text-brand-700 text-xs mb-4 text-center">
                You can use the button above or your booking reference to check
                in online, make changes to your booking, or add additional
                services.
              </Text>

              <Hr className="border-t border-brand-100 my-6" />

              {/* Footer */}
              <Text className="text-brand-500 text-sm text-center">
                Thank you for choosing {companyName} for your journey. We hope
                you have a wonderful trip!
              </Text>
            </Section>

            {/* Footer disclaimer */}
            <Text className="text-brand-400 text-xs text-center px-4">
              This is an automated message. Please do not reply to this email.
              For any changes to your booking, please use the "Manage My
              Booking" button above or contact our customer service team.
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

PnrConfirmationEmail.PreviewProps = {
  uid: "ABC123",
  origin: "SFO",
  destination: "JFK",
  departureDate: "2023-12-15",
  returnDate: "2023-12-22",
  passengerName: "John Smith",
  baseUrl: "https://checkout.com",
  logoPath: "https://checkout.com/assets/logos/logo-main.svg",
  companyName: "checkout",
};

export default PnrConfirmationEmail;
