"use client";

import { useEffect } from "react";
import { createPortal } from "react-dom";
import { Briefcase, Check, FileText, Lock, Mail, MapPin, Phone, X } from "lucide-react";
import clsx from "clsx";
import { Avatar } from "./Avatar";
import type { Job, JobApplication } from "@/lib/types";

/**
 * The applications, in a window of their own.
 *
 * They were down the side of the advert before, which put someone's name,
 * phone number and CV on screen the moment the page loaded — in a coffee
 * shop, on a shared desk, over a shoulder. An application is between two
 * people. It stays shut until whoever posted the job asks to see it.
 */
export function JobApplicationsModal({
  job,
  applications,
  onDecide,
  onClose,
}: {
  job: Job;
  applications: JobApplication[];
  onDecide: (application: JobApplication, status: string) => void;
  onClose: () => void;
}) {
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return createPortal(
    <div className="nm-back" onClick={onClose}>
      <div className="jb-modal" onClick={(e) => e.stopPropagation()}>
        <header className="jb-mhead">
          <h2 className="jb-mtitle">
            <Lock size={16} /> Applications
            <span className="jb-pill">{applications.length}</span>
          </h2>
          <button className="jb-mx" onClick={onClose} aria-label="Close">
            <X size={18} />
          </button>
        </header>

        <div className="jb-mbody">
          {applications.length === 0 ? (
            <p className="jb-empty small">Nobody has applied yet.</p>
          ) : (
            <ul className="jb-apps">
              {applications.map((a) => (
                <li key={a.id} className={clsx("jb-app", a.status)}>
                  <div className="jb-apphead">
                    <Avatar user={a.applicant} size={34} />
                    <div>
                      <strong>{a.name}</strong>
                      <span className="jb-appwhen">
                        {new Date(a.createdAt).toLocaleDateString(undefined, {
                          day: "numeric",
                          month: "short",
                          year: "numeric",
                        })}
                      </span>
                    </div>
                    <span className={clsx("jb-status", a.status)}>{a.status}</span>
                  </div>

                  <div className="jb-appcontact">
                    <a href={`mailto:${a.email}`}>
                      <Mail size={13} /> {a.email}
                    </a>
                    {a.phone && (
                      <span>
                        <Phone size={13} /> {a.phone}
                      </span>
                    )}
                    {a.location && (
                      <span>
                        <MapPin size={13} /> {a.location}
                      </span>
                    )}
                  </div>

                  {a.workPosition && (
                    <p className="jb-appwork">
                      <Briefcase size={13} /> {a.workPosition}
                      {a.workPlace ? ` at ${a.workPlace}` : ""}
                      {a.workNow ? " — currently" : a.workTo ? ` — to ${a.workTo}` : ""}
                    </p>
                  )}

                  {(a.answers ?? []).map((answer, i) =>
                    answer ? (
                      <p key={i} className="jb-answer">
                        <span>{job.questions?.[i]?.title}</span>
                        {answer}
                      </p>
                    ) : null
                  )}

                  {a.cvUrl && (
                    <a className="jb-cv" href={a.cvUrl} download={`${a.name}-cv`}>
                      <FileText size={13} /> Download CV
                    </a>
                  )}

                  <div className="jb-appacts">
                    <button
                      className="jb-ghost ok"
                      onClick={() => onDecide(a, "shortlisted")}
                      disabled={a.status === "shortlisted"}
                    >
                      <Check size={13} /> Shortlist
                    </button>
                    <button
                      className="jb-ghost"
                      onClick={() => onDecide(a, "declined")}
                      disabled={a.status === "declined"}
                    >
                      <X size={13} /> Decline
                    </button>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>,
    document.body
  );
}