import {
  Body,
  Button,
  Container,
  Head,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Section,
  Text,
} from "@react-email/components";

interface BaseLayoutProps {
  children: React.ReactNode;
  previewText: string;
  language: string;
  siteUrl: string;
}

const translations: Record<string, { footer: string; company: string }> = {
  sr: {
    footer: "",
    company: "",
  },
  en: {
    footer: "",
    company: "",
  },
  de: {
    footer: "",
    company: "",
  },
  fr: {
    footer: "",
    company: "",
  },
};

const COMPANY_NAME = process.env.EMAIL_COMPANY_NAME || "Store";
const LOGO_URL = process.env.EMAIL_LOGO_URL || "";
const DEFAULT_FOOTER = process.env.EMAIL_FOOTER || `${COMPANY_NAME} | ${process.env.SITE_URL || ""}`;

function getFooter(language: string): string {
  const t = translations[language] || translations.en;
  const footer = t.footer || DEFAULT_FOOTER;
  return footer.replace("{company}", COMPANY_NAME).replace("{siteUrl}", process.env.SITE_URL || "");
}

export function BaseLayout({ children, previewText, language, siteUrl }: BaseLayoutProps) {
  const footer = getFooter(language);

  return (
    <Html>
      <Head />
      <Preview>{previewText}</Preview>
      <Body style={styles.body}>
        <Container style={styles.container}>
          {LOGO_URL && (
            <Section style={styles.logoSection}>
              <Img
                src={LOGO_URL}
                width="150"
                height="auto"
                alt={COMPANY_NAME}
                style={styles.logo}
              />
            </Section>
          )}
          {children}
          <Section style={styles.footer}>
            <Text style={styles.footerText}>{footer}</Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

const styles = {
  body: {
    backgroundColor: "#f6f6f6",
    fontFamily:
      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
  },
  container: {
    backgroundColor: "#ffffff",
    margin: "0 auto",
    padding: "40px 20px",
    maxWidth: "600px",
  },
  logoSection: {
    textAlign: "center" as const,
    marginBottom: "30px",
  },
  logo: {
    margin: "0 auto",
  },
  footer: {
    marginTop: "40px",
    paddingTop: "20px",
    borderTop: "1px solid #e0e0e0",
  },
  footerText: {
    color: "#666666",
    fontSize: "12px",
    textAlign: "center" as const,
  },
};
