'use client'

import { useState } from 'react'
import { ExternalLink, FileText, User, X } from 'lucide-react'
import './ApplicationFormModal.css'

interface Applicant {
  id: string
  name: string
  email: string
  cvName: string
  hasCv: boolean
}

interface ApplyJobModalProps {
  jobTitle: string
  location: string
  applyUrl: string
  applicants: Applicant[]
  onApply: (applicantId: string) => void
  onClose: () => void
}

export function ApplyJobModal({ jobTitle, location, applyUrl, applicants, onApply, onClose }: ApplyJobModalProps) {
  const [selectedId, setSelectedId] = useState('')
  const [error, setError] = useState('')

  const handleApply = () => {
    if (!selectedId) {
      setError('Please select an applicant.')
      return
    }
    onApply(selectedId)
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal modal-sm" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <p>Apply with applicant CV</p>
            <h2>Select applicant</h2>
          </div>
          <button className="icon-button" onClick={onClose}>
            <X size={18} />
          </button>
        </div>
        <div className="modal-body">
          <div className="apply-job-info">
            <div className="apply-job-title">{jobTitle}</div>
            <div className="apply-job-location">{location}</div>
          </div>

          {applicants.length === 0 ? (
            <div className="apply-empty">
              <User size={24} />
              <p>No applicants found. Add an applicant first from the Applicants tab.</p>
            </div>
          ) : (
            <div className="apply-applicant-list">
              {applicants.map((a) => (
                <button
                  key={a.id}
                  className={`apply-applicant-item ${selectedId === a.id ? 'selected' : ''}`}
                  onClick={() => { setSelectedId(a.id); setError('') }}
                >
                  <div className="apply-applicant-avatar">
                    {a.name.trim().charAt(0).toUpperCase() || '?'}
                  </div>
                  <div className="apply-applicant-info">
                    <b>{a.name || a.email}</b>
                    <small>{a.email}</small>
                  </div>
                  {a.hasCv && (
                    <span className="apply-applicant-cv">
                      <FileText size={13} />
                      {a.cvName || 'CV'}
                    </span>
                  )}
                </button>
              ))}
            </div>
          )}

          {error && <div className="err-msg">{error}</div>}
        </div>
        <div className="modal-foot">
          <button className="btn" onClick={onClose}>
            Cancel
          </button>
          <a
            className={`btn primary ${!selectedId ? 'disabled' : ''}`}
            href={selectedId ? applyUrl : undefined}
            target="_blank"
            rel="noreferrer"
            onClick={(e) => {
              if (!selectedId) { e.preventDefault(); return }
              handleApply()
            }}
          >
            Apply on Amazon <ExternalLink size={14} />
          </a>
        </div>
      </div>
    </div>
  )
}