import { Fragment, useMemo, useState } from 'react'
import Alert from '@mui/material/Alert'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogTitle from '@mui/material/DialogTitle'
import FormControl from '@mui/material/FormControl'
import InputLabel from '@mui/material/InputLabel'
import MenuItem from '@mui/material/MenuItem'
import Select from '@mui/material/Select'
import Stack from '@mui/material/Stack'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import {
  fetchAdminOrder,
  fetchAdminOrders,
  postAdminOrderMessage,
  setAdminOrderStatus,
} from '@/entities/order/api/admin-order-api'
import { ORDER_STATUSES, getAdminNextOrderStatuses } from '@/shared/constants/order'
import { formatPriceRub } from '@/shared/lib/format-price'
import { groupOrdersByStatus } from '@/shared/lib/group-orders-by-status'
import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor'

export function AdminOrdersPage() {
  const qc = useQueryClient()
  const [q, setQ] = useState('')
  const [status, setStatus] = useState('')
  const [deliveryType, setDeliveryType] = useState<'delivery' | 'pickup' | ''>('')
  const [dialogOpen, setDialogOpen] = useState(false)
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [msg, setMsg] = useState('')

  const ordersQuery = useQuery({
    queryKey: ['admin', 'orders', { q, status, deliveryType }],
    queryFn: () =>
      fetchAdminOrders({
        q: q.trim() || undefined,
        status: status || undefined,
        deliveryType: deliveryType || undefined,
      }),
  })

  const orderDetailQuery = useQuery({
    queryKey: ['admin', 'orders', 'detail', selectedId],
    queryFn: () => fetchAdminOrder(selectedId!),
    enabled: Boolean(selectedId),
  })

  const statusMut = useMutation({
    mutationFn: (next: string) => setAdminOrderStatus(selectedId!, next),
    onSuccess: async () => {
      await invalidateQueryKeys(qc, [
        ['admin', 'orders'],
        ['admin', 'orders', 'detail'],
        ['admin', 'orders', 'summary'],
      ])
    },
  })

  const msgMut = useMutation({
    mutationFn: () => postAdminOrderMessage(selectedId!, msg.trim()),
    onSuccess: async () => {
      setMsg('')
      await invalidateQueryKeys(qc, [['admin', 'orders', 'detail']])
    },
  })

  const open = (id: string) => {
    setSelectedId(id)
    setDialogOpen(true)
  }

  const items = useMemo(() => ordersQuery.data?.items ?? [], [ordersQuery.data?.items])
  const groupedItems = useMemo(
    () =>
      groupOrdersByStatus(items, ORDER_STATUSES).map((group) => ({
        statusCode: group.status,
        items: group.items,
      })),
    [items],
  )

  const detail = orderDetailQuery.data?.item
  const canSendMessage = msg.replace(/<[^>]*>/g, ' ').trim().length > 0

  const nextStatuses = useMemo(() => {
    if (!detail) return []
    return getAdminNextOrderStatuses(detail.status, detail.deliveryType ?? 'delivery')
  }, [detail])

  return (
    <Box>
      <Typography variant="h4" sx={{ mb: 2 }}>
        Заказы
      </Typography>

      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
        Управление заказами доступно пользователю с правами администратора.
      </Typography>
      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ mb: 2 }}>
        <TextField size="small" label="Поиск (id/email)" value={q} onChange={(e) => setQ(e.target.value)} fullWidth />
        <FormControl size="small" sx={{ minWidth: 220 }}>
          <InputLabel id="status-label">Статус</InputLabel>
          <Select
            labelId="status-label"
            label="Статус"
            value={status}
            onChange={(e) => setStatus(String(e.target.value))}
          >
            <MenuItem value="">
              <em>Все</em>
            </MenuItem>
            {ORDER_STATUSES.map((s) => (
              <MenuItem key={s} value={s}>
                {orderStatusLabelRu(s)}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
        <FormControl size="small" sx={{ minWidth: 220 }}>
          <InputLabel id="delivery-type-label">Способ получения</InputLabel>
          <Select
            labelId="delivery-type-label"
            label="Способ получения"
            value={deliveryType}
            onChange={(e) => {
              const v = String(e.target.value)
              if (v === '' || v === 'delivery' || v === 'pickup') setDeliveryType(v)
            }}
          >
            <MenuItem value="">
              <em>Все</em>
            </MenuItem>
            <MenuItem value="delivery">Доставка</MenuItem>
            <MenuItem value="pickup">Самовывоз</MenuItem>
          </Select>
        </FormControl>
      </Stack>

      {ordersQuery.isError && <Alert severity="error">Не удалось загрузить заказы.</Alert>}

      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell>ID</TableCell>
            <TableCell>Покупатель</TableCell>
            <TableCell>Создан</TableCell>
            <TableCell>Сумма</TableCell>
            <TableCell>Позиций</TableCell>
            <TableCell align="right">Действия</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {groupedItems.map((group) => (
            <Fragment key={`group:${group.statusCode}`}>
              <TableRow>
                <TableCell colSpan={6} sx={{ fontWeight: 700, bgcolor: 'action.hover' }}>
                  {orderStatusLabelRu(group.statusCode)} ({group.items.length})
                </TableCell>
              </TableRow>
              {group.items.map((o) => (
                <TableRow key={o.id} hover>
                  <TableCell>{o.id.slice(-8)}</TableCell>
                  <TableCell>{o.user.email}</TableCell>
                  <TableCell>{new Date(o.createdAt).toLocaleString('ru-RU')}</TableCell>
                  <TableCell>{formatPriceRub(o.totalCents)}</TableCell>
                  <TableCell>{o.itemsCount}</TableCell>
                  <TableCell align="right">
                    <Button size="small" onClick={() => open(o.id)}>
                      Открыть
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </Fragment>
          ))}
          {ordersQuery.isSuccess && items.length === 0 && (
            <TableRow>
              <TableCell colSpan={6} sx={{ color: 'text.secondary' }}>
                Заказов пока нет.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>

      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} fullWidth maxWidth="md">
        <DialogTitle>Заказ</DialogTitle>
        <DialogContent>
          {!detail && orderDetailQuery.isLoading && <Typography>Загрузка…</Typography>}
          {orderDetailQuery.isError && <Alert severity="error">Не удалось загрузить заказ.</Alert>}
          {detail && (
            <Stack spacing={2} sx={{ mt: 1 }}>
              <Typography sx={{ fontWeight: 700 }}>
                #{detail.id.slice(-8)} · {detail.user.email} · {orderStatusLabelRu(detail.status)} ·{' '}
                {formatPriceRub(detail.totalCents)}
              </Typography>

              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ alignItems: { sm: 'center' } }}>
                <FormControl size="small" sx={{ minWidth: 240 }}>
                  <InputLabel id="next-status-label">Сменить статус</InputLabel>
                  <Select
                    labelId="next-status-label"
                    label="Сменить статус"
                    value=""
                    onChange={(e) => {
                      const next = String(e.target.value)
                      if (!next) return
                      statusMut.mutate(next)
                    }}
                    disabled={statusMut.isPending || nextStatuses.length === 0}
                  >
                    <MenuItem value="">
                      <em>Выберите…</em>
                    </MenuItem>
                    {nextStatuses.map((s) => (
                      <MenuItem key={s} value={s}>
                        {orderStatusLabelRu(s)}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </Stack>

              <Box>
                <Typography variant="subtitle2" sx={{ mb: 1 }}>
                  Сообщения
                </Typography>
                <Stack spacing={1} sx={{ mb: 1 }}>
                  {detail.messages.map((m) => (
                    <Box
                      key={m.id}
                      sx={{
                        p: 1.25,
                        border: 1,
                        borderColor: 'divider',
                        borderRadius: 2,
                        bgcolor: m.authorType === 'admin' ? 'primary.50' : 'grey.100',
                        alignSelf: m.authorType === 'admin' ? 'flex-end' : 'flex-start',
                        width: 'fit-content',
                        maxWidth: '85%',
                      }}
                    >
                      <Typography variant="caption" color="text.secondary">
                        {m.authorType === 'admin' ? 'Админ (вы)' : 'Пользователь'} ·{' '}
                        {new Date(m.createdAt).toLocaleString()}
                      </Typography>
                      <RichTextMessageContent value={m.text} />
                    </Box>
                  ))}
                  {detail.messages.length === 0 && <Typography color="text.secondary">Нет сообщений.</Typography>}
                </Stack>

                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ alignItems: { sm: 'flex-end' } }}>
                  <Box sx={{ flexGrow: 1, width: '100%' }}>
                    <RichTextMessageEditor value={msg} onChange={setMsg} placeholder="Ответ админа" />
                  </Box>
                  <Button
                    variant="contained"
                    onClick={() => msgMut.mutate()}
                    disabled={msgMut.isPending || !canSendMessage}
                    sx={{ minWidth: 160 }}
                  >
                    Отправить
                  </Button>
                </Stack>
              </Box>
            </Stack>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setDialogOpen(false)}>Закрыть</Button>
        </DialogActions>
      </Dialog>
    </Box>
  )
}