import { useState, useEffect, useRef, useContext } from 'react'
import { Trash2, ChevronDown, Check, ShieldAlert, Eye, EyeOff, FileEdit, BarChart3, X } from 'lucide-react'
import { useLanguage } from '../i18n/LanguageContext'
import { api } from '../utils/api'
import { useToast } from './ToastContainer'
import Modal from './Modal'
import TabbedModal from './TabbedModal'
import StatusBadge from './StatusBadge'
import { AppContext, PERMISSION_LEVELS } from '../App'

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' },
}

export default function TeamMemberPanel({ member, isEditingSelf, onClose, onSave, onDelete, canManageTeam, userRole, teams, brands: brandsList }) {
  const { t, lang } = useLanguage()
  const toast = useToast()
  const { roles } = useContext(AppContext)
  const [form, setForm] = useState({})
  const [dirty, setDirty] = useState(false)
  const [saving, setSaving] = useState(false)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [showBrandsDropdown, setShowBrandsDropdown] = useState(false)
  const [confirmPassword, setConfirmPassword] = useState('')
  const [showPassword, setShowPassword] = useState(false)
  const [passwordSaving, setPasswordSaving] = useState(false)
  const [activeTab, setActiveTab] = useState('details')
  const brandsDropdownRef = useRef(null)

  // Workload state (loaded internally)
  const [memberTasks, setMemberTasks] = useState([])
  const [memberPosts, setMemberPosts] = useState([])
  const [loadingWorkload, setLoadingWorkload] = useState(false)

  const memberId = member?._id || member?.id

  useEffect(() => {
    if (member) {
      setForm({
        name: member.name || '',
        email: member.email || '',
        password: '',
        permission_level: member.role || 'contributor',
        role_id: member.role_id || '',
        brands: Array.isArray(member.brands) ? member.brands : [],
        phone: member.phone || '',
        modules: Array.isArray(member.modules) ? member.modules : ALL_MODULES,
        team_ids: Array.isArray(member.teams) ? member.teams.map(t => t.id) : [],
      })
      setDirty(false)
      setConfirmPassword('')
      setShowPassword(false)
      setActiveTab('details')
      if (memberId) loadWorkload()
    }
  }, [member])

  const loadWorkload = async () => {
    if (!memberId) return
    setLoadingWorkload(true)
    try {
      const [tasksRes, postsRes] = await Promise.allSettled([
        api.get(`/tasks?assignedTo=${memberId}`),
        api.get(`/posts?assignedTo=${memberId}`),
      ])
      setMemberTasks(tasksRes.status === 'fulfilled' ? (tasksRes.value.data || tasksRes.value || []) : [])
      setMemberPosts(postsRes.status === 'fulfilled' ? (postsRes.value.data || postsRes.value || []) : [])
    } catch {
      setMemberTasks([])
      setMemberPosts([])
    } finally {
      setLoadingWorkload(false)
    }
  }

  if (!member) return null

  const update = (field, value) => {
    setForm(f => ({ ...f, [field]: value }))
    setDirty(true)
  }

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

  const toggleBrand = (brandName) => {
    const current = form.brands || []
    update('brands', current.includes(brandName)
      ? current.filter(b => b !== brandName)
      : [...current, brandName]
    )
  }

  const handleSave = async () => {
    setSaving(true)
    try {
      await onSave(memberId, {
        name: form.name,
        email: form.email,
        role: form.permission_level,
        role_id: form.role_id || null,
        brands: form.brands || [],
        phone: form.phone,
        modules: form.modules,
        team_ids: form.team_ids,
      }, isEditingSelf)
      setDirty(false)
    } finally {
      setSaving(false)
    }
  }

  const handlePasswordChange = async () => {
    if (!form.password || form.password !== confirmPassword) return
    setPasswordSaving(true)
    try {
      await onSave(memberId, { password: form.password }, false)
      setForm(f => ({ ...f, password: '' }))
      setConfirmPassword('')
      setShowPassword(false)
      toast.success(t('team.passwordChanged'))
    } finally {
      setPasswordSaving(false)
    }
  }

  const passwordMismatch = confirmPassword && form.password !== confirmPassword

  const confirmDelete = async () => {
    setShowDeleteConfirm(false)
    await onDelete(memberId)
    onClose()
  }

  const initials = member.name?.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase() || '?'
  const currentRole = roles.find(r => (r.Id || r.id) === form.role_id)
  const roleName = currentRole?.name || member.role_name || member.team_role || ''
  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

  const showAdminTab = !isEditingSelf && userRole === 'superadmin'

  const tabs = [
    { key: 'details', label: t('team.details'), icon: FileEdit },
    { key: 'workload', label: t('team.workload'), icon: BarChart3 },
    ...(showAdminTab ? [{ key: 'admin', label: t('team.adminActions'), icon: ShieldAlert }] : []),
  ]

  return (
    <>
      <TabbedModal
        onClose={onClose}
        size="md"
        header={
          <div className="flex items-center gap-3 min-w-0">
            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white text-sm font-bold shrink-0">
              {initials}
            </div>
            <div className="flex-1 min-w-0">
              <input
                type="text"
                value={form.name}
                onChange={e => update('name', e.target.value)}
                className="w-full text-lg font-semibold text-text-primary bg-transparent border-0 p-0 focus:outline-none focus:ring-0"
                placeholder={t('team.fullName')}
              />
              <span className="text-[11px] px-2 py-0.5 rounded-full font-medium bg-brand-primary/10 text-brand-primary capitalize">
                {roleName}
              </span>
            </div>
          </div>
        }
        tabs={tabs}
        activeTab={activeTab}
        onTabChange={setActiveTab}
        footer={<>
          <div className="flex items-center gap-2">
            {canManageTeam && onDelete && !isEditingSelf && (
              <button
                onClick={() => setShowDeleteConfirm(true)}
                className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-red-600 border border-red-200 rounded-lg hover:bg-red-50 transition-colors"
              >
                <Trash2 className="w-4 h-4" />
                {t('team.removeMember')}
              </button>
            )}
          </div>
          <div className="flex items-center gap-2.5">
            {dirty && (
              <button
                onClick={handleSave}
                disabled={!form.name || saving}
                className={`px-4 py-2 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 ${saving ? 'btn-loading' : ''}`}
              >
                {isEditingSelf ? t('team.saveProfile') : t('team.saveChanges')}
              </button>
            )}
          </div>
        </>}
      >
        {/* Details Tab */}
        {activeTab === 'details' && (
          <div className="p-6 space-y-3">
            {!isEditingSelf && (
              <div>
                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.email')}</label>
                <input
                  type="email"
                  value={form.email}
                  disabled
                  className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-surface-tertiary text-text-tertiary cursor-not-allowed"
                />
              </div>
            )}

            <div className="grid grid-cols-2 gap-3">
              {/* Permission Level (superadmin only) */}
              {userRole === 'superadmin' && !isEditingSelf && (
                <div>
                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.permissionLevel')}</label>
                  <select
                    value={form.permission_level}
                    onChange={e => update('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>
              )}

              {/* Role (from Roles table) */}
              <div>
                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.role')}</label>
                {isEditingSelf ? (
                  <input
                    type="text"
                    value={roleName || '—'}
                    disabled
                    className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-surface-tertiary text-text-tertiary cursor-not-allowed"
                  />
                ) : (
                  <select
                    value={form.role_id || ''}
                    onChange={e => update('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>
                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.phone')}</label>
                <input
                  type="text"
                  value={form.phone}
                  onChange={e => update('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>
            </div>

            <div ref={brandsDropdownRef} className="relative">
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.brands')}</label>
              {isEditingSelf && userRole !== 'superadmin' ? (
                <div className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-surface-tertiary text-text-tertiary cursor-not-allowed">
                  {(form.brands || []).length === 0 ? '—' : (form.brands || []).join(', ')}
                </div>
              ) : <>
              <button
                type="button"
                onClick={() => setShowBrandsDropdown(prev => !prev)}
                className="w-full flex items-center justify-between 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 bg-white text-left"
              >
                <span className={`flex-1 truncate ${(form.brands || []).length === 0 ? 'text-text-tertiary' : 'text-text-primary'}`}>
                  {(form.brands || []).length === 0
                    ? t('team.selectBrands')
                    : (form.brands || []).join(', ')
                  }
                </span>
                <ChevronDown className={`w-4 h-4 text-text-tertiary shrink-0 transition-transform ${showBrandsDropdown ? 'rotate-180' : ''}`} />
              </button>

              {/* Selected brand chips */}
              {(form.brands || []).length > 0 && (
                <div className="flex flex-wrap gap-1 mt-1.5">
                  {(form.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={() => toggleBrand(b)} className="hover:text-red-500">
                        <X className="w-2.5 h-2.5" />
                      </button>
                    </span>
                  ))}
                </div>
              )}

              {/* Dropdown */}
              {showBrandsDropdown && (
                <div className="absolute z-20 mt-1 w-full bg-white border border-border rounded-lg shadow-lg max-h-48 overflow-y-auto">
                  {brandsList && brandsList.length > 0 ? (
                    brandsList.map(brand => {
                      const name = lang === 'ar' && brand.name_ar ? brand.name_ar : brand.name
                      const checked = (form.brands || []).includes(name)
                      return (
                        <button
                          type="button"
                          key={brand.id || brand._id}
                          onClick={() => toggleBrand(name)}
                          className={`w-full flex items-center gap-2.5 px-3 py-2 cursor-pointer 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 transition-colors ${
                            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>
                      )
                    })
                  ) : (
                    <p className="px-3 py-3 text-xs text-text-tertiary text-center">{t('brands.noBrands')}</p>
                  )}
                </div>
              )}
              </>}
            </div>

            {/* Modules toggle */}
            {(!isEditingSelf || userRole === 'superadmin') && canManageTeam && (
              <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 = (form.modules || []).includes(mod)
                    const colors = MODULE_COLORS[mod]
                    return (
                      <button
                        key={mod}
                        type="button"
                        onClick={() => {
                          update('modules', active
                            ? form.modules.filter(m => m !== mod)
                            : [...(form.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 multi-select */}
            {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 active = (form.team_ids || []).includes(team.id || team._id)
                    const teamId = team.id || team._id
                    return (
                      <button
                        key={teamId}
                        type="button"
                        onClick={() => {
                          update('team_ids', active
                            ? form.team_ids.filter(id => id !== teamId)
                            : [...(form.team_ids || []), teamId]
                          )
                        }}
                        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>
            )}
          </div>
        )}

        {/* Workload Tab */}
        {activeTab === 'workload' && (
          <div className="p-6 space-y-3">
            {/* Stats */}
            <div className="grid grid-cols-4 gap-2">
              <div className="bg-surface-secondary rounded-lg p-2 text-center">
                <p className="text-lg font-bold text-text-primary">{memberTasks.length}</p>
                <p className="text-[10px] text-text-tertiary">{t('team.totalTasks')}</p>
              </div>
              <div className="bg-surface-secondary rounded-lg p-2 text-center">
                <p className="text-lg font-bold text-amber-500">{todoCount}</p>
                <p className="text-[10px] text-text-tertiary">{t('team.toDo')}</p>
              </div>
              <div className="bg-surface-secondary rounded-lg p-2 text-center">
                <p className="text-lg font-bold text-blue-500">{inProgressCount}</p>
                <p className="text-[10px] text-text-tertiary">{t('team.inProgress')}</p>
              </div>
              <div className="bg-surface-secondary rounded-lg p-2 text-center">
                <p className="text-lg font-bold text-emerald-500">{doneCount}</p>
                <p className="text-[10px] text-text-tertiary">{t('tasks.done')}</p>
              </div>
            </div>

            {/* Recent tasks */}
            {memberTasks.length > 0 && (
              <div>
                <h4 className="text-xs font-medium text-text-tertiary mb-2">{t('team.recentTasks')}</h4>
                <div className="space-y-1 max-h-40 overflow-y-auto">
                  {memberTasks.slice(0, 8).map(task => (
                    <div key={task._id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-surface-secondary">
                      <span className={`text-xs flex-1 min-w-0 truncate ${task.status === 'done' ? 'text-text-tertiary line-through' : 'text-text-primary'}`}>
                        {task.title}
                      </span>
                      <StatusBadge status={task.status} size="xs" />
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Recent posts */}
            {memberPosts.length > 0 && (
              <div>
                <h4 className="text-xs font-medium text-text-tertiary mb-2">{t('team.recentPosts')}</h4>
                <div className="space-y-1 max-h-40 overflow-y-auto">
                  {memberPosts.slice(0, 8).map(post => (
                    <div key={post._id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-surface-secondary">
                      <span className="text-xs text-text-primary flex-1 min-w-0 truncate">{post.title}</span>
                      <StatusBadge status={post.status} size="xs" />
                    </div>
                  ))}
                </div>
              </div>
            )}

            {loadingWorkload && (
              <p className="text-xs text-text-tertiary text-center py-2">{t('common.loading')}</p>
            )}
          </div>
        )}

        {/* Admin Actions Tab */}
        {activeTab === 'admin' && showAdminTab && (
          <div className="p-6 space-y-3">
            {/* Change password */}
            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.password')}</label>
              <div className="relative">
                <input
                  type={showPassword ? 'text' : 'password'}
                  value={form.password}
                  onChange={e => update('password', e.target.value)}
                  className="w-full px-3 py-2 pe-9 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.newPassword')}
                  autoComplete="new-password"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(v => !v)}
                  className="absolute end-2.5 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-text-primary"
                  tabIndex={-1}
                >
                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                </button>
              </div>
            </div>
            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.confirmPassword')}</label>
              <input
                type={showPassword ? 'text' : 'password'}
                value={confirmPassword}
                onChange={e => setConfirmPassword(e.target.value)}
                className={`w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary ${passwordMismatch ? 'border-red-400' : 'border-border'}`}
                placeholder={t('team.confirmPassword')}
                autoComplete="new-password"
              />
              {passwordMismatch && (
                <p className="text-[11px] text-red-500 mt-1">{t('team.passwordsDoNotMatch')}</p>
              )}
            </div>
            <button
              onClick={handlePasswordChange}
              disabled={!form.password || form.password.length < 6 || form.password !== confirmPassword || passwordSaving}
              className={`w-full px-4 py-2 bg-amber-500 text-white rounded-lg text-sm font-medium hover:bg-amber-600 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${passwordSaving ? 'btn-loading' : ''}`}
            >
              {t('team.changePassword')}
            </button>
          </div>
        )}
      </TabbedModal>

      <Modal
        isOpen={showDeleteConfirm}
        onClose={() => setShowDeleteConfirm(false)}
        title={t('team.removeMember')}
        isConfirm
        danger
        confirmText={t('team.remove')}
        onConfirm={confirmDelete}
      >
        {t('team.removeConfirm', { name: member?.name })}
      </Modal>
    </>
  )
}
