import * as React from 'react';

interface EmailTemplateProps {
  name: string;
  email: string;
  message: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({ name, email, message }) => (
  <div style={{ fontFamily: 'sans-serif', padding: '20px', lineHeight: '1.5' }}>
    <h2 style={{ color: '#333' }}>📬 New Message from Your Portfolio</h2>
    <p>You&apos;ve received a new message through your portfolio contact form.</p>

    <hr style={{ margin: '20px 0' }} />

    <p>
      <strong>From:</strong> {name} &lt;{email}&gt;
    </p>
    <p>
      <strong>Message:</strong>
    </p>
    <blockquote style={{ margin: '10px 0', paddingLeft: '15px', borderLeft: '4px solid #ccc' }}>{message}</blockquote>

    <hr style={{ margin: '20px 0' }} />

    <p style={{ fontSize: '0.9em', color: '#777' }}>This message was sent from your personal portfolio site.</p>
  </div>
);

interface RecoverPasswordEmailProps {
  name: string;
  resetLink: string;
}

export const RecoverPasswordEmail: React.FC<Readonly<RecoverPasswordEmailProps>> = ({ name, resetLink }) => (
  <div style={{ fontFamily: 'sans-serif', padding: '20px', lineHeight: '1.6', backgroundColor: '#f9f9f9' }}>
    <div style={{ maxWidth: '600px', margin: '0 auto', backgroundColor: '#ffffff', padding: '30px', borderRadius: '8px', boxShadow: '0 0 10px rgba(0,0,0,0.05)' }}>
      <h2 style={{ color: '#2c3e50' }}>🔐 Password Reset Request</h2>
      <p>Hi <strong>{name}</strong>,</p>

      <p>We received a request to reset your password. Click the button below to set a new password:</p>

      <div style={{ textAlign: 'center', margin: '30px 0' }}>
        <a
          href={resetLink}
          style={{
            backgroundColor: '#0070f3',
            color: '#fff',
            padding: '12px 24px',
            textDecoration: 'none',
            borderRadius: '5px',
            fontWeight: 'bold',
            display: 'inline-block',
          }}
        >
          Reset Password
        </a>
      </div>

      <p>If you didn’t request this, you can safely ignore this email.</p>

      <hr style={{ margin: '30px 0', borderColor: '#eee' }} />

      <p style={{ fontSize: '0.9em', color: '#999' }}>
        This message was sent from your portfolio site. If you have any questions, reply to this email.
      </p>
    </div>
  </div>
);

interface PortfolioInvitationEmailProps {
  portfolioName: string;
  portfolioOwner: string;
  acceptLink: string;
}

export const PortfolioInvitationEmail: React.FC<Readonly<PortfolioInvitationEmailProps>> = ({
  portfolioName,
  portfolioOwner,
  acceptLink,
}) => (
  <div style={{ fontFamily: 'sans-serif', padding: '20px', lineHeight: '1.6', backgroundColor: '#f9f9f9' }}>
    <div style={{ maxWidth: '600px', margin: '0 auto', backgroundColor: '#ffffff', padding: '30px', borderRadius: '8px', boxShadow: '0 0 10px rgba(0,0,0,0.05)' }}>
      <h2 style={{ color: '#2c3e50' }}>🎨 Portfolio Collaboration Invitation</h2>
      <p>Hi,</p>

      <p>
        <strong>{portfolioOwner}</strong> has invited you to collaborate on their portfolio: <strong>{portfolioName}</strong>
      </p>

      <p>As a contributor, you&apos;ll be able to:</p>
      <ul style={{ margin: '15px 0', paddingLeft: '20px' }}>
        <li>Add your projects to the portfolio</li>
        <li>Edit and manage your contributions</li>
      </ul>

      <div style={{ textAlign: 'center', margin: '30px 0' }}>
        <a
          href={acceptLink}
          style={{
            backgroundColor: '#0070f3',
            color: '#fff',
            padding: '12px 24px',
            textDecoration: 'none',
            borderRadius: '5px',
            fontWeight: 'bold',
            display: 'inline-block',
          }}
        >
          Accept Invitation
        </a>
      </div>

      <hr style={{ margin: '30px 0', borderColor: '#eee' }} />

      <p style={{ fontSize: '0.9em', color: '#999' }}>
        This invitation was sent from the portfolio platform. If you have any questions, please contact the portfolio owner.
      </p>
    </div>
  </div>
);
