'use client';

import { useTranslations } from 'next-intl';
import { formatDistanceToNow } from 'date-fns';
import { de, enUS } from 'date-fns/locale';
import Link from 'next/link';
import {
  Building2,
  MessageSquare,
  CheckSquare,
  Headphones,
  Cloud,
  FileText,
  ClipboardCheck,
  ExternalLink,
  type LucideIcon,
} from 'lucide-react';

import { cn } from '@/lib/utils';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { IntegrationStatusBadge } from './integration-status-badge';
import { SyncStatus } from './sync-status';
import { ConnectionTestButton } from './connection-test-button';
import type { IntegrationConfig, IntegrationType } from '@/types/integrations';

interface IntegrationCardProps {
  config: IntegrationConfig;
  locale?: string;
  showActions?: boolean;
  className?: string;
}

/** Icon mapping for integration types */
const integrationIcons: Record<IntegrationType, LucideIcon> = {
  plentyone: Building2,
  zulip: MessageSquare,
  todoist: CheckSquare,
  freescout: Headphones,
  nextcloud: Cloud,
  ecodms: FileText,
  gembadocs: ClipboardCheck,
};

/** Route mapping for integration types */
const integrationRoutes: Record<IntegrationType, string> = {
  plentyone: '/integrations/plentyone',
  zulip: '/integrations/zulip',
  todoist: '/integrations/todoist',
  freescout: '/integrations/freescout',
  nextcloud: '/integrations/nextcloud',
  ecodms: '/integrations/ecodms',
  gembadocs: '/integrations/gembadocs',
};

/**
 * Card component displaying integration status and actions
 */
export function IntegrationCard({
  config,
  locale = 'de',
  showActions = true,
  className,
}: IntegrationCardProps) {
  const t = useTranslations('integrations');
  const dateLocale = locale === 'de' ? de : enUS;

  const Icon = integrationIcons[config.type];
  const route = integrationRoutes[config.type];

  return (
    <Card className={cn('relative overflow-hidden', className)}>
      {/* Status indicator line */}
      <div
        className={cn(
          'absolute left-0 top-0 h-full w-1',
          config.status === 'connected' && 'bg-green-500',
          config.status === 'disconnected' && 'bg-muted',
          config.status === 'error' && 'bg-destructive',
          config.status === 'configuring' && 'bg-yellow-500'
        )}
      />

      <CardHeader className="pb-2">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div
              className={cn(
                'flex h-10 w-10 items-center justify-center rounded-lg',
                config.enabled ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'
              )}
            >
              <Icon className="h-5 w-5" />
            </div>
            <div>
              <CardTitle className="text-base">{config.name}</CardTitle>
              <CardDescription className="text-xs">
                {t(config.type.replace('-', '') as never) || config.type}
              </CardDescription>
            </div>
          </div>
          <IntegrationStatusBadge status={config.status} />
        </div>
      </CardHeader>

      <CardContent className="space-y-4">
        {/* Sync status */}
        {config.lastSync && (
          <SyncStatus
            lastSync={config.lastSync}
            locale={locale}
            error={config.lastError}
          />
        )}

        {/* Error message */}
        {config.lastError && (
          <p className="text-sm text-destructive">{config.lastError}</p>
        )}

        {/* Actions */}
        {showActions && (
          <div className="flex items-center gap-2">
            <ConnectionTestButton
              integrationType={config.type}
              disabled={!config.enabled}
            />
            <Button variant="outline" size="sm" asChild>
              <Link href={`/${locale}${route}`}>
                <ExternalLink className="mr-2 h-4 w-4" />
                {t('details')}
              </Link>
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

export { integrationIcons, integrationRoutes };
