'use client';

import { InsightData } from '@/lib/types';
import { Title, Text, Card, Grid, Badge, Group, Stack, Accordion } from '@tidbcloud/uikit';
import SummaryCard from './SummaryCard';
import MetricCard from './MetricCard';
import EventsCard from './EventsCard';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import { SyncChartPointer as MetricsChartSyncProvider } from 'metrics-chart';
import { useTranslation } from '@/lib/i18n';

dayjs.extend(utc);

interface InsightReportProps {
  data: InsightData;
}

export default function InsightReport({ data }: InsightReportProps) {
  const { t } = useTranslation();
  const { direct_cause, detail, metadata } = data;

  if (!detail || !metadata) {
    return (
      <Stack gap="lg" p="md">
        <Text c="red">{t('insight.invalidData')}</Text>
      </Stack>
    );
  }

  const sections = [
    { id: 'workload', label: t('insight.workloadMetrics'), data: detail.workload || [], color: 'blue' },
    { id: 'resource', label: t('insight.resourceMetrics'), data: detail.resource || [], color: 'green' },
    { id: 'latency', label: t('insight.latencyMetrics'), data: detail.latency || [], color: 'orange' },
  ];

  return (
    <MetricsChartSyncProvider>
      <Stack gap="lg" p="md" style={{ minHeight: '100vh', backgroundColor: '#f9fafb' }}>
        {/* Header with Metadata */}
        <Card withBorder shadow="xs" p="lg">
        <Stack gap="md">
          <Group justify="space-between">
            <Title order={3}>{t('insight.title')}</Title>
            <Badge size="lg" color="green.6" c="white">{t('insight.statusCompleted')}</Badge>
          </Group>

          <Grid>
             <Grid.Col span={6}>
                <Text size="sm" c="carbon.6" fw={500}>{t('insight.analysisUuid')}</Text>
                <Text size="sm" style={{ fontFamily: 'monospace' }} c="carbon.9">{metadata.analysis_uuid}</Text>
             </Grid.Col>
             <Grid.Col span={6}>
                <Text size="sm" c="carbon.6" fw={500}>{t('insight.jiraIssue')}</Text>
                <Text size="sm" style={{ fontFamily: 'monospace' }} c="carbon.9">{metadata.jira_issue_id}</Text>
             </Grid.Col>
             <Grid.Col span={6}>
                <Text size="sm" c="carbon.6" fw={500}>{t('insight.clusterId')}</Text>
                <Text size="sm" style={{ fontFamily: 'monospace' }} c="carbon.9">{metadata.cluster_id}</Text>
             </Grid.Col>
             <Grid.Col span={6}>
                <Text size="sm" c="carbon.6" fw={500}>{t('insight.createdAt')}</Text>
                <Text size="sm" c="carbon.9">{dayjs.utc(metadata.created_at).format('YYYY-MM-DD HH:mm:ss')}</Text>
             </Grid.Col>
             <Grid.Col span={12}>
                <Text size="sm" c="carbon.6" fw={500}>{t('insight.timeRange')}</Text>
                <Text size="sm" c="carbon.9">
                  {dayjs.unix(metadata.time_range_start_ts).utc().format('YYYY-MM-DD HH:mm:ss')} -{' '}
                  {dayjs.unix(metadata.time_range_end_ts).utc().format('YYYY-MM-DD HH:mm:ss')}
                </Text>
             </Grid.Col>
             <Grid.Col span={12}>
                <Text size="sm" c="carbon.6" fw={500}>{t('insight.clusterTopology')}</Text>
                <Text size="xs" style={{ fontFamily: 'monospace' }} c="carbon.9">{detail.cluster_topology}</Text>
             </Grid.Col>
          </Grid>
        </Stack>
      </Card>

      {direct_cause && <SummaryCard directCause={direct_cause} detail={detail} metadata={metadata} />}

      <Accordion variant="separated" multiple defaultValue={['workload', 'resource', 'latency', 'events']}>
        {sections.map(section => (
          section.data && section.data.length > 0 && (
            <Accordion.Item key={section.id} value={section.id}>
              <Accordion.Control>
                <Group gap="xs">
                    <Badge color={`${section.color}.6`} variant="outline">{section.label}</Badge>
                    <Badge variant="light" color="gray.6">{section.data.length}</Badge>
                </Group>
              </Accordion.Control>
              <Accordion.Panel>
                <div
                  style={{
                    display: 'grid',
                    gap: '1rem',
                    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))'
                  }}
                >
                  {section.data.map((metric, index) => (
                    <div key={index}>
                      <MetricCard
                        metric={metric}
                        startTs={metadata.time_range_start_ts}
                        endTs={metadata.time_range_end_ts}
                      />
                    </div>
                  ))}
                </div>
              </Accordion.Panel>
            </Accordion.Item>
          )
        ))}
         <Accordion.Item value="events">
            <Accordion.Control>
                 <Group gap="xs">
                    <Badge color="green.6" variant="outline">{t('insight.events')}</Badge>
                    <Badge variant="light" color="gray.6">{detail.events?.length || 0}</Badge>
                </Group>
            </Accordion.Control>
            <Accordion.Panel>
                 <EventsCard events={detail.events} />
            </Accordion.Panel>
         </Accordion.Item>
      </Accordion>
      </Stack>
    </MetricsChartSyncProvider>
  );
}