import React from 'react';
import { CheckCircle2 } from 'lucide-react';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../../components/ui/dialog';

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  finishing: boolean;
  onConfirm: () => void;
}

// The confirmation between a misclick and ending a live visit for everyone in it, shared by the
// encounter workspace and the queue so both ask the same question in the same words.
export const LiveFinishConfirmDialog: React.FC<Props> = ({ open, onOpenChange, finishing, onConfirm }) => (
  <Dialog open={open} onOpenChange={onOpenChange}>
    <DialogContent aria-describedby={undefined}>
      <DialogHeader>
        <DialogTitle>End the video visit and finish this encounter?</DialogTitle>
      </DialogHeader>

      <div className="space-y-3 text-sm">
        {/* Names what happens to the OTHER people, because that is the part a misclick costs and the
            part the person clicking cannot see. */}
        <p>The call is still running. Finishing ends it for everyone — the patient and anyone else in
          the visit are disconnected immediately.</p>
        {/* States the ONE thing the grace window does not cover, so the reassurance a practitioner
            may have picked up from a crash-and-rejoin does not get applied here by mistake. */}
        <p>They will not be able to rejoin: the 10-minute rejoin window only covers a call that dropped,
          not one that was ended.</p>
      </div>

      <DialogFooter>
        <button
          type="button"
          className={`btn btn-blue${finishing ? ' btn-busy' : ''}`}
          disabled={finishing}
          onClick={onConfirm}
        >
          <CheckCircle2 className="w-4 h-4" />End and finish
        </button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
);