import React, { useState, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { X, Copy, Check, Users, Crown, LogOut, Loader2, LayoutGrid, ChevronRight, PenLine, Search, Plus, AtSign, HelpCircle, ArrowLeft, ChevronLeft, Trash2 } from 'lucide-react';
import { useAuth } from '@/contexts/SupabaseAuthContext';
import { supabase } from '@/lib/customSupabaseClient';
import UserAvatarDisplay from '@/components/UserAvatarDisplay';
import VerifiedBadge from '@/components/VerifiedBadge';
import WhiteArrowSendIcon from '@/components/WhiteArrowSendIcon';
import WorkspacePanel, { ChannelChat, amcGlassCard, amcGlassCancel, amcGlassDanger, amcGlassPrimary } from '@/components/ProjectDashboard';
import { fetchCollaborationDocument, downloadCollaborationStatement } from '@/components/KlikCommentsPanel';
import { HelpSection } from '@/components/UserSettingsPage';
import { useAssistant } from '@/contexts/AssistantContext';
// ============================================================================
// Espace de travail (Programme Partenaire) : accueil « Mes équipes » en style
// conversation, puis chaque équipe en 4 onglets (Aperçu, Discussion, Membres,
// Outils). Jusqu'à 3 équipes par partenaire. Règle des commissions d'équipe :
// 50 % pour celui qui a amené le filleul, 50 % partagés à parts égales.
// ============================================================================
const TEAM_EMOJIS = ['🚀', '🏙', '💼', '🎯', '🔥', '🌍', '👗', '🍽'];
const TeamManagementModal = ({ onClose, personalReferralCode }) => {
const { user } = useAuth();
const [loading, setLoading] = useState(true);
const [teams, setTeams] = useState([]);
const [current, setCurrent] = useState(null); // équipe ouverte
const [tab, setTab] = useState('apercu');
const [members, setMembers] = useState([]);
const [discussionId, setDiscussionId] = useState(null);
const [showCreate, setShowCreate] = useState(false);
const [newTeamName, setNewTeamName] = useState('');
const [newTeamEmoji, setNewTeamEmoji] = useState('🚀');
const [showJoin, setShowJoin] = useState(false);
const [joinTeamId, setJoinTeamId] = useState('');
const [saving, setSaving] = useState(false);
const [error, setError] = useState('');
const [copied, setCopied] = useState('');
const [confirm, setConfirm] = useState(null); // { title, body, action, label }
const [showWorkspace, setShowWorkspace] = useState(null);
// Pilotage (étape 2) : tableau de bord, tâches, projets et budget, activité, gains du mois.
const [dash, setDash] = useState(null);
const [earnings, setEarnings] = useState(null);
const [showEarnings, setShowEarnings] = useState(false);
const [subTool, setSubTool] = useState(null); // 'taches' | 'projets' | 'activite'
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
const [newTaskAssignee, setNewTaskAssignee] = useState('');
const [projects, setProjects] = useState([]);
const [newProject, setNewProject] = useState('');
const [myPurchases, setMyPurchases] = useState(null);
const [attachProject, setAttachProject] = useState('');
const [activity, setActivity] = useState([]);
const [goalDraft, setGoalDraft] = useState(null);
const [teamCollabs, setTeamCollabs] = useState([]);
// Inviter quelqu'un : recherche par nom, invitation envoyée dans ses messages.
const [inviteQuery, setInviteQuery] = useState('');
const [inviteResults, setInviteResults] = useState([]);
const [invitedIds, setInvitedIds] = useState(new Set());
// Suivi des invitations envoyées par l'équipe.
const [invitations, setInvitations] = useState([]);
const [showInvites, setShowInvites] = useState(false);
const [inviteFilter, setInviteFilter] = useState('all');
const loadInvitations = async (teamId) => {
const { data } = await supabase.rpc('get_team_invitations', { p_team_id: teamId });
setInvitations((data || []).sort((a, b) => new Date(b.sent_at) - new Date(a.sent_at)));
};
// Écrire à l'invité : l'Espace de travail se ferme, puis la conversation
// AirMessenger s'ouvre (jamais les deux en même temps).
// Discussion privée avec un invité, dans un panneau à part de l'Espace de
// travail. L'invité reçoit et répond dans sa messagerie habituelle.
const [openDm, setOpenDm] = useState(null);
const [dmMessages, setDmMessages] = useState([]);
const [dmText, setDmText] = useState('');
const dmEndRef = useRef(null);
const loadDm = async (otherId, scroll = true) => {
const { data } = await supabase.from('messages').select('id, sender_id, recipient_id, content, created_at, read_at, type')
.or(`and(sender_id.eq.${user.id},recipient_id.eq.${otherId}),and(sender_id.eq.${otherId},recipient_id.eq.${user.id})`)
.order('created_at', { ascending: true }).limit(200);
setDmMessages(data || []);
Promise.resolve(supabase.from('messages').update({ read_at: new Date().toISOString() }).eq('sender_id', otherId).eq('recipient_id', user.id).is('read_at', null)).catch(() => {});
if (scroll) setTimeout(() => dmEndRef.current?.scrollIntoView({ behavior: 'smooth' }), 50);
};
useEffect(() => {
if (!openDm) return undefined;
loadDm(openDm.recipient_id);
const t = setInterval(() => loadDm(openDm.recipient_id, false), 5000);
return () => clearInterval(t);
}, [openDm?.recipient_id]);
const sendDm = async () => {
const content = dmText.trim();
if (!content || !openDm) return;
setDmText('');
const { error: e } = await supabase.rpc('send_direct_message', { p_recipient_id: openDm.recipient_id, p_content: content });
if (e) { setError(e.message); setDmText(content); return; }
loadDm(openDm.recipient_id);
};
const writeTo = (iv) => { setDmMessages([]); setOpenDm(iv); };
const searchInvitees = async (q) => {
setInviteQuery(q);
const term = q.trim().replace(/[%,()]/g, '');
if (term.length < 2) { setInviteResults([]); return; }
const { data } = await supabase.from('profiles').select('id, kliker_name, user_name, profile_photo_url, verified_badge_active')
.or(`kliker_name.ilike.%${term}%,user_name.ilike.%${term}%`).neq('id', user.id).limit(6);
const memberIds = new Set(members.map((m) => m.user_id));
setInviteResults((data || []).filter((p) => !memberIds.has(p.id)));
};
// Sa propre photo (ou le fantôme du profil) sur « Mon espace personnel ».
const [myProfile, setMyProfile] = useState(null);
useEffect(() => {
if (!user?.id) return;
Promise.resolve(supabase.from('profiles').select('kliker_name, user_name, profile_photo_url').eq('id', user.id).maybeSingle())
.then(({ data }) => setMyProfile(data || null)).catch(() => {});
}, [user?.id]);
// Canaux de l'équipe (onglet Discussion) et panneau de chat à part.
const [channels, setChannels] = useState(null);
const [openChat, setOpenChat] = useState(null);
const [channelForm, setChannelForm] = useState(null); // { id?, name, emoji }
const CHANNEL_EMOJIS = ['💬', '🎯', '💡', '📣', '🛍', '📅', '🤝', '📊'];
const loadChannels = async (teamId) => {
const { data } = await supabase.rpc('get_team_channels', { p_team_id: teamId });
setChannels(data || []);
};
const openChannel = (c) => {
setOpenChat(c);
Promise.resolve(supabase.rpc('mark_channel_read', { p_channel_id: c.channel_id })).catch(() => {});
};
const closeChannel = () => {
const c = openChat;
setOpenChat(null);
if (c) Promise.resolve(supabase.rpc('mark_channel_read', { p_channel_id: c.channel_id })).then(() => current && loadChannels(current.team_id)).catch(() => {});
};
const saveChannel = () => run(async () => {
const f = channelForm;
if (!f?.name?.trim()) throw new Error('Donne un nom au canal.');
if (f.id) {
const { error: e } = await supabase.rpc('rename_team_channel', { p_channel_id: f.id, p_name: f.name.trim(), p_emoji: f.emoji });
if (e) throw e;
setOpenChat((c) => (c && c.channel_id === f.id ? { ...c, name: f.name.trim(), emoji: f.emoji } : c));
} else {
const { error: e } = await supabase.rpc('create_team_channel', { p_team_id: current.team_id, p_name: f.name.trim(), p_emoji: f.emoji });
if (e) throw e;
}
setChannelForm(null);
loadChannels(current.team_id);
});
const [downloadingId, setDownloadingId] = useState(null);
const loadTeamCollabs = async (teamId) => {
const { data } = await supabase.rpc('get_my_team_collaborations', { p_team_id: teamId });
setTeamCollabs(data || []);
};
const downloadStatement = async (contractId) => {
if (downloadingId) return;
setDownloadingId(contractId);
try { const d = await fetchCollaborationDocument(contractId); if (d) await downloadCollaborationStatement(d, user.email); } finally { setDownloadingId(null); }
};
const loadDashboard = async (teamId) => {
const { data } = await supabase.rpc('get_team_dashboard', { p_team_id: teamId });
setDash(data || null);
};
const loadTasks = async (teamId) => {
const { data } = await supabase.from('team_tasks').select('id, title, assignee_id, done, created_by, created_at').eq('team_id', teamId).order('done', { ascending: true }).order('created_at', { ascending: false });
setTasks(data || []);
};
const loadProjects = async (teamId) => {
const { data } = await supabase.rpc('get_team_projects', { p_team_id: teamId });
setProjects(data || []);
};
const loadActivity = async (teamId) => {
const { data } = await supabase.rpc('get_team_activity', { p_team_id: teamId });
setActivity(data || []);
};
const loadMyPurchases = async () => {
const { data } = await supabase.from('creator_purchases').select('id, description, amount_usd, status, created_at, team_id, team_project_id').eq('user_id', user.id).neq('type', 'contract').neq('status', 'refunded').order('created_at', { ascending: false }).limit(30);
setMyPurchases(data || []);
};
useEffect(() => {
Promise.resolve(supabase.rpc('get_my_partner_earnings_month')).then(({ data }) => setEarnings(data || null)).catch(() => {});
}, []);
// Ouvrir un espace de travail (personnel ou d'équipe) efface le lecteur musique.
useEffect(() => { if (showWorkspace) window.dispatchEvent(new CustomEvent('klikklash:closeMusicPlayer')); }, [showWorkspace]);
// Se ferme (ainsi que l'espace de travail ouvert dedans) dès qu'un widget
// de chat s'ouvre — même règle que les autres panneaux annexes.
useEffect(() => {
const handler = () => { setShowWorkspace(null); onClose?.(); };
window.addEventListener('klikklash:closeSubPanels', handler);
return () => window.removeEventListener('klikklash:closeSubPanels', handler);
}, [onClose]);
const fetchTeams = async () => {
setLoading(true);
const { data } = await supabase.rpc('get_my_partner_teams');
setTeams(data || []);
setLoading(false);
return data || [];
};
useEffect(() => { fetchTeams(); }, []);
const openTeam = async (t) => {
setCurrent(t); setTab('apercu'); setError(''); setDiscussionId(null); setSubTool(null); setDash(null); setGoalDraft(null); setOpenChat(null); setChannels(null); setOpenDm(null); setShowInvites(false);
loadDashboard(t.team_id);
const { data: memberRows } = await supabase
.from('partner_team_members')
.select('user_id, joined_at, profiles(kliker_name, user_name, verified_badge_active, profile_photo_url)')
.eq('team_id', t.team_id)
.order('joined_at', { ascending: true });
setMembers(memberRows || []);
const { data: teamRow } = await supabase.from('partner_teams').select('owner_id').eq('id', t.team_id).maybeSingle();
if (teamRow) setCurrent((c) => (c && c.team_id === t.team_id ? { ...c, owner_id: teamRow.owner_id } : c));
const { data: chId } = await supabase.rpc('get_team_discussion_channel', { p_team_id: t.team_id });
Promise.resolve(supabase.rpc('mark_team_notifications_read', { p_team_id: t.team_id })).catch(() => {});
setDiscussionId(chId || null);
};
const run = async (fn) => {
setSaving(true); setError('');
try { await fn(); } catch (err) { setError(err?.message || 'Une erreur est survenue.'); } finally { setSaving(false); }
};
const handleCreate = () => run(async () => {
if (!newTeamName.trim()) throw new Error("Choisis un nom pour l'équipe.");
const { data: id, error: e } = await supabase.rpc('create_partner_team', { p_name: newTeamName.trim(), p_emoji: newTeamEmoji });
if (e) throw e;
setShowCreate(false); setNewTeamName('');
const list = await fetchTeams();
const t = list.find((x) => x.team_id === id);
if (t) openTeam(t);
});
const handleJoin = () => run(async () => {
if (!joinTeamId.trim()) throw new Error("Colle l'identifiant de l'équipe à rejoindre.");
const { error: e } = await supabase.rpc('join_partner_team', { p_team_id: joinTeamId.trim() });
if (e) throw e;
setShowJoin(false); setJoinTeamId('');
const list = await fetchTeams();
const t = list.find((x) => x.team_id === joinTeamId.trim());
if (t) openTeam(t);
});
const askLeave = () => setConfirm({
title: current.is_owner && Number(current.member_count) <= 1 ? "Dissoudre l'équipe ?" : "Quitter l'équipe ?",
body: "Tes commissions déjà acquises restent à toi et te seront versées. Tu ne recevras plus de part sur les nouvelles commissions de l'équipe.",
label: current.is_owner && Number(current.member_count) <= 1 ? 'Dissoudre' : 'Quitter',
action: () => run(async () => {
const { error: e } = await supabase.rpc('leave_partner_team', { p_team_id: current.team_id });
if (e) throw e;
setCurrent(null); await fetchTeams();
}),
});
const askKick = (m) => setConfirm({
title: `Retirer ${m.profiles?.kliker_name || m.profiles?.user_name || 'ce membre'} ?`,
body: "Ses commissions déjà acquises restent à lui. Il ne recevra plus de part sur les nouvelles commissions de l'équipe.",
label: 'Retirer',
action: () => run(async () => {
const { error: e } = await supabase.rpc('kick_partner_team_member', { p_user_id: m.user_id, p_team_id: current.team_id });
if (e) throw e;
await fetchTeams(); openTeam({ ...current, member_count: Number(current.member_count) - 1 });
}),
});
const copy = (key, text) => { navigator.clipboard.writeText(text); setCopied(key); setTimeout(() => setCopied(''), 1500); };
const teamLink = current && personalReferralCode ? `${window.location.origin}/?partner=${personalReferralCode}&channel=${current.team_channel}` : '';
const fmtTime = (d) => {
if (!d) return '';
const dt = new Date(d); const now = new Date();
return dt.toDateString() === now.toDateString() ? dt.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : dt.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' });
};
const n = Math.max(1, Number(current?.member_count || members.length || 1));
const yourShare = (15 + 15 / n).toFixed(2).replace('.', ',');
const otherShare = (15 / n).toFixed(2).replace('.', ',');
const G = {
blue: 'linear-gradient(135deg,#0a84ff,#5e5ce6)', green: 'linear-gradient(135deg,#34c759,#1a8a3f)',
orange: 'linear-gradient(135deg,#ff9f0a,#ff375f)', gold: 'linear-gradient(135deg,#ffd60a,#ff9f0a)',
purple: 'linear-gradient(135deg,#bf5af2,#5e5ce6)', teal: 'linear-gradient(135deg,#64d2ff,#0a84ff)',
pink: 'linear-gradient(135deg,#ff6482,#ff375f)', gray: 'linear-gradient(135deg,#8e8e93,#48484a)',
};
const gradIcon = (emoji, bg, size = 28) => (
{emoji}
);
const card = { background: '#fff', borderRadius: 18, padding: 13, marginBottom: 10, border: '1px solid rgba(255,255,255,0.6)' };
const label = { fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: '.03em', margin: '14px 2px 8px' };
const pillBtn = (bg, color) => ({ width: '100%', border: 'none', borderRadius: 999, padding: 12, fontSize: 14, fontWeight: 700, cursor: 'pointer', background: bg, color, fontFamily: 'inherit' });
const linkRow = (key, text) => (
{text || 'Lien indisponible'}
);
// ----- Contenu de l'accueil -----
const home = (
<>
{earnings && (
)}
Mes équipes · {teams.length} sur 3
{teams.length === 0 && (
Crée une équipe pour démarcher à plusieurs. Chaque membre a son propre lien d'équipe : sur chaque commission, 50 % vont à celui qui a amené le filleul et 50 % sont partagés à parts égales entre tous les membres.
{current.owner_id === user.id ? "Fixe un nombre de filleuls à atteindre ce mois-ci : il motive toute l'équipe." : "Le créateur n'a pas encore fixé d'objectif."}
)}
{(dash?.leaderboard || []).length > 1 && (
{gradIcon('🏆', G.gold)} Classement du mois
{dash.leaderboard.map((m, i) => (
{gradIcon(current.emoji || '🚀', G.blue)} Ton lien d'équipe
Pour les actions menées ensemble : une campagne d'équipe, un événement, un démarchage commun. Quand une personne arrivée par ce lien paie, la commission est partagée : 50 % pour toi qui l'as amenée, 50 % répartis entre tous les membres.
{linkRow('equipe', teamLink)}
⚠️ Les personnes qui arrivent par ce lien deviennent des utilisateurs de KlikKlash, pas des membres de ton équipe. Pour faire entrer un partenaire dans l'équipe, utilise le lien d'invitation (onglet Membres).
Ton lien personnel, à 100 % pour toi, reste dans ton Espace Partenaire.
{n <= 1 ? (
<>Tant que tu es seul dans l'équipe, toute la commission te revient. L'intérêt du lien d'équipe arrive avec les membres : chacun touche une part quand l'un de vous amène quelqu'un. Invite des partenaires depuis l'onglet Membres.
) : (
<>Exemple avec {n} membres, sur 30 $ de commission :
· quand tu amènes quelqu'un par ce lien, tu reçois {yourShare} $, et chaque autre membre {otherShare} $ ;
· quand un autre membre amène quelqu'un par son lien d'équipe, tu reçois {otherShare} $ sans rien faire.
)}
Cherche la personne : elle reçoit l'invitation dans ses messages. Si elle n'est pas encore partenaire, elle pourra le devenir, puis rejoindre l'équipe.
{n >= 10 ? (
Ton équipe est complète : 10 membres au plus. Pour inviter quelqu'un, un membre doit d'abord quitter l'équipe.
Chaque projet a son propre lien, pour savoir exactement ce qu'il rapporte. Les commissions restent partagées selon la règle de l'équipe (50 % pour celui qui amène le filleul, 50 % partagés), jamais selon l'argent investi.
Aucune collaboration d'équipe clôturée pour l'instant. Réponds à une offre AirDeal « pour l'équipe » : à la clôture, chaque membre reçoit sa part et son relevé.
) : (
{teamCollabs.map((c, i) => (
« {c.title} »{fmtTime(c.settled_at)}
Menée par{c.lead_name}· {Number(c.net_usd || 0).toFixed(2).replace('.', ',')} $ nets pour l'équipe
Ta part : {Number(c.my_payout || 0).toFixed(2).replace('.', ',')} $
{Number(c.my_payout || 0) > 0 && (
)}