krow_talent_app/src/components/krow/InviteApplicantsModal.tsx

import type { JobPosting } from '@/types/entities';
import React, { useState, useMemo } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Copy, Check, Share2, Mail, Link2, Smartphone, Users } from 'lucide-react';
import { toast } from 'react-hot-toast';

interface InviteApplicantsModalProps {
  open: boolean;
  onClose?: () => void;
  job: JobPosting;
}

export default function InviteApplicantsModal({ open, onClose, job }: InviteApplicantsModalProps) {
  const [copied, setCopied] = useState(false);
  const [emailRecipients, setEmailRecipients] = useState('');
  const [sending, setSending] = useState(false);

  const shareUrl = useMemo(() => {
    if (!job?.id) return '';
    const base = window.location.origin;
    return `${base}/apply?job=${job.id}`;
  }, [job?.id]);

  const jobTitle = job?.title || 'this position';

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setCopied(true);
      toast.success('Invitation link copied!');
      setTimeout(() => setCopied(false), 2000);
    } catch {
      toast.error('Could not copy link');
    }
  };

  const handleNativeShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: `Apply: ${jobTitle} at KROW`,
          text: `You've been invited to apply for ${jobTitle}. Complete a quick 5-minute AI interview — no forms, no quizzes.`,
          url: shareUrl,
        });
      } catch { /* user cancelled */ }
    } else {
      handleCopyLink();
    }
  };

  const handleEmailInvite = () => {
    const recipients = emailRecipients.trim();
    if (!recipients) return;
    const subject = `You're invited to apply: ${jobTitle}`;
    const body = `Hi,\n\nYou've been invited to apply for ${jobTitle} at KROW.\n\nClick the link below to view the position and complete a quick 5-minute AI interview:\n\n${shareUrl}\n\nNo long forms, no quizzes — just speak naturally and get instant feedback.\n\nKROW Talent Engine`;
    const mailtoUrl = `mailto:${recipients}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    window.location.href = mailtoUrl;
    setSending(true);
    setTimeout(() => {
      setSending(false);
      toast.success('Email invitation opened');
    }, 500);
  };

  return (
    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Users className="w-5 h-5 text-[#0838E0]" />
            Invite Applicants
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-5">
          {/* Job info */}
          <div className="bg-[#F8FAFC] rounded-xl p-3 border border-[#E5E7EB]">
            <p className="text-[13px] font-semibold text-[#111827]">{jobTitle}</p>
            {job?.location && <p className="text-[12px] text-[#6B7280]">{job.location}</p>}
            {job?.pay_range_min != null && (
              <p className="text-[12px] text-[#0838E0] font-medium">${job.pay_range_min}–${job.pay_range_max}/hr</p>
            )}
          </div>

          {/* Shareable Link */}
          <div>
            <label className="text-[12px] font-medium text-[#374151] flex items-center gap-1.5 mb-2">
              <Link2 className="w-3.5 h-3.5" /> Invitation Link
            </label>
            <div className="flex items-center gap-2">
              <input
                readOnly
                value={shareUrl}
                className="flex-1 min-w-0 px-3 py-2 text-[12px] rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] text-[#6B7280] truncate"
              />
              <button
                onClick={handleCopyLink}
                className="shrink-0 inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-[#0838E0] text-white text-[12px] font-medium hover:bg-[#062BAF] transition-colors"
              >
                {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
                {copied ? 'Copied' : 'Copy'}
              </button>
            </div>
          </div>

          {/* Native Share (mobile) */}
          <button
            onClick={handleNativeShare}
            className="w-full flex items-center justify-center gap-2 py-2.5 rounded-lg border border-[#E5E7EB] text-[13px] font-medium text-[#374151] hover:bg-[#F9FAFB] transition-colors"
          >
            <Share2 className="w-4 h-4" />
            Share via...
          </button>

          {/* Email Invite */}
          <div>
            <label className="text-[12px] font-medium text-[#374151] flex items-center gap-1.5 mb-2">
              <Mail className="w-3.5 h-3.5" /> Email Invitation
            </label>
            <textarea
              value={emailRecipients}
              onChange={(e) => setEmailRecipients(e.target.value)}
              placeholder="applicant1@email.com, applicant2@email.com"
              className="w-full min-h-[48px] p-3 text-[13px] rounded-lg border border-[#E5E7EB] focus:border-[#0838E0] focus:outline-none resize-none"
            />
            <button
              onClick={handleEmailInvite}
              disabled={!emailRecipients.trim() || sending}
              className="w-full mt-2 inline-flex items-center justify-center gap-2 py-2.5 rounded-lg bg-[#0838E0] text-white text-[13px] font-medium hover:bg-[#062BAF] disabled:opacity-50 transition-colors"
            >
              <Mail className="w-4 h-4" />
              Send Email Invitations
            </button>
          </div>

          {/* Mobile app note */}
          <div className="flex items-start gap-2 p-3 bg-[#EEF3FE] rounded-lg">
            <Smartphone className="w-4 h-4 text-[#0838E0] mt-0.5 shrink-0" />
            <p className="text-[11px] text-[#374151] leading-relaxed">
              Applicants open the link on any phone — no app download needed. They see open positions and complete the AI interview right in their mobile browser.
            </p>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={onClose} className="w-full">Done</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}