'use client'

import { useCallback, useEffect, useRef, useState } from 'react'
import {
  Alert,
  Box,
  Button,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  TextField,
  Tooltip,
  Typography
} from '@mui/material'
import {
  ArrowDown,
  ArrowRight,
  ArrowUp,
  Braces,
  CheckCircle2,
  ClipboardCopy,
  Cpu,
  Pencil,
  Play,
  Plus,
  RefreshCw,
  RotateCcw,
  Sparkles,
  Square,
  Trash2,
  Zap
} from 'lucide-react'
import type { SupabaseClient } from '@supabase/supabase-js'
import { DoubleBezelCard, MetalCard, PhosphorText, PhysicalButton, TactileBadge, Led } from '@d3ro/ui/components/ds'
import { d3roFontMono, d3roPalette } from '@d3ro/ui/theme'
import { useAuth } from '@/components/providers/auth-provider'
import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
import {
  bootstrapInstructionState,
  COMMAND_INPUT_MAX_CHARS,
  CommandClientError,
  createCustomInstruction,
  deleteCustomInstruction,
  executeInstruction,
  normalizeInstructionDraft,
  reorderCustomInstruction,
  setActiveInstruction,
  sortInstructions,
  updateCustomInstruction,
  type CustomInstruction,
  type InstructionDraft,
  type InstructionState
} from '@/lib/command-client'

function commandMessage(error: unknown): string {
  if (error instanceof CommandClientError) {
    if (error.code === 'auth') return '세션이 만료되었거나 이 명령에 접근할 권한이 없습니다.'
    if (error.code === 'cancelled') return '명령 실행을 취소했습니다.'
    if (error.code === 'conflict') return '다른 기기에서 변경된 명령입니다. 새로고침한 뒤 다시 시도해 주세요.'
    if (error.code === 'duplicate') return '같은 이름의 명령이 이미 있습니다.'
    if (error.code === 'invalid-request') return '이름, 설명, 프롬프트 또는 입력 길이를 확인해 주세요.'
    if (error.code === 'not-found') return '명령을 찾을 수 없습니다.'
    if (error.code === 'quota-exceeded') return '오늘 사용할 수 있는 AI 쿼터를 모두 사용했습니다.'
    if (error.code === 'model-not-allowed') return '현재 요금제에서 사용할 수 없는 모델입니다.'
    if (error.code === 'provider-unavailable') return 'AI 제공자가 설정되지 않았거나 현재 응답할 수 없습니다.'
    if (error.code === 'timeout') return 'AI 응답 시간이 초과되었습니다.'
    if (error.code === 'network') return '네트워크 연결을 확인한 뒤 다시 시도해 주세요.'
    if (error.code === 'invalid-response') return '서버 응답 형식이 올바르지 않습니다.'
  }
  return '명령을 처리하지 못했습니다. 잠시 후 다시 시도해 주세요.'
}

function webClient(): SupabaseClient {
  return getSupabaseBrowserClient() as unknown as SupabaseClient
}

const EMPTY_DRAFT: InstructionDraft = { name: '', description: '', prompt: '' }

export default function CommandsPage(): React.ReactElement {
  const { user, session, loading: authLoading } = useAuth()
  const [state, setState] = useState<InstructionState | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [mutatingIds, setMutatingIds] = useState<Set<string>>(() => new Set())
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editing, setEditing] = useState<CustomInstruction | null>(null)
  const [draft, setDraft] = useState<InstructionDraft>(EMPTY_DRAFT)
  const [saving, setSaving] = useState(false)
  const [testInput, setTestInput] = useState('')
  const [testOutput, setTestOutput] = useState<string | null>(null)
  const [testError, setTestError] = useState<string | null>(null)
  const [retryable, setRetryable] = useState(false)
  const [testing, setTesting] = useState(false)
  const controllerRef = useRef<AbortController | null>(null)
  const requestGeneration = useRef(0)
  const initializationRef = useRef<Promise<InstructionState> | null>(null)
  const activeInstruction = state?.instructions.find((instruction) => instruction.id === state.activeInstructionId) ?? null

  const load = useCallback(async (): Promise<void> => {
    const generation = ++requestGeneration.current
    if (!user) {
      if (!authLoading) {
        setState(null)
        setError('세션이 만료되었습니다. 다시 로그인해 주세요.')
        setLoading(false)
      }
      return
    }
    setLoading(true)
    setError(null)
    try {
      const client = webClient()
      let initialization = initializationRef.current
      if (!initialization) {
        initialization = (async (): Promise<InstructionState> => {
          let loaded = await bootstrapInstructionState(client, user.id)
          if (!loaded.activeInstructionId && loaded.instructions.length > 0) {
            const defaultInstruction = loaded.instructions.find((instruction) => instruction.builtinKey === 'translate_en') ?? loaded.instructions[0]
            const activated = await setActiveInstruction(client, user.id, defaultInstruction.id)
            loaded = { ...loaded, ...activated }
          }
          return loaded
        })()
        initializationRef.current = initialization
      }
      const loaded = await initialization
      if (generation === requestGeneration.current) setState(loaded)
    } catch (requestError) {
      if (generation === requestGeneration.current) {
        setState(null)
        setError(commandMessage(requestError))
      }
    } finally {
      initializationRef.current = null
      if (generation === requestGeneration.current) setLoading(false)
    }
  }, [authLoading, user])

  useEffect(() => {
    void load()
  }, [load])

  useEffect(() => () => controllerRef.current?.abort(), [])

  const markMutating = (id: string, active: boolean): void => {
    setMutatingIds((current) => {
      const next = new Set(current)
      if (active) next.add(id)
      else next.delete(id)
      return next
    })
  }

  const activate = async (instruction: CustomInstruction): Promise<void> => {
    if (!user || !state || mutatingIds.has(instruction.id) || state.activeInstructionId === instruction.id) return
    const previousId = state.activeInstructionId
    markMutating(instruction.id, true)
    setError(null)
    setState((current) => current ? { ...current, activeInstructionId: instruction.id } : current)
    try {
      const activated = await setActiveInstruction(webClient(), user.id, instruction.id)
      setState((current) => current ? { ...current, ...activated } : current)
      setTestOutput(null)
      setTestError(null)
    } catch (requestError) {
      setState((current) => current ? { ...current, activeInstructionId: previousId } : current)
      setError(commandMessage(requestError))
    } finally {
      markMutating(instruction.id, false)
    }
  }

  const openAdd = (): void => {
    setEditing(null)
    setDraft(EMPTY_DRAFT)
    setDialogOpen(true)
  }

  const openEdit = (instruction: CustomInstruction): void => {
    if (instruction.builtinKey !== null) return
    setEditing(instruction)
    setDraft({ name: instruction.name, description: instruction.description, prompt: instruction.prompt })
    setDialogOpen(true)
  }

  const save = async (): Promise<void> => {
    if (!user || !state || saving) return
    let normalized: InstructionDraft
    try {
      normalized = normalizeInstructionDraft(draft)
    } catch (requestError) {
      setError(commandMessage(requestError))
      return
    }
    setSaving(true)
    setError(null)
    const original = editing
    const now = new Date().toISOString()
    const optimisticId = original?.id ?? crypto.randomUUID()
    const nextSortOrder = state.instructions.reduce((maximum, instruction) => Math.max(maximum, instruction.sortOrder), 0) + 10
    const optimistic: CustomInstruction = {
      id: optimisticId,
      userId: user.id,
      builtinKey: null,
      name: normalized.name,
      description: normalized.description,
      prompt: normalized.prompt,
      icon: original?.icon ?? 'sparkles',
      sortOrder: original?.sortOrder ?? nextSortOrder,
      revision: (original?.revision ?? 0) + 1,
      createdAt: original?.createdAt ?? now,
      updatedAt: now
    }
    setState((current) => current ? {
      ...current,
      instructions: sortInstructions(original
        ? current.instructions.map((instruction) => instruction.id === original.id ? optimistic : instruction)
        : [...current.instructions, optimistic])
    } : current)
    setDialogOpen(false)
    try {
      const saved = original
        ? await updateCustomInstruction(webClient(), user.id, original, normalized)
        : await createCustomInstruction(webClient(), user.id, normalized, nextSortOrder)
      setState((current) => current ? {
        ...current,
        instructions: sortInstructions([
          ...current.instructions.filter((instruction) => instruction.id !== optimisticId && instruction.id !== saved.id),
          saved
        ])
      } : current)
    } catch (requestError) {
      setState((current) => current ? {
        ...current,
        instructions: sortInstructions([
          ...current.instructions.filter((instruction) => instruction.id !== optimisticId),
          ...(original ? [original] : [])
        ])
      } : current)
      setError(commandMessage(requestError))
    } finally {
      setSaving(false)
    }
  }

  const remove = async (instruction: CustomInstruction): Promise<void> => {
    if (!user || !state || instruction.builtinKey !== null || mutatingIds.has(instruction.id)) return
    if (!window.confirm(`“${instruction.name}” 명령을 삭제할까요?`)) return
    markMutating(instruction.id, true)
    setError(null)
    let nextActiveId = state.activeInstructionId
    try {
      if (state.activeInstructionId === instruction.id) {
        const fallback = state.instructions.find((candidate) => candidate.builtinKey === 'translate_en')
        if (!fallback) throw new CommandClientError('invalid-response', true)
        const activated = await setActiveInstruction(webClient(), user.id, fallback.id)
        nextActiveId = activated.activeInstructionId
        setState((current) => current ? { ...current, ...activated } : current)
      }
      setState((current) => current ? {
        ...current,
        activeInstructionId: nextActiveId,
        instructions: current.instructions.filter((candidate) => candidate.id !== instruction.id)
      } : current)
      await deleteCustomInstruction(webClient(), user.id, instruction)
    } catch (requestError) {
      setState((current) => current ? {
        ...current,
        activeInstructionId: nextActiveId,
        instructions: current.instructions.some((candidate) => candidate.id === instruction.id)
          ? current.instructions
          : sortInstructions([...current.instructions, instruction])
      } : current)
      setError(commandMessage(requestError))
    } finally {
      markMutating(instruction.id, false)
    }
  }

  const move = async (instruction: CustomInstruction, direction: 'up' | 'down'): Promise<void> => {
    if (!user || !state || instruction.builtinKey !== null || mutatingIds.has(instruction.id)) return
    const customs = state.instructions.filter((candidate) => candidate.builtinKey === null)
    const index = customs.findIndex((candidate) => candidate.id === instruction.id)
    const adjacent = customs[index + (direction === 'up' ? -1 : 1)]
    if (!adjacent) return
    const reorderedCustoms = [...customs]
    reorderedCustoms[index] = adjacent
    reorderedCustoms[index + (direction === 'up' ? -1 : 1)] = instruction
    const now = new Date().toISOString()
    const optimisticCustoms = reorderedCustoms.map((candidate, position) => ({
      ...candidate,
      sortOrder: 1_000 + (position + 1) * 10,
      revision: candidate.revision + 1,
      updatedAt: now
    }))
    const previousInstructions = state.instructions
    markMutating(instruction.id, true)
    setError(null)
    setState((current) => current ? {
      ...current,
      instructions: sortInstructions([
        ...current.instructions.filter((candidate) => candidate.builtinKey !== null),
        ...optimisticCustoms
      ])
    } : current)
    try {
      const instructions = await reorderCustomInstruction(webClient(), user.id, instruction.id, direction)
      setState((current) => current ? { ...current, instructions } : current)
    } catch (requestError) {
      setState((current) => current ? { ...current, instructions: previousInstructions } : current)
      setError(commandMessage(requestError))
    } finally {
      markMutating(instruction.id, false)
    }
  }

  const run = async (): Promise<void> => {
    if (testing || !testInput.trim() || !activeInstruction) return
    if (!session?.access_token) {
      setTestError('세션이 만료되었습니다. 다시 로그인해 주세요.')
      setRetryable(false)
      return
    }
    const controller = new AbortController()
    controllerRef.current?.abort()
    controllerRef.current = controller
    setTesting(true)
    setTestOutput(null)
    setTestError(null)
    setRetryable(false)
    try {
      const output = await executeInstruction(activeInstruction.prompt, testInput, {
        accessToken: session.access_token,
        signal: controller.signal
      })
      if (!controller.signal.aborted) setTestOutput(output)
    } catch (requestError) {
      setTestError(commandMessage(requestError))
      setRetryable(requestError instanceof CommandClientError && requestError.retryable)
    } finally {
      if (controllerRef.current === controller) {
        controllerRef.current = null
        setTesting(false)
      }
    }
  }

  if (authLoading || loading) {
    return <Box role="status" sx={{ minHeight: 360, display: 'grid', placeItems: 'center' }}><CircularProgress aria-label="명령 불러오는 중" /></Box>
  }

  if (!state) {
    return (
      <Box sx={{ maxWidth: 1080, mx: 'auto', p: { xs: 2.5, md: 4 }, pt: 4 }}>
        <Alert severity="error" action={<Button color="inherit" size="small" startIcon={<RefreshCw size={14} />} onClick={() => void load()}>다시 시도</Button>}>
          {error ?? '명령을 불러오지 못했습니다.'}
        </Alert>
      </Box>
    )
  }

  const customInstructions = state.instructions.filter((instruction) => instruction.builtinKey === null)

  return (
    <Box sx={{ maxWidth: 1080, mx: 'auto', p: { xs: 2.5, md: 4 }, pt: 4, pb: 10 }}>
      <DoubleBezelCard innerPadding={3} sx={{ mb: 4 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, mb: 3, flexWrap: 'wrap' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <Box sx={{ width: 44, height: 44, borderRadius: '12px', bgcolor: 'rgba(59,130,246,0.15)', border: '1px solid rgba(59,130,246,0.4)', display: 'grid', placeItems: 'center', color: 'var(--d3-accent-main)' }}><Zap size={22} /></Box>
            <Box>
              <Typography sx={{ fontFamily: d3roFontMono, fontSize: 10, color: 'var(--d3-text-label)' }}>ACTIVE SYNCED INSTRUCTION</Typography>
              <Typography sx={{ fontSize: 18, fontWeight: 500, color: '#fff' }}>{activeInstruction?.name ?? '활성 명령 없음'}</Typography>
            </Box>
          </Box>
          <TactileBadge ledColor="green" tone="success">SUPABASE SSOT · REV {state.settingsRevision}</TactileBadge>
        </Box>
        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: 'repeat(4, 1fr)' }, gap: 1.5, p: 2, bgcolor: 'var(--d3-bg-inset)', borderRadius: '12px', border: '1px solid #1a1a1c' }}>
          <PipelineStep icon={<Braces size={15} />} step="01" label="텍스트 입력" />
          <PipelineStep icon={<CheckCircle2 size={15} />} step="02" label="활성 명령 적용" />
          <PipelineStep icon={<Cpu size={15} />} step="03" label="llm-proxy" accent />
          <PipelineStep icon={<ClipboardCopy size={15} />} step="04" label="검증된 응답" last />
        </Box>
      </DoubleBezelCard>

      {error && <Alert severity="error" action={<Button color="inherit" size="small" startIcon={<RefreshCw size={14} />} onClick={() => void load()}>새로고침</Button>} sx={{ mb: 3 }}>{error}</Alert>}

      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mb: 2 }}>
        <PhosphorText variant="label">SYNCED COMMANDS ({state.instructions.length})</PhosphorText>
        <PhysicalButton tone="accent" size="small" onClick={openAdd} trailingIcon={<Plus size={14} />}>사용자 명령 추가</PhysicalButton>
      </Box>
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 2, mb: 4 }}>
        {state.instructions.map((instruction) => {
          const active = instruction.id === state.activeInstructionId
          const busy = mutatingIds.has(instruction.id)
          const customIndex = customInstructions.findIndex((candidate) => candidate.id === instruction.id)
          return (
            <Box
              key={instruction.id}
              role="button"
              tabIndex={busy ? -1 : 0}
              aria-pressed={active}
              aria-label={`${instruction.name} 명령 활성화`}
              data-testid={`command-card-${instruction.id}`}
              onClick={() => { if (!busy) void activate(instruction) }}
              onKeyDown={(event) => {
                if (!busy && (event.key === 'Enter' || event.key === ' ')) {
                  event.preventDefault()
                  void activate(instruction)
                }
              }}
              sx={{ cursor: busy ? 'default' : 'pointer', border: active ? '1px solid var(--d3-accent-main)' : '1px solid transparent', borderRadius: '16px' }}
            >
              <MetalCard sx={{ p: 2.5, height: '100%' }}>
                <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>
                  <Box sx={{ pt: 0.5 }}><Led color={active ? 'green' : 'amber'} size={8} /></Box>
                  <Box sx={{ flex: 1, minWidth: 0 }}>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', mb: 0.5 }}>
                      <Typography sx={{ fontSize: 16, fontWeight: 500, color: active ? 'var(--d3-accent-main)' : '#fff' }}>{instruction.name}</Typography>
                      <TactileBadge mono tone={instruction.builtinKey ? 'mono' : 'accent'}>{instruction.builtinKey ? 'BUILT-IN · READ ONLY' : 'CUSTOM'}</TactileBadge>
                      {active && <TactileBadge mono tone="success">ACTIVE</TactileBadge>}
                    </Box>
                    <Typography sx={{ fontSize: 13, color: 'var(--d3-text-label)', lineHeight: 1.5 }}>{instruction.description || '설명 없음'}</Typography>
                  </Box>
                  {instruction.builtinKey === null && (
                    <Box sx={{ display: 'flex', gap: 0.1 }} onClick={(event) => event.stopPropagation()}>
                      <Tooltip title="위로"><span><IconButton aria-label={`${instruction.name} 위로`} disabled={busy || customIndex <= 0} size="small" onClick={() => void move(instruction, 'up')}><ArrowUp size={14} /></IconButton></span></Tooltip>
                      <Tooltip title="아래로"><span><IconButton aria-label={`${instruction.name} 아래로`} disabled={busy || customIndex === customInstructions.length - 1} size="small" onClick={() => void move(instruction, 'down')}><ArrowDown size={14} /></IconButton></span></Tooltip>
                      <Tooltip title="편집"><span><IconButton aria-label={`${instruction.name} 편집`} disabled={busy} size="small" onClick={() => openEdit(instruction)}><Pencil size={14} /></IconButton></span></Tooltip>
                      <Tooltip title="삭제"><span><IconButton aria-label={`${instruction.name} 삭제`} disabled={busy} size="small" onClick={() => void remove(instruction)}><Trash2 size={14} /></IconButton></span></Tooltip>
                    </Box>
                  )}
                </Box>
              </MetalCard>
            </Box>
          )
        })}
      </Box>

      <PhosphorText variant="label" sx={{ mb: 1.5, display: 'block' }}>PIPELINE TEST BENCH</PhosphorText>
      <MetalCard sx={{ p: 3 }}>
        <Box sx={{ display: 'flex', gap: 1.5, mb: 2, alignItems: 'flex-start', flexDirection: { xs: 'column', sm: 'row' } }}>
          <TextField
            value={testInput}
            onChange={(event) => setTestInput(event.target.value)}
            placeholder="처리할 텍스트를 입력하세요..."
            multiline
            minRows={3}
            fullWidth
            inputProps={{ 'aria-label': '명령 테스트 입력', maxLength: COMMAND_INPUT_MAX_CHARS }}
            helperText={`${testInput.length.toLocaleString()} / ${COMMAND_INPUT_MAX_CHARS.toLocaleString()} · ${activeInstruction?.name ?? '활성 명령 없음'}`}
            sx={{ '& .MuiOutlinedInput-root': { bgcolor: 'var(--d3-bg-inset)', color: 'var(--d3-text-secondary)', borderRadius: '12px' } }}
          />
          {testing ? (
            <PhysicalButton tone="glass" onClick={() => controllerRef.current?.abort()}><Square size={14} style={{ marginRight: 4 }} /> 취소</PhysicalButton>
          ) : (
            <PhysicalButton tone="accent" onClick={() => void run()} disabled={!testInput.trim() || !activeInstruction}><Play size={14} style={{ marginRight: 4 }} /> 실행</PhysicalButton>
          )}
        </Box>
        {testing && <PhosphorText variant="small" sx={{ color: d3roPalette.text.secondary }}>인증된 AI 응답을 기다리는 중...</PhosphorText>}
        {testError && <Alert severity="error" data-testid="command-error" action={retryable ? <Button color="inherit" size="small" startIcon={<RotateCcw size={14} />} onClick={() => void run()}>다시 시도</Button> : undefined}>{testError}</Alert>}
        {testOutput && (
          <Box data-testid="command-output" sx={{ p: 2.5, bgcolor: 'var(--d3-bg-inset)', borderRadius: '12px', border: '1px solid var(--d3-border-default)', display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>
            <Sparkles size={16} color="var(--d3-accent-main)" style={{ marginTop: 2, flexShrink: 0 }} />
            <Typography sx={{ fontSize: 14, color: 'var(--d3-text-secondary)', lineHeight: 1.6, whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>{testOutput}</Typography>
          </Box>
        )}
      </MetalCard>

      <Dialog open={dialogOpen} onClose={() => { if (!saving) setDialogOpen(false) }} maxWidth="sm" fullWidth PaperProps={{ sx: { bgcolor: 'var(--d3-bg-card)', border: '1px solid var(--d3-border-default)', borderRadius: '16px', p: 1 } }}>
        <DialogTitle sx={{ color: '#fff', fontWeight: 500 }}>{editing ? '사용자 명령 편집' : '사용자 명령 추가'}</DialogTitle>
        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
          <TextField label="명령 이름" value={draft.name} onChange={(event) => setDraft((current) => ({ ...current, name: event.target.value }))} inputProps={{ maxLength: 80 }} autoFocus fullWidth size="small" sx={{ mt: 1 }} />
          <TextField label="명령 설명" value={draft.description} onChange={(event) => setDraft((current) => ({ ...current, description: event.target.value }))} inputProps={{ maxLength: 240 }} fullWidth size="small" />
          <TextField label="명령 프롬프트" value={draft.prompt} onChange={(event) => setDraft((current) => ({ ...current, prompt: event.target.value }))} inputProps={{ maxLength: 4_000 }} helperText="{{text}}를 넣으면 해당 위치에 입력문이 삽입됩니다. 없으면 프롬프트 뒤에 붙습니다." multiline minRows={5} fullWidth />
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <PhysicalButton tone="glass" disabled={saving} onClick={() => setDialogOpen(false)}>취소</PhysicalButton>
          <PhysicalButton tone="accent" disabled={saving || !draft.name.trim() || !draft.prompt.trim()} onClick={() => void save()}>{saving ? '저장 중...' : '저장'}</PhysicalButton>
        </DialogActions>
      </Dialog>
    </Box>
  )
}

function PipelineStep({ icon, step, label, accent = false, last = false }: { icon: React.ReactNode; step: string; label: string; accent?: boolean; last?: boolean }): React.ReactElement {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
      <Box sx={{ width: 32, height: 32, borderRadius: '50%', bgcolor: accent ? 'rgba(59,130,246,0.2)' : 'var(--d3-bg-elevated)', display: 'grid', placeItems: 'center', color: accent ? 'var(--d3-accent-main)' : 'var(--d3-text-secondary)' }}>{icon}</Box>
      <Box sx={{ flex: 1 }}><Typography sx={{ fontFamily: d3roFontMono, fontSize: 9, color: 'var(--d3-text-label)' }}>STEP {step}</Typography><Typography sx={{ fontSize: 12, fontWeight: 600, color: accent ? 'var(--d3-accent-main)' : '#fff' }}>{label}</Typography></Box>
      {!last && <ArrowRight size={14} color="var(--d3-text-label)" />}
    </Box>
  )
}