'use client'

import { useState, useRef, useEffect } from 'react'
import { useTranslations } from 'next-intl'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Card from '@mui/material/Card'
import IconButton from '@mui/material/IconButton'
import TextField from '@mui/material/TextField'
import Collapse from '@mui/material/Collapse'
import classnames from 'classnames'
import type { FarmContext, FarmAIMessage, AIResponseSection } from './farmAiAssistantTypes'

// ─── Constants ─────────────────────────────────────────────────────────────

const DEFAULT_FARM_CONTEXT: FarmContext = {
  soilType: 'Loamy',
  waterEC: '1.2 dS/m',
  selectedCrop: 'Tomato',
  growthStage: 'Flowering',
  lastIrrigationStatus: '2 days ago'
}

const SUGGESTION_CHIPS = [
  { id: 'yellow-leaves', labelKey: 'suggestions.yellowLeaves' },
  { id: 'irrigation-plan', labelKey: 'suggestions.irrigationPlan' },
  { id: 'fertilizer-flowering', labelKey: 'suggestions.fertilizerFlowering' },
  { id: 'plant-disease', labelKey: 'suggestions.plantDisease' }
]

// Demo structured AI response for display
const DEMO_AI_RESPONSE_SECTIONS: AIResponseSection[] = [
  {
    type: 'recommendation',
    title: 'Irrigation recommendation',
    icon: 'droplet',
    frequency: '3 times per week',
    amount: '15–20 L per plant',
    timing: 'Early morning (05:00–07:00)',
    expandableExplanation:
      'Your loamy soil holds moisture well, but tomatoes during flowering need consistent moisture. Water EC of 1.2 dS/m is suitable. Last irrigation was 2 days ago—avoid overwatering to prevent blossom-end rot.'
  },
  {
    type: 'list',
    title: 'Key points',
    icon: 'leaf',
    items: [
      'Avoid midday watering to reduce evaporation',
      'Drip irrigation preferred for root zone targeting',
      'Monitor soil moisture before each session'
    ]
  },
  {
    type: 'warning',
    title: 'Weather advisory',
    icon: 'warning',
    content: 'High temps forecasted next week. Consider increasing frequency to 4x/week temporarily.'
  }
]

// ─── Main Component ────────────────────────────────────────────────────────

export default function FarmAiAssistantChat() {
  const t = useTranslations('farmAiAssistant')
  const [messages, setMessages] = useState<FarmAIMessage[]>([])
  const [inputValue, setInputValue] = useState('')
  const [isContextExpanded, setIsContextExpanded] = useState(true)
  const [isTyping, setIsTyping] = useState(false)
  const [selectedChip, setSelectedChip] = useState<string | null>(null)
  const [expandedExplanations, setExpandedExplanations] = useState<Set<string>>(new Set())
  const scrollRef = useRef<HTMLDivElement>(null)

  const farmContext = DEFAULT_FARM_CONTEXT

  // Scroll to bottom on new messages
  useEffect(() => {
    scrollRef.current?.scrollTo({
      top: scrollRef.current.scrollHeight,
      behavior: 'smooth'
    })
  }, [messages, isTyping])

  const handleSuggestionClick = (chipId: string, labelKey: string) => {
    const label = t(labelKey)
    setSelectedChip(prev => (prev === chipId ? null : chipId))
    handleSend(label)
  }

  const handleSend = async (text?: string) => {
    const content = (text || inputValue).trim()
    if (!content) return

    setInputValue('')
    setSelectedChip(null)

    const userMessage: FarmAIMessage = {
      id: `u-${Date.now()}`,
      role: 'user',
      content,
      timestamp: new Date()
    }
    setMessages(prev => [...prev, userMessage])
    setIsTyping(true)

    // Simulate AI response (replace with actual API call)
    await new Promise(resolve => setTimeout(resolve, 1500))

    const aiMessage: FarmAIMessage = {
      id: `a-${Date.now()}`,
      role: 'assistant',
      content: '',
      timestamp: new Date(),
      sections: DEMO_AI_RESPONSE_SECTIONS
    }
    setMessages(prev => [...prev, aiMessage])
    setIsTyping(false)
  }

  const toggleExplanation = (id: string) => {
    setExpandedExplanations(prev => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  return (
    <Box
      className='flex flex-col min-bs-screen max-w-md mx-auto'
      sx={{
        background: 'linear-gradient(180deg, #f8fcf8 0%, #f0f7f4 30%, #e8f4ef 100%)',
        minHeight: '100dvh'
      }}
    >
      {/* 1) Smart Header */}
      <Box
        className='flex items-center gap-3 px-4 pt-4 pb-3 flex-shrink-0'
        sx={{
          background: 'linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, rgba(14, 165, 233, 0.06) 100%)',
          borderBottom: '1px solid rgba(34, 197, 94, 0.12)'
        }}
      >
        <Box
          className='w-12 h-12 rounded-2xl flex items-center justify-center shrink-0'
          sx={{
            background: 'linear-gradient(145deg, #22c55e 0%, #0ea5e9 100%)',
            boxShadow: '0 4px 12px rgba(34, 197, 94, 0.3)'
          }}
        >
          <i className='tabler-leaf text-2xl text-white' />
        </Box>
        <Box className='min-w-0 flex-1'>
          <Typography
            variant='h6'
            className='font-bold truncate'
            sx={{
              background: 'linear-gradient(135deg, #16a34a 0%, #0ea5e9 100%)',
              backgroundClip: 'text',
              WebkitBackgroundClip: 'text',
              color: 'transparent',
              fontSize: '1.1rem'
            }}
          >
            {t('header.title')}
          </Typography>
          <Typography variant='caption' color='text.secondary' className='block truncate'>
            {t('header.subtitle')}
          </Typography>
        </Box>
      </Box>

      {/* 2) Expandable Farm Context Bar */}
      <Box
        className='mx-4 mt-3 flex-shrink-0 rounded-2xl overflow-hidden'
        sx={{
          background: 'linear-gradient(145deg, #ffffff 0%, rgba(34, 197, 94, 0.04) 100%)',
          border: '1px solid rgba(34, 197, 94, 0.15)',
          boxShadow: '0 2px 12px rgba(0,0,0,0.04)'
        }}
      >
        <Box
          component='button'
          type='button'
          onClick={() => setIsContextExpanded(!isContextExpanded)}
          className='w-full flex items-center justify-between px-4 py-3 text-start'
          sx={{
            '&:hover': { bgcolor: 'rgba(34, 197, 94, 0.04)' },
            transition: 'background 0.2s'
          }}
        >
          <Typography variant='subtitle2' fontWeight={600} color='text.secondary'>
            {t('context.title')}
          </Typography>
          <i
            className={classnames('tabler-chevron-down text-xl text-[#22c55e] transition-transform duration-300', {
              'rotate-180': isContextExpanded
            })}
          />
        </Box>
        <Collapse in={isContextExpanded}>
          <Box className='px-4 pb-4 grid grid-cols-2 gap-2'>
            <ContextBadge icon='tabler-seedling' label={t('context.soilType')} value={farmContext.soilType} />
            <ContextBadge icon='tabler-droplet' label={t('context.waterEC')} value={farmContext.waterEC} />
            <ContextBadge icon='tabler-plant-2' label={t('context.crop')} value={farmContext.selectedCrop} />
            <ContextBadge icon='tabler-flower' label={t('context.growthStage')} value={farmContext.growthStage} />
            <ContextBadge
              icon='tabler-calendar'
              label={t('context.lastIrrigation')}
              value={farmContext.lastIrrigationStatus}
              colSpan={2}
            />
          </Box>
        </Collapse>
      </Box>

      {/* 3) Chat Area */}
      <Box
        ref={scrollRef}
        className='flex-1 overflow-y-auto overflow-x-hidden px-4 py-4 space-y-4'
        sx={{ scrollBehavior: 'smooth' }}
      >
        {messages.length === 0 && !isTyping && (
          <Box className='flex flex-col items-center justify-center py-16 text-center'>
            <Box
              className='w-20 h-20 rounded-3xl flex items-center justify-center mb-4'
              sx={{
                background: 'linear-gradient(145deg, rgba(34, 197, 94, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%)'
              }}
            >
              <i className='tabler-message-circle text-4xl text-[#22c55e]' />
            </Box>
            <Typography variant='body1' color='text.secondary' className='mb-1'>
              {t('emptyState.title')}
            </Typography>
            <Typography variant='caption' color='text.secondary'>
              {t('emptyState.subtitle')}
            </Typography>
          </Box>
        )}

        {messages.map(msg => (
          <MessageBubble
            key={msg.id}
            message={msg}
            expandedExplanations={expandedExplanations}
            onToggleExplanation={toggleExplanation}
            t={t}
          />
        ))}

        {/* Typing indicator */}
        {isTyping && (
          <Box className='animate-fade-in flex items-start gap-3'>
            <Box
              className='w-9 h-9 rounded-xl flex items-center justify-center shrink-0'
              sx={{
                background: 'linear-gradient(145deg, #22c55e 0%, #0ea5e9 100%)'
              }}
            >
              <i className='tabler-leaf text-lg text-white' />
            </Box>
            <Box
              className='px-4 py-3 rounded-2xl rounded-tl-md'
              sx={{
                background: 'linear-gradient(145deg, #ffffff 0%, rgba(34, 197, 94, 0.05) 100%)',
                border: '1px solid rgba(34, 197, 94, 0.15)',
                boxShadow: '0 2px 12px rgba(0,0,0,0.04)'
              }}
            >
              <TypingIndicator />
            </Box>
          </Box>
        )}
      </Box>

      {/* 4) Suggestion Chips */}
      <Box className='px-4 py-2 flex-shrink-0 overflow-x-auto scrollbar-hide'>
        <Box className='flex gap-2 pb-2'>
          {SUGGESTION_CHIPS.map(chip => (
            <Box
              key={chip.id}
              component='button'
              type='button'
              onClick={() => handleSuggestionClick(chip.id, chip.labelKey)}
              className={classnames(
                'px-4 py-2 rounded-2xl text-sm font-medium whitespace-nowrap transition-all duration-200 shrink-0',
                'hover:scale-[1.02] active:scale-[0.98]'
              )}
              sx={{
                background:
                  selectedChip === chip.id
                    ? 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)'
                    : 'linear-gradient(145deg, #ffffff 0%, rgba(34, 197, 94, 0.08) 100%)',
                color: selectedChip === chip.id ? '#ffffff' : 'text.primary',
                border: selectedChip === chip.id ? 'none' : '1px solid rgba(34, 197, 94, 0.2)',
                boxShadow:
                  selectedChip === chip.id
                    ? '0 4px 12px rgba(34, 197, 94, 0.35)'
                    : '0 2px 8px rgba(0,0,0,0.04)'
              }}
            >
              {t(chip.labelKey)}
            </Box>
          ))}
        </Box>
      </Box>

      {/* 5) Input Area - Sticky Bottom */}
      <Box
        className='px-4 py-3 pb-6 flex-shrink-0'
        sx={{
          background: 'linear-gradient(to top, rgba(248,252,248,0.98) 0%, rgba(248,252,248,0.9) 70%, transparent 100%)',
          backdropFilter: 'blur(12px)'
        }}
      >
        <Box
          className='flex items-end gap-2'
          sx={{
            background: '#ffffff',
            borderRadius: '24px',
            border: '1px solid rgba(34, 197, 94, 0.2)',
            boxShadow: '0 4px 20px rgba(34, 197, 94, 0.08)',
            p: 1
          }}
        >
          <IconButton
            component='label'
            htmlFor='farm-ai-camera'
            size='small'
            className='shrink-0'
            sx={{
              color: 'text.secondary',
              '&:hover': { color: '#22c55e', bgcolor: 'rgba(34, 197, 94, 0.08)' }
            }}
          >
            <i className='tabler-camera text-xl' />
            <input id='farm-ai-camera' type='file' accept='image/*' hidden />
          </IconButton>
          <IconButton
            size='small'
            className='shrink-0'
            sx={{
              color: 'text.secondary',
              '&:hover': { color: '#0ea5e9', bgcolor: 'rgba(14, 165, 233, 0.08)' }
            }}
          >
            <i className='tabler-microphone text-xl' />
          </IconButton>
          <TextField
            fullWidth
            multiline
            maxRows={4}
            placeholder={t('input.placeholder')}
            value={inputValue}
            onChange={e => setInputValue(e.target.value)}
            onKeyDown={e => {
              if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault()
                handleSend()
              }
            }}
            variant='standard'
            InputProps={{
              disableUnderline: true,
              sx: {
                px: 1.5,
                py: 1,
                fontSize: '0.95rem'
              }
            }}
            sx={{ flex: 1, minWidth: 0 }}
          />
          <IconButton
            onClick={() => handleSend()}
            disabled={!inputValue.trim()}
            className='shrink-0'
            sx={{
              background: inputValue.trim()
                ? 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)'
                : 'action.disabledBackground',
              color: inputValue.trim() ? '#ffffff' : 'action.disabled',
              '&:hover': inputValue.trim()
                ? {
                    background: 'linear-gradient(135deg, #16a34a 0%, #15803d 100%)',
                    boxShadow: '0 4px 12px rgba(34, 197, 94, 0.4)'
                  }
                : {},
              '&.Mui-disabled': { background: 'action.disabledBackground', color: 'action.disabled' }
            }}
          >
            <i className='tabler-send text-xl' />
          </IconButton>
        </Box>
      </Box>
    </Box>
  )
}

// ─── Sub-components ────────────────────────────────────────────────────────

function ContextBadge({
  icon,
  label,
  value,
  colSpan = 1
}: {
  icon: string
  label: string
  value: string
  colSpan?: number
}) {
  return (
    <Box
      className={classnames('flex items-center gap-2 px-3 py-2 rounded-xl', colSpan === 2 ? 'col-span-2' : '')}
      sx={{
        background: 'rgba(34, 197, 94, 0.06)',
        border: '1px solid rgba(34, 197, 94, 0.12)'
      }}
    >
      <i className={`${icon} text-lg text-[#22c55e] shrink-0`} />
      <Box className='min-w-0'>
        <Typography variant='caption' color='text.secondary' display='block' lineHeight={1.2}>
          {label}
        </Typography>
        <Typography variant='body2' fontWeight={600} color='text.primary' noWrap>
          {value}
        </Typography>
      </Box>
    </Box>
  )
}

function MessageBubble({
  message,
  expandedExplanations,
  onToggleExplanation,
  t
}: {
  message: FarmAIMessage
  expandedExplanations: Set<string>
  onToggleExplanation: (id: string) => void
  t: (key: string) => string
}) {
  const isUser = message.role === 'user'

  if (isUser) {
    return (
      <Box className='flex justify-end animate-fade-in'>
        <Box
          className='max-w-[85%] px-4 py-2.5 rounded-2xl rounded-tr-md'
          sx={{
            background: 'linear-gradient(145deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%)',
            border: '1px solid rgba(34, 197, 94, 0.2)'
          }}
        >
          <Typography variant='body2' color='text.primary'>
            {message.content}
          </Typography>
        </Box>
      </Box>
    )
  }

  // AI message - structured cards
  return (
    <Box className='flex items-start gap-3 animate-fade-in'>
      <Box
        className='w-9 h-9 rounded-xl flex items-center justify-center shrink-0'
        sx={{
          background: 'linear-gradient(145deg, #22c55e 0%, #0ea5e9 100%)'
        }}
      >
        <i className='tabler-leaf text-lg text-white' />
      </Box>
      <Box className='flex-1 min-w-0 space-y-3'>
        {message.sections?.map((section, idx) => (
          <AISectionCard
            key={`${message.id}-${idx}`}
            section={section}
            expandedExplanations={expandedExplanations}
            onToggleExplanation={onToggleExplanation}
            messageId={message.id}
            idx={idx}
            t={t}
          />
        ))}
      </Box>
    </Box>
  )
}

function AISectionCard({
  section,
  expandedExplanations,
  onToggleExplanation,
  messageId,
  idx,
  t
}: {
  section: AIResponseSection
  expandedExplanations: Set<string>
  onToggleExplanation: (id: string) => void
  messageId: string
  idx: number
  t: (key: string) => string
}) {
  const expId = `${messageId}-exp-${idx}`

  const iconMap = {
    droplet: 'tabler-droplet',
    leaf: 'tabler-leaf',
    warning: 'tabler-alert-triangle',
    fertilizer: 'tabler-atom-2',
    calendar: 'tabler-calendar'
  }
  const iconClass = section.icon ? iconMap[section.icon] : 'tabler-leaf'

  if (section.type === 'recommendation') {
    return (
      <Card
        elevation={0}
        className='overflow-hidden'
        sx={{
          borderRadius: '20px',
          background: 'linear-gradient(160deg, #ffffff 0%, rgba(34, 197, 94, 0.06) 100%)',
          border: '1px solid rgba(34, 197, 94, 0.2)',
          boxShadow: '0 4px 20px rgba(34, 197, 94, 0.12)'
        }}
      >
        <Box className='p-4'>
          <Box className='flex items-center gap-2 mb-3'>
            <i className={`${iconClass} text-xl text-[#22c55e]`} />
            <Typography variant='subtitle2' fontWeight={700} color='primary'>
              {section.title}
            </Typography>
          </Box>
          <Box className='space-y-2'>
            {section.frequency && (
              <Box className='flex justify-between'>
                <Typography variant='caption' color='text.secondary'>
                  {t('recommendation.frequency')}
                </Typography>
                <Typography variant='body2' fontWeight={600}>
                  {section.frequency}
                </Typography>
              </Box>
            )}
            {section.amount && (
              <Box className='flex justify-between'>
                <Typography variant='caption' color='text.secondary'>
                  {t('recommendation.amount')}
                </Typography>
                <Typography variant='body2' fontWeight={600}>
                  {section.amount}
                </Typography>
              </Box>
            )}
            {section.timing && (
              <Box className='flex justify-between'>
                <Typography variant='caption' color='text.secondary'>
                  {t('recommendation.timing')}
                </Typography>
                <Typography variant='body2' fontWeight={600}>
                  {section.timing}
                </Typography>
              </Box>
            )}
          </Box>
          {section.expandableExplanation && (
            <Box className='mt-3'>
              <Box
                component='button'
                type='button'
                onClick={() => onToggleExplanation(expId)}
                className='flex items-center gap-1 text-sm font-medium'
                sx={{ color: '#22c55e', '&:hover': { color: '#16a34a' } }}
              >
                {t('recommendation.whyThis')}
                <i
                  className={classnames('tabler-chevron-down text-base transition-transform', {
                    'rotate-180': expandedExplanations.has(expId)
                  })}
                />
              </Box>
              <Collapse in={expandedExplanations.has(expId)}>
                <Typography variant='body2' color='text.secondary' className='mt-2'>
                  {section.expandableExplanation}
                </Typography>
              </Collapse>
            </Box>
          )}
        </Box>
      </Card>
    )
  }

  if (section.type === 'warning') {
    return (
      <Box
        className='p-4 rounded-2xl'
        sx={{
          background: 'linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%)',
          border: '1px solid rgba(251, 191, 36, 0.35)'
        }}
      >
        <Box className='flex gap-2'>
          <i className='tabler-alert-triangle text-xl text-amber-600 shrink-0 mt-0.5' />
          <Box>
            {section.title && (
              <Typography variant='subtitle2' fontWeight={600} color='warning.dark' className='mb-1'>
                {section.title}
              </Typography>
            )}
            <Typography variant='body2' color='text.secondary'>
              {section.content}
            </Typography>
          </Box>
        </Box>
      </Box>
    )
  }

  if (section.type === 'list') {
    return (
      <Box
        className='p-4 rounded-2xl'
        sx={{
          background: 'linear-gradient(145deg, #ffffff 0%, rgba(34, 197, 94, 0.04) 100%)',
          border: '1px solid rgba(34, 197, 94, 0.15)'
        }}
      >
        {section.title && (
          <Box className='flex items-center gap-2 mb-2'>
            <i className={`${iconClass} text-lg text-[#22c55e]`} />
            <Typography variant='subtitle2' fontWeight={600} color='text.primary'>
              {section.title}
            </Typography>
          </Box>
        )}
        {section.items && (
          <Box component='ul' className='m-0 ps-5 space-y-1'>
            {section.items.map((item, i) => (
              <Typography key={i} component='li' variant='body2' color='text.secondary'>
                {item}
              </Typography>
            ))}
          </Box>
        )}
      </Box>
    )
  }

  return null
}

function TypingIndicator() {
  return (
    <Box className='flex gap-1'>
      {[0, 1, 2].map(i => (
        <Box
          key={i}
          className='w-2 h-2 rounded-full bg-[#22c55e]'
          sx={{
            animation: `typing-bounce 1.4s ease-in-out ${i * 0.16}s infinite both`
          }}
        />
      ))}
    </Box>
  )
}