'use client';

import { DirectCause, Detail, Metadata, Evidence, Metric } from '@/lib/types';
import { Card, Title, Text, Stack, Code, Badge, Group, Divider } from '@tidbcloud/uikit';
import MetricChart from './MetricChart';
import { generateMockChartDataWithInstances } from '@/lib/mockChartData';
import { useTranslation, type TranslationKey } from '@/lib/i18n';

interface SummaryCardProps {
  directCause: DirectCause;
  detail: Detail;
  metadata: Metadata;
}

const EVIDENCE_SOURCE_META: Record<string, { labelKey: TranslationKey; color: string }> = {
  metrics: { labelKey: 'insight.summary.sourceMetrics', color: 'blue.6' },
  top_cpu_time_sqls: { labelKey: 'insight.summary.sourceTopCpu', color: 'violet.6' },
  top_slow_queries: { labelKey: 'insight.summary.sourceTopSlow', color: 'grape.6' },
  events: { labelKey: 'insight.summary.sourceEvents', color: 'green.6' }
};

export default function SummaryCard({ directCause, detail, metadata }: SummaryCardProps) {
  const { t } = useTranslation();

  const getMetricByName = (name: string): Metric | undefined => {
    // Search in all metric lists
    const allMetrics = [
        ...(detail?.workload || []),
        ...(detail?.resource || []),
        ...(detail?.latency || [])
    ];
    return allMetrics.find(m => m.name === name);
  };

  const renderMetricsEvidence = (evidence: Evidence) => {
    if (!evidence.metric_name) {
        return <Text size="sm" c="carbon.6">{t('insight.summary.metricUnavailable')}</Text>;
    }

    const metric = getMetricByName(evidence.metric_name);

    if (!metric) {
        return <Text size="sm" c="carbon.6">{t('insight.summary.metricNotFound', { name: evidence.metric_name })}</Text>;
    }

    const chartData = generateMockChartDataWithInstances(
        metric,
        metadata.time_range_start_ts,
        metadata.time_range_end_ts
    );

    return (
        <MetricChart
            data={chartData}
            metricName={metric.name}
            title={metric.name}
            timeRange={[metadata.time_range_start_ts, metadata.time_range_end_ts]}
        />
    );
  };

  const renderSqlEvidence = (evidence: Evidence) => {
      const sqlText = evidence.sql?.full_sql_text;
      const digest = evidence.sql?.sql_digest;

      if (!sqlText && !digest) {
          return <Text size="sm" c="carbon.6">{t('insight.summary.sqlUnavailable')}</Text>;
      }

      return (
          <Stack gap="xs">
              {digest && (
                  <Group gap="xs">
                      <Text size="sm" fw={600} c="carbon.6">{t('insight.summary.digestLabel')}</Text>
                      <Code>{digest}</Code>
                  </Group>
              )}
              {sqlText && (
                  <>
                      <Text size="sm" fw={600} c="carbon.6">{t('insight.summary.sqlLabel')}</Text>
                      <Code block style={{ whiteSpace: 'pre-wrap', maxHeight: 300, overflowY: 'auto' }}>
                          {sqlText}
                      </Code>
                  </>
              )}
          </Stack>
      );
  };

  const renderEvidence = (evidence: Evidence, index: number) => {
    const sourceType = evidence.source_type || 'unknown';
    const meta = EVIDENCE_SOURCE_META[sourceType];
    const label = meta ? t(meta.labelKey) : t('insight.summary.sourceFallback');
    const color = meta ? meta.color : 'gray.6';
    const description = evidence.description?.trim();

    let detailContent = null;
    if (sourceType === 'metrics') {
        detailContent = renderMetricsEvidence(evidence);
    } else if (sourceType === 'top_cpu_time_sqls' || sourceType === 'top_slow_queries') {
        detailContent = renderSqlEvidence(evidence);
    }

    return (
        <Stack
            key={index}
            gap="xs"
            p="sm"
            style={{
                border: '1px solid var(--mantine-color-gray-3, #dfe3e6)',
                borderRadius: '8px',
                backgroundColor: 'var(--mantine-color-white, #fff)'
            }}
        >
            <Group gap="xs">
                <Badge color={color} variant="outline">{label}</Badge>
                <Text size="sm" c="carbon.6">{t('insight.summary.evidenceLabel', { index: index + 1 })}</Text>
            </Group>
            {description ? (
                <Text size="sm">{description}</Text>
            ) : (
                <Text size="sm" c="carbon.5">{t('insight.summary.noDescription')}</Text>
            )}
            {detailContent}
        </Stack>
    );
  };

  return (
    <Card withBorder shadow="sm" p="lg">
      <Stack gap="md">
        <Title order={4}>{t('insight.summary.title')}</Title>

        {directCause.summary ? (
             <Text size="sm">{directCause.summary}</Text>
        ) : (
             <Text size="sm" c="carbon.6">{t('insight.summary.noSummary')}</Text>
        )}

        {directCause.evidences && directCause.evidences.length > 0 && (
            <>
                <Divider my="sm" />
                <Title order={6}>{t('insight.summary.evidences')}</Title>
                <Stack gap="sm">
                    {directCause.evidences.map((evidence, index) => renderEvidence(evidence, index))}
                </Stack>
            </>
        )}
      </Stack>
    </Card>
  );
}