import { useNavigate, useParams } from 'react-router-dom';

import Box from '@material-hu/mui/Box';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import IconButton from '@material-hu/mui/IconButton';

import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import { IconX } from '@material-hu/icons/tabler';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useEmployeeUser } from './hooks/useEmployeeUser';
import { useRetentionConversationDetail } from './hooks/useRetentionConversationDetail';
import { taliRoutes } from './routes';
import {
  parseAnalysis,
  parseTranscript,
  parseEmployeeSnapshot,
} from './utils/parsers';
import type { GeminiAnalysis } from './types/retention';

import { EmployeeHeader } from './components/RetentionConversationDetail/EmployeeHeader';
import { AiSummaryCard } from './components/RetentionConversationDetail/AiSummaryCard';
import { LlmReasoning } from './components/RetentionConversationDetail/LlmReasoning';
import { TranscriptCard } from './components/RetentionConversationDetail/TranscriptCard';
import { EmployeeDetailsPanel } from './components/RetentionConversationDetail/EmployeeDetailsPanel';
import { ConversationMetadataPanel } from './components/RetentionConversationDetail/ConversationMetadataPanel';
import { GeneratedRequestPanel } from './components/RetentionConversationDetail/GeneratedRequestPanel';

export default function RetentionConversationDetail() {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('backoffice_only');
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const numericId = Number(id);

  const { data: conversation, isLoading } =
    useRetentionConversationDetail(numericId);

  const { data: employeeData } = useEmployeeUser(
    conversation?.employeeId ?? null,
  );

  if (isLoading) {
    return (
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: '100vh',
        }}
      >
        <HuCircularProgress centered />
      </Box>
    );
  }

  if (!conversation) {
    return (
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: '100vh',
        }}
      >
        <Typography
          variant="globalM"
          sx={{ color: ({ palette }) => palette.new.text.neutral.lighter }}
        >
          {t('tali.conversation_detail.not_found')}
        </Typography>
      </Box>
    );
  }

  const analysis: GeminiAnalysis | null = parseAnalysis(conversation.analysis);
  const transcript = parseTranscript(conversation.transcript);
  const snapshot = parseEmployeeSnapshot(conversation.employeeContextSnapshot);
  const employeeName =
    employeeData?.fullName ||
    snapshot.name ||
    t('tali.conversation_detail.employee_fallback');

  return (
    <HuGoThemeProvider>
      <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            px: 4,
            py: 2,
            backgroundColor: ({ palette }) =>
              palette.new.background.elements.default,
          }}
        >
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
            sx={{ color: ({ palette }) => palette.new.text.neutral.default }}
          >
            {t('tali.conversation_detail.title')}
          </Typography>
          <IconButton onClick={() => navigate(taliRoutes.base())}>
            <IconX />
          </IconButton>
        </Box>

        <Divider />

        <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
          <Box
            sx={{
              flex: 1,
              backgroundColor: ({ palette }) =>
                palette.new.background.layout.default,
              px: 8,
              py: 5,
              overflowY: 'auto',
            }}
          >
            <Stack sx={{ gap: 3 }}>
              <EmployeeHeader
                name={employeeName}
                profilePicture={employeeData?.profilePicture ?? null}
                date={conversation.createdAt}
                durationSecs={conversation.durationSecs}
              />

              {analysis?.summary && (
                <AiSummaryCard
                  summary={analysis.summary}
                  tags={analysis.tags}
                />
              )}

              {analysis?.reasoning && (
                <LlmReasoning
                  reasoning={analysis.reasoning}
                  category={conversation.category}
                />
              )}

              <TranscriptCard
                transcript={transcript}
                employeeName={employeeName}
              />
            </Stack>
          </Box>

          <Box
            sx={{
              width: 400,
              backgroundColor: ({ palette }) =>
                palette.new.background.elements.default,
              px: 3,
              py: 5,
              borderLeft: ({ palette }) =>
                `1px solid ${palette.new.border.neutral.divider}`,
              overflowY: 'auto',
            }}
          >
            <Stack sx={{ gap: 4 }}>
              <EmployeeDetailsPanel
                snapshotJson={conversation.employeeContextSnapshot}
                user={employeeData?.user ?? null}
                employeeProfile={conversation.employeeProfile}
              />

              <ConversationMetadataPanel
                id={conversation.id}
                category={conversation.category}
                durationSecs={conversation.durationSecs}
                previousSessionsCount={conversation.previousSessionsCount}
              />

              <GeneratedRequestPanel actions={conversation.actions} />
            </Stack>
          </Box>
        </Box>
      </Box>
    </HuGoThemeProvider>
  );
}