import { useState, useCallback, useEffect } from 'react';
import {
  Box,
  Text,
  SimpleGrid,
  Badge,
  Group,
  LoadingOverlay,
  ThemeIcon,
  ScrollArea,
} from '@mantine/core';
import { IconTool } from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';
import { getProviderDescription, getProviderName } from './helpers';
import { ToolsIcon } from '@/components/Common/Icons';
import { ProviderDetailPanel } from './components/ProviderDetailPanel';

import { useAvailableTools } from '@/hooks/useAvailableTools';

export function ToolsTab() {
  const { t } = useTranslation();
  const { providers, tools, loading, reload } = useAvailableTools();
  const [selectedProvider, setSelectedProvider] = useState<any | null>(null);

  useEffect(() => {
    if (selectedProvider) {
      const fresh = providers.find((p) => p.id === selectedProvider.id);
      if (fresh && fresh !== selectedProvider) setSelectedProvider(fresh);
    }
  }, [providers, selectedProvider]);

  const toolCountByProvider = (providerId: string) => tools.filter((t) => t.provider_id === providerId).length;
  const selectedTools = selectedProvider ? tools.filter((t) => t.provider_id === selectedProvider.id) : [];

  const filteredProviders = providers.filter((p) => !p.id.startsWith('mcp:'));

  return (
    <Box
      style={{ height: '100%', display: 'flex', gap: 16, minHeight: 0, overflow: 'hidden' }}
      onClick={() => setSelectedProvider(null)}
    >
      <LoadingOverlay visible={loading} />
      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
        {filteredProviders.length === 0 && !loading ? (
          <Box py={48} style={{ textAlign: 'center' }}>
            <ThemeIcon size={48} radius="xl" variant="light" color="gray" mx="auto" mb="md">
              <IconTool size={24} />
            </ThemeIcon>
            <Text c="dimmed" size="sm">
              {t('skills.tools.noProviders')}
            </Text>
          </Box>
        ) : (
          <SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="md">
            {filteredProviders.map((provider) => (
              <Box
                key={provider.id}
                className="hover-card-lift"
                p="md"
                onClick={(e) => { e.stopPropagation(); setSelectedProvider(provider); }}
                style={{
                  borderRadius: 18,
                  border: `1px solid ${selectedProvider?.id === provider.id ? 'var(--flock-accent)' : 'var(--flock-border-subtle)'}`,
                  background: selectedProvider?.id === provider.id ? 'var(--flock-accent-soft)' : 'var(--flock-bg-raised)',
                  cursor: 'pointer',
                }}
              >

                <Group gap="sm" mb="sm">
                  <Box
                    style={{
                      width: 46,
                      height: 46,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderRadius: 14,
                      background: 'var(--flock-accent-soft)',
                      color: 'var(--flock-accent)',
                    }}
                  >
                    <ToolsIcon name={provider.icon || provider.id} size={20} />
                  </Box>
                  <Box style={{ flex: 1, minWidth: 0 }}>
                    <Text size="sm" fw={600} truncate style={{ color: 'var(--flock-text-bright)' }}>{getProviderName(provider)}</Text>
                  </Box>
                </Group>
                <Box mb="sm" style={{ minHeight: 36 }}>
                  <Text size="xs" c="dimmed" lineClamp={2}>{getProviderDescription(provider)}</Text>
                </Box>
                <Group justify="space-between">
                  <Group gap={6}>
                    <Badge size="xs" variant="light" color="blue" radius="sm">
                      {provider.id.startsWith('builtin') ? 'builtin' : 'provider'}
                    </Badge>
                    {provider.credentials_schema && !provider.is_available && (
                      <Badge size="xs" variant="light" color="orange" radius="sm">
                        {t('skills.tools.needAuthBadge')}
                      </Badge>
                    )}
                    {provider.is_available && (
                      <Badge size="xs" variant="light" color="green" radius="sm">
                        {t('skills.tools.available')}
                      </Badge>
                    )}
                  </Group>
                  <Text size="xs" c="dimmed">
                    {t('skills.tools.toolsCount', { count: toolCountByProvider(provider.id) })}
                  </Text>
                </Group>
              </Box>
            ))}
          </SimpleGrid>
        )}
      </ScrollArea>
      {selectedProvider && (
        <ProviderDetailPanel
          provider={selectedProvider}
          tools={selectedTools}
          onClose={() => setSelectedProvider(null)}
          onCredentialsSaved={reload}
        />
      )}
    </Box>
  );
}
