'use client'

import { useState } from 'react'
import { Check, X, Clock } from 'lucide-react'
import PermissionBadge from './PermissionBadge'
import { acceptInvitation, declineInvitation } from '@/lib/sharing-actions'
import { useRouter } from 'next/navigation'

interface InvitationCardProps {
  invitation: {
    id: string
    permission: 'editor' | 'viewer'
    createdAt: Date
    list: {
      id: string
      title: string
      color: string
    }
    inviter: {
      name: string | null
      email: string
    }
  }
  onUpdate?: () => void
}

export default function InvitationCard({ invitation, onUpdate }: InvitationCardProps) {
  const [isAccepting, setIsAccepting] = useState(false)
  const [isDeclining, setIsDeclining] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const router = useRouter()

  const handleAccept = async () => {
    setIsAccepting(true)
    setError(null)
    
    try {
      await acceptInvitation(invitation.id)
      onUpdate?.()
      router.refresh()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to accept invitation')
      setIsAccepting(false)
    }
  }

  const handleDecline = async () => {
    setIsDeclining(true)
    setError(null)
    
    try {
      await declineInvitation(invitation.id)
      onUpdate?.()
      router.refresh()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to decline invitation')
      setIsDeclining(false)
    }
  }

  const formatDate = (date: Date) => {
    const now = new Date()
    const diffMs = now.getTime() - new Date(date).getTime()
    const diffMins = Math.floor(diffMs / 60000)
    const diffHours = Math.floor(diffMs / 3600000)
    const diffDays = Math.floor(diffMs / 86400000)

    if (diffMins < 1) return 'Just now'
    if (diffMins < 60) return `${diffMins}m ago`
    if (diffHours < 24) return `${diffHours}h ago`
    if (diffDays < 7) return `${diffDays}d ago`
    return new Date(date).toLocaleDateString()
  }

  return (
    <div className="bg-white rounded-lg border border-gray-200 p-4 sm:p-5 shadow-sm hover:shadow-md transition-shadow">
      <div className="flex items-start gap-3 mb-3">
        <div
          className="w-3 h-3 rounded-full flex-shrink-0 mt-1"
          style={{ backgroundColor: invitation.list.color }}
        />
        <div className="flex-1 min-w-0">
          <h3 className="font-semibold text-gray-900 text-base sm:text-lg truncate">
            {invitation.list.title}
          </h3>
          <p className="text-sm text-gray-600 mt-1">
            Invited by {invitation.inviter.name || invitation.inviter.email}
          </p>
        </div>
        <PermissionBadge permission={invitation.permission} size="sm" />
      </div>

      <div className="flex items-center gap-2 text-xs text-gray-500 mb-4">
        <Clock size={12} />
        <span>{formatDate(invitation.createdAt)}</span>
      </div>

      {error && (
        <div className="mb-3 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-700">
          {error}
        </div>
      )}

      <div className="flex gap-2">
        <button
          onClick={handleAccept}
          disabled={isAccepting || isDeclining}
          className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors text-sm font-medium"
        >
          <Check size={16} />
          {isAccepting ? 'Accepting...' : 'Accept'}
        </button>
        <button
          onClick={handleDecline}
          disabled={isAccepting || isDeclining}
          className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-100 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors text-sm font-medium"
        >
          <X size={16} />
          {isDeclining ? 'Declining...' : 'Decline'}
        </button>
      </div>
    </div>
  )
}