/**
 * EmailTemplates Page
 * 
 * Thin orchestrator that composes the email template management UI.
 * All business logic lives in useEmailTemplates hook.
 */
import React from 'react';
import {
    Mail, Plus, Search, Edit, Trash2, Copy,
    Eye, FileText, Calendar, User, X, Save, Lock
} from 'lucide-react';
import { Button } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { ConfirmationModal } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { isPackOwnedEmailTemplate, useEmailTemplates } from '../features/email-templates/hooks/useEmailTemplates';
import { formatDate } from '../core/utils/formatting';
import DOMPurify from 'dompurify';
import { SearchableSelect } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';

const EmailTemplates: React.FC = () => {
    const {
        searchQuery, setSearchQuery,
        selectedFolderId, setSelectedFolderId,
        isEditorOpen, setIsEditorOpen,
        editingTemplate,
        previewTemplate, setPreviewTemplate,
        templateToDelete, setTemplateToDelete,
        formData, setFormData,
        isLoading, folders,
        filteredTemplates,
        handleCreate, handleEdit, handleSave,
        handleDelete, handleDuplicate,
    } = useEmailTemplates();

    if (isLoading) {
        return (
            <div className="flex h-96 items-center justify-center">
                <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
            </div>
        );
    }

    return (
        <div className="p-6 max-w-7xl mx-auto">
            {/* Header */}
            <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                    <div className="p-2 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl shadow-lg">
                        <Mail className="w-6 h-6 text-white" />
                    </div>
                    <div>
                        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Email Templates</h1>
                        <p className="text-sm text-gray-500 dark:text-gray-400">
                            Manage reusable email templates for your communications
                        </p>
                    </div>
                </div>
                <Button variant="primary" onClick={handleCreate}>
                    <Plus size={18} className="mr-1" />
                    New Template
                </Button>
            </div>

            {/* Filters */}
            <div className="flex gap-4 mb-6">
                <div className="relative flex-1 max-w-md">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
                    <input
                        type="text"
                        placeholder="Search templates..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="w-full pl-10 pr-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                </div>
                <div className="flex gap-1 bg-slate-100 p-1 rounded-lg">
                    <button
                        onClick={() => setSelectedFolderId('All')}
                        className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${selectedFolderId === 'All'
                            ? 'bg-white text-slate-900 shadow-sm'
                            : 'text-slate-600 hover:text-slate-900'
                            }`}
                    >
                        All
                    </button>
                    {folders.map(folder => (
                        <button
                            key={folder.Id}
                            onClick={() => setSelectedFolderId(folder.Id)}
                            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${selectedFolderId === folder.Id
                                ? 'bg-white text-slate-900 shadow-sm'
                                : 'text-slate-600 hover:text-slate-900'
                                }`}
                        >
                            {folder.Name}
                        </button>
                    ))}
                </div>
            </div>

            {/* Templates Grid */}
            {filteredTemplates.length === 0 ? (
                <div className="py-12 text-center bg-white rounded-xl border border-slate-200">
                    <FileText className="w-12 h-12 text-slate-300 mx-auto mb-3" />
                    <p className="text-slate-500 font-medium">No templates found</p>
                    <p className="text-sm text-slate-400 mt-1">Try adjusting your search or create a new template</p>
                </div>
            ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {filteredTemplates.map(template => {
                        const isPackOwned = isPackOwnedEmailTemplate(template);

                        return (
                            <div
                                key={template.Id}
                                className="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow"
                            >
                                <div className="p-4">
                                    <div className="flex items-start justify-between mb-2">
                                        <div className="flex-1 min-w-0">
                                            <h3 className="font-semibold text-slate-900 truncate">{template.Name}</h3>
                                            <div className="flex items-center gap-2 mt-1">
                                                <span className="text-xs px-2 py-0.5 bg-slate-100 text-slate-600 rounded-full">
                                                    {template.Folder?.Name || template.FolderId || 'Unfiled'}
                                                </span>
                                                {template.IsActive && (
                                                    <span className="text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded-full">
                                                        Active
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                    </div>

                                    <p className="text-sm text-slate-600 line-clamp-2 mb-3">{template.Subject}</p>

                                    {template.Description && (
                                        <p className="text-xs text-slate-500 line-clamp-1 mb-3">{template.Description}</p>
                                    )}

                                    <div className="flex items-center text-xs text-slate-400 gap-3">
                                        <div className="flex items-center gap-1">
                                            <Calendar size={12} />
                                            {formatDate(template.LastModifiedDate)}
                                        </div>
                                        <div className="flex items-center gap-1">
                                            <User size={12} />
                                            {template.CreatedBy?.Name || 'Unknown User'}
                                        </div>
                                    </div>
                                </div>

                                <div className="px-4 py-2 bg-slate-50 border-t border-slate-100 flex justify-end gap-1">
                                    <button onClick={() => setPreviewTemplate(template)} className="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors" title="Preview">
                                        <Eye size={16} />
                                    </button>
                                    <button onClick={() => handleDuplicate(template)} className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded transition-colors" title="Duplicate">
                                        <Copy size={16} />
                                    </button>
                                    {isPackOwned ? (
                                        <span className="p-1.5 text-slate-300 rounded" title="Managed by installed pack">
                                            <Lock size={16} />
                                        </span>
                                    ) : (
                                        <>
                                            <button onClick={() => handleEdit(template)} className="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors" title="Edit">
                                                <Edit size={16} />
                                            </button>
                                            <button type="button" onClick={() => setTemplateToDelete(template)} className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors" title="Delete">
                                                <Trash2 size={16} />
                                            </button>
                                        </>
                                    )}
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}

            {/* Template Editor Modal */}
            {isEditorOpen && (
                <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-[100] p-4">
                    <div className="bg-white rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
                        <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
                            <h2 className="text-lg font-semibold text-slate-900">
                                {editingTemplate ? 'Edit Template' : 'Create Template'}
                            </h2>
                            <button onClick={() => setIsEditorOpen(false)} className="p-2 text-slate-400 hover:text-slate-600 rounded-lg hover:bg-slate-100">
                                <X size={20} />
                            </button>
                        </div>

                        <div className="p-6 overflow-y-auto flex-1 space-y-4">
                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-sm font-medium text-slate-700 mb-1">Template Name *</label>
                                    <input
                                        type="text"
                                        value={formData.name}
                                        onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
                                        className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        placeholder="e.g., Welcome Email"
                                    />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-slate-700 mb-1">Folder</label>
                                    <SearchableSelect
                                        options={folders.map(folder => ({ value: folder.Id, label: folder.Name, detail: folder.Id }))}
                                        value={formData.folderId}
                                        onChange={(v) => setFormData(prev => ({ ...prev, folderId: v }))}
                                        placeholder="Select a folder..."
                                    />
                                </div>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">Subject Line *</label>
                                <input
                                    type="text"
                                    value={formData.subject}
                                    onChange={(e) => setFormData(prev => ({ ...prev, subject: e.target.value }))}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="Use {{Record.Name}} for merge fields"
                                />
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">Description</label>
                                <input
                                    type="text"
                                    value={formData.description}
                                    onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="Brief description of when to use this template"
                                />
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">Email Body (HTML)</label>
                                <textarea
                                    value={formData.htmlBody}
                                    onChange={(e) => setFormData(prev => ({ ...prev, htmlBody: e.target.value }))}
                                    rows={10}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
                                    placeholder="<p>Dear {{Record.Name}},</p>&#10;&#10;<p>Your email content here...</p>"
                                />
                            </div>

                            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                                <p className="text-sm text-blue-800">
                                    <strong>Tip:</strong> Use merge fields like <code className="bg-blue-100 px-1 rounded">{'{{Record.Name}}'}</code> or <code className="bg-blue-100 px-1 rounded">{'{{User.Email}}'}</code> to personalize your emails.
                                </p>
                            </div>
                        </div>

                        <div className="px-6 py-4 border-t border-slate-200 flex justify-end gap-3">
                            <Button variant="secondary" onClick={() => setIsEditorOpen(false)}>Cancel</Button>
                            <Button variant="primary" onClick={handleSave}>
                                <Save size={16} className="mr-1" />
                                Save Template
                            </Button>
                        </div>
                    </div>
                </div>
            )}

            {/* Preview Modal */}
            {previewTemplate && (
                <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-[100] p-4">
                    <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
                        <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
                            <div>
                                <h2 className="text-lg font-semibold text-slate-900">{previewTemplate.Name}</h2>
                                <p className="text-sm text-slate-500">{previewTemplate.Subject}</p>
                            </div>
                            <button onClick={() => setPreviewTemplate(null)} className="p-2 text-slate-400 hover:text-slate-600 rounded-lg hover:bg-slate-100">
                                <X size={20} />
                            </button>
                        </div>
                        <div className="p-6 overflow-y-auto flex-1">
                            <div
                                className="prose prose-sm max-w-none"
                                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(previewTemplate.HtmlValue || '') }}
                            />
                        </div>
                    </div>
                </div>
            )}

            {/* Delete Confirmation */}
            <ConfirmationModal
                isOpen={!!templateToDelete}
                onClose={() => setTemplateToDelete(null)}
                onConfirm={handleDelete}
                title="Delete Template"
                message={`Are you sure you want to delete "${templateToDelete?.Name}"? This action cannot be undone.`}
                confirmLabel="Delete"
                cancelLabel="Cancel"
                variant="danger"
            />
        </div>
    );
};

export default EmailTemplates;