"use client";

import { Mail, Send, X } from "lucide-react";
import { Button } from "../ui/button";

interface TicketReplyConfirmationModalProps {
  isOpen: boolean;
  recipientEmail: string;
  recipientName: string;
  messageBody: string;
  onConfirm: () => void;
  onCancel: () => void;
  isLoading?: boolean;
}

export function TicketReplyConfirmationModal({ 
  isOpen, 
  recipientEmail,
  recipientName,
  messageBody,
  onConfirm,
  onCancel,
  isLoading = false
}: TicketReplyConfirmationModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
      <div className="bg-white rounded-2xl max-w-2xl w-full mx-4 shadow-2xl border max-h-[90vh] flex flex-col">
        <div className="p-6 flex-1 overflow-y-auto">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
              <Mail className="w-5 h-5 text-blue-600" />
            </div>
            <h2 className="text-lg font-semibold text-slate-900">Confirmation d'envoi</h2>
          </div>
          
          <div className="space-y-4 mb-6">
            <div className="rounded-lg border bg-slate-50 p-4">
              <div className="text-sm text-slate-500 mb-1">Destinataire</div>
              <div className="font-medium text-slate-900">{recipientName}</div>
              <div className="text-sm text-slate-600 flex items-center gap-2 mt-1">
                <Mail className="w-4 h-4" />
                {recipientEmail}
              </div>
            </div>

            <div className="rounded-lg border bg-white p-4">
              <div className="text-sm text-slate-500 mb-2">Votre message</div>
              <div className="text-sm text-slate-900 whitespace-pre-wrap bg-slate-50 p-3 rounded border max-h-[200px] overflow-y-auto">
                {messageBody}
              </div>
            </div>

            <div className="rounded-lg border border-blue-200 bg-blue-50 p-3">
              <div className="text-sm text-blue-900">
                <strong>Note :</strong> Un email sera envoyé à l'adresse personnelle de l'utilisateur avec votre réponse.
              </div>
            </div>
          </div>
        </div>
        
        <div className="border-t p-4 bg-slate-50 rounded-b-2xl">
          <div className="flex gap-3">
            <Button 
              variant="outline" 
              onClick={onCancel}
              className="flex-1"
              disabled={isLoading}
            >
              <X className="w-4 h-4 mr-2" />
              Annuler
            </Button>
            <Button 
              onClick={onConfirm}
              className="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white"
              disabled={isLoading}
            >
              <Send className="w-4 h-4 mr-2" />
              {isLoading ? "Envoi en cours..." : "Envoyer la réponse"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
