/**
 * TaxiBook Partner - Clients View
 * ================================
 * Liste des clients ayant réservé via les mini-sites du partenaire.
 * Permet la connexion automatique en tant que ce client sur my.taxis.ch
 * via un magic link (15 min, usage unique) généré par l'API.
 */

const { useState: useStateClients, useEffect: useEffectClients, useMemo: useMemoClients } = React;

function fmtClientName(c) {
    const full = [c.first_name, c.last_name].filter(Boolean).join(' ').trim();
    return full || c.email || c.phone_number || 'Client';
}

function fmtCurrencyChf(n) {
    const v = parseFloat(n || 0);
    if (!isFinite(v)) return 'CHF 0.00';
    return 'CHF ' + v.toFixed(2);
}

function fmtDateShort(s) {
    if (!s) return '—';
    try {
        const d = new Date(s);
        if (isNaN(d.getTime())) return '—';
        return d.toLocaleDateString('fr-CH', { day: '2-digit', month: 'short', year: 'numeric' });
    } catch (e) { return '—'; }
}

function fmtDateTimeShort(s) {
    if (!s) return '—';
    try {
        const d = new Date(s);
        if (isNaN(d.getTime())) return '—';
        return d.toLocaleString('fr-CH', { day: '2-digit', month: 'short', year: '2-digit', hour: '2-digit', minute: '2-digit' });
    } catch (e) { return '—'; }
}

function ClientRow({ client, onAutologin, busy }) {
    const initials = (() => {
        const name = fmtClientName(client);
        const parts = name.split(/\s+/).filter(Boolean);
        const a = parts[0] ? parts[0][0] : '';
        const b = parts[1] ? parts[1][0] : '';
        return (a + b).toUpperCase() || '?';
    })();

    return (
        <tr className="border-b border-dark-200 hover:bg-dark-50 transition">
            <td className="px-4 py-3">
                <div className="flex items-center gap-3 min-w-[220px]">
                    <div className="w-10 h-10 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center font-bold flex-shrink-0">
                        {initials}
                    </div>
                    <div className="min-w-0">
                        <div className="font-semibold text-dark-900 truncate">{fmtClientName(client)}</div>
                        {client.email && (
                            <div className="text-xs text-dark-500 truncate">
                                <i className="fas fa-envelope mr-1"></i>{client.email}
                            </div>
                        )}
                        {client.phone_number && !String(client.phone_number).startsWith('+magic_') && !String(client.phone_number).startsWith('+access_') && (
                            <div className="text-xs text-dark-500 truncate">
                                <i className="fas fa-phone mr-1"></i>{client.phone_number}
                            </div>
                        )}
                    </div>
                </div>
            </td>
            <td className="px-4 py-3 text-sm text-dark-700">
                <div className="flex items-center gap-1.5">
                    <i className="fas fa-route text-dark-400 text-xs"></i>
                    <span className="font-semibold">{client.rides_count || 0}</span>
                </div>
            </td>
            <td className="px-4 py-3 text-sm text-dark-700 font-semibold">
                {fmtCurrencyChf(client.total_spent)}
            </td>
            <td className="px-4 py-3 text-sm text-dark-700">
                {fmtDateTimeShort(client.last_ride_at)}
            </td>
            <td className="px-4 py-3 text-sm text-dark-700">
                {client.minisites && client.minisites.length > 0 ? (
                    <div className="flex flex-wrap gap-1">
                        {client.minisites.slice(0, 2).map((m, idx) => (
                            <a key={idx}
                               href={`https://partner.taxis.ch/${m.slug}`}
                               target="_blank"
                               rel="noopener noreferrer"
                               className="inline-flex items-center gap-1 text-xs bg-blue-50 text-blue-700 border border-blue-200 px-2 py-0.5 rounded-full hover:bg-blue-100">
                                <i className="fas fa-globe text-[10px]"></i>
                                {m.name || m.slug}
                            </a>
                        ))}
                        {client.minisites.length > 2 && (
                            <span className="text-xs text-dark-500">+{client.minisites.length - 2}</span>
                        )}
                    </div>
                ) : (
                    <span className="text-xs text-dark-400">—</span>
                )}
            </td>
            <td className="px-4 py-3">
                <button
                    onClick={() => onAutologin(client)}
                    disabled={busy || !client.email}
                    title={!client.email ? "Email manquant — autolog impossible" : "Ouvrir my.taxis.ch en tant que ce client"}
                    className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary-500 hover:bg-primary-600 text-white text-xs font-semibold transition disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    {busy ? (
                        <>
                            <i className="fas fa-spinner fa-spin"></i>
                            <span>...</span>
                        </>
                    ) : (
                        <>
                            <i className="fas fa-right-to-bracket"></i>
                            <span>Autolog</span>
                        </>
                    )}
                </button>
            </td>
        </tr>
    );
}

const ClientsView = ({ partner, setToast }) => {
    const [clients, setClients]     = useStateClients([]);
    const [loading, setLoading]     = useStateClients(true);
    const [search, setSearch]       = useStateClients('');
    const [minisites, setMinisites] = useStateClients([]);
    const [filterMinisite, setFilterMinisite] = useStateClients(''); // uid
    const [busyUid, setBusyUid]     = useStateClients(null);
    const [autologinModal, setAutologinModal] = useStateClients(null); // { client, magic_url, expires_at }

    const loadClients = async (opts = {}) => {
        setLoading(true);
        try {
            const res = await window.partnerAPI.getPartnerClients({
                minisite_uid: filterMinisite || undefined,
                ...opts
            });
            if (res?.success) {
                setClients(res.data?.clients || []);
            } else {
                setToast?.({ message: res?.error || 'Erreur de chargement', type: 'error' });
            }
        } catch (e) {
            setToast?.({ message: 'Erreur réseau', type: 'error' });
        } finally {
            setLoading(false);
        }
    };

    const loadMinisites = async () => {
        try {
            const res = await window.partnerAPI.getMinisites();
            if (res?.success) {
                const list = res.data?.minisites || res.minisites || [];
                setMinisites(list);
            }
        } catch (e) {}
    };

    useEffectClients(() => { loadMinisites(); }, []);
    useEffectClients(() => { loadClients(); /* eslint-disable-next-line */ }, [filterMinisite]);

    const filtered = useMemoClients(() => {
        if (!search.trim()) return clients;
        const q = search.toLowerCase();
        return clients.filter(c => {
            const hay = [c.first_name, c.last_name, c.email, c.phone_number]
                .filter(Boolean)
                .join(' ')
                .toLowerCase();
            return hay.includes(q);
        });
    }, [clients, search]);

    const stats = useMemoClients(() => {
        const total = clients.length;
        let totalRides = 0;
        let totalSpent = 0;
        for (const c of clients) {
            totalRides += c.rides_count || 0;
            totalSpent += parseFloat(c.total_spent || 0);
        }
        return { total, totalRides, totalSpent };
    }, [clients]);

    const handleAutologin = async (client) => {
        if (!client?.uid) return;
        if (!client.email) {
            setToast?.({ message: 'Ce client n\'a pas d\'email — autolog impossible', type: 'warning' });
            return;
        }
        setBusyUid(client.uid);
        try {
            const ms = (client.minisites && client.minisites[0]) || null;
            const res = await window.partnerAPI.createClientAutologin(client.uid, {
                minisite_slug: ms?.slug || null
            });
            if (res?.success && res.data?.magic_url) {
                setAutologinModal({
                    client,
                    magic_url: res.data.magic_url,
                    expires_at: res.data.expires_at,
                    minutes: res.data.minutes || 15
                });
                window.open(res.data.magic_url, '_blank', 'noopener,noreferrer');
            } else {
                setToast?.({ message: res?.error || 'Impossible de générer le lien', type: 'error' });
            }
        } catch (e) {
            setToast?.({ message: 'Erreur réseau', type: 'error' });
        } finally {
            setBusyUid(null);
        }
    };

    return (
        <div className="space-y-6">
            <div className="flex items-start justify-between flex-wrap gap-4">
                <div>
                    <h1 className="text-3xl font-bold text-dark-900 mb-1">
                        <i className="fas fa-users text-primary-500 mr-2"></i>
                        Clients
                    </h1>
                    <p className="text-dark-500">
                        Tous les clients ayant réservé via vos mini-sites ou créés par votre équipe.
                    </p>
                </div>
                <button
                    onClick={() => loadClients()}
                    className="px-4 py-2 rounded-xl bg-white border border-dark-200 hover:bg-dark-50 text-dark-700 text-sm font-semibold flex items-center gap-2"
                >
                    <i className="fas fa-rotate"></i>
                    Rafraîchir
                </button>
            </div>

            {/* Stat chips */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div className="bg-white rounded-2xl p-5 border border-dark-200">
                    <div className="text-sm text-dark-500 mb-1">Clients</div>
                    <div className="text-3xl font-bold text-dark-900">{stats.total}</div>
                </div>
                <div className="bg-white rounded-2xl p-5 border border-dark-200">
                    <div className="text-sm text-dark-500 mb-1">Courses cumulées</div>
                    <div className="text-3xl font-bold text-dark-900">{stats.totalRides}</div>
                </div>
                <div className="bg-white rounded-2xl p-5 border border-dark-200">
                    <div className="text-sm text-dark-500 mb-1">Volume total</div>
                    <div className="text-3xl font-bold text-dark-900">{fmtCurrencyChf(stats.totalSpent)}</div>
                </div>
            </div>

            {/* Filtres */}
            <div className="bg-white rounded-2xl p-4 border border-dark-200 flex flex-wrap items-center gap-3">
                <div className="relative flex-1 min-w-[220px]">
                    <i className="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-dark-400"></i>
                    <input
                        type="text"
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        placeholder="Rechercher par nom, email ou téléphone…"
                        className="w-full pl-10 pr-3 py-2 border border-dark-200 rounded-xl text-sm focus:border-primary-500 focus:outline-none"
                    />
                </div>
                <select
                    value={filterMinisite}
                    onChange={(e) => setFilterMinisite(e.target.value)}
                    className="px-3 py-2 border border-dark-200 rounded-xl text-sm bg-white"
                >
                    <option value="">Tous les mini-sites</option>
                    {minisites.map(m => (
                        <option key={m.uid} value={m.uid}>{m.name || m.slug}</option>
                    ))}
                </select>
            </div>

            {/* Tableau */}
            <div className="bg-white rounded-2xl border border-dark-200 overflow-hidden">
                {loading ? (
                    <div className="p-12 flex items-center justify-center">
                        <Spinner size="lg" />
                    </div>
                ) : filtered.length === 0 ? (
                    <div className="p-12 text-center text-dark-500">
                        <i className="fas fa-user-slash text-4xl mb-3 text-dark-300"></i>
                        <p className="font-semibold">Aucun client trouvé</p>
                        <p className="text-sm mt-1">Vos clients apparaîtront ici dès qu'ils auront réservé via un mini-site.</p>
                    </div>
                ) : (
                    <div className="overflow-x-auto">
                        <table className="w-full">
                            <thead className="bg-dark-50 border-b border-dark-200">
                                <tr className="text-left text-xs uppercase tracking-wider text-dark-500">
                                    <th className="px-4 py-3 font-semibold">Client</th>
                                    <th className="px-4 py-3 font-semibold">Courses</th>
                                    <th className="px-4 py-3 font-semibold">Volume</th>
                                    <th className="px-4 py-3 font-semibold">Dernière course</th>
                                    <th className="px-4 py-3 font-semibold">Mini-sites</th>
                                    <th className="px-4 py-3 font-semibold">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {filtered.map(c => (
                                    <ClientRow
                                        key={c.uid}
                                        client={c}
                                        busy={busyUid === c.uid}
                                        onAutologin={handleAutologin}
                                    />
                                ))}
                            </tbody>
                        </table>
                    </div>
                )}
            </div>

            {/* Modal autolog */}
            {autologinModal && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={() => setAutologinModal(null)}>
                    <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden" onClick={(e) => e.stopPropagation()}>
                        <div className="p-6">
                            <div className="flex items-center gap-3 mb-4">
                                <div className="w-12 h-12 rounded-xl bg-primary-100 text-primary-600 flex items-center justify-center">
                                    <i className="fas fa-right-to-bracket text-xl"></i>
                                </div>
                                <div>
                                    <h3 className="text-lg font-bold text-dark-900">Connexion automatique générée</h3>
                                    <p className="text-xs text-dark-500">{fmtClientName(autologinModal.client)}</p>
                                </div>
                            </div>

                            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3 text-sm text-emerald-800 mb-4">
                                <i className="fas fa-circle-check mr-1"></i>
                                Un onglet vient de s'ouvrir avec une session active sur <strong>my.taxis.ch</strong>.
                                Le lien est valide pendant <strong>{autologinModal.minutes || 15} minutes</strong>.
                            </div>

                            <label className="block text-xs font-semibold text-dark-700 mb-1">Lien magique</label>
                            <div className="bg-dark-900 text-emerald-300 font-mono text-[11px] rounded-xl p-3 break-all relative">
                                {autologinModal.magic_url}
                                <button
                                    onClick={() => {
                                        navigator.clipboard.writeText(autologinModal.magic_url);
                                        setToast?.({ message: 'Lien copié', type: 'success' });
                                    }}
                                    className="absolute top-2 right-2 bg-dark-800 hover:bg-dark-700 text-white text-[11px] px-2 py-1 rounded"
                                >
                                    <i className="fas fa-copy mr-1"></i>Copier
                                </button>
                            </div>

                            <div className="flex gap-2 mt-4">
                                <a
                                    href={autologinModal.magic_url}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="flex-1 inline-flex items-center justify-center gap-2 bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2.5 rounded-xl"
                                >
                                    <i className="fas fa-arrow-up-right-from-square"></i>
                                    Ouvrir à nouveau
                                </a>
                                <button
                                    onClick={() => setAutologinModal(null)}
                                    className="flex-1 bg-dark-100 hover:bg-dark-200 text-dark-700 font-semibold py-2.5 rounded-xl"
                                >
                                    Fermer
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

window.ClientsView = ClientsView;