/**
 * TaxiBook Partner - Minisites View
 * ===================================
 * Minisite management
 */

const MinisitesView = ({ partner, setToast }) => {
    const [minisites, setMinisites] = useState([]);
    const [loading, setLoading] = useState(true);
    const [showForm, setShowForm] = useState(false);
    const [selectedMinisite, setSelectedMinisite] = useState(null);
    const [editMode, setEditMode] = useState(false);
    const [formData, setFormData] = useState({
        name: '',
        slug: '',
        description: '',
        logo_url: '',
        color_primary: '#f97316',
        color_secondary: '#ea580c',
        color_accent: '#fbbf24',
        color_background: '#ffffff',
        font_family: 'Plus Jakarta Sans',
        welcome_message: '',
        default_pickup_address: partner?.address || ''
    });

    useEffect(() => {
        loadMinisites();
    }, []);

    const loadMinisites = async () => {
        try {
            const result = await window.partnerAPI.getMinisites();
            if (result.success) {
                setMinisites(result.data.minisites || []);
            }
        } catch (error) {
            console.error('Error loading minisites:', error);
        } finally {
            setLoading(false);
        }
    };

    const handleCreateMinisite = async () => {
        try {
            setLoading(true);
            const result = await window.partnerAPI.createMinisite(formData);
            if (result.success) {
                setToast({ message: 'Mini-site créé avec succès!', type: 'success' });
                setShowForm(false);
                setFormData({
                    name: '', slug: '', description: '', logo_url: '',
                    color_primary: '#f97316', color_secondary: '#ea580c',
                    color_accent: '#fbbf24', color_background: '#ffffff',
                    font_family: 'Plus Jakarta Sans', welcome_message: '',
                    default_pickup_address: partner?.address || ''
                });
                loadMinisites();
            } else {
                setToast({ message: result.error || 'Erreur création', type: 'error' });
            }
        } catch (error) {
            setToast({ message: 'Erreur de connexion', type: 'error' });
        } finally {
            setLoading(false);
        }
    };

    const handleUpdateMinisite = async () => {
        try {
            setLoading(true);
            const result = await window.partnerAPI.updateMinisite(selectedMinisite.uid, formData);
            if (result.success) {
                setToast({ message: 'Mini-site mis à jour!', type: 'success' });
                setEditMode(false);
                setSelectedMinisite(null);
                loadMinisites();
            } else {
                setToast({ message: result.error || 'Erreur mise à jour', type: 'error' });
            }
        } catch (error) {
            setToast({ message: 'Erreur de connexion', type: 'error' });
        } finally {
            setLoading(false);
        }
    };

    const handleDeleteMinisite = async (uid) => {
        if (!confirm('Voulez-vous vraiment supprimer ce mini-site ?')) return;
        
        try {
            const result = await window.partnerAPI.deleteMinisite(uid);
            if (result.success) {
                setToast({ message: 'Mini-site supprimé', type: 'success' });
                setSelectedMinisite(null);
                loadMinisites();
            }
        } catch (error) {
            setToast({ message: 'Erreur lors de la suppression', type: 'error' });
        }
    };

    const handlePublish = async (uid) => {
        try {
            const result = await window.partnerAPI.publishMinisite(uid);
            if (result.success) {
                setToast({ message: 'Mini-site publié!', type: 'success' });
                loadMinisites();
            }
        } catch (error) {
            setToast({ message: 'Erreur publication', type: 'error' });
        }
    };

    const handleUnpublish = async (uid) => {
        try {
            const result = await window.partnerAPI.unpublishMinisite(uid);
            if (result.success) {
                setToast({ message: 'Mini-site dépublié', type: 'info' });
                loadMinisites();
            }
        } catch (error) {
            setToast({ message: 'Erreur dépublication', type: 'error' });
        }
    };

    const handleLogoUpload = async (e) => {
        const file = e.target.files[0];
        if (!file) return;
        
        try {
            setLoading(true);
            const result = await window.partnerAPI.uploadFile(file, 'minisites/logos');
            if (result.success && result.url) {
                setFormData({ ...formData, logo_url: result.url });
                setToast({ message: 'Logo uploadé!', type: 'success' });
            } else {
                setToast({ message: 'Erreur upload logo', type: 'error' });
            }
        } catch (error) {
            setToast({ message: 'Erreur upload', type: 'error' });
        } finally {
            setLoading(false);
        }
    };

    const selectMinisiteForEdit = (minisite) => {
        setSelectedMinisite(minisite);
        setFormData({
            name: minisite.name,
            slug: minisite.slug,
            description: minisite.description || '',
            logo_url: minisite.logo_url || '',
            color_primary: minisite.color_primary || '#f97316',
            color_secondary: minisite.color_secondary || '#ea580c',
            color_accent: minisite.color_accent || '#fbbf24',
            color_background: minisite.color_background || '#ffffff',
            font_family: minisite.font_family || 'Plus Jakarta Sans',
            welcome_message: minisite.welcome_message || '',
            default_pickup_address: minisite.default_pickup_address || ''
        });
        setEditMode(true);
    };

    // Liste des mini-sites
    if (!showForm && !editMode) {
        return (
            <div className="animate-fade-in">
                <div className="flex justify-between items-center mb-6">
                    <h2 className="text-2xl font-bold text-dark-900">Mes Mini-Sites</h2>
                    <button
                        onClick={() => setShowForm(true)}
                        className="px-6 py-3 gradient-primary text-white font-semibold rounded-xl hover:opacity-90 transition flex items-center gap-2"
                    >
                        <i className="fas fa-plus"></i>
                        Nouveau Mini-Site
                    </button>
                </div>

                {loading ? (
                    <div className="flex justify-center py-12">
                        <Spinner size="lg" />
                    </div>
                ) : minisites.length === 0 ? (
                    <div className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-dark-200">
                        <div className="w-20 h-20 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i className="fas fa-globe text-3xl text-primary-500"></i>
                        </div>
                        <h3 className="text-xl font-bold text-dark-900 mb-2">Aucun mini-site</h3>
                        <p className="text-dark-500 mb-6">Créez votre premier mini-site de réservation personnalisé</p>
                        <button
                            onClick={() => setShowForm(true)}
                            className="px-6 py-3 gradient-primary text-white font-semibold rounded-xl"
                        >
                            <i className="fas fa-plus mr-2"></i>
                            Créer mon premier mini-site
                        </button>
                    </div>
                ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                        {minisites.map(minisite => (
                            <div key={minisite.uid} className="bg-white rounded-2xl border-2 border-dark-200 overflow-hidden hover:border-primary-500 transition">
                                {/* Preview Header */}
                                <div 
                                    className="h-24 flex items-center justify-center relative"
                                    style={{ backgroundColor: minisite.color_primary }}
                                >
                                    {minisite.logo_url ? (
                                        <img src={minisite.logo_url} alt={minisite.name} className="h-16 max-w-[80%] object-contain" />
                                    ) : (
                                        <span className="text-white text-2xl font-bold">{minisite.name}</span>
                                    )}
                                    <span className={`absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-semibold ${
                                        minisite.is_published ? 'bg-emerald-500 text-white' : 'bg-amber-100 text-amber-700'
                                    }`}>
                                        {minisite.is_published ? 'Publié' : 'Brouillon'}
                                    </span>
                                </div>

                                {/* Content */}
                                <div className="p-4">
                                    <h3 className="font-bold text-dark-900 mb-1">{minisite.name}</h3>
                                    <p className="text-dark-500 text-sm mb-3 truncate">{minisite.description || 'Aucune description'}</p>
                                    
                                    {/* URL */}
                                    <div className="bg-dark-50 rounded-lg p-2 mb-3">
                                        <p className="text-xs text-dark-400 mb-1">URL du site</p>
                                        <a 
                                            href={`https://partner.site.taxibook.ch/${minisite.slug}`}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="text-primary-600 text-sm font-medium hover:underline flex items-center gap-1"
                                        >
                                            <i className="fas fa-external-link-alt text-xs"></i>
                                            partner.site.taxibook.ch/{minisite.slug}
                                        </a>
                                    </div>

                                    {/* Stats */}
                                    <div className="grid grid-cols-2 gap-2 mb-4 text-center">
                                        <div className="bg-dark-50 rounded-lg p-2">
                                            <p className="text-lg font-bold text-dark-900">{minisite.total_bookings || 0}</p>
                                            <p className="text-xs text-dark-500">Réservations</p>
                                        </div>
                                        <div className="bg-dark-50 rounded-lg p-2">
                                            <p className="text-lg font-bold text-emerald-600">{(minisite.total_revenue || 0).toFixed(0)} CHF</p>
                                            <p className="text-xs text-dark-500">Revenus</p>
                                        </div>
                                    </div>

                                    {/* Colors Preview */}
                                    <div className="flex gap-1 mb-4">
                                        <div className="w-8 h-8 rounded-lg" style={{ backgroundColor: minisite.color_primary }} title="Primaire"></div>
                                        <div className="w-8 h-8 rounded-lg" style={{ backgroundColor: minisite.color_secondary }} title="Secondaire"></div>
                                        <div className="w-8 h-8 rounded-lg" style={{ backgroundColor: minisite.color_accent }} title="Accent"></div>
                                        <div className="w-8 h-8 rounded-lg border" style={{ backgroundColor: minisite.color_background }} title="Fond"></div>
                                    </div>

                                    {/* Actions */}
                                    <div className="flex gap-2">
                                        <button
                                            onClick={() => selectMinisiteForEdit(minisite)}
                                            className="flex-1 px-3 py-2 bg-dark-100 text-dark-700 rounded-lg text-sm font-medium hover:bg-dark-200 transition"
                                        >
                                            <i className="fas fa-edit mr-1"></i> Modifier
                                        </button>
                                        {minisite.is_published ? (
                                            <button
                                                onClick={() => handleUnpublish(minisite.uid)}
                                                className="px-3 py-2 bg-amber-100 text-amber-700 rounded-lg text-sm font-medium hover:bg-amber-200 transition"
                                            >
                                                <i className="fas fa-eye-slash"></i>
                                            </button>
                                        ) : (
                                            <button
                                                onClick={() => handlePublish(minisite.uid)}
                                                className="px-3 py-2 bg-emerald-100 text-emerald-700 rounded-lg text-sm font-medium hover:bg-emerald-200 transition"
                                            >
                                                <i className="fas fa-globe"></i>
                                            </button>
                                        )}
                                        <button
                                            onClick={() => handleDeleteMinisite(minisite.uid)}
                                            className="px-3 py-2 bg-red-100 text-red-600 rounded-lg text-sm font-medium hover:bg-red-200 transition"
                                        >
                                            <i className="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        );
    }

    // Formulaire création/édition
    return (
        <div className="animate-fade-in">
            <button 
                onClick={() => { setShowForm(false); setEditMode(false); setSelectedMinisite(null); }}
                className="mb-6 text-dark-500 hover:text-dark-700 flex items-center gap-2"
            >
                <i className="fas fa-arrow-left"></i> Retour
            </button>

            <h2 className="text-2xl font-bold text-dark-900 mb-6">
                {editMode ? 'Modifier le mini-site' : 'Créer un mini-site'}
            </h2>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Formulaire */}
                <div className="space-y-6">
                    {/* Infos de base */}
                    <div className="bg-white rounded-2xl p-6 border-2 border-dark-200">
                        <h3 className="font-bold text-dark-900 mb-4 flex items-center gap-2">
                            <i className="fas fa-info-circle text-primary-500"></i>
                            Informations
                        </h3>
                        
                        <div className="space-y-4">
                            <div>
                                <label className="block text-dark-600 text-sm font-semibold mb-2">Nom du mini-site *</label>
                                <input
                                    type="text"
                                    value={formData.name}
                                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                    className="w-full px-4 py-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none"
                                    placeholder="Ex: Nash Suites Taxi"
                                />
                            </div>

                            <div>
                                <label className="block text-dark-600 text-sm font-semibold mb-2">URL personnalisée *</label>
                                <div className="flex items-center">
                                    <span className="px-4 py-3 bg-dark-100 text-dark-500 rounded-l-xl border-2 border-r-0 border-dark-200 text-sm">
                                        partner.site.taxibook.ch/
                                    </span>
                                    <input
                                        type="text"
                                        value={formData.slug}
                                        onChange={(e) => setFormData({ ...formData, slug: e.target.value.toLowerCase().replace(/[^a-z0-9\-]/g, '-') })}
                                        className="flex-1 px-4 py-3 border-2 border-dark-200 rounded-r-xl focus:border-primary-500 focus:outline-none"
                                        placeholder="mon-hotel"
                                    />
                                </div>
                            </div>

                            <div>
                                <label className="block text-dark-600 text-sm font-semibold mb-2">Description</label>
                                <textarea
                                    value={formData.description}
                                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                                    className="w-full px-4 py-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none h-24 resize-none"
                                    placeholder="Description courte pour le SEO"
                                />
                            </div>

                            <div>
                                <label className="block text-dark-600 text-sm font-semibold mb-2">Message d'accueil</label>
                                <textarea
                                    value={formData.welcome_message}
                                    onChange={(e) => setFormData({ ...formData, welcome_message: e.target.value })}
                                    className="w-full px-4 py-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none h-24 resize-none"
                                    placeholder="Bienvenue ! Réservez votre taxi en quelques clics."
                                />
                            </div>
                        </div>
                    </div>

                    {/* Logo */}
                    <div className="bg-white rounded-2xl p-6 border-2 border-dark-200">
                        <h3 className="font-bold text-dark-900 mb-4 flex items-center gap-2">
                            <i className="fas fa-image text-primary-500"></i>
                            Logo
                        </h3>
                        
                        <div className="flex items-center gap-4">
                            {formData.logo_url ? (
                                <div className="w-24 h-24 bg-dark-100 rounded-xl flex items-center justify-center overflow-hidden">
                                    <img src={formData.logo_url} alt="Logo" className="max-w-full max-h-full object-contain" />
                                </div>
                            ) : (
                                <div className="w-24 h-24 bg-dark-100 rounded-xl flex items-center justify-center">
                                    <i className="fas fa-image text-3xl text-dark-300"></i>
                                </div>
                            )}
                            
                            <div className="flex-1">
                                <label className="block">
                                    <span className="px-4 py-2 bg-primary-500 text-white rounded-lg cursor-pointer hover:bg-primary-600 transition inline-block">
                                        <i className="fas fa-upload mr-2"></i>
                                        Uploader un logo
                                    </span>
                                    <input 
                                        type="file" 
                                        accept="image/*"
                                        onChange={handleLogoUpload}
                                        className="hidden"
                                    />
                                </label>
                                <p className="text-xs text-dark-400 mt-2">PNG ou JPG, max 2MB</p>
                            </div>
                        </div>
                    </div>

                    {/* Couleurs */}
                    <div className="bg-white rounded-2xl p-6 border-2 border-dark-200">
                        <h3 className="font-bold text-dark-900 mb-4 flex items-center gap-2">
                            <i className="fas fa-palette text-primary-500"></i>
                            Couleurs
                        </h3>
                        
                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <label className="block text-dark-600 text-sm font-semibold mb-2">Couleur principale</label>
                                <div className="flex items-center gap-2">
                                    <input
                                        type="color"
                                        value={formData.color_primary}
                                        onChange={(e) => setFormData({ ...formData, color_primary: e.target.value })}
                                        className="w-12 h-12 rounded-lg cursor-pointer border-2 border-dark-200"
                                    />
                                    <input
                                        type="text"
                                        value={formData.color_primary}
                                        onChange={(e) => setFormData({ ...formData, color_primary: e.target.value })}
                                        className="flex-1 px-3 py-2 border-2 border-dark-200 rounded-lg text-sm"
                                    />
                                </div>
                            </div>

                            <div>
                                <label className="block text-dark-600 text-sm font-semibold mb-2">Couleur secondaire</label>
                                <div className="flex items-center gap-2">
                                    <input
                                        type="color"
                                        value={formData.color_secondary}
                                        onChange={(e) => setFormData({ ...formData, color_secondary: e.target.value })}
                                        className="w-12 h-12 rounded-lg cursor-pointer border-2 border-dark-200"
                                    />
                                    <input
                                        type="text"
                                        value={formData.color_secondary}
                                        onChange={(e) => setFormData({ ...formData, color_secondary: e.target.value })}
                                        className="flex-1 px-3 py-2 border-2 border-dark-200 rounded-lg text-sm"
                                    />
                                </div>
                            </div>

                            <div>
                                <label className="block text-dark-600 text-sm font-semibold mb-2">Couleur d'accent</label>
                                <div className="flex items-center gap-2">
                                    <input
                                        type="color"
                                        value={formData.color_accent}
                                        onChange={(e) => setFormData({ ...formData, color_accent: e.target.value })}
                                        className="w-12 h-12 rounded-lg cursor-pointer border-2 border-dark-200"
                                    />
                                    <input
                                        type="text"
                                        value={formData.color_accent}
                                        onChange={(e) => setFormData({ ...formData, color_accent: e.target.value })}
                                        className="flex-1 px-3 py-2 border-2 border-dark-200 rounded-lg text-sm"
                                    />
                                </div>
                            </div>

                            <div>
                                <label className="block text-dark-600 text-sm font-semibold mb-2">Couleur de fond</label>
                                <div className="flex items-center gap-2">
                                    <input
                                        type="color"
                                        value={formData.color_background}
                                        onChange={(e) => setFormData({ ...formData, color_background: e.target.value })}
                                        className="w-12 h-12 rounded-lg cursor-pointer border-2 border-dark-200"
                                    />
                                    <input
                                        type="text"
                                        value={formData.color_background}
                                        onChange={(e) => setFormData({ ...formData, color_background: e.target.value })}
                                        className="flex-1 px-3 py-2 border-2 border-dark-200 rounded-lg text-sm"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Typographie */}
                    <div className="bg-white rounded-2xl p-6 border-2 border-dark-200">
                        <h3 className="font-bold text-dark-900 mb-4 flex items-center gap-2">
                            <i className="fas fa-font text-primary-500"></i>
                            Typographie
                        </h3>
                        
                        <div>
                            <label className="block text-dark-600 text-sm font-semibold mb-2">Police</label>
                            <select
                                value={formData.font_family}
                                onChange={(e) => setFormData({ ...formData, font_family: e.target.value })}
                                className="w-full px-4 py-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none"
                            >
                                <option value="Plus Jakarta Sans">Plus Jakarta Sans</option>
                                <option value="Inter">Inter</option>
                                <option value="Poppins">Poppins</option>
                                <option value="Roboto">Roboto</option>
                                <option value="Open Sans">Open Sans</option>
                                <option value="Montserrat">Montserrat</option>
                                <option value="Lato">Lato</option>
                                <option value="Playfair Display">Playfair Display</option>
                            </select>
                        </div>
                    </div>

                    {/* Actions */}
                    <div className="flex gap-4">
                        <button
                            onClick={() => { setShowForm(false); setEditMode(false); }}
                            className="flex-1 py-4 bg-dark-100 text-dark-700 font-semibold rounded-xl hover:bg-dark-200 transition"
                        >
                            Annuler
                        </button>
                        <button
                            onClick={editMode ? handleUpdateMinisite : handleCreateMinisite}
                            disabled={loading || !formData.name}
                            className="flex-1 py-4 gradient-primary text-white font-bold rounded-xl hover:opacity-90 transition disabled:opacity-50 flex items-center justify-center gap-2"
                        >
                            {loading ? <Spinner size="sm" /> : <i className="fas fa-save"></i>}
                            {editMode ? 'Mettre à jour' : 'Créer le mini-site'}
                        </button>
                    </div>
                </div>

                {/* Aperçu en temps réel */}
                <div className="bg-white rounded-2xl border-2 border-dark-200 overflow-hidden sticky top-6">
                    <div className="p-4 bg-dark-50 border-b border-dark-200">
                        <h3 className="font-bold text-dark-900 flex items-center gap-2">
                            <i className="fas fa-eye text-primary-500"></i>
                            Aperçu en temps réel
                        </h3>
                    </div>
                    
                    {/* Preview Frame */}
                    <div className="p-4">
                        <div 
                            className="rounded-xl overflow-hidden shadow-lg"
                            style={{ backgroundColor: formData.color_background }}
                        >
                            {/* Header Preview */}
                            <div 
                                className="p-6 text-center"
                                style={{ backgroundColor: formData.color_primary }}
                            >
                                {formData.logo_url ? (
                                    <img src={formData.logo_url} alt="Logo" className="h-12 mx-auto mb-2 object-contain" />
                                ) : (
                                    <div className="w-16 h-16 bg-white/20 rounded-xl mx-auto mb-2 flex items-center justify-center">
                                        <i className="fas fa-taxi text-2xl text-white"></i>
                                    </div>
                                )}
                                <h4 className="text-white text-lg font-bold" style={{ fontFamily: formData.font_family }}>
                                    {formData.name || 'Nom du site'}
                                </h4>
                                {formData.welcome_message && (
                                    <p className="text-white/80 text-sm mt-1" style={{ fontFamily: formData.font_family }}>
                                        {formData.welcome_message}
                                    </p>
                                )}
                            </div>

                            {/* Content Preview */}
                            <div className="p-6" style={{ fontFamily: formData.font_family }}>
                                <div className="space-y-4">
                                    <div 
                                        className="p-4 rounded-xl"
                                        style={{ backgroundColor: formData.color_secondary + '15' }}
                                    >
                                        <p className="text-sm text-gray-600 mb-2">Adresse de départ</p>
                                        <div className="flex items-center gap-2">
                                            <i className="fas fa-map-marker-alt" style={{ color: formData.color_primary }}></i>
                                            <span className="text-gray-800">{formData.default_pickup_address || 'Votre adresse'}</span>
                                        </div>
                                    </div>

                                    <button 
                                        className="w-full py-4 text-white font-bold rounded-xl"
                                        style={{ backgroundColor: formData.color_accent }}
                                    >
                                        Réserver maintenant
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};