/**
 * EmailNotificationTemplateModal Component
 * Modal for displaying email notification templates for automated workflow steps
 * Used for Step 4: Activity Creation and other auto-triggered steps
 */

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Mail, User, Building, Calendar, X } from 'lucide-react';

interface EmailNotificationTemplateModalProps {
  isOpen: boolean;
  onClose: () => void;
  stepNumber: number;
  stepName: string;
  requestNumber?: string;
  recipientEmail?: string;
  subject?: string;
  emailBody?: string;
}

export function EmailNotificationTemplateModal({
  isOpen,
  onClose,
  stepNumber,
  stepName,
  requestNumber = 'RE-REQ-2024-CM-101',
  recipientEmail = `system@${import.meta.env.VITE_EMAIL_DOMAIN}`,
  subject,
  emailBody,
}: EmailNotificationTemplateModalProps) {
  // Default subject if not provided
  const defaultSubject = `System Notification: Activity Created - ${requestNumber}`;
  const finalSubject = subject || defaultSubject;

  // Default email body if not provided
  const defaultEmailBody = `System Notification

Activity has been automatically created for claim ${requestNumber}.

All stakeholders have been notified.

This is an automated message.`;

  const finalEmailBody = emailBody || defaultEmailBody;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-2xl lg:max-w-[1000px] max-w-2xl">
        <DialogHeader>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                <Mail className="w-5 h-5 text-blue-600" />
              </div>
              <div>
                <DialogTitle className="text-lg leading-none font-semibold">
                  Email Notification Template
                </DialogTitle>
                <DialogDescription className="text-sm">
                  Step {stepNumber}: {stepName}
                </DialogDescription>
              </div>
            </div>
          </div>
        </DialogHeader>

        <div className="space-y-4">
          {/* Email Header Section */}
          <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-4 border border-blue-200">
            <div className="space-y-2">
              <div className="flex items-start gap-2">
                <User className="w-4 h-4 text-gray-600 mt-0.5 flex-shrink-0" />
                <div className="flex-1">
                  <p className="text-xs text-gray-600">To:</p>
                  <p className="text-sm font-medium text-gray-900">{recipientEmail}</p>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <Mail className="w-4 h-4 text-gray-600 mt-0.5 flex-shrink-0" />
                <div className="flex-1">
                  <p className="text-xs text-gray-600">Subject:</p>
                  <p className="text-sm font-semibold text-gray-900">{finalSubject}</p>
                </div>
              </div>
            </div>
          </div>

          {/* Email Body Section */}
          <div className="bg-white rounded-lg border border-gray-200 p-6">
            <div className="space-y-4">
              {/* Company Header */}
              <div className="flex items-center gap-2 pb-3 border-b border-gray-200">
                <Building className="w-5 h-5 text-purple-600" />
                <span className="font-semibold text-gray-900">Royal Enfield</span>
              </div>

              {/* Email Content */}
              <div className="prose prose-sm max-w-none">
                <pre className="whitespace-pre-wrap font-sans text-sm text-gray-700 leading-relaxed bg-transparent p-0 border-0">
                  {finalEmailBody}
                </pre>
              </div>

              {/* Footer */}
              <div className="pt-3 border-t border-gray-200">
                <div className="flex items-center gap-2 text-xs text-gray-500">
                  <Calendar className="w-3 h-3" />
                  <span>Automated email • Royal Enfield Claims Portal</span>
                </div>
              </div>
            </div>
          </div>

          {/* Badges */}
          <div className="flex items-center gap-2">
            <Badge className="bg-blue-50 text-blue-700 border-blue-200">
              Step {stepNumber}
            </Badge>
            <Badge className="bg-purple-50 text-purple-700 border-purple-200">
              Auto-triggered
            </Badge>
          </div>
        </div>

        {/* Footer */}
        <div className="flex justify-end gap-2 pt-2">
          <Button
            variant="outline"
            onClick={onClose}
            className="h-9"
          >
            <X className="w-4 h-4 mr-2" />
            Close
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}
