import { useState, useEffect, useContext, useRef } from 'react'
import { Plus, Users, ArrowLeft, User as UserIcon, Edit2, LayoutGrid, Network, Link2, ChevronDown, Check, X } from 'lucide-react'
import { getInitials } from '../utils/api'
import { AppContext, PERMISSION_LEVELS } from '../App'
import { useAuth } from '../contexts/AuthContext'
import { useLanguage } from '../i18n/LanguageContext'
import { api } from '../utils/api'
import MemberCard from '../components/MemberCard'
import StatusBadge from '../components/StatusBadge'
import BrandBadge from '../components/BrandBadge'
import TeamMemberPanel from '../components/TeamMemberPanel'
import TeamPanel from '../components/TeamPanel'
import Modal from '../components/Modal'
import { useToast } from '../components/ToastContainer'

const ALL_MODULES = ['marketing', 'projects', 'finance']
const MODULE_LABELS = { marketing: 'Marketing', projects: 'Projects', finance: 'Finance' }
const MODULE_COLORS = {
  marketing: { on: 'bg-emerald-100 text-emerald-700 border-emerald-300', off: 'bg-gray-100 text-gray-400 border-gray-200' },
  projects: { on: 'bg-blue-100 text-blue-700 border-blue-300', off: 'bg-gray-100 text-gray-400 border-gray-200' },
  finance: { on: 'bg-amber-100 text-amber-700 border-amber-300', off: 'bg-gray-100 text-gray-400 border-gray-200' },
}

const EMPTY_MEMBER = {
  name: '', email: '', password: '', permission_level: 'contributor',
  role_id: '', brands: [], phone: '', modules: [...ALL_MODULES], team_ids: [], preferred_language: 'en',
}

export default function Team() {
  const { t, lang } = useLanguage()
  const toast = useToast()
  const { teamMembers, loadTeam, currentUser, teams, loadTeams, brands, roles } = useContext(AppContext)
  const { user } = useAuth()
  const [panelMember, setPanelMember] = useState(null)
  const [panelIsEditingSelf, setPanelIsEditingSelf] = useState(false)
  const [selectedMember, setSelectedMember] = useState(null)
  const [memberTasks, setMemberTasks] = useState([])
  const [memberPosts, setMemberPosts] = useState([])
  const [loadingDetail, setLoadingDetail] = useState(false)
  const [panelTeam, setPanelTeam] = useState(null)
  const [teamFilter, setTeamFilter] = useState(null)
  const [viewMode, setViewMode] = useState('grid') // 'grid' | 'teams'

  // Add member modal state
  const [showAddModal, setShowAddModal] = useState(false)
  const [addForm, setAddForm] = useState({ ...EMPTY_MEMBER })
  const [addConfirmPassword, setAddConfirmPassword] = useState('')
  const [addPasswordError, setAddPasswordError] = useState('')
  const [addSaving, setAddSaving] = useState(false)
  const [showAddBrandsDropdown, setShowAddBrandsDropdown] = useState(false)
  const addBrandsRef = useRef(null)

  const canManageTeam = user?.role === 'superadmin' || user?.role === 'manager'

  const copyIssueLink = (teamId) => {
    const base = `${window.location.origin}/submit-issue`
    const url = teamId ? `${base}?team=${teamId}` : base
    navigator.clipboard.writeText(url)
    toast.success(t('issues.linkCopied'))
  }

  // Close brands dropdown on outside click
  useEffect(() => {
    const handler = (e) => {
      if (addBrandsRef.current && !addBrandsRef.current.contains(e.target)) setShowAddBrandsDropdown(false)
    }
    if (showAddBrandsDropdown) document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [showAddBrandsDropdown])

  const openNew = () => {
    setAddForm({ ...EMPTY_MEMBER })
    setAddConfirmPassword('')
    setAddPasswordError('')
    setShowAddModal(true)
  }

  const handleAddMember = async () => {
    setAddPasswordError('')
    if (addForm.password && addForm.password !== addConfirmPassword) {
      setAddPasswordError(t('team.passwordsDoNotMatch'))
      return
    }
    setAddSaving(true)
    try {
      const payload = {
        name: addForm.name,
        email: addForm.email,
        role: addForm.permission_level,
        role_id: addForm.role_id || null,
        brands: addForm.brands,
        phone: addForm.phone,
        modules: addForm.modules,
        preferred_language: addForm.preferred_language || 'en',
      }
      if (addForm.password) payload.password = addForm.password
      const created = await api.post('/users/team', payload)
      const memberId = created?.id || created?.Id

      // Sync team memberships
      if (addForm.team_ids.length > 0 && memberId) {
        for (const teamId of addForm.team_ids) {
          await api.post(`/teams/${teamId}/members`, { user_id: memberId })
        }
      }

      await loadTeam()
      await loadTeams()
      setShowAddModal(false)
      toast.success(t('team.memberAdded') || 'Member added')
    } catch (err) {
      console.error('Add member failed:', err)
      toast.error(err.message || t('common.failedToSave'))
    } finally {
      setAddSaving(false)
    }
  }

  const updateAdd = (field, value) => setAddForm(f => ({ ...f, [field]: value }))
  const toggleAddBrand = (name) => {
    setAddForm(f => ({
      ...f,
      brands: f.brands.includes(name) ? f.brands.filter(b => b !== name) : [...f.brands, name],
    }))
  }

  const openEdit = (member) => {
    const isSelf = member._id === user?.id || member.id === user?.id
    setPanelMember(member)
    setPanelIsEditingSelf(isSelf)
  }

  const handlePanelSave = async (memberId, data, isEditingSelf) => {
    try {
      if (isEditingSelf && user?.role !== 'superadmin') {
        await api.patch('/users/me/profile', {
          name: data.name,
          phone: data.phone,
        })
      } else {
        const payload = {
          name: data.name,
          email: data.email,
          role: data.role,
          role_id: data.role_id,
          brands: data.brands,
          phone: data.phone,
          modules: data.modules,
        }
        if (data.password) payload.password = data.password

        if (memberId) {
          await api.patch(`/users/team/${memberId}`, payload)
        } else {
          const created = await api.post('/users/team', payload)
          memberId = created?.id || created?.Id
        }
      }

      // Sync team memberships if team_ids provided
      if (data.team_ids !== undefined && memberId) {
        const member = teamMembers.find(m => (m.id || m._id) === memberId)
        const currentTeamIds = member?.teams ? member.teams.map(t => t.id) : []
        const targetTeamIds = data.team_ids || []

        const toAdd = targetTeamIds.filter(id => !currentTeamIds.includes(id))
        const toRemove = currentTeamIds.filter(id => !targetTeamIds.includes(id))

        for (const teamId of toAdd) {
          await api.post(`/teams/${teamId}/members`, { user_id: memberId })
        }
        for (const teamId of toRemove) {
          await api.delete(`/teams/${teamId}/members/${memberId}`)
        }
      }

      await loadTeam()
      await loadTeams()
    } catch (err) {
      console.error('Save failed:', err)
      toast.error(err.message || t('common.failedToSave'))
    }
  }

  const handleTeamSave = async (teamId, data) => {
    try {
      if (teamId) {
        await api.patch(`/teams/${teamId}`, data)
      } else {
        await api.post('/teams', data)
      }
      await loadTeams()
      await loadTeam()
    } catch (err) {
      console.error('Team save failed:', err)
      toast.error(err.message || t('team.failedToSaveTeam'))
    }
  }

  const handleTeamDelete = async (teamId) => {
    try {
      await api.delete(`/teams/${teamId}`)
      setPanelTeam(null)
      if (teamFilter === teamId) setTeamFilter(null)
      await loadTeams()
      await loadTeam()
    } catch (err) {
      console.error('Team delete failed:', err)
    }
  }

  const handlePanelDelete = async (memberId) => {
    await api.delete(`/users/team/${memberId}`)
    if (selectedMember?._id === memberId) {
      setSelectedMember(null)
    }
    setPanelMember(null)
    await loadTeam()
  }

  const openMemberDetail = async (member) => {
    setSelectedMember(member)
    setLoadingDetail(true)
    try {
      const [tasksRes, postsRes] = await Promise.allSettled([
        api.get(`/tasks?assignedTo=${member._id}`),
        api.get(`/posts?assignedTo=${member._id}`),
      ])
      setMemberTasks(tasksRes.status === 'fulfilled' ? (tasksRes.value.data || tasksRes.value || []) : [])
      setMemberPosts(postsRes.status === 'fulfilled' ? (postsRes.value.data || postsRes.value || []) : [])
    } catch {
      setMemberTasks([])
      setMemberPosts([])
    } finally {
      setLoadingDetail(false)
    }
  }

  // Member detail view
  if (selectedMember) {
    const todoCount = memberTasks.filter(t => t.status === 'todo').length
    const inProgressCount = memberTasks.filter(t => t.status === 'in_progress').length
    const doneCount = memberTasks.filter(t => t.status === 'done').length

    return (
      <div className="space-y-6 animate-fade-in">
        <button
          onClick={() => setSelectedMember(null)}
          className="flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
        >
          <ArrowLeft className="w-4 h-4" />
          {t('team.backToTeam')}
        </button>

        {/* Member profile */}
        <div className="bg-white rounded-xl border border-border p-6">
          <div className="flex items-start gap-4">
            <div className={`w-16 h-16 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white text-xl font-bold`}>
              {selectedMember.name?.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()}
            </div>
            <div className="flex-1">
              <h2 className="text-xl font-bold text-text-primary">{selectedMember.name}</h2>
              <p className="text-sm text-text-secondary capitalize">{selectedMember.role_name || selectedMember.team_role || ''}</p>
              {selectedMember.email && (
                <p className="text-sm text-text-tertiary mt-1">{selectedMember.email}</p>
              )}
              {selectedMember.brands && selectedMember.brands.length > 0 && (
                <div className="flex flex-wrap gap-2 mt-3">
                  {selectedMember.brands.map(b => <BrandBadge key={b} brand={b} />)}
                </div>
              )}
            </div>
            <button
              onClick={() => openEdit(selectedMember)}
              className="px-3 py-1.5 text-sm font-medium text-brand-primary hover:bg-brand-primary/10 rounded-lg"
            >
              {t('common.edit')}
            </button>
          </div>
        </div>

        {/* Workload stats */}
        <div className="grid grid-cols-4 gap-4">
          <div className="bg-white rounded-xl border border-border p-4 text-center">
            <p className="text-2xl font-bold text-text-primary">{memberTasks.length}</p>
            <p className="text-xs text-text-tertiary">{t('team.totalTasks')}</p>
          </div>
          <div className="bg-white rounded-xl border border-border p-4 text-center">
            <p className="text-2xl font-bold text-amber-500">{todoCount}</p>
            <p className="text-xs text-text-tertiary">{t('team.toDo')}</p>
          </div>
          <div className="bg-white rounded-xl border border-border p-4 text-center">
            <p className="text-2xl font-bold text-blue-500">{inProgressCount}</p>
            <p className="text-xs text-text-tertiary">{t('team.inProgress')}</p>
          </div>
          <div className="bg-white rounded-xl border border-border p-4 text-center">
            <p className="text-2xl font-bold text-emerald-500">{doneCount}</p>
            <p className="text-xs text-text-tertiary">{t('tasks.done')}</p>
          </div>
        </div>

        {/* Tasks & Posts */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Tasks */}
          <div className="bg-white rounded-xl border border-border">
            <div className="px-5 py-4 border-b border-border">
              <h3 className="font-semibold text-text-primary">{t('tasks.title')} ({memberTasks.length})</h3>
            </div>
            <div className="divide-y divide-border-light max-h-[400px] overflow-y-auto">
              {loadingDetail ? (
                <div className="py-8 text-center text-sm text-text-tertiary">{t('common.loading')}</div>
              ) : memberTasks.length === 0 ? (
                <div className="py-8 text-center text-sm text-text-tertiary">{t('team.noTasks')}</div>
              ) : (
                memberTasks.map(task => (
                  <div key={task._id} className="flex items-center gap-3 px-5 py-3">
                    <div className="flex-1 min-w-0">
                      <p className={`text-sm font-medium ${task.status === 'done' ? 'text-text-tertiary line-through' : 'text-text-primary'}`}>
                        {task.title}
                      </p>
                    </div>
                    <StatusBadge status={task.status} size="xs" />
                  </div>
                ))
              )}
            </div>
          </div>

          {/* Posts */}
          <div className="bg-white rounded-xl border border-border">
            <div className="px-5 py-4 border-b border-border">
              <h3 className="font-semibold text-text-primary">{t('nav.posts')} ({memberPosts.length})</h3>
            </div>
            <div className="divide-y divide-border-light max-h-[400px] overflow-y-auto">
              {loadingDetail ? (
                <div className="py-8 text-center text-sm text-text-tertiary">{t('common.loading')}</div>
              ) : memberPosts.length === 0 ? (
                <div className="py-8 text-center text-sm text-text-tertiary">{t('posts.noPosts')}</div>
              ) : (
                memberPosts.map(post => (
                  <div key={post._id} className="flex items-center gap-3 px-5 py-3">
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-text-primary truncate">{post.title}</p>
                      {post.brand && <BrandBadge brand={post.brand} />}
                    </div>
                    <StatusBadge status={post.status} size="xs" />
                  </div>
                ))
              )}
            </div>
          </div>
        </div>

        {/* Team Member Panel */}
        {panelMember && (
          <TeamMemberPanel
            member={panelMember}
            isEditingSelf={panelIsEditingSelf}
            onClose={() => setPanelMember(null)}
            onSave={handlePanelSave}
            onDelete={canManageTeam ? handlePanelDelete : null}
            canManageTeam={canManageTeam}
            userRole={user?.role}
            teams={teams}
            brands={brands}
          />
        )}
      </div>
    )
  }

  const displayedMembers = teamFilter
    ? teamMembers.filter(m => m.teams?.some(t => t.id === teamFilter))
    : teamMembers

  // Members not in any team
  const unassignedMembers = teamMembers.filter(m => !m.teams || m.teams.length === 0)

  const avatarColors = [
    'from-indigo-400 to-purple-500',
    'from-pink-400 to-rose-500',
    'from-emerald-400 to-teal-500',
    'from-amber-400 to-orange-500',
    'from-cyan-400 to-blue-500',
  ]

  // Team grid
  return (
    <div className="space-y-4 animate-fade-in">
      {/* Toolbar */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <p className="text-sm text-text-secondary">
            {displayedMembers.length} {displayedMembers.length !== 1 ? t('team.membersPlural') : t('team.member')}
          </p>
          {/* View toggle */}
          <div className="flex items-center bg-white border border-border rounded-lg overflow-hidden">
            <button
              onClick={() => setViewMode('grid')}
              className={`p-2 transition-colors ${viewMode === 'grid' ? 'bg-brand-primary text-white' : 'text-text-tertiary hover:text-text-primary'}`}
              title={t('team.gridView')}
            >
              <LayoutGrid className="w-4 h-4" />
            </button>
            <button
              onClick={() => setViewMode('teams')}
              className={`p-2 transition-colors ${viewMode === 'teams' ? 'bg-brand-primary text-white' : 'text-text-tertiary hover:text-text-primary'}`}
              title={t('team.teamsView')}
            >
              <Network className="w-4 h-4" />
            </button>
          </div>
        </div>
        <div className="flex gap-2">
          {/* Copy generic issue link */}
          <button
            onClick={() => copyIssueLink()}
            className="flex items-center gap-2 px-4 py-2 bg-white border border-border text-text-primary rounded-lg text-sm font-medium hover:bg-surface-secondary transition-colors"
            title={t('team.copyGenericIssueLink')}
          >
            <Link2 className="w-4 h-4" />
            {t('issues.copyPublicLink')}
          </button>

          {/* Edit own profile button */}
          <button
            onClick={() => {
              const self = teamMembers.find(m => m._id === user?.id || m.id === user?.id)
              if (self) openEdit(self)
            }}
            className="flex items-center gap-2 px-4 py-2 bg-white border border-border text-text-primary rounded-lg text-sm font-medium hover:bg-surface-secondary transition-colors"
          >
            <UserIcon className="w-4 h-4" />
            {t('team.myProfile')}
          </button>

          {/* Create Team button (managers and superadmins only) */}
          {canManageTeam && (
            <button
              onClick={() => setPanelTeam({})}
              className="flex items-center gap-2 px-4 py-2 bg-white border border-border text-text-primary rounded-lg text-sm font-medium hover:bg-surface-secondary transition-colors"
            >
              <Users className="w-4 h-4" />
              {t('teams.createTeam')}
            </button>
          )}

          {/* Add member button (managers and superadmins only) */}
          {canManageTeam && (
            <button
              onClick={openNew}
              className="flex items-center gap-2 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm"
            >
              <Plus className="w-4 h-4" />
              {t('team.addMember')}
            </button>
          )}
        </div>
      </div>

      {/* Grid view: team filter pills + member cards */}
      {viewMode === 'grid' && (
        <>
          {/* Team filter pills */}
          {teams.length > 0 && (
            <div className="flex flex-wrap items-center gap-2">
              <span className="text-xs font-medium text-text-tertiary">{t('teams.teams')}:</span>
              <button
                onClick={() => setTeamFilter(null)}
                className={`text-xs px-3 py-1.5 rounded-full border font-medium transition-colors ${
                  !teamFilter ? 'bg-brand-primary text-white border-brand-primary' : 'bg-white text-text-secondary border-border hover:bg-surface-tertiary'
                }`}
              >
                {t('common.all')}
              </button>
              {teams.map(team => {
                const tid = team.id || team._id
                const active = teamFilter === tid
                return (
                  <div key={tid} className="flex items-center gap-0.5">
                    <button
                      onClick={() => setTeamFilter(active ? null : tid)}
                      className={`text-xs px-3 py-1.5 rounded-full border font-medium transition-colors ${
                        active ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-text-secondary border-border hover:bg-surface-tertiary'
                      }`}
                    >
                      {team.name} ({team.member_count || 0})
                    </button>
                    {canManageTeam && (
                      <button
                        onClick={() => setPanelTeam(team)}
                        className="p-1 text-text-tertiary hover:text-text-primary rounded"
                        title={t('teams.editTeam')}
                      >
                        <Edit2 className="w-3 h-3" />
                      </button>
                    )}
                  </div>
                )
              })}
            </div>
          )}

          {/* Member grid */}
          {displayedMembers.length === 0 ? (
            <div className="py-20 text-center">
              <Users className="w-12 h-12 text-text-tertiary mx-auto mb-3" />
              <p className="text-text-secondary font-medium">{t('team.noMembers')}</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 stagger-children">
              {displayedMembers.map(member => (
                <MemberCard key={member._id} member={member} onClick={openMemberDetail} />
              ))}
            </div>
          )}
        </>
      )}

      {/* Teams (org chart) view */}
      {viewMode === 'teams' && (
        <div className="space-y-6">
          {teams.length === 0 && unassignedMembers.length === 0 ? (
            <div className="py-20 text-center">
              <Users className="w-12 h-12 text-text-tertiary mx-auto mb-3" />
              <p className="text-text-secondary font-medium">{t('team.noMembers')}</p>
            </div>
          ) : (
            <>
              {teams.map(team => {
                const tid = team.id || team._id
                const members = teamMembers.filter(m => m.teams?.some(t => t.id === tid))
                return (
                  <div key={tid} className="bg-white rounded-xl border border-border overflow-hidden">
                    {/* Team header */}
                    <div className="flex items-center justify-between px-5 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-border">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center text-white">
                          <Users className="w-5 h-5" />
                        </div>
                        <div>
                          <h3 className="font-semibold text-text-primary">{team.name}</h3>
                          <p className="text-xs text-text-tertiary">
                            {members.length} {members.length !== 1 ? t('team.membersPlural') : t('team.member')}
                            {team.description && ` · ${team.description}`}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center gap-1">
                        <button
                          onClick={() => copyIssueLink(tid)}
                          className="px-2 py-1.5 text-sm text-text-tertiary hover:text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
                          title={t('team.copyIssueLink')}
                        >
                          <Link2 className="w-4 h-4" />
                        </button>
                        {canManageTeam && (
                          <button
                            onClick={() => setPanelTeam(team)}
                            className="px-2 py-1.5 text-sm font-medium text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
                          >
                            <Edit2 className="w-4 h-4" />
                          </button>
                        )}
                      </div>
                    </div>

                    {/* Team members */}
                    {members.length === 0 ? (
                      <div className="py-8 text-center text-sm text-text-tertiary">{t('team.noMembers')}</div>
                    ) : (
                      <div className="divide-y divide-border-light">
                        {members.map(member => {
                          const colorIndex = (member.name?.charCodeAt(0) || 0) % avatarColors.length
                          return (
                            <div
                              key={member._id}
                              onClick={() => openMemberDetail(member)}
                              className="flex items-center gap-4 px-5 py-3 hover:bg-surface-secondary transition-colors cursor-pointer"
                            >
                              <div className={`w-10 h-10 rounded-full bg-gradient-to-br ${avatarColors[colorIndex]} flex items-center justify-center text-white text-sm font-bold shrink-0`}>
                                {getInitials(member.name)}
                              </div>
                              <div className="flex-1 min-w-0">
                                <p className="text-sm font-medium text-text-primary">{member.name}</p>
                                <p className="text-xs text-text-tertiary capitalize">{member.role_name || member.team_role || ''}</p>
                              </div>
                              {member.brands && member.brands.length > 0 && (
                                <div className="flex flex-wrap gap-1 shrink-0">
                                  {member.brands.slice(0, 3).map(b => <BrandBadge key={b} brand={b} />)}
                                </div>
                              )}
                            </div>
                          )
                        })}
                      </div>
                    )}
                  </div>
                )
              })}

              {/* Unassigned members */}
              {unassignedMembers.length > 0 && (
                <div className="bg-white rounded-xl border border-border overflow-hidden">
                  <div className="flex items-center gap-3 px-5 py-4 bg-gray-50 border-b border-border">
                    <div className="w-10 h-10 rounded-lg bg-gray-400 flex items-center justify-center text-white">
                      <UserIcon className="w-5 h-5" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-text-primary">{t('team.unassigned')}</h3>
                      <p className="text-xs text-text-tertiary">
                        {unassignedMembers.length} {unassignedMembers.length !== 1 ? t('team.membersPlural') : t('team.member')}
                      </p>
                    </div>
                  </div>
                  <div className="divide-y divide-border-light">
                    {unassignedMembers.map(member => {
                      const colorIndex = (member.name?.charCodeAt(0) || 0) % avatarColors.length
                      return (
                        <div
                          key={member._id}
                          onClick={() => openMemberDetail(member)}
                          className="flex items-center gap-4 px-5 py-3 hover:bg-surface-secondary transition-colors cursor-pointer"
                        >
                          <div className={`w-10 h-10 rounded-full bg-gradient-to-br ${avatarColors[colorIndex]} flex items-center justify-center text-white text-sm font-bold shrink-0`}>
                            {getInitials(member.name)}
                          </div>
                          <div className="flex-1 min-w-0">
                            <p className="text-sm font-medium text-text-primary">{member.name}</p>
                            <p className="text-xs text-text-tertiary capitalize">{member.role_name || member.team_role || ''}</p>
                          </div>
                          {member.brands && member.brands.length > 0 && (
                            <div className="flex flex-wrap gap-1 shrink-0">
                              {member.brands.slice(0, 3).map(b => <BrandBadge key={b} brand={b} />)}
                            </div>
                          )}
                        </div>
                      )
                    })}
                  </div>
                </div>
              )}
            </>
          )}
        </div>
      )}

      {/* Add Member Modal */}
      <Modal isOpen={showAddModal} onClose={() => setShowAddModal(false)} title={t('team.addMember')} size="md">
        <div className="space-y-4">
          <div>
            <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.fullName')} *</label>
            <input type="text" value={addForm.name} onChange={e => updateAdd('name', e.target.value)}
              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary" placeholder={t('team.fullName')} />
          </div>

          <div>
            <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.email')} *</label>
            <input type="email" value={addForm.email} onChange={e => updateAdd('email', e.target.value)}
              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary" placeholder="email@example.com" />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.password')}</label>
              <input type="password" value={addForm.password} onChange={e => updateAdd('password', e.target.value)}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary" placeholder="••••••••" />
              {!addForm.password && <p className="text-xs text-text-tertiary mt-1">{t('team.defaultPassword')}</p>}
            </div>
            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.confirmPassword')}</label>
              <input type="password" value={addConfirmPassword}
                onChange={e => { setAddConfirmPassword(e.target.value); setAddPasswordError('') }}
                disabled={!addForm.password}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary disabled:opacity-50" placeholder="••••••••" />
              {addPasswordError && <p className="text-xs text-red-500 mt-1">{addPasswordError}</p>}
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3">
            {user?.role === 'superadmin' && (
              <div>
                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.permissionLevel')}</label>
                <select value={addForm.permission_level} onChange={e => updateAdd('permission_level', e.target.value)}
                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary">
                  {PERMISSION_LEVELS.map(p => <option key={p.value} value={p.value}>{p.label}</option>)}
                </select>
              </div>
            )}
            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.role')}</label>
              <select value={addForm.role_id || ''} onChange={e => updateAdd('role_id', e.target.value ? Number(e.target.value) : null)}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary">
                <option value="">{t('team.selectRole')}</option>
                {roles.map(r => <option key={r.Id || r.id} value={r.Id || r.id}>{r.name}</option>)}
              </select>
            </div>
          </div>

          <div>
            <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.phone')}</label>
            <input type="text" value={addForm.phone} onChange={e => updateAdd('phone', e.target.value)}
              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary" placeholder="+966 ..." />
          </div>

          {/* Brands multi-select */}
          <div ref={addBrandsRef} className="relative">
            <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.brands')}</label>
            <button type="button" onClick={() => setShowAddBrandsDropdown(p => !p)}
              className="w-full flex items-center justify-between px-3 py-2 text-sm border border-border rounded-lg bg-white text-left focus:outline-none focus:ring-2 focus:ring-brand-primary/20">
              <span className={`flex-1 truncate ${addForm.brands.length === 0 ? 'text-text-tertiary' : 'text-text-primary'}`}>
                {addForm.brands.length === 0 ? t('team.selectBrands') : addForm.brands.join(', ')}
              </span>
              <ChevronDown className={`w-4 h-4 text-text-tertiary shrink-0 transition-transform ${showAddBrandsDropdown ? 'rotate-180' : ''}`} />
            </button>
            {addForm.brands.length > 0 && (
              <div className="flex flex-wrap gap-1 mt-1.5">
                {addForm.brands.map(b => (
                  <span key={b} className="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full bg-brand-primary/10 text-brand-primary font-medium">
                    {b}
                    <button type="button" onClick={() => toggleAddBrand(b)} className="hover:text-red-500"><X className="w-2.5 h-2.5" /></button>
                  </span>
                ))}
              </div>
            )}
            {showAddBrandsDropdown && (
              <div className="absolute z-20 mt-1 w-full bg-white border border-border rounded-lg shadow-lg max-h-48 overflow-y-auto">
                {brands.map(brand => {
                  const name = lang === 'ar' && brand.name_ar ? brand.name_ar : brand.name
                  const checked = addForm.brands.includes(name)
                  return (
                    <button key={brand.id || brand._id} type="button" onClick={() => toggleAddBrand(name)}
                      className={`w-full flex items-center gap-2.5 px-3 py-2 hover:bg-surface-secondary transition-colors text-left ${checked ? 'bg-brand-primary/5' : ''}`}>
                      <div className={`w-4 h-4 rounded border flex items-center justify-center shrink-0 ${checked ? 'bg-brand-primary border-brand-primary' : 'border-border'}`}>
                        {checked && <Check className="w-3 h-3 text-white" />}
                      </div>
                      <span className="text-sm text-text-primary">{brand.icon ? `${brand.icon} ` : ''}{name}</span>
                    </button>
                  )
                })}
              </div>
            )}
          </div>

          {/* Modules */}
          <div>
            <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.modules')}</label>
            <div className="flex flex-wrap gap-2">
              {ALL_MODULES.map(mod => {
                const active = addForm.modules.includes(mod)
                const colors = MODULE_COLORS[mod]
                return (
                  <button key={mod} type="button"
                    onClick={() => updateAdd('modules', active ? addForm.modules.filter(m => m !== mod) : [...addForm.modules, mod])}
                    className={`text-xs px-3 py-1.5 rounded-full border font-medium transition-colors ${active ? colors.on : colors.off}`}>
                    {MODULE_LABELS[mod]}
                  </button>
                )
              })}
            </div>
          </div>

          {/* Teams */}
          {teams.length > 0 && (
            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('teams.teams')}</label>
              <div className="flex flex-wrap gap-2">
                {teams.map(team => {
                  const tid = team.id || team._id
                  const active = addForm.team_ids.includes(tid)
                  return (
                    <button key={tid} type="button"
                      onClick={() => updateAdd('team_ids', active ? addForm.team_ids.filter(id => id !== tid) : [...addForm.team_ids, tid])}
                      className={`text-xs px-3 py-1.5 rounded-full border font-medium transition-colors ${active ? 'bg-blue-100 text-blue-700 border-blue-300' : 'bg-gray-100 text-gray-400 border-gray-200'}`}>
                      {team.name}
                    </button>
                  )
                })}
              </div>
            </div>
          )}

          {/* Preferred Language */}
          <div>
            <label className="block text-xs font-medium text-text-tertiary mb-1">{t('users.preferredLanguage')}</label>
            <div className="grid grid-cols-2 gap-2">
              {[{ value: 'en', label: 'English', flag: '🇬🇧' }, { value: 'ar', label: 'العربية', flag: '🇸🇦' }].map(l => (
                <button
                  key={l.value}
                  type="button"
                  onClick={() => updateAdd('preferred_language', l.value)}
                  className={`p-2 rounded-lg border-2 text-center transition-all ${
                    addForm.preferred_language === l.value
                      ? 'border-brand-primary bg-brand-primary/5'
                      : 'border-border hover:border-brand-primary/30'
                  }`}
                >
                  <span className="text-lg">{l.flag}</span>
                  <span className="text-xs font-medium text-text-primary ms-1.5">{l.label}</span>
                </button>
              ))}
            </div>
          </div>

          <button onClick={handleAddMember}
            disabled={!addForm.name || !addForm.email || addSaving}
            className={`w-full px-4 py-2.5 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${addSaving ? 'btn-loading' : ''}`}>
            {t('team.addMember')}
          </button>
        </div>
      </Modal>

      {/* Team Member Panel (edit only) */}
      {panelMember && (
        <TeamMemberPanel
          member={panelMember}
          isEditingSelf={panelIsEditingSelf}
          onClose={() => setPanelMember(null)}
          onSave={handlePanelSave}
          onDelete={canManageTeam ? handlePanelDelete : null}
          canManageTeam={canManageTeam}
          userRole={user?.role}
          teams={teams}
          brands={brands}
        />
      )}

      {/* Team Panel */}
      {panelTeam && (
        <TeamPanel
          team={panelTeam}
          onClose={() => setPanelTeam(null)}
          onSave={handleTeamSave}
          onDelete={canManageTeam ? handleTeamDelete : null}
          teamMembers={teamMembers}
        />
      )}
    </div>
  )
}
