import { useCallback, useRef } from 'react'
import { Box, Button, Drawer, IconButton, Typography } from '@mui/material'
import { ArrowUpRight, HelpCircle, X } from 'lucide-react'
import { useNavigate } from 'react-router'
import { useTeamStore } from '../../stores/teamStore'
import { useAgentWorkItem } from '../../hooks/useAgentWorkItems'
import { useTeamAgents } from '../../hooks/useTeamAgents'
import { AgentAvatar } from './AgentAvatar'
import { WorkItemActions } from './WorkItemActions'
import { DetailFieldList, DetailSectionTitle, MessageThread, SourceReferenceList } from './WorkItemDetailSections'
import { PanelLoadingState } from '../ui'
import { ROUTES } from '../../lib/constants'
import { DS_BG, DS_BORDER, DS_SURFACE, DS_TEXT } from '../../lib/ds'
import { formatTeamDateTime } from '../../lib/teamClock'

/** Das Anfragencenter führt den vollständigen Schriftverkehr. */
const ANFRAGENCENTER_ROUTE = '/supply/anfragen'

/**
 * Detailansicht eines Vorgangs.
 *
 * Bewusst schmal gehalten: Priorität, Status, Vorgangstyp, Verarbeitungsschritte
 * und Aktionshistorie sind entfallen. Sie beschrieben die Maschine, nicht den
 * Fall. Übrig bleibt, was für die Entscheidung zählt — worum es geht, was der
 * Mitarbeitende bisher hat, welche Nachricht es ausgelöst hat und woher die
 * Angaben stammen.
 */
export function WorkItemDetailDrawer() {
  const selectedId = useTeamStore(s => s.selectedWorkItemId)
  const setSelectedId = useTeamStore(s => s.setSelectedWorkItemId)
  const { data: item, isLoading } = useAgentWorkItem(selectedId)
  const { data: agents = [] } = useTeamAgents()
  const sourcesRef = useRef<HTMLDivElement | null>(null)
  const navigate = useNavigate()

  const agent = agents.find(a => a.id === item?.agentId)
  const close = useCallback(() => setSelectedId(null), [setSelectedId])

  const scrollToSources = useCallback(() => {
    sourcesRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }, [])

  // Vor die Callbacks gezogen: sonst steht `item` im Rumpf, aber nur
  // `item?.objectId` in den Abhängigkeiten — die Memoisierung wäre unhaltbar.
  const objectId = item?.objectId

  // Der Objektbezug führt in «Meine Objekte» — bestehende Route, bestehende ID.
  const openProperty = useCallback(() => {
    if (!objectId) return
    navigate(ROUTES.SUPPLY.PROPERTIES, { state: { propertyId: objectId } })
  }, [navigate, objectId])

  // Der ganze Verlauf gehört ins Anfragencenter, nicht in den Drawer.
  const openCorrespondence = useCallback(() => {
    navigate(ANFRAGENCENTER_ROUTE, { state: { objectId } })
  }, [navigate, objectId])

  const firstMessage = item?.messageThread?.slice(0, 1) ?? []

  return (
    <Drawer
      anchor="right"
      open={!!selectedId}
      onClose={close}
      slotProps={{ paper: { sx: { width: { xs: '100%', sm: 520, lg: 600 }, display: 'flex', flexDirection: 'column' } } }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'flex-start',
          gap: 1.5,
          p: 2,
          borderBottom: `1px solid ${DS_BORDER.default}`,
          flexShrink: 0,
        }}
      >
        {agent && <AgentAvatar agent={agent} size="medium" tone={agent.avatarTone} />}
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Typography variant="caption" sx={{ color: DS_TEXT.secondary }}>
            {agent ? `${agent.name} · ${agent.role}` : 'Vorgang'}
          </Typography>
          <Typography component="h2" sx={{ fontWeight: 700, fontSize: '1rem', color: DS_TEXT.primary, lineHeight: 1.35 }}>
            {item ? (item.objectLabel ? `${item.title} – ${item.objectLabel}` : item.title) : 'Vorgang wird geladen'}
          </Typography>
        </Box>
        <IconButton size="small" onClick={close} aria-label="Detailansicht schliessen">
          <X size={18} />
        </IconButton>
      </Box>

      <Box sx={{ flex: 1, overflowY: 'auto', bgcolor: DS_BG.page }}>
        {isLoading && <PanelLoadingState />}

        {item && (
          <Box sx={{ p: 2, display: 'grid', gap: 2.5 }}>
            <Typography variant="caption" sx={{ color: DS_TEXT.muted }}>
              {formatTeamDateTime(item.completedAt ?? item.createdAt)}
            </Typography>

            <Typography variant="body2" sx={{ color: DS_TEXT.secondary }}>{item.summary}</Typography>

            {item.requiresDecision && (item.escalationReason || item.decisionQuestion) && (
              <Box
                sx={{
                  p: 1.75,
                  borderRadius: 2,
                  bgcolor: DS_SURFACE.warning.bg,
                  border: `1px solid ${DS_SURFACE.warning.border}`,
                }}
              >
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 0.75 }}>
                  <HelpCircle size={15} color={DS_TEXT.warning} aria-hidden />
                  <Typography sx={{ fontWeight: 700, fontSize: '0.8125rem', color: DS_TEXT.warningDark }}>
                    Hierzu brauche ich Ihre Entscheidung
                  </Typography>
                </Box>
                {item.escalationReason && (
                  <Typography variant="body2" sx={{ color: DS_TEXT.warningDark }}>
                    {item.escalationReason}
                  </Typography>
                )}
                {item.decisionQuestion && (
                  <Typography variant="body2" sx={{ color: DS_TEXT.primary, fontWeight: 600, mt: 1 }}>
                    {item.decisionQuestion}
                  </Typography>
                )}
              </Box>
            )}

            {item.result.length > 0 && (
              <Box>
                <DetailSectionTitle>{item.requiresDecision ? 'Aktueller Stand' : 'Ergebnis'}</DetailSectionTitle>
                <DetailFieldList fields={item.result} />
              </Box>
            )}

            {/* Nur die auslösende Nachricht — der Rest liegt im Anfragencenter. */}
            {firstMessage.length > 0 && (
              <Box>
                <DetailSectionTitle>Auslösende Nachricht</DetailSectionTitle>
                <MessageThread messages={firstMessage} />
                <Button
                  size="small"
                  endIcon={<ArrowUpRight size={14} />}
                  onClick={openCorrespondence}
                  sx={{ textTransform: 'none', fontWeight: 600, mt: 0.5, px: 0 }}
                >
                  Gesamte Korrespondenz im Anfragencenter anzeigen
                </Button>
              </Box>
            )}

            {item.sourceReferences.length > 0 && (
              <Box ref={sourcesRef} sx={{ scrollMarginTop: 8 }}>
                <DetailSectionTitle>Quellen</DetailSectionTitle>
                <SourceReferenceList references={item.sourceReferences} />
              </Box>
            )}

            {item.rejectionReason && (
              <Box>
                <DetailSectionTitle>Begründung der Zurückweisung</DetailSectionTitle>
                <Typography variant="body2" sx={{ color: DS_TEXT.secondary }}>{item.rejectionReason}</Typography>
              </Box>
            )}
          </Box>
        )}
      </Box>

      {item && (
        <WorkItemActions
          item={item}
          onShowSources={scrollToSources}
          onOpenProperty={openProperty}
        />
      )}
    </Drawer>
  )
}