import { Container } from '@react-email/components';
import { Text, Tailwind } from '@react-email/components';
import { CodeBlock } from '@react-email/code-block';

type EmailProps = {
  serverName: string;
  timestamp: string;
  url: string;
  method: string;
  stack: string;
  body: string;
  message: string;
  headers: Record<string, unknown>;
  user: Record<string, unknown>;
};

const Email = (props: EmailProps) => {
  const { serverName, timestamp, url, method, stack, body, message, headers, user } = props;
  return (
    <Tailwind>
      <Container className="max-w-[80%]">
        <Text className="pt-4 text-center text-5xl">Unexpected Error in Server</Text>
        <Text className="pt-4 text-center text-2xl">{serverName || 'Auth Server'}</Text>
        <CustomCodeBlock code={timestamp} />
        <CustomCodeBlock code={`${method || 'GET'}: ${url || 'http://auth.pertento.ai/'}`} />
        <CustomCodeBlock code={message || messageSample} />
        <CustomCodeBlock code={stack || stackSample} />
        {headers && <CustomCodeBlock code={`req.headers: ${JSON.stringify(headers, null, 2)}`} />}
        {user && <CustomCodeBlock code={`req.user = ${JSON.stringify(user, null, 2)}`} />}
        {body && <CustomCodeBlock code={`req.body =${JSON.stringify(body, null, 2)}`} />}
      </Container>
    </Tailwind>
  );
};

const CustomCodeBlock = ({ code }: { code: string }) => {
  return <CodeBlock code={` \n${code}\n\ `} theme={coyTheme} language="js" />;
};

export default Email;

const coyTheme = {
  base: {
    color: 'black',
    background: 'none',
    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    fontSize: '1em',
    textAlign: 'left' as const,
    whiteSpace: 'pre' as const,
    wordSpacing: 'normal',
    wordBreak: 'break-all' as const,
    lineHeight: '1.5',
    tabSize: 4,
    hyphens: 'none' as const,
    position: 'relative' as const,
    borderLeft: '10px solid #358ccb',
    boxShadow: '-1px 0 0 0 #358ccb, 0 0 0 1px #dfdfdf',
    backgroundColor: '#fdfdfd',
    backgroundImage: 'linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%)',
    backgroundSize: '3em 3em',
    backgroundOrigin: 'content-box' as const,
    backgroundAttachment: 'local' as const,
    margin: '.5em 0',
    padding: '0 1em',
  } as const,
  comment: { color: '#7D8B99' } as const,
  'block-comment': { color: '#7D8B99' } as const,
  prolog: { color: '#7D8B99' } as const,
  doctype: { color: '#7D8B99' } as const,
  cdata: { color: '#7D8B99' } as const,
  punctuation: { color: '#5F6364' } as const,
  property: { color: '#c92c2c' } as const,
  tag: { color: '#c92c2c' } as const,
  boolean: { color: '#c92c2c' } as const,
  number: { color: '#c92c2c' } as const,
  'function-name': { color: '#c92c2c' } as const,
  constant: { color: '#c92c2c' } as const,
  symbol: { color: '#c92c2c' } as const,
  deleted: { color: '#c92c2c' } as const,
  selector: { color: '#2f9c0a' } as const,
  'attr-name': { color: '#2f9c0a' } as const,
  string: { color: '#2f9c0a' } as const,
  char: { color: '#2f9c0a' } as const,
  function: { color: '#2f9c0a' } as const,
  builtin: { color: '#2f9c0a' } as const,
  inserted: { color: '#2f9c0a' } as const,
  operator: {
    color: '#a67f59',
    background: 'rgba(255, 255, 255, 0.5)',
  } as const,
  entity: {
    color: '#a67f59',
    background: 'rgba(255, 255, 255, 0.5)',
    cursor: 'help',
  } as const,
  url: { color: '#a67f59', background: 'rgba(255, 255, 255, 0.5)' } as const,
  variable: {
    color: '#a67f59',
    background: 'rgba(255, 255, 255, 0.5)',
  } as const,
  atrule: { color: '#1990b8' } as const,
  'attr-value': { color: '#1990b8' } as const,
  keyword: { color: '#1990b8' } as const,
  'class-name': { color: '#1990b8' } as const,
  regex: { color: '#e90' } as const,
  important: { color: '#e90', fontWeight: 'normal' } as const,
  bold: { fontWeight: 'bold' } as const,
  italic: { fontStyle: 'italic' } as const,
  namespace: { opacity: '.7' } as const,
} as const;

const stackSample = `Error: Something went wrong
at <anonymous> (/Users/andrepadez/develop/pertento/workspaces/servers/api-server/src/index.ts:9:1)
at <anonymous> (/Users/andrepadez/develop/pertento/node_modules/hono/dist/compose.js:29:28)
at dispatch (/Users/andrepadez/develop/pertento/node_modules/hono/dist/compose.js:7:15)
at <anonymous> (/Users/andrepadez/develop/pertento/workspaces/servers/_hono_server/src/middlewares/body-parser.ts:1:32)
at <anonymous> (/Users/andrepadez/develop/pertento/node_modules/hono/dist/compose.js:29:28)
at dispatch (/Users/andrepadez/develop/pertento/node_modules/hono/dist/compose.js:7:15)
at <anonymous> (/Users/andrepadez/develop/pertento/node_modules/hono/dist/middleware/cors/index.js:64:15)
at cors2 (/Users/andrepadez/develop/pertento/node_modules/hono/dist/middleware/cors/index.js:22:29)
at <anonymous> (/Users/andrepadez/develop/pertento/node_modules/hono/dist/compose.js:29:28)
at dispatch (/Users/andrepadez/develop/pertento/node_modules/hono/dist/compose.js:7:15)`;

const messageSample = `Error: Something went wrong`;
