import { useState } from 'react'
import Box from '@mui/material/Box'
import Link from '@mui/material/Link'
import Stack from '@mui/material/Stack'
import Tab from '@mui/material/Tab'
import Tabs from '@mui/material/Tabs'
import Typography from '@mui/material/Typography'
import {
  CheckCircle,
  ClipboardList,
  Clock,
  CreditCard,
  MapPin,
  PackageOpen,
  ShoppingCart,
  Star,
  Store,
  Truck,
} from 'lucide-react'
import { Link as RouterLink } from 'react-router-dom'
import { PICKUP_ADDRESS_SHORT } from '@/shared/constants/pickup-point'

const commonSteps = [
  {
    label: 'Выберите товары',
    icon: <ShoppingCart size={18} />,
    text: 'Найдите нужные изделия в каталоге и добавьте их в корзину. Вы можете выбрать несколько товаров от разных мастеров — все они соберутся в одном заказе.',
  },
  {
    label: 'Проверьте корзину',
    icon: <ClipboardList size={18} />,
    text: 'Перейдите в корзину и проверьте состав заказа: названия товаров, количество и итоговую сумму. Здесь же можно изменить количество или удалить позиции.',
  },
]

const deliverySteps = [
  {
    label: 'Укажите адрес доставки и получателя',
    icon: <MapPin size={18} />,
    text: 'Заполните имя, телефон, и адрес доставки. Если у вас уже есть сохранённые адреса — выберите из списка или добавьте новый в личном кабинете.',
  },
  {
    label: 'Выберите способ доставки',
    icon: <Truck size={18} />,
    text: 'Доступны: Почта России, Озон ПВЗ, Яндекс ПВЗ, 5Post, WB ПВЗ. После оформления админ рассчитает точную стоимость доставки и скорректирует цену заказа.',
  },
  {
    label: 'Оплатите заказ',
    icon: <CreditCard size={18} />,
    text: 'Онлайн-оплата через ЮKassa — банковские карты и СБП. Перенаправление на защищённую платёжную страницу.',
  },
  {
    label: 'Получите заказ',
    icon: <PackageOpen size={18} />,
    text: 'После отправки вы получите трек-номер для отслеживания. Следите за статусом заказа в личном кабинете.',
  },
]

const pickupSteps = [
  {
    label: 'Подтвердите заказ',
    icon: <CheckCircle size={18} />,
    text: 'Выберите способ оплаты: онлайн через ЮKassa (карты, СБП) или при получении (наличные / карта).',
  },
  {
    label: 'Согласуйте время получения',
    icon: <Clock size={18} />,
    text: 'Админ свяжется с вами, чтобы договориться об удобном времени выдачи заказа.',
  },
  {
    label: 'Получите заказ',
    icon: <Store size={18} />,
    text: `Адрес: ${PICKUP_ADDRESS_SHORT}. Перед визитом согласуем время, чтобы заказ точно был готов.`,
  },
]

function StepRow({ step, isLast }: { step: (typeof commonSteps)[0]; isLast: boolean }) {
  return (
    <Box sx={{ display: 'flex', gap: 2.5, pb: isLast ? 0 : 2.5, position: 'relative' }}>
      <Stack spacing={0} sx={{ alignItems: 'center', flexShrink: 0, width: 20, pt: 0.25 }}>
        <Box
          sx={{
            width: 20,
            height: 20,
            borderRadius: '6px',
            backgroundColor: 'action.hover',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'text.secondary',
            flexShrink: 0,
            zIndex: 1,
          }}
        >
          {step.icon}
        </Box>
        {!isLast && (
          <Box
            sx={{
              width: 1.5,
              flex: 1,
              minHeight: 16,
              backgroundColor: 'divider',
              borderRadius: 1,
              mt: 0.5,
            }}
          />
        )}
      </Stack>
      <Box sx={{ flex: 1, pt: 0.1 }}>
        <Typography
          sx={{
            fontWeight: 600,
            fontSize: '0.875rem',
            letterSpacing: '-0.01em',
            mb: 0.5,
          }}
        >
          {step.label}
        </Typography>
        <Typography
          sx={{
            fontSize: '0.8rem',
            color: 'text.secondary',
            lineHeight: 1.65,
          }}
        >
          {step.text}
        </Typography>
      </Box>
    </Box>
  )
}

function BranchStepper({ steps }: { steps: typeof deliverySteps }) {
  return (
    <Stack spacing={0} sx={{ mt: 1 }}>
      {steps.map((step, i) => (
        <StepRow key={step.label} step={step} isLast={i === steps.length - 1} />
      ))}
    </Stack>
  )
}

export function HowToOrderSection() {
  const [tab, setTab] = useState(0)

  return (
    <Box>
      <Typography
        variant="h5"
        sx={{
          fontWeight: 700,
          letterSpacing: '-0.03em',
          lineHeight: 1.15,
          mb: 3,
        }}
      >
        Как оформить заказ
      </Typography>

      <BranchStepper steps={commonSteps} />

      <Box sx={{ mt: 2.5, mb: 1 }}>
        <Tabs
          value={tab}
          onChange={(_, v) => setTab(v)}
          variant="fullWidth"
          sx={{
            minHeight: 36,
            '& .MuiTab-root': {
              minHeight: 36,
              fontSize: '0.8rem',
              fontWeight: 600,
              letterSpacing: '-0.01em',
            },
            '& .MuiTabs-indicator': {
              height: 2,
              borderRadius: 1,
            },
          }}
        >
          <Tab label="Доставка" />
          <Tab label="Самовывоз" />
        </Tabs>
      </Box>

      {tab === 0 && <BranchStepper steps={deliverySteps} />}
      {tab === 1 && (
        <Box>
          <BranchStepper steps={pickupSteps} />
          <Typography variant="body2" sx={{ mt: 1.5 }}>
            <Link component={RouterLink} to="/about" sx={{ fontSize: '0.8rem', fontWeight: 500 }}>
              Посмотреть на карте
            </Link>
          </Typography>
        </Box>
      )}

      <Box
        sx={{
          mt: 3,
          display: 'flex',
          alignItems: 'flex-start',
          gap: 1.5,
          p: 2,
          borderRadius: '10px',
          backgroundColor: 'action.hover',
        }}
      >
        <Box
          sx={{
            color: 'text.secondary',
            flexShrink: 0,
            mt: 0.1,
          }}
        >
          <Star size={16} />
        </Box>
        <Typography
          variant="body2"
          sx={{
            fontSize: '0.8rem',
            color: 'text.secondary',
            lineHeight: 1.6,
          }}
        >
          После получения заказа вы можете оставить отзыв в личном кабинете.
        </Typography>
      </Box>
    </Box>
  )
}
