'use client'

import { useCallback, useEffect, useState } from 'react'
import {
  getMe,
  getTeam,
  createTeamInvite,
  revokeTeamInvite,
  setMemberStatus,
  TeamData,
} from '@/lib/api/agent'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { Skeleton } from '@/components/ui/Skeleton'
import { ErrorState } from '@/components/ui/ErrorState'
import { useToast } from '@/components/ui/Toast'
import { Copy, UserPlus, UserX, RotateCcw, X } from 'lucide-react'

function roleBadge(role: string) {
  return role === 'admin' ? (
    <Badge variant="default">Admin</Badge>
  ) : (
    <Badge variant="secondary">Stock Keeper</Badge>
  )
}

export default function TeamPage() {
  const { toast } = useToast()
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [isAdmin, setIsAdmin] = useState(false)
  const [team, setTeam] = useState<TeamData | null>(null)
  const [inviteLink, setInviteLink] = useState<string | null>(null)
  const [busyId, setBusyId] = useState<string | null>(null)

  const refresh = useCallback(() => {
    getTeam().then(res => {
      if (!res.success) {
        setError(res.message)
      } else {
        setTeam(res.data)
      }
      setLoading(false)
    })
  }, [])

  useEffect(() => {
    getMe().then(me => {
      if (me.success && me.data.role === 'admin') {
        setIsAdmin(true)
        refresh()
      } else if (me.success) {
        setLoading(false)
      } else {
        setError(me.message)
        setLoading(false)
      }
    })
  }, [refresh])

  async function handleInvite() {
    const res = await createTeamInvite('stock_keeper')
    if (!res.success) {
      toast({ title: res.message, variant: 'destructive' })
      return
    }
    setInviteLink(res.data.invite_url)
    toast({
      title: 'Invite created',
      description: 'Share the link — it expires in 24 hours.',
      variant: 'success',
    })
    refresh()
  }

  async function copyInvite(link: string) {
    try {
      await navigator.clipboard.writeText(link)
      toast({ title: 'Invite link copied', variant: 'success' })
    } catch {
      toast({ title: 'Copy failed — select and copy manually', variant: 'destructive' })
    }
  }

  async function handleRevoke(inviteId: string) {
    setBusyId(inviteId)
    const res = await revokeTeamInvite(inviteId)
    setBusyId(null)
    if (!res.success) {
      toast({ title: res.message, variant: 'destructive' })
      return
    }
    toast({ title: 'Invite revoked', variant: 'success' })
    refresh()
  }

  async function toggleMember(id: string, current: string) {
    const next = current === 'disabled' ? 'active' : 'disabled'
    if (
      next === 'disabled' &&
      !window.confirm(
        'Disable this employee? They immediately lose access. Their past actions stay in the audit history.'
      )
    ) {
      return
    }
    setBusyId(id)
    const res = await setMemberStatus(id, next)
    setBusyId(null)
    if (!res.success) {
      toast({ title: res.message, variant: 'destructive' })
      return
    }
    toast({
      title: next === 'disabled' ? 'Employee disabled' : 'Employee re-enabled',
      variant: 'success',
    })
    refresh()
  }

  if (loading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-10 w-48" />
        <Skeleton className="h-64 w-full" />
      </div>
    )
  }

  if (error) return <ErrorState message={error} />

  if (!isAdmin) {
    return <ErrorState message="Only the business admin can manage the team." />
  }

  const members = team?.members ?? []
  const invites = team?.invites ?? []

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Team</h1>
          <p className="text-gray-500 dark:text-gray-400 mt-1">
            Employees of your business. Customers never need accounts.
          </p>
        </div>
        <Button onClick={handleInvite}>
          <UserPlus className="h-4 w-4 mr-2" /> Invite Employee
        </Button>
      </div>

      {inviteLink && (
        <Card>
          <CardContent className="flex flex-wrap items-center gap-3 p-4">
            <code className="flex-1 min-w-0 truncate rounded bg-gray-100 dark:bg-gray-800 px-3 py-2 text-sm">
              {inviteLink}
            </code>
            <Button size="sm" variant="outline" onClick={() => copyInvite(inviteLink)}>
              <Copy className="h-4 w-4 mr-1" /> Copy
            </Button>
            <Button size="sm" variant="ghost" onClick={() => setInviteLink(null)}>
              <X className="h-4 w-4" />
            </Button>
            <p className="w-full text-xs text-gray-500">
              Send this to the new stock keeper. They choose their own password on the
              invite page.
            </p>
          </CardContent>
        </Card>
      )}

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Members ({members.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="divide-y divide-gray-100 dark:divide-gray-800">
            {members.map(m => (
              <div key={m.id} className="flex items-center justify-between py-3">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-medium text-gray-900 dark:text-white">
                      {m.full_name || m.email || m.id.slice(0, 8)}
                    </span>
                    {roleBadge(m.role)}
                    {m.status === 'disabled' ? (
                      <Badge variant="danger">Disabled</Badge>
                    ) : (
                      <span className="inline-flex items-center gap-1 text-xs text-gray-500">
                        <span className="h-2 w-2 rounded-full bg-green-500" /> Active
                      </span>
                    )}
                  </div>
                  {m.email && (
                    <p className="text-sm text-gray-500 dark:text-gray-400">{m.email}</p>
                  )}
                </div>
                <Button
                  size="sm"
                  variant={m.status === 'disabled' ? 'outline' : 'ghost'}
                  disabled={busyId === m.id}
                  onClick={() => toggleMember(m.id, m.status)}
                  title={
                    m.status === 'disabled'
                      ? 'Restore access'
                      : 'Revoke access (history is kept)'
                  }
                >
                  {m.status === 'disabled' ? (
                    <>
                      <RotateCcw className="h-4 w-4 mr-1" /> Re-enable
                    </>
                  ) : (
                    <>
                      <UserX className="h-4 w-4 mr-1" /> Disable
                    </>
                  )}
                </Button>
              </div>
            ))}
            {members.length === 0 && (
              <p className="py-6 text-center text-sm text-gray-500">No members yet.</p>
            )}
          </div>
        </CardContent>
      </Card>

      {invites.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">Pending Invites</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="divide-y divide-gray-100 dark:divide-gray-800">
              {invites.map(inv => {
                const expired = new Date(inv.expires_at) < new Date()
                return (
                  <div key={inv.id} className="flex items-center justify-between py-3">
                    <div>
                      <Badge variant="secondary">{inv.role}</Badge>{' '}
                      <span className="text-sm text-gray-500">
                        {expired ? 'Expired' : `Expires ${new Date(inv.expires_at).toLocaleString()}`}
                      </span>
                    </div>
                    <Button
                      size="sm"
                      variant="ghost"
                      disabled={busyId === inv.id}
                      onClick={() => handleRevoke(inv.id)}
                    >
                      <X className="h-4 w-4 mr-1" /> Revoke
                    </Button>
                  </div>
                )
              })}
            </div>
          </CardContent>
        </Card>
      )}

      <p className="text-xs text-gray-400">
        Disabled employees keep their historical audit entries — accountability is never
        erased.
      </p>
    </div>
  )
}