// src/app/(public)/resume/preview/[id]/page.tsx
'use client'

import { useState, useEffect } from 'react'
import { useParams } from 'next/navigation'
import { useSession } from 'next-auth/react'
import { Spinner } from '@/components/ui/Spinner'
import { Button } from '@/components/ui/Button'
import { ResumePreview } from '@/components/resume/ResumePreview'
import type { ResumeData } from '@/types'

export default function ResumePreviewPage() {
  const params = useParams<{ id: string }>()
  const { data: session, status } = useSession()
  const [resume, setResume] = useState<ResumeData | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  useEffect(() => {
    if (status === 'loading') return
    fetch(`/api/resume/${params.id}`)
      .then((r) => {
        if (!r.ok) { setError('Resume not found.'); return null }
        return r.json()
      })
      .then((d) => { if (d?.resume) setResume(d.resume) })
      .finally(() => setLoading(false))
  }, [params.id, status])

  function handleEmail() {
    if (!resume) return
    const subject = encodeURIComponent(`My Resume — ${resume.fullName}`)
    const body = encodeURIComponent(
      `Hi,\n\nI am sharing my resume with you.\n\nTo get the PDF version, please open the Motif resume builder and use the "Download PDF" button.\n\nBest regards,\n${resume.fullName}`
    )
    window.location.href = `mailto:?subject=${subject}&body=${body}`
  }

  if (loading || status === 'loading') return (
    <div className="min-h-screen flex items-center justify-center"><Spinner size="lg" /></div>
  )

  if (error || !resume) return (
    <div className="min-h-screen flex items-center justify-center text-center px-4">
      <div>
        <h1 className="text-2xl font-bold text-neutral-800 mb-2">Resume not found</h1>
        <p className="text-neutral-500">{error || 'This resume does not exist or you do not have permission to view it.'}</p>
      </div>
    </div>
  )

  return (
    <div className="min-h-screen bg-neutral-200">
      {/* Toolbar */}
      <div className="no-print bg-white border-b border-neutral-200 px-4 py-3 flex items-center gap-3">
        <h1 className="text-sm font-bold text-neutral-900 flex-1 truncate" style={{ fontFamily: 'Space Grotesk, sans-serif' }}>
          {resume.title}
        </h1>
        <Button variant="secondary" size="sm" onClick={handleEmail}>✉ Send by Email</Button>
        <Button size="sm" onClick={() => window.print()}>🖨 Download PDF</Button>
      </div>

      {/* Resume */}
      <div className="flex items-start justify-center p-8">
        <div className="shadow-2xl">
          <ResumePreview data={resume} />
        </div>
      </div>
    </div>
  )
}