import type { ConnectionStatus, ServiceType } from '../../types/connection'
import { ActionButton } from '../ui/ActionButton'
import { uiText } from '../../text/uiText'
import './ServiceCard.scss'

interface Props {
  serviceType: ServiceType
  label: string
  icon: string
  status: ConnectionStatus | null
  onConnect: () => void
  onDisconnect: () => void
  onSearch: () => void
}

export function ServiceCard({ serviceType: _serviceType, label, icon, status, onConnect, onDisconnect, onSearch }: Readonly<Props>) {
  const connected = status?.connected ?? false

  const formatExpiry = (iso: string | null) => {
    if (!iso) return null
    const d = new Date(iso)
    return d.toLocaleDateString(undefined, { dateStyle: 'medium' })
  }

  return (
    <div className="service-card">
      <div className="service-card__info">
        <div className="service-card__icon">{icon}</div>
        <div>
          <p className="service-card__name">{label}</p>
          <p className="service-card__meta">
            <span className={`service-card__badge service-card__badge--${connected ? 'connected' : 'disconnected'}`}>
              {connected ? uiText.connections.serviceCard.connected : uiText.connections.serviceCard.notConnected}
            </span>
            {connected && status?.username && <span>{status.username}</span>}
            {connected && status?.expiresAt && (
              <span>{uiText.connections.serviceCard.expiresPrefix(formatExpiry(status.expiresAt) ?? '')}</span>
            )}
          </p>
        </div>
      </div>
      <div className="service-card__actions">
        <ActionButton variant={connected ? 'disconnect' : 'connect'} onClick={connected ? onDisconnect : onConnect}>
          {connected ? uiText.connections.serviceCard.disconnectButton : uiText.connections.serviceCard.connectButton}
        </ActionButton>
        {connected && (<ActionButton variant='search' onClick={onSearch}>{uiText.connections.serviceCard.searchButton}</ActionButton>)}
      </div>
    </div>
  )
}
