import * as React from "react";
import { emailTokens } from "../tokens";

export interface EmailFieldProps {
  label: string;
  value?: React.ReactNode;
  isMono?: boolean;
}

export function EmailField({ label, value, isMono = false }: EmailFieldProps) {
  if (!value) return null;

  return (
    <div style={{ marginBottom: "14px" }}>
      <div
        style={{
          fontSize: "10px",
          fontWeight: 700,
          textTransform: "uppercase",
          letterSpacing: "0.8px",
          color: emailTokens.colors.textMuted,
          marginBottom: "3px",
        }}
      >
        {label}
      </div>
      <div
        style={{
          fontSize: "14px",
          fontWeight: 500,
          color: emailTokens.colors.textPrimary,
          lineHeight: "1.4",
          wordBreak: "break-word",
          fontFamily: isMono ? emailTokens.fonts.mono : emailTokens.fonts.body,
        }}
      >
        {value}
      </div>
    </div>
  );
}

export interface EmailSummaryTableProps {
  fields: { label: string; value?: React.ReactNode; isMono?: boolean }[];
}

export function EmailSummaryTable({ fields }: EmailSummaryTableProps) {
  const visible = fields.filter((f) => Boolean(f.value));
  if (visible.length === 0) return null;

  return (
    <div
      style={{
        backgroundColor: emailTokens.colors.calloutBg,
        border: `1px solid ${emailTokens.colors.border}`,
        borderRadius: "12px",
        padding: "18px 20px 6px",
        margin: "20px 0",
      }}
    >
      <table cellPadding={0} cellSpacing={0} border={0} width="100%">
        <tbody>
          {visible.map((f, i) => (
            <tr key={i}>
              <td
                style={{
                  paddingBottom: "12px",
                  width: "36%",
                  verticalAlign: "top",
                }}
              >
                <span
                  style={{
                    fontSize: "10px",
                    fontWeight: 700,
                    textTransform: "uppercase",
                    letterSpacing: "0.8px",
                    color: emailTokens.colors.textMuted,
                  }}
                >
                  {f.label}
                </span>
              </td>
              <td
                style={{
                  paddingBottom: "12px",
                  verticalAlign: "top",
                  fontSize: "13px",
                  fontWeight: 600,
                  color: emailTokens.colors.textPrimary,
                  fontFamily: f.isMono ? emailTokens.fonts.mono : emailTokens.fonts.body,
                  wordBreak: "break-word",
                }}
              >
                {f.value}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
