accounted/components/banking/BankConnectionStatus.tsx

'use client'

import { Button } from '@/components/ui/button'
import { formatDate } from '@/lib/utils'
import { getDaysUntilExpiry, isConsentExpiringSoon } from '@/lib/banking/enable-banking'
import {
  CreditCard,
  AlertTriangle,
  RefreshCw,
  Trash2,
  Loader2,
  CheckCircle,
  XCircle,
} from 'lucide-react'
import type { BankConnection } from '@/types'

interface BankConnectionStatusProps {
  connection: BankConnection
  onSync: (connectionId: string) => void
  onDisconnect: (connectionId: string) => void
  isSyncing?: boolean
}

export function BankConnectionStatus({
  connection,
  onSync,
  onDisconnect,
  isSyncing = false,
}: BankConnectionStatusProps) {
  const daysUntilExpiry = getDaysUntilExpiry(connection.consent_expires_at)
  const isExpiring = isConsentExpiringSoon(connection.consent_expires_at)

  const statusConfig = {
    active: {
      icon: CheckCircle,
      color: 'text-green-600',
      label: 'Aktiv',
      variant: 'success' as const,
    },
    pending: {
      icon: Loader2,
      color: 'text-yellow-600',
      label: 'Väntar',
      variant: 'warning' as const,
    },
    error: {
      icon: XCircle,
      color: 'text-red-600',
      label: 'Fel',
      variant: 'destructive' as const,
    },
    revoked: {
      icon: XCircle,
      color: 'text-gray-600',
      label: 'Bortkopplad',
      variant: 'secondary' as const,
    },
  }

  const status = statusConfig[connection.status as keyof typeof statusConfig] || statusConfig.error
  const StatusIcon = status.icon

  // Parse accounts from connection
  const accounts = (connection.accounts as Array<{
    uid: string
    iban?: string
    name?: string
    currency: string
    balance?: number
  }>) || []

  return (
    <div className="border rounded-lg p-4 space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
            <CreditCard className="h-5 w-5 text-primary" />
          </div>
          <div>
            <p className="font-medium">{connection.bank_name}</p>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <StatusIcon className={`h-3 w-3 ${status.color}`} />
              <span>{status.label}</span>
              {connection.last_synced_at && (
                <>
                  <span>-</span>
                  <span>Synkad {formatDate(connection.last_synced_at)}</span>
                </>
              )}
            </div>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {connection.status === 'active' && (
            <Button
              variant="outline"
              size="sm"
              onClick={() => onSync(connection.id)}
              disabled={isSyncing}
            >
              {isSyncing ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <RefreshCw className="h-4 w-4" />
              )}
            </Button>
          )}
          <Button
            variant="ghost"
            size="sm"
            onClick={() => onDisconnect(connection.id)}
          >
            <Trash2 className="h-4 w-4 text-destructive" />
          </Button>
        </div>
      </div>

      {/* Consent expiry warning */}
      {isExpiring && daysUntilExpiry !== null && (
        <div className="flex items-center gap-2 p-3 bg-warning/10 rounded-lg">
          <AlertTriangle className="h-4 w-4 text-warning" />
          <span className="text-sm">
            Samtycket går ut om {daysUntilExpiry} {daysUntilExpiry === 1 ? 'dag' : 'dagar'}.
            Förnya genom att ansluta igen.
          </span>
        </div>
      )}

      {/* Accounts list */}
      {accounts.length > 0 && (
        <div className="space-y-2">
          <p className="text-sm font-medium text-muted-foreground">Konton</p>
          <div className="space-y-2">
            {accounts.map((account) => (
              <div
                key={account.uid}
                className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
              >
                <div>
                  <p className="text-sm font-medium">
                    {account.name || account.iban || 'Okänt konto'}
                  </p>
                  {account.iban && (
                    <p className="text-xs text-muted-foreground">
                      {account.iban.replace(/(.{4})/g, '$1 ').trim()}
                    </p>
                  )}
                </div>
                {account.balance !== undefined && (
                  <div className="text-right">
                    <p className="text-sm font-medium">
                      {new Intl.NumberFormat('sv-SE', {
                        style: 'currency',
                        currency: account.currency,
                      }).format(account.balance)}
                    </p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}