import * as React from "react";
import { Link } from "@react-email/components";
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 } from "../tokens";

export interface ContactInternalEmailProps {
  name: string;
  email: string;
  company: string;
  phone?: string;
  department?: string;
  message: string;
  submittedAt?: string;
}

export function ContactInternalEmail({
  name,
  email,
  company,
  phone,
  department = "Enterprise Sales",
  message,
  submittedAt,
}: ContactInternalEmailProps) {
  const replySubject = encodeURIComponent(`Re: Quto AI Inquiry — ${company || name}`);
  const mailtoHref = `mailto:${email}?subject=${replySubject}`;

  return (
    <EmailLayout previewText={`New lead from ${name} (${company || "Inquiry"})`}>
      <EmailHeader badge={department === "Enterprise Sales" ? "Enterprise Booking" : "New Inquiry"} />

      <h1
        style={{
          fontFamily: emailTokens.fonts.display,
          fontSize: "24px",
          fontWeight: 700,
          color: emailTokens.colors.textPrimary,
          margin: "0 0 8px",
          lineHeight: "1.25",
          letterSpacing: "-0.5px",
        }}
      >
        New lead: {name}
      </h1>

      <p
        style={{
          fontSize: "14px",
          color: emailTokens.colors.textSecondary,
          margin: "0 0 20px",
          lineHeight: "1.5",
        }}
      >
        A new contact inquiry was submitted via the Quto AI website. Below are the verified details.
      </p>

      {/* Structured Lead Metadata */}
      <EmailSummaryTable
        fields={[
          { label: "Full Name", value: name },
          {
            label: "Work Email",
            value: (
              <Link href={`mailto:${email}`} style={{ color: emailTokens.colors.textPrimary, textDecoration: "underline" }}>
                {email}
              </Link>
            ),
          },
          {
            label: "Phone",
            value: phone ? (
              <Link href={`tel:${phone}`} style={{ color: emailTokens.colors.textPrimary, textDecoration: "none" }}>
                {phone}
              </Link>
            ) : undefined,
            isMono: true,
          },
          { label: "Company", value: company },
          { label: "Department", value: department },
          { label: "Submitted", value: submittedAt || new Date().toUTCString(), isMono: true },
        ]}
      />

      {/* Message callout */}
      <div style={{ marginTop: "24px", marginBottom: "20px" }}>
        <div
          style={{
            fontSize: "10px",
            fontWeight: 700,
            textTransform: "uppercase",
            letterSpacing: "0.8px",
            color: emailTokens.colors.textMuted,
            marginBottom: "8px",
          }}
        >
          Inquiry Message
        </div>
        <div
          style={{
            backgroundColor: emailTokens.colors.calloutBg,
            border: `1px solid ${emailTokens.colors.border}`,
            borderLeft: `3px solid ${emailTokens.colors.textPrimary}`,
            borderRadius: "8px",
            padding: "16px 18px",
            fontSize: "13.5px",
            lineHeight: "1.6",
            color: emailTokens.colors.textPrimary,
            whiteSpace: "pre-wrap",
            wordBreak: "break-word",
          }}
        >
          {message}
        </div>
      </div>

      {/* Direct Reply Action */}
      <EmailButton href={mailtoHref}>
        Reply to {name}
      </EmailButton>

      <EmailFooter />
    </EmailLayout>
  );
}