// src/components/resume/templates/ExecutiveClassic.tsx
import React from 'react'
import type { ResumeData } from '@/types'
import {
  parseDesignSettings,
  getFontImportsAndStyle,
  getNameSize,
  getSubtitleStyle,
  renderContactDetails,
  renderPhoto,
  renderFooter,
  renderLink
} from './templateHelper'

interface Props {
  data: ResumeData
}

export function ExecutiveClassic({ data }: Props) {
  const settings = parseDesignSettings(data)
  const accent = data.accentColor || '#1a1a50'
  const { fontImport, fontStyle } = getFontImportsAndStyle(settings)
  const nameSize = getNameSize(settings)
  const subStyle = getSubtitleStyle(settings, accent)

  const listStyleType = settings.listStyle === 'bullet' ? 'disc' : 'none'

  return (
    <div
      className="print-page bg-white text-neutral-800"
      style={{
        width: '210mm',
        minHeight: '297mm',
        padding: `${settings.marginTB} ${settings.marginLR}`,
        fontSize: settings.fontSize,
        lineHeight: settings.lineHeight,
        display: 'flex',
        flexDirection: 'column',
        ...fontStyle
      }}
    >
      <style dangerouslySetInnerHTML={{ __html: fontImport }} />

      {/* Header */}
      <div style={{ textAlign: 'center', marginBottom: '8px' }}>
        {renderPhoto(data, settings, accent)}
        <h1
          style={{
            fontFamily: settings.fontFamily ? `"${settings.fontFamily}", serif` : 'Georgia, serif',
            fontSize: nameSize,
            fontWeight: settings.nameBold ? 'bold' : 'normal',
            letterSpacing: '0.05em',
            color: accent,
            margin: '0 0 6px 0',
            textTransform: 'uppercase'
          }}
        >
          {data.fullName || 'Your Name'}
        </h1>
        {data.professionalTitle && (
          <p style={{ fontSize: '11pt', fontWeight: 600, color: '#52525b', marginTop: '2px', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
            {data.professionalTitle}
          </p>
        )}
        <div style={{ borderTop: `2px solid ${accent}`, borderBottom: `2px solid ${accent}`, padding: '5px 0', margin: '0 auto', display: 'flex', justifyContent: 'center', width: '100%' }}>
          <span style={{ fontSize: '9pt', color: '#52525b', letterSpacing: '0.03em' }}>
            {renderContactDetails(data, settings, accent, false)}
          </span>
        </div>
      </div>

      <div style={{ flexGrow: 1, marginTop: '20px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
        {/* Summary */}
        {data.summary && (
          <ExecSection title="Executive Summary" accent={accent} settings={settings}>
            <p style={{ margin: 0, color: '#3f3f46', textAlign: 'justify', whiteSpace: 'pre-line' }}>{data.summary}</p>
          </ExecSection>
        )}

        {/* Experience */}
        {data.experiences.length > 0 && (
          <ExecSection title="Professional Experience" accent={accent} settings={settings}>
            {data.experiences.map((exp, i) => (
              <div
                key={i}
                style={{
                  marginBottom: i < data.experiences.length - 1 ? settings.entrySpacing : 0,
                  paddingLeft: settings.indentBody ? '12px' : 0
                }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <strong style={{ ...subStyle, color: accent }}>{exp.jobTitle}</strong>
                  <em style={{ fontSize: '9pt', color: '#71717a' }}>
                    {exp.startDate} — {exp.current ? 'Present' : exp.endDate}
                  </em>
                </div>
                <div style={{ fontStyle: 'italic', color: '#52525b', fontSize: '10pt' }}>
                  {exp.company}{exp.location ? `, ${exp.location}` : ''}
                </div>
                {exp.description && (
                  <p
                    style={{
                      marginTop: '4px',
                      color: '#3f3f46',
                      paddingLeft: '12px',
                      borderLeft: `2px solid ${accent}30`,
                      listStyleType: listStyleType
                    }}
                  >
                    {exp.description}
                  </p>
                )}
              </div>
            ))}
          </ExecSection>
        )}

        {/* Education */}
        {data.education.length > 0 && (
          <ExecSection title="Education" accent={accent} settings={settings}>
            {data.education.map((edu, i) => (
              <div
                key={i}
                style={{
                  marginBottom: i < data.education.length - 1 ? settings.entrySpacing : 0,
                  paddingLeft: settings.indentBody ? '12px' : 0
                }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <strong style={{ ...subStyle, color: accent }}>{edu.degree}</strong>
                  <em style={{ fontSize: '9pt', color: '#71717a' }}>{edu.startDate} — {edu.endDate}</em>
                </div>
                <div style={{ fontStyle: 'italic', color: '#52525b' }}>
                  {edu.institution}{edu.location ? `, ${edu.location}` : ''}
                </div>
                {edu.description && <p style={{ marginTop: '3px', color: '#3f3f46', paddingLeft: '12px' }}>{edu.description}</p>}
              </div>
            ))}
          </ExecSection>
        )}

        {/* Skills */}
        {data.skills.length > 0 && (
          <ExecSection title="Core Competencies" accent={accent} settings={settings}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '6px' }}>
              {data.skills.map((skill, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '9.5pt' }}>
                  <span style={{ color: accent, fontSize: '8pt' }}>◆</span>
                  <span>{skill.name}{skill.level ? ` (${skill.level})` : ''}</span>
                </div>
              ))}
            </div>
          </ExecSection>
        )}

        {/* Projects */}
        {data.projects.length > 0 && (
          <ExecSection title="Key Projects" accent={accent} settings={settings}>
            {data.projects.map((proj, i) => (
              <div
                key={i}
                style={{
                  marginBottom: i < data.projects.length - 1 ? settings.entrySpacing : 0,
                  paddingLeft: settings.indentBody ? '12px' : 0
                }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <strong style={{ ...subStyle, color: accent }}>{proj.name}</strong>
                  {proj.url && renderLink(proj.url, settings, accent)}
                </div>
                {proj.description && <p style={{ marginTop: '3px', color: '#3f3f46', paddingLeft: '12px' }}>{proj.description}</p>}
              </div>
            ))}
          </ExecSection>
        )}
      </div>

      {renderFooter(data, settings)}
    </div>
  )
}

function ExecSection({ title, accent, settings, children }: { title: string; accent: string; settings: any; children: React.ReactNode }) {
  return (
    <div style={{ marginBottom: '14px' }}>
      <div style={{ borderTop: `1.5px solid ${accent}`, borderBottom: `0.5px solid ${accent}30`, marginBottom: '10px' }}>
        <h2
          style={{
            fontFamily: settings.fontFamily ? `"${settings.fontFamily}", serif` : 'Georgia, serif',
            fontSize: '11pt',
            fontWeight: 'bold',
            textTransform: 'uppercase',
            letterSpacing: '0.07em',
            color: accent,
            padding: '4px 0',
            margin: 0
          }}
        >
          {title}
        </h2>
      </div>
      {children}
    </div>
  )
}