/**
 * TaxiBook Partner - Minisites View
 * ===================================
 * Minisite management + per-minisite analytics view.
 */

// ---------------------------------------------------------------------------
// MinisiteStatsView : page de statistiques détaillées d'un mini-site
// (visiteurs/jour, sources d'arrivée, top referrers, derniers événements).
// ---------------------------------------------------------------------------
const MinisiteStatsView = ({ minisite, onBack, setToast }) => {
    const [loading, setLoading] = useState(true);
    const [period, setPeriod] = useState('30d');
    const [stats, setStats] = useState(null);

    useEffect(() => {
        loadStats();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [period]);

    const loadStats = async () => {
        setLoading(true);
        try {
            const result = await window.partnerAPI.getMinisiteStats(minisite.uid, period);
            if (result.success) {
                setStats(result.data);
            } else {
                setToast({ message: result.error || 'Erreur chargement statistiques', type: 'error' });
            }
        } catch (e) {
            setToast({ message: 'Erreur de connexion', type: 'error' });
        } finally {
            setLoading(false);
        }
    };

    // Construit la série journalière complète sur la période (jours sans
    // événement = 0) afin que le graphique reste comparable d'un jour à l'autre.
    const buildDailySeries = (rawDaily) => {
        const days = period === '7d' ? 7 : period === '30d' ? 30 : period === '90d' ? 90 : 30;
        const byDate = {};
        (rawDaily || []).forEach(r => { byDate[r.date] = r; });

        const out = [];
        const now = new Date();
        for (let i = days - 1; i >= 0; i--) {
            const d = new Date(now);
            d.setDate(d.getDate() - i);
            const key = d.toISOString().slice(0, 10);
            const row = byDate[key] || {};
            out.push({
                date: key,
                label: d.toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit' }),
                views: row.page_views || 0,
                visitors: row.unique_visitors || 0,
                started: row.booking_started || 0,
                completed: row.booking_completed || 0
            });
        }
        return out;
    };

    const daily = buildDailySeries(stats?.daily);
    const maxY = Math.max(1, ...daily.map(d => Math.max(d.views, d.visitors)));

    // SVG inline (pas de dépendance) : courbes "Vues" + "Visiteurs uniques"
    const chartW = 800;
    const chartH = 220;
    const padL = 36, padR = 12, padT = 16, padB = 28;
    const innerW = chartW - padL - padR;
    const innerH = chartH - padT - padB;
    const xStep = daily.length > 1 ? innerW / (daily.length - 1) : innerW;

    const path = (key) => daily.map((d, i) => {
        const x = padL + i * xStep;
        const y = padT + innerH - (d[key] / maxY) * innerH;
        return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    }).join(' ');

    const yTicks = 4;
    const yLabels = Array.from({ length: yTicks + 1 }, (_, i) => {
        const value = Math.round((maxY * (yTicks - i)) / yTicks);
        const y = padT + (i / yTicks) * innerH;
        return { y, value };
    });

    const fmtReferrer = (ref) => {
        if (!ref) return '—';
        try {
            const u = new URL(ref);
            return u.hostname.replace(/^www\./, '') + (u.pathname && u.pathname !== '/' ? u.pathname : '');
        } catch (e) {
            return ref;
        }
    };

    const sources = stats?.sources || [];
    const totalSources = sources.reduce((s, x) => s + (x.count || 0), 0);

    return (
        <div className="animate-fade-in">
            <button
                onClick={onBack}
                className="mb-6 text-dark-500 hover:text-dark-700 flex items-center gap-2"
            >
                <i className="fas fa-arrow-left"></i> Retour aux mini-sites
            </button>

            {/* Header */}
            <div className="bg-white rounded-2xl border-2 border-dark-200 p-5 mb-6 flex flex-wrap items-center gap-4">
                <div
                    className="w-14 h-14 rounded-xl flex items-center justify-center shrink-0"
                    style={{ backgroundColor: minisite.color_primary || '#f97316' }}
                >
                    {minisite.logo_url ? (
                        <img src={minisite.logo_url} alt={minisite.name} className="max-h-10 max-w-12 object-contain" />
                    ) : (
                        <i className="fas fa-globe text-white text-xl"></i>
                    )}
                </div>
                <div className="flex-1 min-w-0">
                    <h2 className="text-2xl font-bold text-dark-900 truncate">{minisite.name}</h2>
                    <a
                        href={`https://partner.taxis.ch/${minisite.slug}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-sm text-primary-600 hover:underline"
                    >
                        partner.taxis.ch/{minisite.slug} <i className="fas fa-external-link-alt text-xs ml-1"></i>
                    </a>
                </div>

                {/* Sélecteur période */}
                <div className="flex bg-dark-100 rounded-lg p-1">
                    {[
                        { id: '7d', label: '7 jours' },
                        { id: '30d', label: '30 jours' },
                        { id: '90d', label: '90 jours' },
                        { id: 'all', label: 'Tout' }
                    ].map(p => (
                        <button
                            key={p.id}
                            onClick={() => setPeriod(p.id)}
                            className={`px-3 py-1.5 rounded-md text-sm font-medium transition ${
                                period === p.id ? 'bg-white text-dark-900 shadow-sm' : 'text-dark-500 hover:text-dark-700'
                            }`}
                        >
                            {p.label}
                        </button>
                    ))}
                </div>
            </div>

            {loading ? (
                <div className="flex justify-center py-16"><Spinner size="lg" /></div>
            ) : (
                <>
                    {/* KPI summary */}
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                        <div className="bg-white rounded-2xl p-4 border-2 border-dark-200">
                            <p className="text-xs uppercase tracking-wider text-dark-500 mb-1">Vues</p>
                            <p className="text-2xl font-bold text-dark-900">{stats?.summary?.total_views || 0}</p>
                        </div>
                        <div className="bg-white rounded-2xl p-4 border-2 border-dark-200">
                            <p className="text-xs uppercase tracking-wider text-dark-500 mb-1">Visiteurs uniques</p>
                            <p className="text-2xl font-bold text-dark-900">{stats?.summary?.total_visitors || 0}</p>
                        </div>
                        <div className="bg-white rounded-2xl p-4 border-2 border-dark-200">
                            <p className="text-xs uppercase tracking-wider text-dark-500 mb-1">Réservations lancées</p>
                            <p className="text-2xl font-bold text-dark-900">{stats?.summary?.total_started || 0}</p>
                        </div>
                        <div className="bg-white rounded-2xl p-4 border-2 border-dark-200">
                            <p className="text-xs uppercase tracking-wider text-dark-500 mb-1">Taux de conversion</p>
                            <p className="text-2xl font-bold text-dark-900">{stats?.summary?.conversion_rate || 0}%</p>
                        </div>
                    </div>

                    {/* Graphique journalier */}
                    <div className="bg-white rounded-2xl p-5 border-2 border-dark-200 mb-6">
                        <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
                            <h3 className="font-bold text-dark-900">Trafic par jour</h3>
                            <div className="flex gap-4 text-sm">
                                <span className="flex items-center gap-2 text-dark-600">
                                    <span className="w-3 h-3 rounded-sm" style={{ backgroundColor: '#3b82f6' }}></span>
                                    Vues
                                </span>
                                <span className="flex items-center gap-2 text-dark-600">
                                    <span className="w-3 h-3 rounded-sm" style={{ backgroundColor: '#10b981' }}></span>
                                    Visiteurs uniques
                                </span>
                            </div>
                        </div>

                        <div className="w-full overflow-x-auto">
                            <svg
                                viewBox={`0 0 ${chartW} ${chartH}`}
                                preserveAspectRatio="xMidYMid meet"
                                className="w-full"
                                style={{ minWidth: 600 }}
                            >
                                {/* Grille horizontale + labels Y */}
                                {yLabels.map((t, i) => (
                                    <g key={i}>
                                        <line
                                            x1={padL} y1={t.y}
                                            x2={chartW - padR} y2={t.y}
                                            stroke="#e5e7eb" strokeWidth="1"
                                        />
                                        <text
                                            x={padL - 6} y={t.y + 4}
                                            textAnchor="end"
                                            fontSize="11"
                                            fill="#6b7280"
                                        >{t.value}</text>
                                    </g>
                                ))}

                                {/* Labels X (un sur N pour éviter le chevauchement) */}
                                {daily.map((d, i) => {
                                    const step = Math.max(1, Math.floor(daily.length / 8));
                                    if (i % step !== 0 && i !== daily.length - 1) return null;
                                    const x = padL + i * xStep;
                                    return (
                                        <text
                                            key={d.date}
                                            x={x} y={chartH - 8}
                                            textAnchor="middle"
                                            fontSize="11"
                                            fill="#6b7280"
                                        >{d.label}</text>
                                    );
                                })}

                                {/* Courbe Vues */}
                                <path d={path('views')} fill="none" stroke="#3b82f6" strokeWidth="2" />
                                {/* Courbe Visiteurs uniques */}
                                <path d={path('visitors')} fill="none" stroke="#10b981" strokeWidth="2" />

                                {/* Points sur les vues */}
                                {daily.map((d, i) => (
                                    <circle
                                        key={`v-${i}`}
                                        cx={padL + i * xStep}
                                        cy={padT + innerH - (d.views / maxY) * innerH}
                                        r="2.5"
                                        fill="#3b82f6"
                                    >
                                        <title>{d.label} — {d.views} vues, {d.visitors} visiteurs</title>
                                    </circle>
                                ))}
                            </svg>
                        </div>
                    </div>

                    {/* Sources d'arrivée + Top referrers */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                        {/* Sources */}
                        <div className="bg-white rounded-2xl p-5 border-2 border-dark-200">
                            <h3 className="font-bold text-dark-900 mb-4 flex items-center gap-2">
                                <i className="fas fa-compass text-primary-500"></i>
                                Sources d'arrivée
                            </h3>
                            {sources.length === 0 ? (
                                <p className="text-dark-400 text-sm text-center py-6">Aucune donnée sur la période</p>
                            ) : (
                                <div className="space-y-3">
                                    {sources.map(s => {
                                        const pct = totalSources > 0 ? Math.round((s.count / totalSources) * 100) : 0;
                                        return (
                                            <div key={s.source}>
                                                <div className="flex items-center justify-between mb-1 text-sm">
                                                    <span className="font-medium text-dark-800">{s.source}</span>
                                                    <span className="text-dark-500">{s.count} <span className="text-dark-400">({pct}%)</span></span>
                                                </div>
                                                <div className="h-2 bg-dark-100 rounded-full overflow-hidden">
                                                    <div
                                                        className="h-full rounded-full bg-primary-500 transition-all"
                                                        style={{ width: `${pct}%` }}
                                                    ></div>
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                        </div>

                        {/* Top referrers (URL complète) */}
                        <div className="bg-white rounded-2xl p-5 border-2 border-dark-200">
                            <h3 className="font-bold text-dark-900 mb-4 flex items-center gap-2">
                                <i className="fas fa-link text-primary-500"></i>
                                Liens référents
                            </h3>
                            {(!stats?.referrers || stats.referrers.length === 0) ? (
                                <p className="text-dark-400 text-sm text-center py-6">Aucun lien référent identifié</p>
                            ) : (
                                <div className="space-y-2 max-h-80 overflow-y-auto">
                                    {stats.referrers.map((r, i) => (
                                        <div key={i} className="flex items-center justify-between gap-3 text-sm py-1.5 border-b border-dark-100 last:border-0">
                                            <a
                                                href={r.referrer}
                                                target="_blank"
                                                rel="noopener noreferrer nofollow"
                                                className="text-primary-600 hover:underline truncate flex-1 min-w-0"
                                                title={r.referrer}
                                            >
                                                {fmtReferrer(r.referrer)}
                                            </a>
                                            <span className="text-dark-500 shrink-0 font-medium">{r.count}</span>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Derniers événements */}
                    {stats?.events && stats.events.length > 0 && (
                        <div className="bg-white rounded-2xl p-5 border-2 border-dark-200">
                            <h3 className="font-bold text-dark-900 mb-4 flex items-center gap-2">
                                <i className="fas fa-history text-primary-500"></i>
                                Derniers événements
                            </h3>
                            <div className="overflow-x-auto">
                                <table className="w-full text-sm">
                                    <thead>
                                        <tr className="text-left text-dark-500 text-xs uppercase tracking-wider border-b border-dark-200">
                                            <th className="py-2 pr-3">Quand</th>
                                            <th className="py-2 pr-3">Type</th>
                                            <th className="py-2 pr-3">Referrer</th>
                                            <th className="py-2 pr-3">Visiteur</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {stats.events.slice(0, 30).map(ev => (
                                            <tr key={ev.id} className="border-b border-dark-100 last:border-0">
                                                <td className="py-2 pr-3 text-dark-600 whitespace-nowrap">
                                                    {new Date(ev.created_at + 'Z').toLocaleString('fr-CH', {
                                                        day: '2-digit', month: '2-digit',
                                                        hour: '2-digit', minute: '2-digit'
                                                    })}
                                                </td>
                                                <td className="py-2 pr-3">
                                                    <span className={`px-2 py-0.5 rounded text-xs font-medium ${
                                                        ev.event_type === 'view' ? 'bg-blue-100 text-blue-700' :
                                                        ev.event_type === 'booking_started' ? 'bg-amber-100 text-amber-700' :
                                                        ev.event_type === 'booking_complete' ? 'bg-emerald-100 text-emerald-700' :
                                                        ev.event_type === 'booking_cancelled' ? 'bg-red-100 text-red-700' :
                                                        'bg-dark-100 text-dark-600'
                                                    }`}>{ev.event_type}</span>
                                                </td>
                                                <td className="py-2 pr-3 text-dark-700 truncate" style={{ maxWidth: 280 }} title={ev.referrer || ''}>
                                                    {fmtReferrer(ev.referrer)}
                                                </td>
                                                <td className="py-2 pr-3 text-dark-500 text-xs">
                                                    {ev.visitor_id ? ev.visitor_id.slice(0, 8) : (ev.ip_address || '—')}
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    )}
                </>
            )}
        </div>
    );
};

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 [statsMode, setStatsMode] = 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: '',
        sms_sender: '',
        default_pickup_address: partner?.address || ''
    });

    // Sanitize live d'un Expéditeur SMS : ASCII sans accents, max 11 chars
    const sanitizeSmsSender = (raw) => {
        if (raw === undefined || raw === null) return '';
        let s = String(raw);
        const accentMap = {
            'À':'A','Á':'A','Â':'A','Ã':'A','Ä':'A','Å':'A','à':'a','á':'a','â':'a','ã':'a','ä':'a','å':'a',
            'Ç':'C','ç':'c','È':'E','É':'E','Ê':'E','Ë':'E','è':'e','é':'e','ê':'e','ë':'e',
            'Ì':'I','Í':'I','Î':'I','Ï':'I','ì':'i','í':'i','î':'i','ï':'i',
            'Ñ':'N','ñ':'n','Ò':'O','Ó':'O','Ô':'O','Õ':'O','Ö':'O','ò':'o','ó':'o','ô':'o','õ':'o','ö':'o',
            'Ù':'U','Ú':'U','Û':'U','Ü':'U','ù':'u','ú':'u','û':'u','ü':'u','Ý':'Y','ý':'y','ÿ':'y',
            'Œ':'OE','œ':'oe','Æ':'AE','æ':'ae','ß':'ss'
        };
        s = s.replace(/[^\x00-\x7F]/g, ch => accentMap[ch] || '');
        s = s.replace(/[^A-Za-z0-9 ]/g, '');
        return s.substring(0, 11);
    };

    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: '',
                    sms_sender: '',
                    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 || '',
            sms_sender: minisite.sms_sender || '',
            default_pickup_address: minisite.default_pickup_address || ''
        });
        setEditMode(true);
    };

    const openStats = (minisite) => {
        setSelectedMinisite(minisite);
        setStatsMode(true);
    };

    // Vue Statistiques d'un mini-site
    if (statsMode && selectedMinisite) {
        return (
            <MinisiteStatsView
                minisite={selectedMinisite}
                onBack={() => { setStatsMode(false); setSelectedMinisite(null); }}
                setToast={setToast}
            />
        );
    }

    // 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.taxis.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.taxis.ch/{minisite.slug}
                                        </a>
                                    </div>

                                    {/* Stats (cliquable pour voir le détail) */}
                                    <button
                                        type="button"
                                        onClick={() => openStats(minisite)}
                                        className="w-full text-left grid grid-cols-1 gap-2 mb-4 hover:opacity-80 transition"
                                    >
                                        <div className="bg-dark-50 hover:bg-dark-100 rounded-lg p-3 flex items-center justify-between transition">
                                            <div className="text-left">
                                                <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="text-primary-500 text-sm font-medium flex items-center gap-1">
                                                <i className="fas fa-chart-line"></i>
                                                Voir stats
                                                <i className="fas fa-chevron-right text-xs"></i>
                                            </div>
                                        </div>
                                    </button>

                                    {/* 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.taxis.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>

                    {/* Notifications SMS */}
                    <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-sms text-primary-500"></i>
                            Notifications SMS
                        </h3>
                        
                        <div>
                            <label className="block text-dark-600 text-sm font-semibold mb-2">
                                Expéditeur SMS
                                <span className="text-dark-400 font-normal ml-2">
                                    ({formData.sms_sender?.length || 0}/11)
                                </span>
                            </label>
                            <input
                                type="text"
                                value={formData.sms_sender || ''}
                                onChange={(e) => setFormData({ ...formData, sms_sender: sanitizeSmsSender(e.target.value) })}
                                maxLength={11}
                                className="w-full px-4 py-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none font-mono"
                                placeholder="MonHotel"
                            />
                            <p className="text-xs text-dark-400 mt-2">
                                Nom affiché comme expéditeur des SMS de réservation. Max 11 caractères, lettres et chiffres uniquement (pas d'accents). Laisser vide pour utiliser l'expéditeur par défaut.
                            </p>
                            {formData.sms_sender && (
                                <div className="mt-3 p-3 bg-dark-50 rounded-lg border border-dark-200">
                                    <p className="text-xs text-dark-500 mb-1">Aperçu</p>
                                    <p className="text-sm text-dark-900">
                                        <span className="font-bold">{formData.sms_sender}</span>
                                        <span className="text-dark-500"> : Réservation confirmée pour le 12/05/2026 14:30. Suivez votre taxi en temps réel: partner.taxis.ch/{formData.slug || 'votre-slug'}/tracking/...</span>
                                    </p>
                                </div>
                            )}
                        </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>
    );
};