/**
 * TaxiBook Partner - Access View
 * ===============================
 * Gestion des sous-comptes d'accès (utilisateurs limités).
 * Mêmes comptes que dans le manager TaxiBook.
 */

const PLATFORM_FLAGS = [
    { key: 'tablet_access', label: 'Tablet', icon: 'fa-tablet-screen-button', color: 'indigo' },
    { key: 'smart_access', label: 'Smart', icon: 'fa-mobile-screen', color: 'emerald' },
    { key: 'agent_access', label: 'Agent', icon: 'fa-headset', color: 'blue' }
];

const USERNAME_REASONS = {
    empty: 'Identifiant requis',
    too_short: 'Au moins 3 caractères',
    invalid_chars: 'Lettres, chiffres, . _ - uniquement',
    used_by_partner: 'Identifiant déjà utilisé par un partenaire',
    used_by_subaccount: 'Identifiant déjà utilisé'
};

const emptyForm = () => ({
    username: '',
    password: '',
    label: '',
    access_type: 'limited',
    tablet_access: false,
    smart_access: false,
    agent_access: false,
    is_active: true
});

// ============================================================================
// SUB-ACCOUNT FORM MODAL
// ============================================================================

const SubAccountModal = ({ open, onClose, onSubmit, initial, saving }) => {
    const [form, setForm] = useState(emptyForm());
    const [showPassword, setShowPassword] = useState(false);
    const [usernameStatus, setUsernameStatus] = useState({ state: 'idle', reason: null });

    useEffect(() => {
        if (open) {
            if (initial) {
                setForm({
                    username: initial.username || '',
                    password: '',
                    label: initial.label || '',
                    access_type: initial.access_type || 'limited',
                    tablet_access: !!initial.tablet_access,
                    smart_access: !!initial.smart_access,
                    agent_access: !!initial.agent_access,
                    is_active: initial.is_active !== 0
                });
                setUsernameStatus({ state: 'available', reason: null });
            } else {
                setForm(emptyForm());
                setUsernameStatus({ state: 'idle', reason: null });
            }
            setShowPassword(false);
        }
    }, [open, initial]);

    // Vérification d'identifiant en temps réel (debounced)
    useEffect(() => {
        if (!open) return;
        if (initial) return; // on ne re-vérifie pas un username déjà existant en édition
        const u = (form.username || '').trim();
        if (!u) {
            setUsernameStatus({ state: 'idle', reason: null });
            return;
        }
        if (u.length < 3) {
            setUsernameStatus({ state: 'invalid', reason: 'too_short' });
            return;
        }
        if (!/^[a-z0-9_.-]+$/.test(u)) {
            setUsernameStatus({ state: 'invalid', reason: 'invalid_chars' });
            return;
        }
        setUsernameStatus({ state: 'checking', reason: null });
        const timer = setTimeout(async () => {
            try {
                const res = await window.partnerAPI.checkSubAccountUsername(u);
                if (res.success) {
                    if (res.data.available) {
                        setUsernameStatus({ state: 'available', reason: null });
                    } else {
                        setUsernameStatus({ state: 'taken', reason: res.data.reason });
                    }
                } else {
                    setUsernameStatus({ state: 'idle', reason: null });
                }
            } catch (e) {
                setUsernameStatus({ state: 'idle', reason: null });
            }
        }, 350);
        return () => clearTimeout(timer);
    }, [form.username, open, initial]);

    if (!open) return null;
    const isEdit = !!initial;
    const isUnlimited = form.access_type === 'unlimited';
    const usernameBlocking = !isEdit && (usernameStatus.state === 'invalid' || usernameStatus.state === 'taken' || usernameStatus.state === 'checking');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (usernameBlocking) return;
        onSubmit(form);
    };

    return (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4" onClick={onClose}>
            <div className="bg-white rounded-3xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl" onClick={(e) => e.stopPropagation()}>
                <div className="sticky top-0 bg-white border-b border-dark-100 p-6 flex justify-between items-start rounded-t-3xl z-10">
                    <div>
                        <h2 className="text-xl font-bold text-dark-900">
                            {isEdit ? 'Modifier le compte' : 'Nouveau compte'}
                        </h2>
                        <p className="text-sm text-dark-500 mt-1">
                            {isEdit ? `Compte de ${initial?.label || initial?.username}` : 'Créez un compte d\'accès pour votre équipe'}
                        </p>
                    </div>
                    <button onClick={onClose} className="w-10 h-10 rounded-full bg-dark-100 hover:bg-dark-200 flex items-center justify-center transition">
                        <i className="fas fa-times text-dark-500"></i>
                    </button>
                </div>

                <form onSubmit={handleSubmit} className="p-6 space-y-5">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label className="block text-sm font-semibold text-dark-700 mb-2">Identifiant *</label>
                            <div className="relative">
                                <input
                                    type="text"
                                    value={form.username}
                                    onChange={(e) => setForm({ ...form, username: e.target.value.toLowerCase().trim() })}
                                    required
                                    disabled={isEdit}
                                    className={`w-full px-4 py-3 pr-10 border-2 rounded-xl focus:outline-none transition disabled:bg-dark-50 disabled:text-dark-500 ${
                                        isEdit ? 'border-dark-200' :
                                        usernameStatus.state === 'available' ? 'border-emerald-400 focus:border-emerald-500' :
                                        usernameStatus.state === 'taken' || usernameStatus.state === 'invalid' ? 'border-rose-400 focus:border-rose-500' :
                                        'border-dark-200 focus:border-primary-500'
                                    }`}
                                    placeholder="ex: martin"
                                />
                                {!isEdit && form.username && (
                                    <span className="absolute right-3 top-1/2 -translate-y-1/2">
                                        {usernameStatus.state === 'checking' && (
                                            <i className="fas fa-spinner fa-spin text-dark-400"></i>
                                        )}
                                        {usernameStatus.state === 'available' && (
                                            <i className="fas fa-circle-check text-emerald-500"></i>
                                        )}
                                        {(usernameStatus.state === 'taken' || usernameStatus.state === 'invalid') && (
                                            <i className="fas fa-circle-xmark text-rose-500"></i>
                                        )}
                                    </span>
                                )}
                            </div>
                            {!isEdit && usernameStatus.state === 'available' && (
                                <p className="text-xs text-emerald-600 mt-1.5 flex items-center gap-1">
                                    <i className="fas fa-check"></i>
                                    Identifiant disponible
                                </p>
                            )}
                            {!isEdit && (usernameStatus.state === 'taken' || usernameStatus.state === 'invalid') && (
                                <p className="text-xs text-rose-600 mt-1.5 flex items-center gap-1">
                                    <i className="fas fa-triangle-exclamation"></i>
                                    {USERNAME_REASONS[usernameStatus.reason] || 'Identifiant indisponible'}
                                </p>
                            )}
                            {!isEdit && usernameStatus.state === 'checking' && (
                                <p className="text-xs text-dark-500 mt-1.5">Vérification…</p>
                            )}
                        </div>
                        <div>
                            <label className="block text-sm font-semibold text-dark-700 mb-2">Nom complet</label>
                            <input
                                type="text"
                                value={form.label}
                                onChange={(e) => setForm({ ...form, label: e.target.value })}
                                className="w-full px-4 py-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none transition"
                                placeholder="ex: Martin Dupont"
                            />
                        </div>
                    </div>

                    <div>
                        <label className="block text-sm font-semibold text-dark-700 mb-2">
                            Mot de passe {isEdit && <span className="text-dark-400 font-normal text-xs">(laisser vide pour conserver)</span>}
                        </label>
                        <div className="relative">
                            <input
                                type={showPassword ? 'text' : 'password'}
                                value={form.password}
                                onChange={(e) => setForm({ ...form, password: e.target.value })}
                                required={!isEdit}
                                className="w-full pl-4 pr-12 py-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none transition"
                                placeholder={isEdit ? '••••••••' : 'Mot de passe'}
                            />
                            <button
                                type="button"
                                onClick={() => setShowPassword(!showPassword)}
                                className="absolute right-3 top-1/2 -translate-y-1/2 text-dark-400 hover:text-dark-600 p-1"
                            >
                                <i className={`fas ${showPassword ? 'fa-eye-slash' : 'fa-eye'}`}></i>
                            </button>
                        </div>
                    </div>

                    <div>
                        <label className="block text-sm font-semibold text-dark-700 mb-2">Type d'accès</label>
                        <div className="grid grid-cols-2 gap-3">
                            <button
                                type="button"
                                onClick={() => setForm({ ...form, access_type: 'limited' })}
                                className={`p-4 rounded-xl border-2 text-left transition ${
                                    form.access_type === 'limited' ? 'border-primary-500 bg-primary-50' : 'border-dark-200 hover:border-dark-300'
                                }`}
                            >
                                <div className="flex items-center gap-2 mb-1">
                                    <i className="fas fa-user-lock text-blue-500"></i>
                                    <span className="font-semibold text-dark-900">Limité</span>
                                </div>
                                <p className="text-xs text-dark-500">Accès uniquement aux outils sélectionnés</p>
                            </button>
                            <button
                                type="button"
                                onClick={() => setForm({ ...form, access_type: 'unlimited' })}
                                className={`p-4 rounded-xl border-2 text-left transition ${
                                    form.access_type === 'unlimited' ? 'border-primary-500 bg-primary-50' : 'border-dark-200 hover:border-dark-300'
                                }`}
                            >
                                <div className="flex items-center gap-2 mb-1">
                                    <i className="fas fa-crown text-amber-500"></i>
                                    <span className="font-semibold text-dark-900">Illimité</span>
                                </div>
                                <p className="text-xs text-dark-500">Accès complet à tous les outils, y compris ce portail</p>
                            </button>
                        </div>
                    </div>

                    {!isUnlimited && (
                        <div>
                            <label className="block text-sm font-semibold text-dark-700 mb-2">Outils accessibles</label>
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                {PLATFORM_FLAGS.map(p => (
                                    <label key={p.key} className={`flex items-center gap-3 p-3 rounded-xl border-2 cursor-pointer transition ${
                                        form[p.key] ? `border-${p.color}-300 bg-${p.color}-50` : 'border-dark-200 hover:border-dark-300'
                                    }`}>
                                        <input
                                            type="checkbox"
                                            checked={form[p.key]}
                                            onChange={(e) => setForm({ ...form, [p.key]: e.target.checked })}
                                            className="w-4 h-4 accent-primary-500"
                                        />
                                        <div className={`w-8 h-8 rounded-lg flex items-center justify-center bg-${p.color}-100 text-${p.color}-600`}>
                                            <i className={`fas ${p.icon}`}></i>
                                        </div>
                                        <span className="font-medium text-dark-800">{p.label}</span>
                                    </label>
                                ))}
                            </div>
                        </div>
                    )}

                    {isEdit && (
                        <label className="flex items-center gap-3 p-3 rounded-xl border-2 border-dark-200 cursor-pointer">
                            <input
                                type="checkbox"
                                checked={form.is_active}
                                onChange={(e) => setForm({ ...form, is_active: e.target.checked })}
                                className="w-4 h-4 accent-primary-500"
                            />
                            <div>
                                <p className="font-medium text-dark-800">Compte actif</p>
                                <p className="text-xs text-dark-500">Décochez pour suspendre l'accès sans supprimer le compte</p>
                            </div>
                        </label>
                    )}

                    <div className="flex gap-3 pt-3 border-t border-dark-100">
                        <button
                            type="button"
                            onClick={onClose}
                            className="flex-1 py-3 px-4 border-2 border-dark-200 text-dark-700 font-semibold rounded-xl hover:bg-dark-50 transition"
                        >
                            Annuler
                        </button>
                        <button
                            type="submit"
                            disabled={saving || usernameBlocking}
                            className="flex-1 py-3 px-4 gradient-primary text-white font-semibold rounded-xl hover:opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                        >
                            {saving ? <Spinner size="sm" /> : <i className="fas fa-check"></i>}
                            {isEdit ? 'Enregistrer' : 'Créer le compte'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

// ============================================================================
// SUB-ACCOUNT ROW
// ============================================================================

const SubAccountRow = ({ account, onEdit, onDelete, isMe }) => {
    const isUnlimited = account.access_type === 'unlimited';
    const platforms = PLATFORM_FLAGS.filter(p => account[p.key]);

    const formatDate = (s) => {
        if (!s) return '—';
        try {
            const d = new Date(s.includes('T') ? s : s + 'Z');
            return d.toLocaleDateString('fr-CH', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
        } catch (e) { return s; }
    };

    return (
        <div className={`p-5 rounded-2xl border ${account.is_active ? 'border-dark-100 bg-white' : 'border-dark-100 bg-dark-50 opacity-70'} shadow-sm`}>
            <div className="flex items-start justify-between gap-4 flex-wrap">
                <div className="flex items-start gap-4 min-w-0 flex-1">
                    <div className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
                        isUnlimited ? 'bg-amber-100 text-amber-600' : 'bg-blue-100 text-blue-600'
                    }`}>
                        <i className={`fas ${isUnlimited ? 'fa-crown' : 'fa-user-lock'} text-xl`}></i>
                    </div>
                    <div className="min-w-0 flex-1">
                        <div className="flex items-center gap-2 flex-wrap mb-1">
                            <h3 className="text-lg font-bold text-dark-900 truncate">{account.label || account.username}</h3>
                            <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold ${
                                isUnlimited ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700'
                            }`}>
                                {isUnlimited ? 'Illimité' : 'Limité'}
                            </span>
                            {!account.is_active && (
                                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-dark-200 text-dark-600">
                                    Suspendu
                                </span>
                            )}
                            {isMe && (
                                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">
                                    Vous
                                </span>
                            )}
                        </div>
                        <p className="text-sm text-dark-500 mb-2">@{account.username}</p>
                        <div className="flex flex-wrap gap-1.5">
                            {isUnlimited ? (
                                <span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-amber-50 text-amber-700">
                                    <i className="fas fa-infinity"></i> Tous les outils
                                </span>
                            ) : platforms.length === 0 ? (
                                <span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-dark-100 text-dark-500">
                                    Aucun accès configuré
                                </span>
                            ) : platforms.map(p => (
                                <span key={p.key} className={`inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-${p.color}-50 text-${p.color}-700`}>
                                    <i className={`fas ${p.icon} text-[10px]`}></i>
                                    {p.label}
                                </span>
                            ))}
                        </div>
                        <p className="text-xs text-dark-400 mt-2">
                            Dernière connexion : {formatDate(account.last_login_at)}
                        </p>
                    </div>
                </div>

                <div className="flex items-center gap-2">
                    <button
                        onClick={() => onEdit(account)}
                        className="px-3 py-2 rounded-lg text-sm font-semibold text-dark-700 hover:bg-dark-100 transition flex items-center gap-2"
                        title="Modifier"
                    >
                        <i className="fas fa-pen"></i>
                        <span className="hidden sm:inline">Modifier</span>
                    </button>
                    <button
                        onClick={() => onDelete(account)}
                        className="px-3 py-2 rounded-lg text-sm font-semibold text-rose-600 hover:bg-rose-50 transition flex items-center gap-2"
                        title="Supprimer"
                        disabled={isMe}
                    >
                        <i className="fas fa-trash"></i>
                        <span className="hidden sm:inline">Supprimer</span>
                    </button>
                </div>
            </div>
        </div>
    );
};

// ============================================================================
// ACCESS VIEW
// ============================================================================

const AccessView = ({ partner, setToast }) => {
    const [accounts, setAccounts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState(null);
    const [saving, setSaving] = useState(false);
    const [filter, setFilter] = useState('all');
    const currentSub = window.partnerAPI.getSubAccount && window.partnerAPI.getSubAccount();

    const load = async () => {
        setLoading(true);
        try {
            const res = await window.partnerAPI.getSubAccounts();
            if (res.success) {
                setAccounts(res.data.sub_accounts || []);
            } else {
                setToast && setToast({ message: res.error || 'Erreur de chargement', type: 'error' });
            }
        } catch (e) {
            setToast && setToast({ message: 'Erreur de connexion', type: 'error' });
        } finally {
            setLoading(false);
        }
    };

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

    const handleSubmit = async (form) => {
        setSaving(true);
        try {
            const payload = {
                username: form.username,
                label: form.label,
                access_type: form.access_type,
                tablet_access: form.tablet_access,
                smart_access: form.smart_access,
                agent_access: form.agent_access,
                is_active: form.is_active
            };
            if (form.password) payload.password = form.password;

            const res = editing
                ? await window.partnerAPI.updateSubAccount(editing.id, payload)
                : await window.partnerAPI.createSubAccount(payload);

            if (res.success) {
                setToast && setToast({ message: editing ? 'Compte modifié' : 'Compte créé', type: 'success' });
                setModalOpen(false);
                setEditing(null);
                load();
            } else {
                setToast && setToast({ message: res.error || 'Erreur', type: 'error' });
            }
        } catch (e) {
            setToast && setToast({ message: 'Erreur de connexion', type: 'error' });
        } finally {
            setSaving(false);
        }
    };

    const handleDelete = async (account) => {
        if (!confirm(`Supprimer définitivement le compte de "${account.label || account.username}" ?`)) return;
        try {
            const res = await window.partnerAPI.deleteSubAccount(account.id);
            if (res.success) {
                setToast && setToast({ message: 'Compte supprimé', type: 'success' });
                load();
            } else {
                setToast && setToast({ message: res.error || 'Erreur', type: 'error' });
            }
        } catch (e) {
            setToast && setToast({ message: 'Erreur de connexion', type: 'error' });
        }
    };

    const filtered = accounts.filter(a => {
        if (filter === 'unlimited') return a.access_type === 'unlimited';
        if (filter === 'limited') return a.access_type !== 'unlimited';
        if (filter === 'inactive') return !a.is_active;
        return true;
    });

    const stats = {
        total: accounts.length,
        unlimited: accounts.filter(a => a.access_type === 'unlimited').length,
        limited: accounts.filter(a => a.access_type !== 'unlimited').length,
        inactive: accounts.filter(a => !a.is_active).length
    };

    return (
        <div className="space-y-6">
            {/* Header */}
            <div className="flex items-center justify-between gap-4 flex-wrap">
                <div>
                    <h1 className="text-3xl font-bold text-dark-900">Accès</h1>
                    <p className="text-dark-500 mt-1">Gérez les comptes utilisateurs de votre équipe (Smart, Agent, Tablet, …)</p>
                </div>
                <button
                    onClick={() => { setEditing(null); setModalOpen(true); }}
                    className="px-5 py-3 gradient-primary text-white font-semibold rounded-xl hover:opacity-90 transition flex items-center gap-2 shadow-lg shadow-primary-500/30"
                >
                    <i className="fas fa-plus"></i>
                    Nouveau compte
                </button>
            </div>

            {/* Notice illimité */}
            <div className="bg-amber-50 border border-amber-200 rounded-2xl p-4 flex items-start gap-3">
                <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <i className="fas fa-crown text-amber-600"></i>
                </div>
                <div>
                    <p className="font-semibold text-amber-900">Comptes illimités</p>
                    <p className="text-sm text-amber-800 mt-0.5">
                        Seuls les comptes <strong>illimités</strong> peuvent se connecter au portail Partenaire (ce site).
                        Les comptes limités ont accès uniquement aux outils que vous leur autorisez (Smart, Agent, Tablet, etc.).
                    </p>
                </div>
            </div>

            {/* Stats + filters */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                {[
                    { id: 'all', label: 'Tous', value: stats.total, icon: 'fa-users', color: 'primary' },
                    { id: 'unlimited', label: 'Illimités', value: stats.unlimited, icon: 'fa-crown', color: 'amber' },
                    { id: 'limited', label: 'Limités', value: stats.limited, icon: 'fa-user-lock', color: 'blue' },
                    { id: 'inactive', label: 'Suspendus', value: stats.inactive, icon: 'fa-user-slash', color: 'rose' }
                ].map(c => (
                    <button
                        key={c.id}
                        onClick={() => setFilter(c.id)}
                        className={`text-left p-4 rounded-2xl border transition ${
                            filter === c.id ? `border-${c.color}-300 bg-${c.color}-50 shadow-md` : 'border-dark-100 bg-white hover:border-dark-200'
                        }`}
                    >
                        <div className="flex items-center justify-between mb-2">
                            <div className={`w-8 h-8 rounded-lg flex items-center justify-center bg-${c.color}-100 text-${c.color}-600`}>
                                <i className={`fas ${c.icon} text-sm`}></i>
                            </div>
                        </div>
                        <p className="text-2xl font-bold text-dark-900">{c.value}</p>
                        <p className="text-sm text-dark-500">{c.label}</p>
                    </button>
                ))}
            </div>

            {/* List */}
            {loading ? (
                <div className="flex items-center justify-center py-20">
                    <Spinner size="lg" />
                </div>
            ) : filtered.length === 0 ? (
                <div className="bg-white rounded-2xl border border-dark-100 p-12 text-center">
                    <div className="w-16 h-16 bg-dark-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i className="fas fa-users text-2xl text-dark-400"></i>
                    </div>
                    <h3 className="text-lg font-bold text-dark-900 mb-2">Aucun compte</h3>
                    <p className="text-dark-500 mb-6">
                        {filter === 'all'
                            ? "Créez le premier compte d'accès pour votre équipe."
                            : 'Aucun compte ne correspond à ce filtre.'}
                    </p>
                    {filter === 'all' && (
                        <button
                            onClick={() => { setEditing(null); setModalOpen(true); }}
                            className="px-5 py-3 gradient-primary text-white font-semibold rounded-xl hover:opacity-90 transition inline-flex items-center gap-2"
                        >
                            <i className="fas fa-plus"></i>
                            Créer un compte
                        </button>
                    )}
                </div>
            ) : (
                <div className="space-y-3">
                    {filtered.map(account => (
                        <SubAccountRow
                            key={account.id}
                            account={account}
                            onEdit={(a) => { setEditing(a); setModalOpen(true); }}
                            onDelete={handleDelete}
                            isMe={!!(currentSub && currentSub.id === account.id)}
                        />
                    ))}
                </div>
            )}

            <SubAccountModal
                open={modalOpen}
                onClose={() => { setModalOpen(false); setEditing(null); }}
                onSubmit={handleSubmit}
                initial={editing}
                saving={saving}
            />
        </div>
    );
};