'use client'

import { useState, useRef } from 'react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { 
  Zap, 
  ArrowLeft,
  Plus,
  Trash2,
  Download,
  FileText,
  Mail,
  Phone,
  MapPin,
  Globe,
  Linkedin,
  Instagram,
  GraduationCap,
  Briefcase,
  User
} from 'lucide-react'

// Color constants (hex format for html2canvas compatibility)
const TEAL_COLOR = '#0d9488'
const TEAL_DARK = '#0f766e'
const TEAL_LIGHT = '#ccfbf1'
const GRAY_50 = '#f9fafb'
const GRAY_100 = '#f3f4f6'
const GRAY_200 = '#e5e7eb'
const GRAY_300 = '#d1d5db'
const GRAY_400 = '#9ca3af'
const GRAY_500 = '#6b7280'
const GRAY_600 = '#4b5563'
const GRAY_700 = '#374151'
const GRAY_800 = '#1f2937'
const GRAY_900 = '#111827'
const WHITE = '#ffffff'

// Types
interface Education {
  id: string
  degree: string
  institution: string
  major: string
  gpa: string
  startDate: string
  endDate: string
  description: string
}

interface WorkExperience {
  id: string
  position: string
  company: string
  startDate: string
  endDate: string
  jobdesk: string
}

interface Biodata {
  photo: string | null
  fullName: string
  phone: string
  email: string
  address: string
  postalCode: string
  gender: string
  birthPlace: string
  birthDate: string
  maritalStatus: string
  nationality: string
  linkedin: string
  instagram: string
  website: string
  description: string
}

const generateId = () => Math.random().toString(36).substr(2, 9)

export default function CVPage() {
  const printRef = useRef<HTMLDivElement>(null)
  const [toastMessage, setToastMessage] = useState('')
  
  // Biodata state
  const [biodata, setBiodata] = useState<Biodata>({
    photo: null,
    fullName: '',
    phone: '',
    email: '',
    address: '',
    postalCode: '',
    gender: '',
    birthPlace: '',
    birthDate: '',
    maritalStatus: '',
    nationality: 'Indonesia',
    linkedin: '',
    instagram: '',
    website: '',
    description: ''
  })

  // Education state
  const [educations, setEducations] = useState<Education[]>([
    { id: generateId(), degree: '', institution: '', major: '', gpa: '', startDate: '', endDate: '', description: '' }
  ])

  // Work experience state
  const [experiences, setExperiences] = useState<WorkExperience[]>([
    { id: generateId(), position: '', company: '', startDate: '', endDate: '', jobdesk: '' }
  ])

  // Handle photo upload
  const handlePhotoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onloadend = () => {
        setBiodata({ ...biodata, photo: reader.result as string })
      }
      reader.readAsDataURL(file)
    }
  }

  // Update biodata
  const updateBiodata = (field: keyof Biodata, value: string) => {
    setBiodata({ ...biodata, [field]: value })
  }

  // Education functions
  const addEducation = () => {
    setEducations([...educations, { id: generateId(), degree: '', institution: '', major: '', gpa: '', startDate: '', endDate: '', description: '' }])
  }

  const removeEducation = (id: string) => {
    if (educations.length > 1) {
      setEducations(educations.filter(edu => edu.id !== id))
    } else {
      setToastMessage('Minimal 1 pendidikan harus ada')
      setTimeout(() => setToastMessage(''), 3000)
    }
  }

  const updateEducation = (id: string, field: keyof Education, value: string) => {
    setEducations(educations.map(edu => 
      edu.id === id ? { ...edu, [field]: value } : edu
    ))
  }

  // Work experience functions
  const addExperience = () => {
    setExperiences([...experiences, { id: generateId(), position: '', company: '', startDate: '', endDate: '', jobdesk: '' }])
  }

  const removeExperience = (id: string) => {
    if (experiences.length > 1) {
      setExperiences(experiences.filter(exp => exp.id !== id))
    } else {
      setToastMessage('Minimal 1 pengalaman harus ada')
      setTimeout(() => setToastMessage(''), 3000)
    }
  }

  const updateExperience = (id: string, field: keyof WorkExperience, value: string) => {
    setExperiences(experiences.map(exp => 
      exp.id === id ? { ...exp, [field]: value } : exp
    ))
  }

  // Format date for display
  const formatDate = (dateString: string) => {
    if (!dateString) return ''
    const date = new Date(dateString)
    return date.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })
  }

  // Generate PDF
  const generatePDF = async () => {
    if (typeof window !== 'undefined' && printRef.current) {
      try {
        const html2pdf = (await import('html2pdf.js')).default
        const element = printRef.current
        
        const opt = {
          margin: 0,
          filename: `cv-${biodata.fullName.replace(/\s+/g, '-') || 'document'}.pdf`,
          image: { type: 'jpeg', quality: 0.98 },
          html2canvas: { 
            scale: 2, 
            useCORS: true,
            backgroundColor: WHITE,
          },
          jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
        }

        await html2pdf().set(opt).from(element).save()
        setToastMessage('CV berhasil diunduh!')
        setTimeout(() => setToastMessage(''), 3000)
      } catch (error) {
        console.error('Error generating PDF:', error)
        setToastMessage('Gagal membuat PDF')
        setTimeout(() => setToastMessage(''), 3000)
      }
    }
  }

  return (
    <div className="min-h-screen flex flex-col" style={{ backgroundColor: GRAY_50 }}>
      {/* Header */}
      <header style={{ position: 'sticky', top: 0, zIndex: 50, backgroundColor: WHITE, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', borderBottom: `1px solid ${GRAY_200}` }}>
        <nav style={{ maxWidth: '1400px', margin: '0 auto', padding: '0 1rem' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '4rem' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
              <Link href="/" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', textDecoration: 'none' }}>
                <Zap style={{ height: '2rem', width: '2rem', color: TEAL_COLOR }} />
                <span style={{ fontSize: '1.25rem', fontWeight: 'bold', color: GRAY_900 }}>Admin Kilat</span>
              </Link>
              <span style={{ color: GRAY_300 }}>|</span>
              <h1 style={{ fontSize: '1.125rem', fontWeight: 600, color: GRAY_700 }}>Pembuatan CV</h1>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
              <Link href="/">
                <Button variant="outline" size="sm">
                  <ArrowLeft style={{ height: '1rem', width: '1rem', marginRight: '0.25rem' }} />
                  Kembali
                </Button>
              </Link>
              <Button onClick={generatePDF} style={{ backgroundColor: TEAL_COLOR, color: WHITE }} className="hover:bg-teal-700">
                <Download style={{ height: '1rem', width: '1rem', marginRight: '0.5rem' }} />
                Download PDF
              </Button>
            </div>
          </div>
        </nav>
      </header>

      {/* Main Content */}
      <main style={{ flexGrow: 1, padding: '1.5rem 0' }}>
        <div style={{ maxWidth: '1400px', margin: '0 auto', padding: '0 1rem' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(1, 1fr)', gap: '1.5rem' }} className="lg:grid-cols-2">
            {/* Left: Form Input */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
              {/* Biodata Section */}
              <Card>
                <CardHeader>
                  <CardTitle style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1.125rem' }}>
                    <User style={{ height: '1.25rem', width: '1.25rem', color: TEAL_COLOR }} />
                    Biodata
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(1, 1fr)', gap: '1rem' }} className="md:grid-cols-2">
                    {/* Photo Upload */}
                    <div style={{ gridColumn: 'span 1' }} className="md:col-span-2">
                      <Label htmlFor="photo">Foto Profil</Label>
                      <Input
                        id="photo"
                        type="file"
                        accept="image/*"
                        onChange={handlePhotoUpload}
                        style={{ marginTop: '0.25rem' }}
                      />
                      {biodata.photo && (
                        <div style={{ marginTop: '0.5rem', width: '6rem', height: '6rem', borderRadius: '50%', overflow: 'hidden', border: `2px solid ${TEAL_COLOR}` }}>
                          <img src={biodata.photo} alt="Photo" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                        </div>
                      )}
                    </div>

                    {/* Full Name */}
                    <div style={{ gridColumn: 'span 1' }} className="md:col-span-2">
                      <Label htmlFor="fullName">Nama Lengkap</Label>
                      <Input
                        id="fullName"
                        value={biodata.fullName}
                        onChange={(e) => updateBiodata('fullName', e.target.value)}
                        placeholder="Nama Lengkap Anda"
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    {/* Phone */}
                    <div>
                      <Label htmlFor="phone">Nomor Telepon</Label>
                      <Input
                        id="phone"
                        value={biodata.phone}
                        onChange={(e) => updateBiodata('phone', e.target.value)}
                        placeholder="08xxxxxxxxxx"
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    {/* Email */}
                    <div>
                      <Label htmlFor="email">Email</Label>
                      <Input
                        id="email"
                        type="email"
                        value={biodata.email}
                        onChange={(e) => updateBiodata('email', e.target.value)}
                        placeholder="email@example.com"
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    {/* Address */}
                    <div style={{ gridColumn: 'span 1' }} className="md:col-span-2">
                      <Label htmlFor="address">Alamat</Label>
                      <Input
                        id="address"
                        value={biodata.address}
                        onChange={(e) => updateBiodata('address', e.target.value)}
                        placeholder="Alamat Lengkap"
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    {/* Postal Code */}
                    <div>
                      <Label htmlFor="postalCode">Kode Pos</Label>
                      <Input
                        id="postalCode"
                        value={biodata.postalCode}
                        onChange={(e) => updateBiodata('postalCode', e.target.value)}
                        placeholder="12345"
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    {/* Gender */}
                    <div>
                      <Label htmlFor="gender">Jenis Kelamin</Label>
                      <Select value={biodata.gender} onValueChange={(value) => updateBiodata('gender', value)}>
                        <SelectTrigger style={{ marginTop: '0.25rem' }}>
                          <SelectValue placeholder="Pilih" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="Laki-laki">Laki-laki</SelectItem>
                          <SelectItem value="Perempuan">Perempuan</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    {/* Birth Place & Date */}
                    <div>
                      <Label htmlFor="birthPlace">Tempat Lahir</Label>
                      <Input
                        id="birthPlace"
                        value={biodata.birthPlace}
                        onChange={(e) => updateBiodata('birthPlace', e.target.value)}
                        placeholder="Jakarta"
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    <div>
                      <Label htmlFor="birthDate">Tanggal Lahir</Label>
                      <Input
                        id="birthDate"
                        type="date"
                        value={biodata.birthDate}
                        onChange={(e) => updateBiodata('birthDate', e.target.value)}
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    {/* Marital Status */}
                    <div>
                      <Label htmlFor="maritalStatus">Status Pernikahan</Label>
                      <Select value={biodata.maritalStatus} onValueChange={(value) => updateBiodata('maritalStatus', value)}>
                        <SelectTrigger style={{ marginTop: '0.25rem' }}>
                          <SelectValue placeholder="Pilih" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="Belum Menikah">Belum Menikah</SelectItem>
                          <SelectItem value="Menikah">Menikah</SelectItem>
                          <SelectItem value="Cerai">Cerai</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    {/* Nationality */}
                    <div>
                      <Label htmlFor="nationality">Kebangsaan</Label>
                      <Input
                        id="nationality"
                        value={biodata.nationality}
                        onChange={(e) => updateBiodata('nationality', e.target.value)}
                        placeholder="Indonesia"
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    {/* Social Media */}
                    <div>
                      <Label htmlFor="linkedin">LinkedIn</Label>
                      <Input
                        id="linkedin"
                        value={biodata.linkedin}
                        onChange={(e) => updateBiodata('linkedin', e.target.value)}
                        placeholder="linkedin.com/in/username"
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    <div>
                      <Label htmlFor="instagram">Instagram</Label>
                      <Input
                        id="instagram"
                        value={biodata.instagram}
                        onChange={(e) => updateBiodata('instagram', e.target.value)}
                        placeholder="@username"
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    {/* Website */}
                    <div style={{ gridColumn: 'span 1' }} className="md:col-span-2">
                      <Label htmlFor="website">Website</Label>
                      <Input
                        id="website"
                        value={biodata.website}
                        onChange={(e) => updateBiodata('website', e.target.value)}
                        placeholder="https://website.com"
                        style={{ marginTop: '0.25rem' }}
                      />
                    </div>

                    {/* Description */}
                    <div style={{ gridColumn: 'span 1' }} className="md:col-span-2">
                      <Label htmlFor="description">Deskripsi / Tentang Saya</Label>
                      <Textarea
                        id="description"
                        value={biodata.description}
                        onChange={(e) => updateBiodata('description', e.target.value)}
                        placeholder="Tuliskan deskripsi singkat tentang diri Anda..."
                        style={{ marginTop: '0.25rem', minHeight: '6rem' }}
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Education Section */}
              <Card>
                <CardHeader style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                  <CardTitle style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1.125rem' }}>
                    <GraduationCap style={{ height: '1.25rem', width: '1.25rem', color: TEAL_COLOR }} />
                    Pendidikan
                  </CardTitle>
                  <Button size="sm" variant="outline" onClick={addEducation}>
                    <Plus style={{ height: '1rem', width: '1rem', marginRight: '0.25rem' }} />
                    Tambah
                  </Button>
                </CardHeader>
                <CardContent>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                    {educations.map((edu, index) => (
                      <div key={edu.id} style={{ padding: '1rem', backgroundColor: GRAY_50, borderRadius: '0.5rem', border: `1px solid ${GRAY_200}` }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
                          <span style={{ fontSize: '0.875rem', fontWeight: 500, color: GRAY_500 }}>Pendidikan {index + 1}</span>
                          {educations.length > 1 && (
                            <Button
                              size="sm"
                              variant="ghost"
                              style={{ color: '#ef4444' }}
                              onClick={() => removeEducation(edu.id)}
                            >
                              <Trash2 style={{ height: '1rem', width: '1rem' }} />
                            </Button>
                          )}
                        </div>
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(1, 1fr)', gap: '0.75rem' }} className="md:grid-cols-2">
                          <div>
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Gelar</Label>
                            <Input
                              value={edu.degree}
                              onChange={(e) => updateEducation(edu.id, 'degree', e.target.value)}
                              placeholder="S1, D3, SMA"
                              style={{ marginTop: '0.25rem' }}
                            />
                          </div>
                          <div>
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Instansi</Label>
                            <Input
                              value={edu.institution}
                              onChange={(e) => updateEducation(edu.id, 'institution', e.target.value)}
                              placeholder="Nama Universitas/Sekolah"
                              style={{ marginTop: '0.25rem' }}
                            />
                          </div>
                          <div>
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Jurusan</Label>
                            <Input
                              value={edu.major}
                              onChange={(e) => updateEducation(edu.id, 'major', e.target.value)}
                              placeholder="Teknik Informatika"
                              style={{ marginTop: '0.25rem' }}
                            />
                          </div>
                          <div>
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Nilai Akhir (IPK/Nem)</Label>
                            <Input
                              value={edu.gpa}
                              onChange={(e) => updateEducation(edu.id, 'gpa', e.target.value)}
                              placeholder="3.50"
                              style={{ marginTop: '0.25rem' }}
                            />
                          </div>
                          <div>
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Mulai</Label>
                            <Input
                              type="date"
                              value={edu.startDate}
                              onChange={(e) => updateEducation(edu.id, 'startDate', e.target.value)}
                              style={{ marginTop: '0.25rem' }}
                            />
                          </div>
                          <div>
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Selesai</Label>
                            <Input
                              type="date"
                              value={edu.endDate}
                              onChange={(e) => updateEducation(edu.id, 'endDate', e.target.value)}
                              style={{ marginTop: '0.25rem' }}
                            />
                          </div>
                          <div style={{ gridColumn: 'span 1' }} className="md:col-span-2">
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Deskripsi</Label>
                            <Textarea
                              value={edu.description}
                              onChange={(e) => updateEducation(edu.id, 'description', e.target.value)}
                              placeholder="Aktivitas, prestasi, atau informasi tambahan..."
                              style={{ marginTop: '0.25rem', minHeight: '4rem' }}
                            />
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

              {/* Work Experience Section */}
              <Card>
                <CardHeader style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                  <CardTitle style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1.125rem' }}>
                    <Briefcase style={{ height: '1.25rem', width: '1.25rem', color: TEAL_COLOR }} />
                    Pengalaman Kerja
                  </CardTitle>
                  <Button size="sm" variant="outline" onClick={addExperience}>
                    <Plus style={{ height: '1rem', width: '1rem', marginRight: '0.25rem' }} />
                    Tambah
                  </Button>
                </CardHeader>
                <CardContent>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                    {experiences.map((exp, index) => (
                      <div key={exp.id} style={{ padding: '1rem', backgroundColor: GRAY_50, borderRadius: '0.5rem', border: `1px solid ${GRAY_200}` }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
                          <span style={{ fontSize: '0.875rem', fontWeight: 500, color: GRAY_500 }}>Pengalaman {index + 1}</span>
                          {experiences.length > 1 && (
                            <Button
                              size="sm"
                              variant="ghost"
                              style={{ color: '#ef4444' }}
                              onClick={() => removeExperience(exp.id)}
                            >
                              <Trash2 style={{ height: '1rem', width: '1rem' }} />
                            </Button>
                          )}
                        </div>
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(1, 1fr)', gap: '0.75rem' }} className="md:grid-cols-2">
                          <div>
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Posisi</Label>
                            <Input
                              value={exp.position}
                              onChange={(e) => updateExperience(exp.id, 'position', e.target.value)}
                              placeholder="Software Engineer"
                              style={{ marginTop: '0.25rem' }}
                            />
                          </div>
                          <div>
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Nama Perusahaan</Label>
                            <Input
                              value={exp.company}
                              onChange={(e) => updateExperience(exp.id, 'company', e.target.value)}
                              placeholder="PT. Contoh Perusahaan"
                              style={{ marginTop: '0.25rem' }}
                            />
                          </div>
                          <div>
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Mulai</Label>
                            <Input
                              type="date"
                              value={exp.startDate}
                              onChange={(e) => updateExperience(exp.id, 'startDate', e.target.value)}
                              style={{ marginTop: '0.25rem' }}
                            />
                          </div>
                          <div>
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Selesai</Label>
                            <Input
                              type="date"
                              value={exp.endDate}
                              onChange={(e) => updateExperience(exp.id, 'endDate', e.target.value)}
                              style={{ marginTop: '0.25rem' }}
                            />
                          </div>
                          <div style={{ gridColumn: 'span 1' }} className="md:col-span-2">
                            <Label style={{ fontSize: '0.75rem', color: GRAY_500 }}>Jobdesk</Label>
                            <Textarea
                              value={exp.jobdesk}
                              onChange={(e) => updateExperience(exp.id, 'jobdesk', e.target.value)}
                              placeholder="Deskripsi tugas dan tanggung jawab..."
                              style={{ marginTop: '0.25rem', minHeight: '4rem' }}
                            />
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* Right: Preview */}
            <div style={{ position: 'sticky', top: '5rem', alignSelf: 'start' }}>
              <Card style={{ borderWidth: '2px', borderColor: GRAY_200 }}>
                <CardHeader style={{ backgroundColor: GRAY_100 }}>
                  <CardTitle style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1.125rem' }}>
                    <FileText style={{ height: '1.25rem', width: '1.25rem' }} />
                    Preview CV
                  </CardTitle>
                </CardHeader>
                <CardContent style={{ padding: 0 }}>
                  {/* CV Preview - Using inline styles with hex colors */}
                  <div 
                    ref={printRef}
                    style={{ 
                      backgroundColor: WHITE, 
                      height: '297mm',
                      fontSize: '0.75rem',
                      width: '210mm', 
                      maxWidth: '100%', 
                      margin: '0 auto',
                      fontFamily: 'Arial, sans-serif',
                      display: 'flex',
                      flexDirection: 'column'
                    }}
                  >
                    {/* Main Content Area */}
                    <div style={{ display: 'flex', flex: 1 }}>
                      {/* Left Sidebar */}
                      <div style={{ 
                        width: '35%', 
                        backgroundColor: TEAL_COLOR, 
                        color: WHITE,
                        padding: '1rem'
                      }}>
                        {/* Photo */}
                        <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
                          {biodata.photo ? (
                            <div style={{ 
                              width: '5rem', 
                              height: '5rem', 
                              borderRadius: '50%', 
                              overflow: 'hidden',
                              margin: '0 auto',
                              border: `2px solid ${WHITE}`
                            }}>
                              <img src={biodata.photo} alt="Photo" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                            </div>
                          ) : (
                            <div style={{ 
                              width: '5rem', 
                              height: '5rem', 
                              borderRadius: '50%', 
                              backgroundColor: 'rgba(255,255,255,0.2)',
                              margin: '0 auto',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center'
                            }}>
                              <User style={{ width: '2.5rem', height: '2.5rem', opacity: 0.5 }} />
                            </div>
                          )}
                        </div>

                        {/* Name */}
                        <h1 style={{ fontSize: '1rem', fontWeight: 'bold', textAlign: 'center', marginBottom: '1rem' }}>
                          {biodata.fullName || 'Nama Lengkap'}
                        </h1>

                        {/* Contact Info */}
                        <div style={{ marginBottom: '1rem' }}>
                          <h2 style={{ fontSize: '0.65rem', fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.5rem', borderBottom: `1px solid rgba(255,255,255,0.3)`, paddingBottom: '0.25rem' }}>
                            Kontak
                          </h2>
                          {biodata.phone && (
                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', marginBottom: '0.35rem', fontSize: '0.6rem' }}>
                              <Phone style={{ width: '0.6rem', height: '0.6rem', flexShrink: 0 }} />
                              <span>{biodata.phone}</span>
                            </div>
                          )}
                          {biodata.email && (
                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', marginBottom: '0.35rem', fontSize: '0.6rem' }}>
                              <Mail style={{ width: '0.6rem', height: '0.6rem', flexShrink: 0 }} />
                              <span style={{ wordBreak: 'break-all' }}>{biodata.email}</span>
                            </div>
                          )}
                          {(biodata.address || biodata.postalCode) && (
                            <div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.25rem', marginBottom: '0.35rem', fontSize: '0.6rem' }}>
                              <MapPin style={{ width: '0.6rem', height: '0.6rem', flexShrink: 0, marginTop: '0.1rem' }} />
                              <span>{biodata.address}{biodata.postalCode ? `, ${biodata.postalCode}` : ''}</span>
                            </div>
                          )}
                          {biodata.website && (
                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', marginBottom: '0.35rem', fontSize: '0.6rem' }}>
                              <Globe style={{ width: '0.6rem', height: '0.6rem', flexShrink: 0 }} />
                              <span style={{ wordBreak: 'break-all' }}>{biodata.website}</span>
                            </div>
                          )}
                          {biodata.linkedin && (
                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', marginBottom: '0.35rem', fontSize: '0.6rem' }}>
                              <Linkedin style={{ width: '0.6rem', height: '0.6rem', flexShrink: 0 }} />
                              <span style={{ wordBreak: 'break-all' }}>{biodata.linkedin}</span>
                            </div>
                          )}
                          {biodata.instagram && (
                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', marginBottom: '0.35rem', fontSize: '0.6rem' }}>
                              <Instagram style={{ width: '0.6rem', height: '0.6rem', flexShrink: 0 }} />
                              <span>{biodata.instagram}</span>
                            </div>
                          )}
                        </div>

                        {/* Personal Info */}
                        <div style={{ marginBottom: '1rem' }}>
                          <h2 style={{ fontSize: '0.65rem', fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.5rem', borderBottom: `1px solid rgba(255,255,255,0.3)`, paddingBottom: '0.25rem' }}>
                            Pribadi
                          </h2>
                          {biodata.gender && (
                            <div style={{ marginBottom: '0.35rem', fontSize: '0.6rem' }}>
                              <span style={{ opacity: 0.8 }}>Jenis Kelamin:</span><br />
                              <span>{biodata.gender}</span>
                            </div>
                          )}
                          {(biodata.birthPlace || biodata.birthDate) && (
                            <div style={{ marginBottom: '0.35rem', fontSize: '0.6rem' }}>
                              <span style={{ opacity: 0.8 }}>TTL:</span><br />
                              <span>{biodata.birthPlace}{biodata.birthDate ? `, ${formatDate(biodata.birthDate)}` : ''}</span>
                            </div>
                          )}
                          {biodata.maritalStatus && (
                            <div style={{ marginBottom: '0.35rem', fontSize: '0.6rem' }}>
                              <span style={{ opacity: 0.8 }}>Status:</span><br />
                              <span>{biodata.maritalStatus}</span>
                            </div>
                          )}
                          {biodata.nationality && (
                            <div style={{ marginBottom: '0.35rem', fontSize: '0.6rem' }}>
                              <span style={{ opacity: 0.8 }}>Kebangsaan:</span><br />
                              <span>{biodata.nationality}</span>
                            </div>
                          )}
                        </div>
                      </div>

                      {/* Right Content */}
                      <div style={{ 
                        width: '65%', 
                        padding: '1rem',
                        backgroundColor: WHITE
                      }}>
                        {/* About Me */}
                        {biodata.description && (
                          <div style={{ marginBottom: '1rem' }}>
                            <h2 style={{ 
                              fontSize: '0.75rem', 
                              fontWeight: 'bold', 
                              color: TEAL_COLOR, 
                              marginBottom: '0.5rem',
                              textTransform: 'uppercase',
                              letterSpacing: '0.05em',
                              borderBottom: `2px solid ${TEAL_COLOR}`,
                              paddingBottom: '0.25rem'
                            }}>
                              Tentang Saya
                            </h2>
                            <p style={{ color: GRAY_600, lineHeight: 1.5, fontSize: '0.65rem' }}>
                              {biodata.description}
                            </p>
                          </div>
                        )}

                        {/* Work Experience */}
                        <div style={{ marginBottom: '1rem' }}>
                          <h2 style={{ 
                            fontSize: '0.75rem', 
                            fontWeight: 'bold', 
                            color: TEAL_COLOR, 
                            marginBottom: '0.5rem',
                            textTransform: 'uppercase',
                            letterSpacing: '0.05em',
                            borderBottom: `2px solid ${TEAL_COLOR}`,
                            paddingBottom: '0.25rem'
                          }}>
                            Pengalaman Kerja
                          </h2>
                          {experiences.filter(e => e.position || e.company).map((exp, idx) => (
                            <div key={idx} style={{ marginBottom: '0.75rem' }}>
                              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.15rem' }}>
                                <h3 style={{ fontWeight: 600, color: GRAY_900, fontSize: '0.7rem' }}>{exp.position || 'Posisi'}</h3>
                                <span style={{ fontSize: '0.55rem', color: GRAY_500, whiteSpace: 'nowrap', marginLeft: '0.5rem' }}>
                                  {exp.startDate && formatDate(exp.startDate)} - {exp.endDate ? formatDate(exp.endDate) : 'Sekarang'}
                                </span>
                              </div>
                              <p style={{ color: TEAL_COLOR, fontSize: '0.6rem', marginBottom: '0.15rem' }}>{exp.company || 'Nama Perusahaan'}</p>
                              {exp.jobdesk && (
                                <p style={{ color: GRAY_600, fontSize: '0.6rem', lineHeight: 1.4 }}>{exp.jobdesk}</p>
                              )}
                            </div>
                          ))}
                          {experiences.every(e => !e.position && !e.company) && (
                            <p style={{ color: GRAY_400, fontStyle: 'italic', fontSize: '0.65rem' }}>Belum ada pengalaman kerja</p>
                          )}
                        </div>

                        {/* Education Details */}
                        <div>
                          <h2 style={{ 
                            fontSize: '0.75rem', 
                            fontWeight: 'bold', 
                            color: TEAL_COLOR, 
                            marginBottom: '0.5rem',
                            textTransform: 'uppercase',
                            letterSpacing: '0.05em',
                            borderBottom: `2px solid ${TEAL_COLOR}`,
                            paddingBottom: '0.25rem'
                          }}>
                            Detail Pendidikan
                          </h2>
                          {educations.filter(e => e.institution || e.degree).map((edu, idx) => (
                            <div key={idx} style={{ marginBottom: '0.5rem' }}>
                              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.15rem' }}>
                                <h3 style={{ fontWeight: 600, color: GRAY_900, fontSize: '0.7rem' }}>{edu.degree || 'Gelar'} - {edu.major || 'Jurusan'}</h3>
                                <span style={{ fontSize: '0.55rem', color: GRAY_500, whiteSpace: 'nowrap', marginLeft: '0.5rem' }}>
                                  {edu.startDate && formatDate(edu.startDate)} - {edu.endDate ? formatDate(edu.endDate) : 'Sekarang'}
                                </span>
                              </div>
                              <p style={{ color: TEAL_COLOR, fontSize: '0.6rem', marginBottom: '0.1rem' }}>{edu.institution || 'Instansi'}</p>
                              {edu.gpa && <p style={{ color: GRAY_500, fontSize: '0.55rem' }}>IPK/NEM: {edu.gpa}</p>}
                              {edu.description && (
                                <p style={{ color: GRAY_600, fontSize: '0.6rem', lineHeight: 1.4, marginTop: '0.1rem' }}>{edu.description}</p>
                              )}
                            </div>
                          ))}
                          {educations.every(e => !e.institution && !e.degree) && (
                            <p style={{ color: GRAY_400, fontStyle: 'italic', fontSize: '0.65rem' }}>Belum ada pendidikan</p>
                          )}
                        </div>
                      </div>
                    </div>

                    {/* Footer - Full Width at Bottom Center */}
                    <div style={{ 
                      padding: '0.75rem', 
                      borderTop: `1px solid ${GRAY_200}`, 
                      textAlign: 'center',
                      backgroundColor: WHITE
                    }}>
                      <p style={{ color: GRAY_400, fontSize: '0.6rem' }}>
                        Dokumen ini dibuat menggunakan AdminKilat.com
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </main>

      {/* Toast notification */}
      {toastMessage && (
        <div style={{
          position: 'fixed',
          bottom: '1rem',
          right: '1rem',
          padding: '0.75rem 1rem',
          backgroundColor: toastMessage.includes('berhasil') ? TEAL_COLOR : '#ef4444',
          color: WHITE,
          borderRadius: '0.5rem',
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
          zIndex: 50
        }}>
          {toastMessage}
        </div>
      )}
    </div>
  )
}