import * as React from "react";
import { EmailLayout } from "../components/email-layout";
import { EmailHeader } from "../components/email-header";
import { EmailFooter } from "../components/email-footer";
import { EmailButton } from "../components/email-button";
import { EmailSummaryTable } from "../components/email-field";
import { emailTokens, getEmailBaseUrl } from "../tokens";

export interface ContactConfirmationEmailProps {
  name: string;
  company?: string;
  department?: string;
  message?: string;
}

export function ContactConfirmationEmail({
  name,
  company,
  department = "Enterprise Sales",
  message,
}: ContactConfirmationEmailProps) {
  const firstName = name.trim().split(/\s+/)[0] || name;
  const baseUrl = getEmailBaseUrl();
  const isSales = department === "Enterprise Sales";

  return (
    <EmailLayout previewText={`We received your request — Quto AI`}>
      <EmailHeader badge="Request Received" />

      <h1
        style={{
          fontFamily: emailTokens.fonts.display,
          fontSize: "24px",
          fontWeight: 700,
          color: emailTokens.colors.textPrimary,
          margin: "0 0 10px",
          lineHeight: "1.25",
          letterSpacing: "-0.5px",
        }}
      >
        Thanks for reaching out, {firstName}.
      </h1>

      <p
        style={{
          fontSize: "14.5px",
          color: emailTokens.colors.textSecondary,
          margin: "0 0 16px",
          lineHeight: "1.6",
        }}
      >
        We have received your message regarding <strong>{department}</strong>. Our specialists are
        reviewing your details and will follow up shortly.
      </p>

      {/* SLA / What happens next */}
      <div
        style={{
          backgroundColor: emailTokens.colors.calloutBg,
          border: `1px solid ${emailTokens.colors.border}`,
          borderRadius: "10px",
          padding: "14px 18px",
          margin: "20px 0",
        }}
      >
        <div
          style={{
            fontSize: "11px",
            fontWeight: 700,
            textTransform: "uppercase",
            letterSpacing: "0.6px",
            color: emailTokens.colors.textPrimary,
            marginBottom: "4px",
          }}
        >
          What happens next?
        </div>
        <p
          style={{
            fontSize: "13px",
            color: emailTokens.colors.textSecondary,
            margin: 0,
            lineHeight: "1.5",
          }}
        >
          {isSales
            ? "Our enterprise solutions team reviews new inquiries on priority with a target response time under 2 business hours."
            : "A dedicated specialist from our team will contact you within 1 business day."}
        </p>
      </div>

      {/* Summary of what the user submitted */}
      <EmailSummaryTable
        fields={[
          { label: "Department", value: department },
          { label: "Company", value: company },
        ]}
      />

      {message && (
        <div style={{ marginTop: "16px", marginBottom: "20px" }}>
          <div
            style={{
              fontSize: "10px",
              fontWeight: 700,
              textTransform: "uppercase",
              letterSpacing: "0.8px",
              color: emailTokens.colors.textMuted,
              marginBottom: "6px",
            }}
          >
            Your Message
          </div>
          <div
            style={{
              backgroundColor: emailTokens.colors.card,
              border: `1px solid ${emailTokens.colors.border}`,
              borderRadius: "8px",
              padding: "12px 16px",
              fontSize: "13px",
              lineHeight: "1.5",
              color: emailTokens.colors.textSecondary,
              whiteSpace: "pre-wrap",
              wordBreak: "break-word",
            }}
          >
            {message}
          </div>
        </div>
      )}

      {/* Primary CTA */}
      <EmailButton href={`${baseUrl}/#solutions`}>
        Explore Quto AI Solutions
      </EmailButton>

      <EmailFooter />
    </EmailLayout>
  );
}