'use client';

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import {
  Plug,
  CheckCircle2,
  AlertCircle,
  Building2,
  MessageSquare,
  CheckSquare,
  Headphones,
  Cloud,
  FileText,
  ClipboardCheck,
} from 'lucide-react';

import { cn } from '@/lib/utils';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { IntegrationCard } from '@/components/integrations';
import { useAllIntegrationStatuses } from '@/hooks/integrations';
import type { IntegrationType } from '@/types/integrations';

interface IntegrationsContentProps {
  locale: string;
}

/** Integration metadata for display */
const integrationMeta: Record<
  IntegrationType,
  { icon: typeof Building2; descKey: string }
> = {
  plentyone: { icon: Building2, descKey: 'plentyOneDesc' },
  zulip: { icon: MessageSquare, descKey: 'zulipDesc' },
  todoist: { icon: CheckSquare, descKey: 'todoistDesc' },
  freescout: { icon: Headphones, descKey: 'freeScoutDesc' },
  nextcloud: { icon: Cloud, descKey: 'nextcloudDesc' },
  ecodms: { icon: FileText, descKey: 'ecoDmsDesc' },
  gembadocs: { icon: ClipboardCheck, descKey: 'gembaDocsDesc' },
};

/**
 * Integrations overview content component
 */
export function IntegrationsContent({ locale }: IntegrationsContentProps) {
  const t = useTranslations('integrations');
  const { data: integrations, isLoading } = useAllIntegrationStatuses();

  const connectedCount = integrations?.filter((i) => i.status === 'connected').length ?? 0;
  const errorCount = integrations?.filter((i) => i.status === 'error').length ?? 0;

  return (
    <div className="container mx-auto space-y-8 py-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold tracking-tight">{t('title')}</h1>
        <p className="mt-2 text-muted-foreground">{t('subtitle')}</p>
      </div>

      {/* Summary Stats */}
      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t('allIntegrations')}</CardTitle>
            <Plug className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {isLoading ? <Skeleton className="h-8 w-12" /> : integrations?.length ?? 0}
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t('connected')}</CardTitle>
            <CheckCircle2 className="h-4 w-4 text-green-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-500">
              {isLoading ? <Skeleton className="h-8 w-12" /> : connectedCount}
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t('error')}</CardTitle>
            <AlertCircle className="h-4 w-4 text-destructive" />
          </CardHeader>
          <CardContent>
            <div className={cn('text-2xl font-bold', errorCount > 0 && 'text-destructive')}>
              {isLoading ? <Skeleton className="h-8 w-12" /> : errorCount}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Integration Cards */}
      <div>
        <h2 className="mb-4 text-xl font-semibold">{t('overview')}</h2>

        {isLoading ? (
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {Array.from({ length: 6 }).map((_, i) => (
              <Card key={i}>
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <Skeleton className="h-10 w-10 rounded-lg" />
                    <div className="space-y-2">
                      <Skeleton className="h-4 w-24" />
                      <Skeleton className="h-3 w-32" />
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <Skeleton className="h-4 w-full" />
                  <div className="mt-4 flex gap-2">
                    <Skeleton className="h-8 w-24" />
                    <Skeleton className="h-8 w-24" />
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : (
          <motion.div
            initial="hidden"
            animate="visible"
            variants={{
              hidden: { opacity: 0 },
              visible: {
                opacity: 1,
                transition: { staggerChildren: 0.1 },
              },
            }}
            className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"
          >
            {integrations?.map((config, index) => (
              <motion.div
                key={config.id}
                variants={{
                  hidden: { opacity: 0, y: 20 },
                  visible: { opacity: 1, y: 0 },
                }}
              >
                <IntegrationCard config={config} locale={locale} />
              </motion.div>
            ))}
          </motion.div>
        )}
      </div>
    </div>
  );
}
