// src/components/resume/templates/CreativeGeometric.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 CreativeGeometric({ data }: Props) {
  const settings = parseDesignSettings(data)
  const accent = data.accentColor || '#7c3aed' // Violet accent default
  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',
        position: 'relative',
        ...fontStyle
      }}
    >
      <style dangerouslySetInnerHTML={{ __html: fontImport }} />

      {/* Asymmetric geometric accent blocks at top-right corner */}
      <div style={{ position: 'absolute', right: 0, top: 0, width: '120px', height: '120px', background: `${accent}15`, clipPath: 'polygon(100% 0, 0 0, 100% 100%)', zIndex: 0 }} />
      <div style={{ position: 'absolute', right: 0, top: 0, width: '60px', height: '60px', background: accent, clipPath: 'polygon(100% 0, 0 0, 100% 100%)', zIndex: 1 }} />

      {/* Split Header layout */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', borderBottom: `2.5px solid ${accent}`, paddingBottom: '16px', marginBottom: '24px', zIndex: 10 }}>
        <div style={{ flex: 1 }}>
          {renderPhoto(data, settings, accent)}
          <h1
            style={{
              fontFamily: settings.fontFamily ? `"${settings.fontFamily}", sans-serif` : 'Space Grotesk, sans-serif',
              fontSize: nameSize,
              fontWeight: settings.nameBold ? 700 : 400,
              color: '#111827',
              margin: '0 0 6px 0',
              letterSpacing: '-0.02em',
            }}
          >
            {data.fullName || 'Your Name'}
          </h1>
          {data.professionalTitle && (
            <p style={{ fontSize: '11.5pt', fontWeight: 700, color: accent, marginTop: '2px', letterSpacing: '0.02em' }}>
              {data.professionalTitle}
            </p>
          )}
        </div>
        <div style={{ maxWidth: '40%', fontSize: '9pt', color: '#4b5563', textAlign: 'right', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', paddingTop: '8px' }}>
          {renderContactDetails(data, settings, accent, false)}
        </div>
      </div>

      {/* Resume Body */}
      <div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: '20px' }}>
        {/* Summary */}
        {data.summary && (
          <GeometricSection title="About Me" accent={accent} settings={settings}>
            <p style={{ color: '#4b5563', margin: 0, whiteSpace: 'pre-line' }}>{data.summary}</p>
          </GeometricSection>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: settings.columns === 'two' ? '1fr 1fr' : '1fr', gap: '0 24px' }}>
          {/* Left Column / Combined Block */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            {data.experiences.length > 0 && (
              <GeometricSection title="Work 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: '#111827' }}>{exp.jobTitle}</strong>
                      <span style={{ fontSize: '8.5pt', color: '#6b7280', whiteSpace: 'nowrap' }}>
                        {exp.startDate} – {exp.current ? 'Present' : exp.endDate}
                      </span>
                    </div>
                    <div style={{ color: accent, fontSize: '9pt', fontWeight: 600 }}>
                      {exp.company}{exp.location ? `, ${exp.location}` : ''}
                    </div>
                    {exp.description && (
                      <p
                        style={{
                          marginTop: '4px',
                          color: '#4b5563',
                          fontSize: '8.5pt',
                          listStyleType: listStyleType,
                          paddingLeft: settings.listStyle === 'bullet' ? '12px' : 0
                        }}
                      >
                        {exp.description}
                      </p>
                    )}
                  </div>
                ))}
              </GeometricSection>
            )}

            {data.projects.length > 0 && (
              <GeometricSection title="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: '#111827' }}>{proj.name}</strong>
                      {proj.url && renderLink(proj.url, settings, accent)}
                    </div>
                    {proj.description && <p style={{ marginTop: '3px', color: '#4b5563', fontSize: '8.5pt' }}>{proj.description}</p>}
                  </div>
                ))}
              </GeometricSection>
            )}
          </div>

          {/* Right Column (merged if single column) */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginTop: settings.columns === 'two' ? 0 : '16px' }}>
            {data.education.length > 0 && (
              <GeometricSection 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: '#111827' }}>{edu.degree}</strong>
                      <span style={{ fontSize: '8.5pt', color: '#6b7280', whiteSpace: 'nowrap' }}>
                        {edu.startDate} – {edu.endDate}
                      </span>
                    </div>
                    <div style={{ color: accent, fontSize: '9pt', fontWeight: 600 }}>
                      {edu.institution}{edu.location ? `, ${edu.location}` : ''}
                    </div>
                    {edu.description && <p style={{ marginTop: '3px', color: '#4b5563', fontSize: '8.5pt' }}>{edu.description}</p>}
                  </div>
                ))}
              </GeometricSection>
            )}

            {data.skills.length > 0 && (
              <GeometricSection title="Skills" accent={accent} settings={settings}>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
                  {data.skills.map((skill, i) => (
                    <span key={i} style={{ background: '#f3f4f6', borderLeft: `3px solid ${accent}`, padding: '4px 10px', fontSize: '8.5pt', color: '#374151', fontWeight: 500 }}>
                      {skill.name}{skill.level ? ` · ${skill.level}` : ''}
                    </span>
                  ))}
                </div>
              </GeometricSection>
            )}
          </div>
        </div>
      </div>

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

function GeometricSection({ title, accent, settings, children }: { title: string; accent: string; settings: any; children: React.ReactNode }) {
  return (
    <div style={{ marginBottom: '14px' }}>
      <h2
        style={{
          fontFamily: settings.fontFamily ? `"${settings.fontFamily}", sans-serif` : 'Space Grotesk, sans-serif',
          fontSize: '10.5pt',
          fontWeight: 700,
          color: '#111827',
          marginBottom: '10px',
          paddingBottom: '4px',
          borderBottom: `2.5px solid ${accent}`,
          display: 'inline-block'
        }}
      >
        {title}
      </h2>
      <div>{children}</div>
    </div>
  )
}