import React from 'react'
import { Button } from './Button'
import { cn } from '@/utils/cn'

export type IntegrationStatus = 'connected' | 'disconnected' | 'warning' | 'error'

export interface IntegrationStatusCardProps {
  icon?: string
  title: string
  status: IntegrationStatus
  description?: string
  metadata?: React.ReactNode
  primaryAction?: {
    label: string
    onClick: () => void
    isLoading?: boolean
  }
  secondaryAction?: {
    label: string
    onClick: () => void
    tone?: 'default' | 'danger'
  }
  className?: string
}

const statusConfig: Record<
  IntegrationStatus,
  { label: string; badge: string; dot: string; icon: string; iconWrap: string; iconText: string }
> = {
  connected: {
    label: '연결됨',
    badge: 'bg-teal-50 text-teal-700',
    dot: 'bg-teal-500',
    icon: 'check_circle',
    iconWrap: 'bg-teal-50',
    iconText: 'text-teal-500',
  },
  disconnected: {
    label: '미연결',
    badge: 'bg-slate-100 text-slate-600',
    dot: 'bg-slate-400',
    icon: 'link_off',
    iconWrap: 'bg-slate-100',
    iconText: 'text-slate-500',
  },
  warning: {
    label: '다시 연결 필요',
    badge: 'bg-amber-50 text-amber-700',
    dot: 'bg-amber-500',
    icon: 'warning',
    iconWrap: 'bg-amber-50',
    iconText: 'text-amber-500',
  },
  error: {
    label: '오류',
    badge: 'bg-red-50 text-red-600',
    dot: 'bg-red-500',
    icon: 'error',
    iconWrap: 'bg-red-50',
    iconText: 'text-red-500',
  },
}

export const IntegrationStatusCard: React.FC<IntegrationStatusCardProps> = ({
  icon,
  title,
  status,
  description,
  metadata,
  primaryAction,
  secondaryAction,
  className,
}) => {
  const cfg = statusConfig[status]

  return (
    <div className={cn('rounded-[14px] border border-slate-100 bg-white p-5 shadow-soft-md', className)}>
      <div className="flex items-start gap-3">
        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] bg-teal-50">
          <span className="material-symbols-outlined text-[20px] leading-none text-teal-500" aria-hidden="true">
            {icon ?? cfg.icon}
          </span>
        </div>

        <div className="min-w-0 flex-1">
          <div className="flex min-w-0 items-start justify-between gap-3">
            <div className="min-w-0">
              <h3 className="truncate text-sm font-bold text-slate-900">{title}</h3>
              {description && (
                <p className="mt-1 text-[13px] leading-relaxed text-slate-500">{description}</p>
              )}
            </div>
            <span className={cn('inline-flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1 text-[11px] font-bold', cfg.badge)}>
              <span className={cn('h-1.5 w-1.5 rounded-full', cfg.dot)} />
              {cfg.label}
            </span>
          </div>

          {metadata && (
            <div className="mt-3 rounded-[10px] bg-slate-50 px-3 py-2 text-[12px] font-medium text-slate-500">
              {metadata}
            </div>
          )}

          {(primaryAction || secondaryAction) && (
            <div className="mt-4 flex flex-wrap justify-end gap-2">
              {secondaryAction && (
                <Button
                  type="button"
                  size="sm"
                  variant={secondaryAction.tone === 'danger' ? 'danger' : 'outline'}
                  onClick={secondaryAction.onClick}
                >
                  {secondaryAction.label}
                </Button>
              )}
              {primaryAction && (
                <Button
                  type="button"
                  size="sm"
                  variant="primary"
                  isLoading={primaryAction.isLoading}
                  onClick={primaryAction.onClick}
                >
                  {primaryAction.label}
                </Button>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}