'use client'

import { useState, useMemo } from 'react'
import { useTeam, TeamMember } from '../hooks/useTeam'
import InviteModal from '../components/team/InviteModal'
import EditMemberModal from '../components/team/EditMemberModal'
import PermissionsMatrix from '../components/team/PermissionsMatrix'
import { useEmployee } from '@/hooks/useEmployee' // your existing auth hook

// ─── Helpers ─────────────────────────────────────────────────

function initials(m: TeamMember) {
  return (m.firstName[0] ?? '') + (m.lastName[0] ?? '')
}

function timeAgo(dateStr: string | null) {
  if (!dateStr) return 'Never'
  const diff = Date.now() - new Date(dateStr).getTime()
  const mins = Math.floor(diff / 60000)
  if (mins < 2) return 'Just now'
  if (mins < 60) return `${mins}m ago`
  const hrs = Math.floor(mins / 60)
  if (hrs < 24) return `${hrs}h ago`
  const days = Math.floor(hrs / 24)
  if (days < 30) return `${days}d ago`
  return new Date(dateStr).toLocaleDateString('en', { month: 'short', day: 'numeric' })
}

const AVATAR_BG: string[] = [
  'bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300',
  'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
  'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300',
  'bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300',
  'bg-pink-100 dark:bg-pink-900/40 text-pink-700 dark:text-pink-300',
]

function avatarColor(id: string) {
  const hash = id.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0)
  return AVATAR_BG[hash % AVATAR_BG.length]
}

function RoleBadge({ role }: { role: string }) {
  const styles: Record<string, string> = {
    OWNER: 'bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300 border-violet-100 dark:border-violet-900/50',
    MANAGER: 'bg-blue-50 dark:bg-blue-950/40 text-blue-700 dark:text-blue-300 border-blue-100 dark:border-blue-900/50',
    AGENT: 'bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 border-zinc-200 dark:border-zinc-700',
  }
  return (
    <span className={`text-xs px-2 py-0.5 rounded-full border font-medium ${styles[role] ?? styles.AGENT}`}>
      {role.charAt(0) + role.slice(1).toLowerCase()}
    </span>
  )
}

function StatusBadge({ member }: { member: TeamMember }) {
  if (member.invitationStatus === 'pending') {
    return (
      <span className="text-xs px-2 py-0.5 rounded-full border bg-amber-50 dark:bg-amber-950/30 text-amber-700 dark:text-amber-400 border-amber-100 dark:border-amber-900/50">
        Pending invite
      </span>
    )
  }
  if (!member.isActive) {
    return (
      <span className="text-xs px-2 py-0.5 rounded-full border bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700">
        Deactivated
      </span>
    )
  }
  return (
    <span className="text-xs px-2 py-0.5 rounded-full border bg-green-50 dark:bg-green-950/30 text-green-700 dark:text-green-400 border-green-100 dark:border-green-900/50">
      Active
    </span>
  )
}

// ─── Main page ────────────────────────────────────────────────

export default function TeamPage() {
  const { employee: currentEmployee } = useEmployee()
  const { members, stats, loading, error, invite, updateRole, deactivate, reactivate, remove } = useTeam()

  const [search, setSearch] = useState('')
  const [roleFilter, setRoleFilter] = useState<string>('')
  const [statusFilter, setStatusFilter] = useState<string>('')
  const [inviteOpen, setInviteOpen] = useState(false)
  const [editTarget, setEditTarget] = useState<TeamMember | null>(null)
  const [toast, setToast] = useState<string | null>(null)

  const isOwner = currentEmployee?.role === 'OWNER'

  function showToast(msg: string) {
    setToast(msg)
    setTimeout(() => setToast(null), 3000)
  }

  const filtered = useMemo(() => {
    return members.filter((m) => {
      const q = search.toLowerCase()
      const matchQ = !q ||
        `${m.firstName} ${m.lastName}`.toLowerCase().includes(q) ||
        m.email.toLowerCase().includes(q)
      const matchRole = !roleFilter || m.role === roleFilter
      const matchStatus =
        !statusFilter ||
        (statusFilter === 'active' && m.isActive && m.invitationStatus === 'accepted') ||
        (statusFilter === 'pending' && m.invitationStatus === 'pending') ||
        (statusFilter === 'inactive' && !m.isActive && m.invitationStatus === 'accepted')
      return matchQ && matchRole && matchStatus
    })
  }, [members, search, roleFilter, statusFilter])

  // ── Handlers with toasts ───────────────────────────────────

  const handleInvite: typeof invite = async (payload) => {
    await invite(payload)
    showToast(`Invite sent to ${payload.email}`)
  }

  const handleUpdateRole = async (id: string, role: 'MANAGER' | 'AGENT') => {
    await updateRole(id, role)
    showToast('Role updated')
  }

  const handleDeactivate = async (id: string) => {
    await deactivate(id)
    showToast('Member deactivated')
  }

  const handleReactivate = async (id: string) => {
    await reactivate(id)
    showToast('Member reactivated')
  }

  const handleRemove = async (id: string) => {
    await remove(id)
    showToast('Member removed')
  }

  // ── Render ─────────────────────────────────────────────────

  return (
    <div className="max-w-5xl mx-auto py-8 px-4 sm:px-6">

      {/* Page header */}
      <div className="flex items-start justify-between mb-6">
        <div>
          <h1 className="text-2xl font-medium text-zinc-900 dark:text-white">Team</h1>
          <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
            Manage your employees and their access levels
          </p>
        </div>
        {isOwner && (
          <button
            onClick={() => setInviteOpen(true)}
            className="flex items-center gap-1.5 px-4 py-2 text-sm bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-lg font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors"
          >
            <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16">
              <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
            </svg>
            Invite member
          </button>
        )}
      </div>

      {/* Stat cards */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
        {[
          { label: 'Total members', value: stats.total },
          { label: 'Active',        value: stats.active },
          { label: 'Pending invite', value: stats.pending },
          { label: 'Deactivated',   value: stats.inactive },
        ].map((s) => (
          <div
            key={s.label}
            className="bg-zinc-50 dark:bg-zinc-800/50 rounded-xl p-4 flex flex-col gap-1"
          >
            <span className="text-xs text-zinc-500 dark:text-zinc-400">{s.label}</span>
            <span className="text-2xl font-medium text-zinc-900 dark:text-white">{s.value}</span>
          </div>
        ))}
      </div>

      {/* Filters */}
      <div className="flex flex-wrap gap-2 mb-4">
        <div className="relative flex-1 min-w-48">
          <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-400" fill="none" viewBox="0 0 14 14">
            <circle cx="6" cy="6" r="4.5" stroke="currentColor" strokeWidth="1.2" />
            <path d="M10 10L13 13" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
          </svg>
          <input
            type="text"
            placeholder="Search by name or email…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full pl-8 pr-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-white focus:border-transparent"
          />
        </div>
        <select
          value={roleFilter}
          onChange={(e) => setRoleFilter(e.target.value)}
          className="px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-white"
        >
          <option value="">All roles</option>
          <option value="OWNER">Owner</option>
          <option value="MANAGER">Manager</option>
          <option value="AGENT">Agent</option>
        </select>
        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-white"
        >
          <option value="">All statuses</option>
          <option value="active">Active</option>
          <option value="pending">Pending</option>
          <option value="inactive">Deactivated</option>
        </select>
      </div>

      {/* Table */}
      <div className="border border-zinc-200 dark:border-zinc-700 rounded-xl overflow-hidden mb-10">
        {loading ? (
          <div className="py-16 flex flex-col items-center gap-2 text-zinc-400">
            <div className="w-5 h-5 border-2 border-zinc-200 dark:border-zinc-700 border-t-zinc-500 rounded-full animate-spin" />
            <span className="text-sm">Loading team…</span>
          </div>
        ) : error ? (
          <div className="py-12 text-center text-sm text-red-500">{error}</div>
        ) : filtered.length === 0 ? (
          <div className="py-16 text-center">
            <p className="text-sm text-zinc-500 dark:text-zinc-400">No members match your filters</p>
          </div>
        ) : (
          <table className="w-full">
            <thead>
              <tr className="bg-zinc-50 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-700">
                <th className="text-left px-4 py-3 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Member</th>
                <th className="text-left px-4 py-3 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Role</th>
                <th className="text-left px-4 py-3 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Status</th>
                <th className="text-left px-4 py-3 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide hidden sm:table-cell">Last active</th>
                <th className="px-4 py-3" />
              </tr>
            </thead>
            <tbody>
              {filtered.map((member, i) => (
                <tr
                  key={member.id}
                  className={[
                    'border-b border-zinc-100 dark:border-zinc-800 last:border-0',
                    'hover:bg-zinc-50 dark:hover:bg-zinc-800/30 transition-colors',
                  ].join(' ')}
                >
                  {/* Member */}
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-3">
                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium flex-shrink-0 ${avatarColor(member.id)}`}>
                        {initials(member)}
                      </div>
                      <div>
                        <div className="text-sm font-medium text-zinc-900 dark:text-white">
                          {member.firstName} {member.lastName}
                          {member.id === currentEmployee?.id && (
                            <span className="ml-1.5 text-[10px] text-zinc-400">(you)</span>
                          )}
                        </div>
                        <div className="text-xs text-zinc-500 dark:text-zinc-400">{member.email}</div>
                      </div>
                    </div>
                  </td>

                  {/* Role */}
                  <td className="px-4 py-3">
                    <RoleBadge role={member.role} />
                  </td>

                  {/* Status */}
                  <td className="px-4 py-3">
                    <StatusBadge member={member} />
                  </td>

                  {/* Last active */}
                  <td className="px-4 py-3 hidden sm:table-cell">
                    <span className="text-xs text-zinc-400 dark:text-zinc-500">
                      {member.invitationStatus === 'pending' ? '—' : timeAgo(member.lastActiveAt)}
                    </span>
                  </td>

                  {/* Actions */}
                  <td className="px-4 py-3 text-right">
                    {isOwner && member.role !== 'OWNER' && (
                      <button
                        onClick={() => setEditTarget(member)}
                        className="text-xs px-3 py-1.5 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors"
                      >
                        Manage
                      </button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Permissions matrix */}
      <PermissionsMatrix />

      {/* Modals */}
      <InviteModal
        open={inviteOpen}
        onClose={() => setInviteOpen(false)}
        onInvite={handleInvite}
      />
      <EditMemberModal
        member={editTarget}
        open={!!editTarget}
        onClose={() => setEditTarget(null)}
        onUpdateRole={handleUpdateRole}
        onDeactivate={handleDeactivate}
        onReactivate={handleReactivate}
        onRemove={handleRemove}
      />

      {/* Toast */}
      {toast && (
        <div className="fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-2.5 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-xl shadow-lg text-sm font-medium animate-in slide-in-from-bottom-2 duration-200">
          <svg className="w-4 h-4 text-green-400 dark:text-green-600" fill="none" viewBox="0 0 16 16">
            <path d="M3 8L6.5 11.5L13 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          {toast}
        </div>
      )}
    </div>
  )
}