'use client'

import { useState, useEffect } from 'react'
import { useTranslations } from 'next-intl'
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
import Collapse from '@mui/material/Collapse'
import CircularProgress from '@mui/material/CircularProgress'
import { useTheme, alpha } from '@mui/material/styles'
import type {
  FarmData,
  GrowthStage,
  CropOption,
  FertilizationPlan,
} from '@/libs/api/services/fertilizationRecommendationService'
import { fertilizationRecommendationService } from '@/libs/api/services/fertilizationRecommendationService'

const DEFAULT_FARM_DATA: FarmData = {
  soilType: 'Loamy',
  organicMatter: 'Medium (2.5%)',
  waterEC: '1.2 dS/m'
}

const DEFAULT_GROWTH_STAGES: GrowthStage[] = [
  { id: 'prePlanting', icon: 'tabler-seedling' },
  { id: 'earlyGrowth', icon: 'tabler-leaf' },
  { id: 'flowering', icon: 'tabler-flower' },
  { id: 'fruiting', icon: 'tabler-apple' },
  { id: 'postHarvest', icon: 'tabler-basket' }
]

const DEFAULT_CROP_OPTIONS: CropOption[] = [
  { id: 'wheat', labelKey: 'wheat', icon: 'tabler-wheat' },
  { id: 'corn', labelKey: 'corn', icon: 'tabler-plant-2' },
  { id: 'cotton', labelKey: 'cotton', icon: 'tabler-flower' },
  { id: 'saffron', labelKey: 'saffron', icon: 'tabler-flower-2' },
  { id: 'canola', labelKey: 'canola', icon: 'tabler-leaf' },
  { id: 'vegetables', labelKey: 'vegetables', icon: 'tabler-carrot' }
]

export default function SmartFertilizationRecommendation() {
  const t = useTranslations('fertilization')
  const theme = useTheme()
  const primaryMain = theme.palette.primary.main
  const primaryLight = theme.palette.primary.light
  const primaryDark = theme.palette.primary.dark
  const paperBg = theme.palette.background.paper
  const [farmData, setFarmData] = useState<FarmData>(DEFAULT_FARM_DATA)
  const [growthStages, setGrowthStages] = useState<GrowthStage[]>(DEFAULT_GROWTH_STAGES)
  const [cropOptions, setCropOptions] = useState<CropOption[]>(DEFAULT_CROP_OPTIONS)
  const [configLoading, setConfigLoading] = useState(true)
  const [configError, setConfigError] = useState<string | null>(null)
  const [growthStage, setGrowthStage] = useState<string>(DEFAULT_GROWTH_STAGES[0].id)
  const [selectedCrop, setSelectedCrop] = useState<string | null>(null)
  const [plan, setPlan] = useState<FertilizationPlan | null>(null)
  const [loading, setLoading] = useState(false)
  const [reasoningExpanded, setReasoningExpanded] = useState(false)

  useEffect(() => {
    fertilizationRecommendationService
      .getConfig()
      .then(({ farmData: farm, growthStages: stages, cropOptions: crops }) => {
        if (farm) setFarmData(farm)
        if (stages?.length) {
          setGrowthStages(stages)
          setGrowthStage(stages[0].id)
        }
        if (crops?.length) setCropOptions(crops)
      })
      .catch((err: { message?: string }) => {
        setConfigError(err?.message ?? 'Failed to load config')
      })
      .finally(() => setConfigLoading(false))
  }, [])

  const handleGenerate = async () => {
    if (!selectedCrop) return
    setLoading(true)
    setPlan(null)
    setReasoningExpanded(false)
    try {
      const { plan: nextPlan } = await fertilizationRecommendationService.recommend({
        crop_id: selectedCrop,
        growth_stage: growthStage,
        soilType: farmData.soilType,
        organicMatter: farmData.organicMatter,
        waterEC: farmData.waterEC,
      })
      setPlan(nextPlan)
    } catch {
      setPlan(null)
    } finally {
      setLoading(false)
    }
  }

  const stageIndex = growthStages.findIndex(s => s.id === growthStage)

  return (
    <Box
      className='min-bs-screen'
      sx={{
        background: (th) =>
          `linear-gradient(165deg, ${alpha(th.palette.primary.main, 0.08)} 0%, ${alpha(th.palette.primary.main, 0.05)} 25%, ${alpha(th.palette.primary.main, 0.03)} 60%, ${th.palette.background.default} 100%)`,
        minHeight: '100vh'
      }}
    >
      <Box className='max-w-lg mx-auto px-4 py-6 sm:py-8'>
        {/* 1) Header */}
        <Box className='mb-8'>
          <Typography
            variant='h4'
            className='font-bold tracking-tight'
            sx={{
              background: `linear-gradient(135deg, ${primaryDark} 0%, ${primaryMain} 40%, ${primaryLight} 100%)`,
              backgroundClip: 'text',
              WebkitBackgroundClip: 'text',
              color: 'transparent',
              fontSize: { xs: '1.5rem', sm: '1.75rem' }
            }}
          >
            {t('title')}
          </Typography>
          <Typography
            variant='body2'
            color='text.secondary'
            className='mt-1 transition-colors duration-300'
          >
            {t('subtitle')}
          </Typography>
        </Box>

        {/* 2) Farm Data Card */}
        <Card
          elevation={0}
          className='mb-6 overflow-hidden transition-all duration-300 hover:shadow-lg animate-fade-in'
          sx={{
            borderRadius: '28px',
            background: `linear-gradient(145deg, ${paperBg} 0%, ${alpha(primaryMain, 0.06)} 50%, ${alpha(primaryMain, 0.04)} 100%)`,
            boxShadow: `0 4px 24px ${alpha(primaryMain, 0.08)}, 0 4px 12px ${alpha(primaryMain, 0.04)}, 0 1px 3px rgba(0,0,0,0.04)`,
            border: `1px solid ${alpha(primaryMain, 0.12)}`
          }}
        >
          <CardContent className='p-5'>
            <Box className='flex items-center justify-between mbe-4'>
              <Typography variant='subtitle2' fontWeight={600} color='text.secondary'>
                {t('farmData.title')}
              </Typography>
              <Box
                className='px-2.5 py-1 rounded-full text-xs font-medium flex items-center gap-1.5'
                sx={{
                  background: (th) => `linear-gradient(135deg, ${th.palette.success.main} 0%, ${th.palette.success.dark} 100%)`,
                  color: 'white',
                  boxShadow: (th) => `0 2px 8px ${alpha(th.palette.success.main, 0.3)}`
                }}
              >
                <i className='tabler-circle-check text-sm' />
                {t('verifiedBadge')}
              </Box>
            </Box>
            <Box className='flex flex-wrap gap-3'>
              <FarmBadge icon='tabler-seedling' label={t('farmData.soilType')} value={farmData.soilType} />
              <FarmBadge
                icon='tabler-atom-2'
                label={t('farmData.organicMatter')}
                value={farmData.organicMatter}
              />
              <FarmBadge icon='tabler-droplet' label={t('farmData.waterEC')} value={farmData.waterEC} />
            </Box>
          </CardContent>
        </Card>

        {/* 3) Growth Stage Selector */}
        <Typography variant='subtitle2' fontWeight={600} color='text.secondary' className='mbe-3'>
          {t('growthStage.title')}
        </Typography>
        <Box className='flex gap-2 mb-6 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-hide'>
          {growthStages.map((stage, idx) => {
            const isSelected = growthStage === stage.id
            const isPast = idx < stageIndex
            return (
              <Box
                key={stage.id}
                component='button'
                type='button'
                onClick={() => setGrowthStage(stage.id)}
                className='flex flex-col items-center gap-1.5 px-4 py-3 rounded-2xl shrink-0 transition-all duration-300 ease-out border-2 cursor-pointer min-w-[72px]'
                sx={{
                  borderColor: isSelected ? primaryMain : 'transparent',
                  background: isSelected
                    ? `linear-gradient(145deg, ${alpha(primaryMain, 0.15)} 0%, ${alpha(primaryMain, 0.06)} 100%)`
                    : `linear-gradient(145deg, ${paperBg} 0%, ${alpha(primaryMain, 0.04)} 100%)`,
                  boxShadow: isSelected
                    ? `0 4px 20px ${alpha(primaryMain, 0.2)}, inset 0 1px 0 rgba(255,255,255,0.8)`
                    : '0 2px 8px rgba(0,0,0,0.04)',
                  '&:hover': {
                    transform: 'translateY(-2px)',
                    boxShadow: isSelected
                      ? `0 6px 24px ${alpha(primaryMain, 0.25)}`
                      : `0 4px 16px ${alpha(primaryMain, 0.1)}`
                  }
                }}
              >
                <Box
                  className='w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300'
                  sx={{
                    background: isSelected
                      ? `linear-gradient(135deg, ${primaryMain} 0%, ${primaryDark} 100%)`
                      : isPast
                        ? `linear-gradient(145deg, ${alpha(primaryMain, 0.2)} 0%, ${alpha(primaryMain, 0.1)} 100%)`
                        : alpha(primaryMain, 0.08)
                  }}
                >
                  <i
                    className={`${stage.icon} text-xl transition-colors duration-300 ${isSelected ? 'text-white' : ''}`}
                    style={!isSelected ? { color: primaryMain } : undefined}
                  />
                </Box>
                <Typography
                  variant='caption'
                  fontWeight={600}
                  sx={{
                    color: isSelected ? 'primary.main' : 'text.secondary',
                    textAlign: 'center',
                    lineHeight: 1.2
                  }}
                >
                  {t(`growthStage.${stage.id}`)}
                </Typography>
              </Box>
            )
          })}
        </Box>

        {/* 4) Plant Selection */}
        <Typography variant='subtitle2' fontWeight={600} color='text.secondary' className='mbe-3'>
          {t('plantSelection.title')}
        </Typography>
        {configLoading ? (
          <Box className='flex justify-center py-8 mb-6'>
            <CircularProgress size={32} sx={{ color: 'primary.main' }} />
          </Box>
        ) : configError ? (
          <Typography variant='body2' color='error' className='mb-6'>
            {configError}
          </Typography>
        ) : (
        <Box className='flex flex-wrap gap-3 mb-6'>
          {cropOptions.map(crop => (
            <CropCard
              key={crop.id}
              crop={crop}
              label={t(`crops.${crop.labelKey}`)}
              selected={selectedCrop === crop.id}
              onClick={() =>
                setSelectedCrop(prev => (prev === crop.id ? null : crop.id))
              }
            />
          ))}
        </Box>
        )}

        {/* 5) Primary CTA Button - End of form */}
        <Box className='mb-8'>
          <Button
            fullWidth
            variant='contained'
            disabled={!selectedCrop || loading || configLoading}
            onClick={handleGenerate}
            startIcon={<i className='tabler-sparkles text-xl' />}
            className='rounded-2xl py-3.5 text-base font-semibold shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-[1.01] active:scale-[0.99]'
            sx={{
              background: `linear-gradient(135deg, ${primaryLight} 0%, ${primaryMain} 50%, ${primaryDark} 100%)`,
              boxShadow: `0 4px 20px ${alpha(primaryMain, 0.4)}`,
              '&:hover': {
                background: `linear-gradient(135deg, ${primaryLight} 0%, ${primaryMain} 50%, ${primaryDark} 100%)`,
                boxShadow: `0 6px 28px ${alpha(primaryMain, 0.5)}`,
                filter: 'brightness(1.05)'
              },
              '&:disabled': {
                background: 'action.disabledBackground',
                color: 'action.disabled'
              }
            }}
          >
            {t('generateCta')}
          </Button>
        </Box>

        {/* 6) Result Section - Prescription style */}
        {plan && (
          <Box className='mb-6 animate-fade-in'>
            <Card
              elevation={0}
              sx={{
                borderRadius: '28px',
                background: `linear-gradient(160deg, ${paperBg} 0%, ${alpha(primaryMain, 0.06)} 40%, ${alpha(primaryMain, 0.04)} 100%)`,
                boxShadow: `0 8px 32px ${alpha(primaryMain, 0.12)}, 0 4px 16px ${alpha(primaryMain, 0.06)}, 0 2px 8px rgba(0,0,0,0.04)`,
                border: `1px solid ${alpha(primaryMain, 0.15)}`,
                overflow: 'visible'
              }}
            >
              <CardContent className='p-6'>
                <Box className='flex items-center gap-2 mbe-5'>
                  <i className='tabler-prescription text-2xl' style={{ color: primaryMain }} />
                  <Typography variant='h6' fontWeight={700} color='text.primary'>
                    {t('result.title')}
                  </Typography>
                </Box>

                <Box className='space-y-3'>
                  <PrescriptionRow
                    icon='tabler-atom-2'
                    label={t('result.fertilizerType')}
                    value={plan.npkRatio}
                  />
                  <PrescriptionRow
                    icon='tabler-scale'
                    label={t('result.amountPerHectare')}
                    value={plan.amountPerHectare}
                  />
                  <PrescriptionRow
                    icon='tabler-spray'
                    label={t('result.applicationMethod')}
                    value={plan.applicationMethod}
                  />
                  <PrescriptionRow
                    icon='tabler-calendar-repeat'
                    label={t('result.applicationInterval')}
                    value={plan.applicationInterval}
                  />
                </Box>

                {/* Expandable "Why this recommendation?" */}
                <Box
                  className='mt-5 rounded-2xl overflow-hidden transition-all duration-300'
                  sx={{
                    border: `1px solid ${alpha(primaryMain, 0.15)}`,
                    background: alpha(primaryMain, 0.04)
                  }}
                >
                  <Box
                    component='button'
                    type='button'
                    onClick={() => setReasoningExpanded(!reasoningExpanded)}
                    className='w-full flex items-center justify-between px-4 py-3 text-start cursor-pointer'
                    sx={{ '&:hover': { bgcolor: alpha(primaryMain, 0.06) } }}
                  >
                    <Box className='flex items-center gap-2'>
                      <i className='tabler-brain text-lg' style={{ color: primaryMain }} />
                      <Typography variant='subtitle2' fontWeight={600} color='text.primary'>
                        {t('result.whyRecommendation')}
                      </Typography>
                    </Box>
                    <i
                      className={`tabler-chevron-down text-xl transition-transform duration-300 ${
                        reasoningExpanded ? 'rotate-180' : ''
                      }`}
                      style={{ color: primaryMain }}
                    />
                  </Box>
                  <Collapse in={reasoningExpanded}>
                    <Box className='px-4 pb-4'>
                      <Typography
                        variant='body2'
                        color='text.secondary'
                        sx={{ lineHeight: 1.7 }}
                      >
                        {plan.reasoning}
                      </Typography>
                    </Box>
                  </Collapse>
                </Box>
              </CardContent>
            </Card>
          </Box>
        )}

        {/* Loading state */}
        {loading && (
          <Card
            elevation={0}
            className='mb-6 animate-fade-in'
            sx={{
              borderRadius: '28px',
              background: `linear-gradient(160deg, ${paperBg} 0%, ${alpha(primaryMain, 0.06)} 100%)`,
              boxShadow: `0 8px 32px ${alpha(primaryMain, 0.1)}`,
              border: `1px solid ${alpha(primaryMain, 0.12)}`
            }}
          >
            <CardContent className='p-12 flex flex-col items-center gap-4'>
              <Box
                className='w-14 h-14 rounded-2xl flex items-center justify-center animate-pulse'
                sx={{
                  background: `linear-gradient(135deg, ${alpha(primaryMain, 0.15)} 0%, ${alpha(primaryMain, 0.08)} 100%)`
                }}
              >
                <i className='tabler-sparkles text-2xl' style={{ color: primaryMain }} />
              </Box>
              <Typography variant='body2' color='text.secondary'>
                {t('generating')}
              </Typography>
            </CardContent>
          </Card>
        )}
      </Box>
    </Box>
  )
}

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

function FarmBadge({
  icon,
  label,
  value
}: {
  icon: string
  label: string
  value: string
}) {
  const theme = useTheme()
  const primaryMain = theme.palette.primary.main
  return (
    <Box
      className='flex items-center gap-2 px-4 py-2.5 rounded-2xl transition-all duration-200 hover:scale-[1.02] hover:shadow-md'
      sx={{
        background: `linear-gradient(145deg, ${alpha(primaryMain, 0.1)} 0%, ${alpha(primaryMain, 0.04)} 100%)`,
        border: `1px solid ${alpha(primaryMain, 0.15)}`,
        boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.5)'
      }}
    >
      <i className={`${icon} text-xl`} style={{ color: primaryMain }} />
      <Box>
        <Typography variant='caption' color='text.secondary' display='block' lineHeight={1.2}>
          {label}
        </Typography>
        <Typography variant='body2' fontWeight={600} color='text.primary'>
          {value}
        </Typography>
      </Box>
    </Box>
  )
}

function CropCard({
  crop,
  label,
  selected,
  onClick
}: {
  crop: CropOption
  label: string
  selected: boolean
  onClick: () => void
}) {
  const theme = useTheme()
  const primaryMain = theme.palette.primary.main
  const primaryDark = theme.palette.primary.dark
  const paperBg = theme.palette.background.paper
  return (
    <Card
      component='button'
      type='button'
      elevation={0}
      onClick={onClick}
      className='flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer transition-all duration-300 border-2 text-start'
      sx={{
        borderColor: selected ? primaryMain : 'transparent',
        background: selected
          ? `linear-gradient(145deg, ${alpha(primaryMain, 0.15)} 0%, ${alpha(primaryMain, 0.06)} 100%)`
          : `linear-gradient(145deg, ${paperBg} 0%, ${alpha(primaryMain, 0.04)} 100%)`,
        boxShadow: selected
          ? `0 4px 20px ${alpha(primaryMain, 0.2)}, inset 0 1px 0 rgba(255,255,255,0.8)`
          : '0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9)',
        '&:hover': {
          transform: 'translateY(-2px)',
          boxShadow: selected
            ? `0 6px 24px ${alpha(primaryMain, 0.25)}`
            : `0 4px 16px ${alpha(primaryMain, 0.12)}`
        }
      }}
    >
      <Box
        className='w-11 h-11 rounded-xl flex items-center justify-center shrink-0 transition-all duration-300'
        sx={{
          background: selected
            ? `linear-gradient(135deg, ${primaryMain} 0%, ${primaryDark} 100%)`
            : `linear-gradient(145deg, ${alpha(primaryMain, 0.1)} 0%, ${alpha(primaryMain, 0.05)} 100%)`
        }}
      >
        <i
          className={`${crop.icon} text-xl ${selected ? 'text-white' : ''}`}
          style={!selected ? { color: primaryMain } : undefined}
        />
      </Box>
      <Typography
        variant='body2'
        fontWeight={600}
        color={selected ? 'primary.main' : 'text.primary'}
      >
        {label}
      </Typography>
      {selected && (
        <i className='tabler-circle-check-filled text-xl ms-auto' style={{ color: primaryMain }} />
      )}
    </Card>
  )
}

function PrescriptionRow({
  icon,
  label,
  value
}: {
  icon: string
  label: string
  value: string
}) {
  const theme = useTheme()
  const primaryMain = theme.palette.primary.main
  return (
    <Box
      className='flex items-center gap-4 p-3 rounded-2xl transition-colors duration-200'
      sx={{
        background: alpha(primaryMain, 0.06),
        border: `1px solid ${alpha(primaryMain, 0.08)}`
      }}
    >
      <i className={`${icon} text-2xl shrink-0`} style={{ color: primaryMain }} />
      <Box className='flex-1 min-w-0'>
        <Typography variant='caption' color='text.secondary'>
          {label}
        </Typography>
        <Typography variant='body1' fontWeight={600} color='text.primary'>
          {value}
        </Typography>
      </Box>
    </Box>
  )
}
