'use client'

import { useState } from 'react'
import { X } from 'lucide-react'
import type { Application, ApplicationStatus, SlotStatus } from '@/lib/api/types'
import './ApplicationFormModal.css'

const STATUSES: ApplicationStatus[] = ['Active', 'Pending', 'Completed', 'Closed']
const SLOT_STATUSES: SlotStatus[] = ['Available', 'Waiting', 'No Slot', 'Expired']

interface Applicant {
  id: string
  name: string
  email: string
}

interface ApplicationFormModalProps {
  app: Application | null
  existing: Application[]
  applicants?: Applicant[]
  onSave: (data: Omit<Application, 'lastChecked' | 'response'>) => void
  onClose: () => void
}

export function ApplicationFormModal({ app, existing, applicants = [], onSave, onClose }: ApplicationFormModalProps) {
  const editing = Boolean(app)
  const [id, setId] = useState(app?.id ?? '')
  const [jobTitle, setJobTitle] = useState(app?.jobTitle ?? '')
  const [location, setLocation] = useState(app?.location ?? '')
  const [applicationDate, setApplicationDate] = useState(
    app?.applicationDate ? app.applicationDate.slice(0, 10) : ''
  )
  const [status, setStatus] = useState<ApplicationStatus>(app?.status ?? 'Active')
  const [slotStatus, setSlotStatus] = useState<SlotStatus>(app?.slotStatus ?? 'No Slot')
  const [applicantId, setApplicantId] = useState(app?.applicantId ?? '')
  const [error, setError] = useState('')

  const save = () => {
    if (!id.trim() || !jobTitle.trim() || !location.trim() || !applicationDate) {
      setError('Application ID, Role, Location and Applied date are required.')
      return
    }
    const duplicate = existing.some((a) => a.id.toLowerCase() === id.trim().toLowerCase())
    if (!editing && duplicate) {
      setError(`Application ID "${id.trim()}" already exists.`)
      return
    }
    onSave({
      id: id.trim(),
      jobTitle: jobTitle.trim(),
      location: location.trim(),
      applicationDate: new Date(applicationDate).toISOString(),
      status,
      slotStatus,
      applicantId: applicantId || undefined,
    })
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <p>{editing ? 'Update application' : 'New application'}</p>
            <h2>{editing ? `Edit ${app?.id}` : 'Add application'}</h2>
          </div>
          <button className="icon-button" onClick={onClose}>
            <X size={18} />
          </button>
        </div>
        <div className="modal-body">
          <div className="form-grid">
            <div className="field">
              <label>Application ID</label>
              <input
                value={id}
                onChange={(e) => setId(e.target.value)}
                placeholder="AMZ-1060"
                disabled={editing}
              />
              {editing && <small className="err-msg">ID can&apos;t be changed</small>}
            </div>
            <div className="field">
              <label>Role / Job title</label>
              <input
                value={jobTitle}
                onChange={(e) => setJobTitle(e.target.value)}
                placeholder="Fulfillment Associate"
              />
            </div>
            <div className="field full">
              <label>Location</label>
              <input
                value={location}
                onChange={(e) => setLocation(e.target.value)}
                placeholder="Riyadh, Saudi Arabia"
              />
            </div>
            <div className="field">
              <label>Applied date</label>
              <input
                type="date"
                value={applicationDate}
                onChange={(e) => setApplicationDate(e.target.value)}
              />
            </div>
            <div className="field">
              <label>Application status</label>
              <select value={status} onChange={(e) => setStatus(e.target.value as ApplicationStatus)}>
                {STATUSES.map((s) => (
                  <option key={s}>{s}</option>
                ))}
              </select>
            </div>
            <div className="field">
              <label>Slot status</label>
              <select
                value={slotStatus}
                onChange={(e) => setSlotStatus(e.target.value as SlotStatus)}
              >
                {SLOT_STATUSES.map((s) => (
                  <option key={s}>{s}</option>
                ))}
              </select>
            </div>
            {applicants.length > 0 && (
              <div className="field">
                <label>Linked applicant</label>
                <select
                  value={applicantId}
                  onChange={(e) => setApplicantId(e.target.value)}
                >
                  <option value="">None</option>
                  {applicants.map((a) => (
                    <option key={a.id} value={a.id}>{a.name || a.email}</option>
                  ))}
                </select>
              </div>
            )}
          </div>
          {error && <div className="err-msg">{error}</div>}
        </div>
        <div className="modal-foot">
          <button className="btn" onClick={onClose}>
            Cancel
          </button>
          <button className="btn primary" onClick={save}>
            {editing ? 'Save changes' : 'Add application'}
          </button>
        </div>
      </div>
    </div>
  )
}