import {
  Body,
  Head,
  Html,
  Link,
  Preview,
  Tailwind,
  Text,
  render,
} from '@react-email/components';

import { BodyStyle } from '../components/body-style';
import CommonFooter from '../components/common-footer';
import { EmailContent } from '../components/content';
import { EmailHeader } from '../components/header';
import { EmailHeading } from '../components/heading';
import { EmailWrapper } from '../components/wrapper';
import { initializeEmailI18n } from '../lib/i18n';

export async function renderTtoReservationConfirmationEmail({
  language,
  recipientName,
  startTime,
  orderName,
  locationName,
  locationAddress,
  orderId,
  serviceProviderName,
  serviceProviderEmail,
  serviceProviderPhone,
}: {
  language: string;
  recipientName: string;
  startTime: string;
  orderName: string;
  locationName?: string;
  locationAddress?: string | null;
  orderId: string;
  serviceProviderName?: string;
  serviceProviderEmail?: string | null;
  serviceProviderPhone?: string | null;
}) {
  const namespace = 'tto-reservation-confirmation-email';

  const { t } = await initializeEmailI18n({
    language,
    namespace: [namespace, 'common'],
  });

  const previewText = t(`${namespace}:previewText`, {
    reservation: orderName,
  });

  const subject = t(`${namespace}:subject`, {
    reservation: orderName,
  });

  const email = (
    <Html>
      <Head>
        <BodyStyle />
      </Head>

      <Preview>{previewText}</Preview>

      <Tailwind>
        <Body>
          <EmailWrapper>
            <EmailContent>
              <EmailHeader>
                <EmailHeading>{previewText}</EmailHeading>
              </EmailHeader>
              <Text className="text-[16px] leading-[24px] text-[#242424]">
                {t(`${namespace}:helloName`, { name: recipientName })}
              </Text>
              <Text className="text-[16px] leading-[24px] text-[#242424]">
                {t(`${namespace}:thankYou`)}
              </Text>
              <Text className="text-[16px] leading-[24px] text-[#242424]">
                {orderName}, {new Date(startTime).toLocaleString()},{' '}
                {locationAddress}, {locationName}
              </Text>
              <Text className="text-[16px] leading-[24px] text-[#242424]">
                <Link
                  href={`${process.env.NEXT_PUBLIC_SITE_URL}/home/order/${orderId}`}
                >
                  {t(`${namespace}:viewOrder`)}
                </Link>
              </Text>
              <Text className="mt-10 text-[16px] leading-[24px] text-[#242424]">
                {serviceProviderName}
              </Text>
              <Text className="text-[16px] leading-[24px] text-[#242424]">
                {t(`${namespace}:customerSupport`)}
                <Link href={`tel:${serviceProviderPhone})}`}>
                  {serviceProviderPhone}
                </Link>
              </Text>
              <Link href={`mailto:${serviceProviderEmail}`}>
                {serviceProviderEmail}
              </Link>

              <CommonFooter t={t} />
            </EmailContent>
          </EmailWrapper>
        </Body>
      </Tailwind>
    </Html>
  );

  const html = await render(email);

  return {
    html,
    subject,
    email,
  };
}

const PreviewEmail = async () => {
  const { email } = await renderTtoReservationConfirmationEmail({
    language: 'et',
    recipientName: 'John Doe',
    startTime: '2025-09-27 05:45:00+00',
    orderName: 'Hambaarst',
    locationName: 'Tallinn',
    locationAddress: 'Põhja puiestee, 2/3A',
    orderId: '123123',
    serviceProviderName: 'Dentas OÜ',
    serviceProviderEmail: 'email@example.ee',
    serviceProviderPhone: '+372111111',
  });
  return email;
};

export default PreviewEmail;
PreviewEmail.PreviewProps = {};
