'use client'

import React from 'react'
import { ChevronDown } from 'lucide-react'
import {
  Button,
  ButtonGroup,
  ButtonGroupItem,
  Checkbox,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  TagInput,
  type TagItem,
} from '@/components/emcn'
import { cn } from '@/lib/core/utils/cn'
import { quickValidateEmail } from '@/lib/messaging/email/validation'
import type { AdminWorkspace } from '@/hooks/queries/workspace'

type PermissionType = 'read' | 'write' | 'admin'

interface PermissionSelectorProps {
  value: PermissionType
  onChange: (value: PermissionType) => void
  disabled?: boolean
  className?: string
}

const PermissionSelector = React.memo<PermissionSelectorProps>(
  ({ value, onChange, disabled = false, className = '' }) => {
    return (
      <ButtonGroup
        value={value}
        onValueChange={(val) => onChange(val as PermissionType)}
        disabled={disabled}
        className={className}
      >
        <ButtonGroupItem
          value='read'
          className='h-[22px] min-w-[38px] px-1.5 py-0 text-xs'
          title='View only'
        >
          Read
        </ButtonGroupItem>
        <ButtonGroupItem
          value='write'
          className='h-[22px] min-w-[38px] px-1.5 py-0 text-xs'
          title='Edit content'
        >
          Write
        </ButtonGroupItem>
        <ButtonGroupItem
          value='admin'
          className='h-[22px] min-w-[38px] px-1.5 py-0 text-xs'
          title='Full access'
        >
          Admin
        </ButtonGroupItem>
      </ButtonGroup>
    )
  }
)

PermissionSelector.displayName = 'PermissionSelector'

interface MemberInvitationCardProps {
  inviteEmails: TagItem[]
  setInviteEmails: (emails: TagItem[]) => void
  isInviting: boolean
  showWorkspaceInvite: boolean
  setShowWorkspaceInvite: (show: boolean) => void
  selectedWorkspaces: Array<{ workspaceId: string; permission: string }>
  userWorkspaces: AdminWorkspace[]
  onInviteMember: () => Promise<void>
  onLoadUserWorkspaces: () => Promise<void>
  onWorkspaceToggle: (workspaceId: string, permission: string) => void
  inviteSuccess: boolean
  availableSeats?: number
  maxSeats?: number
  invitationError?: Error | null
  isLoadingWorkspaces?: boolean
}

export function MemberInvitationCard({
  inviteEmails,
  setInviteEmails,
  isInviting,
  showWorkspaceInvite,
  setShowWorkspaceInvite,
  selectedWorkspaces,
  userWorkspaces,
  onInviteMember,
  onLoadUserWorkspaces,
  onWorkspaceToggle,
  inviteSuccess,
  availableSeats = 0,
  maxSeats = 0,
  invitationError = null,
  isLoadingWorkspaces = false,
}: MemberInvitationCardProps) {
  const selectedCount = selectedWorkspaces.length
  const hasAvailableSeats = availableSeats > 0
  const hasValidEmails = inviteEmails.some((e) => e.isValid)

  const handleAddEmail = (value: string) => {
    const normalized = value.trim().toLowerCase()
    if (!normalized) return false

    const isDuplicate = inviteEmails.some((e) => e.value === normalized)
    if (isDuplicate) return false

    const validation = quickValidateEmail(normalized)
    setInviteEmails([...inviteEmails, { value: normalized, isValid: validation.isValid }])
    return validation.isValid
  }

  const handleRemoveEmail = (_value: string, index: number) => {
    setInviteEmails(inviteEmails.filter((_, i) => i !== index))
  }

  return (
    <div className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
      <div className='px-3.5 py-2.5'>
        <h4 className='font-medium text-[var(--text-primary)] text-base'>Invite Team Members</h4>
        <p className='text-[var(--text-muted)] text-small'>
          Add new members to your team and optionally give them access to specific workspaces
        </p>
      </div>

      <div className='flex flex-col gap-3 border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3'>
        <div className='flex items-start gap-2'>
          <div className='flex-1'>
            <TagInput
              items={inviteEmails}
              onAdd={handleAddEmail}
              onRemove={handleRemoveEmail}
              placeholder='Enter email addresses'
              placeholderWithTags='Add another email'
              disabled={isInviting || !hasAvailableSeats}
              triggerKeys={['Enter', ',', ' ']}
              maxHeight='max-h-24'
            />
          </div>
          <DropdownMenu
            open={showWorkspaceInvite}
            onOpenChange={(open) => {
              setShowWorkspaceInvite(open)
              if (open) {
                onLoadUserWorkspaces()
              }
            }}
            modal={false}
          >
            <DropdownMenuTrigger asChild>
              <Button
                variant='active'
                disabled={isInviting || !hasAvailableSeats}
                className='min-w-[110px]'
              >
                <span className='flex-1 text-left'>
                  Workspaces
                  {selectedCount > 0 && ` (${selectedCount})`}
                </span>
                <ChevronDown
                  className={cn(
                    'h-3.5 w-3.5 transition-transform',
                    showWorkspaceInvite && 'rotate-180'
                  )}
                />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              side='bottom'
              align='end'
              sideOffset={4}
              className='max-h-[320px] min-w-[240px] max-w-[240px] overflow-y-auto'
            >
              {isLoadingWorkspaces ? (
                <div className='px-1.5 py-4 text-center'>
                  <p className='text-[var(--text-tertiary)] text-small'>Loading...</p>
                </div>
              ) : userWorkspaces.length === 0 ? (
                <div className='px-1.5 py-4 text-center'>
                  <p className='text-[var(--text-tertiary)] text-small'>No workspaces available</p>
                </div>
              ) : (
                <div className='flex flex-col gap-0.5'>
                  {userWorkspaces.map((workspace) => {
                    const isSelected = selectedWorkspaces.some(
                      (w) => w.workspaceId === workspace.id
                    )
                    const selectedWorkspace = selectedWorkspaces.find(
                      (w) => w.workspaceId === workspace.id
                    )

                    return (
                      <div key={workspace.id} className='flex flex-col gap-1'>
                        <DropdownMenuItem
                          onSelect={(e) => {
                            e.preventDefault()
                            if (isSelected) {
                              onWorkspaceToggle(workspace.id, '')
                            } else {
                              onWorkspaceToggle(workspace.id, 'read')
                            }
                          }}
                          disabled={isInviting}
                          className={cn(isSelected && 'bg-[var(--surface-active)]')}
                        >
                          <Checkbox
                            checked={isSelected}
                            disabled={isInviting}
                            className='pointer-events-none'
                          />
                          <span className='flex-1 truncate'>{workspace.name}</span>
                        </DropdownMenuItem>
                        {isSelected && (
                          <div className='ml-[31px] flex items-center gap-1.5 pb-1'>
                            <span className='text-[var(--text-tertiary)] text-xs'>Access:</span>
                            <PermissionSelector
                              value={
                                (['read', 'write', 'admin'].includes(
                                  selectedWorkspace?.permission ?? ''
                                )
                                  ? selectedWorkspace?.permission
                                  : 'read') as PermissionType
                              }
                              onChange={(permission) => onWorkspaceToggle(workspace.id, permission)}
                              disabled={isInviting}
                            />
                          </div>
                        )}
                      </div>
                    )
                  })}
                </div>
              )}
            </DropdownMenuContent>
          </DropdownMenu>
          <Button
            variant='primary'
            onClick={() => onInviteMember()}
            disabled={!hasValidEmails || isInviting || !hasAvailableSeats}
          >
            {isInviting ? 'Inviting...' : hasAvailableSeats ? 'Invite' : 'No Seats'}
          </Button>
        </div>

        {invitationError && (
          <p className='text-[var(--text-error)] text-small leading-tight'>
            {invitationError instanceof Error && invitationError.message
              ? invitationError.message
              : String(invitationError)}
          </p>
        )}

        {inviteSuccess && (
          <p className='text-[var(--text-success)] text-xs leading-tight'>
            Invitation sent successfully
            {selectedCount > 0 &&
              ` with access to ${selectedCount} workspace${selectedCount !== 1 ? 's' : ''}`}
          </p>
        )}
      </div>
    </div>
  )
}
