'use client'

import * as React from 'react'
import { ChevronRight } from 'lucide-react'
import { cn } from '../../lib/utils'

export type IntegrationStatus = 'connected' | 'available' | 'coming-soon'

export interface IntegrationCardProps {
  name: string
  description: string
  icon: React.ElementType
  status: IntegrationStatus
  onClick?: () => void
  lastSync?: string
  className?: string
}

const STATUS_CONFIG: Record<IntegrationStatus, { label: string; className: string }> = {
  connected: { label: 'Connected', className: 'bg-green-100 text-green-700' },
  available: { label: 'Available', className: 'bg-blue-100 text-blue-700' },
  'coming-soon': { label: 'Coming Soon', className: 'bg-gray-100 text-gray-500' },
}

export function IntegrationCard({
  name,
  description,
  icon: Icon,
  status,
  onClick,
  lastSync,
  className,
}: IntegrationCardProps) {
  const isClickable = status !== 'coming-soon'
  const statusEntry = STATUS_CONFIG[status]

  return (
    <div
      className={cn(
        'rounded-xl border bg-card text-card-foreground shadow p-5 flex items-start gap-4',
        isClickable && 'cursor-pointer hover:shadow-md hover:border-primary/30 transition-shadow',
        !isClickable && 'opacity-75',
        className
      )}
      onClick={isClickable ? onClick : undefined}
      role={isClickable ? 'button' : undefined}
      tabIndex={isClickable ? 0 : undefined}
      onKeyDown={
        isClickable
          ? (e: React.KeyboardEvent) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault()
                onClick?.()
              }
            }
          : undefined
      }
    >
      <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center">
        <Icon className="w-5 h-5 text-gray-600" />
      </div>

      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-1">
          <h3 className="font-medium text-sm truncate">{name}</h3>
          <span
            className={cn(
              'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
              statusEntry.className
            )}
          >
            {statusEntry.label}
          </span>
        </div>

        <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>

        {lastSync && (
          <p className="text-xs text-muted-foreground mt-1">
            Last synced: {lastSync}
          </p>
        )}

        {isClickable && (
          <span className="inline-flex items-center text-xs text-primary mt-2 font-medium">
            Configure <ChevronRight className="w-3 h-3 ml-0.5" />
          </span>
        )}
      </div>
    </div>
  )
}