'use client'

import { useState } 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'

// Types
interface FarmData {
  soilType: string
  organicMatter: string
  waterEC: string
}

interface GrowthStage {
  id: string
  icon: string
}

interface CropOption {
  id: string
  labelKey: string
  icon: string
}

interface FertilizationPlan {
  npkRatio: string
  amountPerHectare: string
  applicationMethod: string
  applicationInterval: string
  reasoning: string
}

// Mock farm data (from stored soil/water data - no inputs)
const DEFAULT_FARM_DATA: FarmData = {
  soilType: 'Loamy',
  organicMatter: 'Medium (2.5%)',
  waterEC: '1.2 dS/m'
}

const 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 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' }
]

// Mock plan generator (replace with API in production)
function generateFertilizationPlan(
  _cropId: string,
  _growthStageId: string,
  _farmData: FarmData
): FertilizationPlan {
  return {
    npkRatio: '20-20-20 (NPK)',
    amountPerHectare: '150 kg/ha',
    applicationMethod: 'Foliar spray + soil broadcast',
    applicationInterval: 'Every 14 days',
    reasoning:
      'Your loamy soil with medium organic matter (2.5%) provides good nutrient retention. Water EC of 1.2 dS/m indicates low salinity—suitable for most crops. At the flowering stage, increased phosphorus supports bloom development. We recommend a balanced NPK to maintain nitrogen for vegetative growth while boosting phosphorous for flowering.'
  }
}

export default function SmartFertilizationRecommendation() {
  const t = useTranslations('fertilization')
  const [farmData] = useState<FarmData>(DEFAULT_FARM_DATA)
  const [growthStage, setGrowthStage] = useState<string>(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)

  const handleGenerate = () => {
    if (!selectedCrop) return
    setLoading(true)
    setPlan(null)
    setReasoningExpanded(false)
    setTimeout(() => {
      setPlan(
        generateFertilizationPlan(selectedCrop, growthStage, farmData)
      )
      setLoading(false)
    }, 1400)
  }

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

  return (
    <Box
      className='min-bs-screen pb-28'
      sx={{
        background:
          'linear-gradient(165deg, #f0fdf4 0%, #ecfdf5 25%, #faf5ff 60%, var(--mui-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, #16a34a 0%, #22c55e 40%, #7c3aed 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, #ffffff 0%, #faf5ff 50%, #f0fdf4 100%)',
            boxShadow:
              '0 4px 24px rgba(34, 197, 94, 0.08), 0 4px 12px rgba(124, 58, 237, 0.04), 0 1px 3px rgba(0,0,0,0.04)',
            border: '1px solid rgba(34, 197, 94, 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:
                    'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
                  color: 'white',
                  boxShadow: '0 2px 8px rgba(34, 197, 94, 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'>
          {GROWTH_STAGES.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 ? '#22c55e' : 'transparent',
                  background: isSelected
                    ? 'linear-gradient(145deg, rgba(34, 197, 94, 0.15) 0%, rgba(124, 58, 237, 0.06) 100%)'
                    : 'linear-gradient(145deg, #ffffff 0%, #faf5ff 100%)',
                  boxShadow: isSelected
                    ? '0 4px 20px rgba(34, 197, 94, 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 rgba(34, 197, 94, 0.25)'
                      : '0 4px 16px rgba(124, 58, 237, 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, #22c55e 0%, #16a34a 100%)'
                      : isPast
                        ? 'linear-gradient(145deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%)'
                        : 'rgba(124, 58, 237, 0.08)'
                  }}
                >
                  <i
                    className={`${stage.icon} text-xl transition-colors duration-300 ${
                      isSelected ? 'text-white' : isPast ? 'text-emerald-600' : 'text-violet-500'
                    }`}
                  />
                </Box>
                <Typography
                  variant='caption'
                  fontWeight={600}
                  sx={{
                    color: isSelected ? '#16a34a' : '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>
        <Box className='flex flex-wrap gap-3 mb-8'>
          {CROP_OPTIONS.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>

        {/* 6) Result Section - Prescription style */}
        {plan && (
          <Box className='mb-6 animate-fade-in'>
            <Card
              elevation={0}
              sx={{
                borderRadius: '28px',
                background:
                  'linear-gradient(160deg, #ffffff 0%, #faf5ff 40%, #f0fdf4 100%)',
                boxShadow:
                  '0 8px 32px rgba(34, 197, 94, 0.12), 0 4px 16px rgba(124, 58, 237, 0.06), 0 2px 8px rgba(0,0,0,0.04)',
                border: '1px solid rgba(34, 197, 94, 0.15)',
                overflow: 'visible'
              }}
            >
              <CardContent className='p-6'>
                <Box className='flex items-center gap-2 mbe-5'>
                  <i className='tabler-prescription text-2xl text-emerald-600' />
                  <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 rgba(34, 197, 94, 0.15)',
                    background: 'rgba(34, 197, 94, 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: 'rgba(34, 197, 94, 0.06)' } }}
                  >
                    <Box className='flex items-center gap-2'>
                      <i className='tabler-brain text-lg text-emerald-600' />
                      <Typography variant='subtitle2' fontWeight={600} color='text.primary'>
                        {t('result.whyRecommendation')}
                      </Typography>
                    </Box>
                    <i
                      className={`tabler-chevron-down text-xl text-emerald-600 transition-transform duration-300 ${
                        reasoningExpanded ? 'rotate-180' : ''
                      }`}
                    />
                  </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, #ffffff 0%, #f0fdf4 100%)',
              boxShadow: '0 8px 32px rgba(34, 197, 94, 0.1)',
              border: '1px solid rgba(34, 197, 94, 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, rgba(34, 197, 94, 0.15) 0%, rgba(124, 58, 237, 0.08) 100%)'
                }}
              >
                <i className='tabler-sparkles text-2xl text-emerald-600' />
              </Box>
              <Typography variant='body2' color='text.secondary'>
                {t('generating')}
              </Typography>
            </CardContent>
          </Card>
        )}
      </Box>

      {/* 5) Primary CTA Button - Sticky */}
      <Box
        className='fixed bottom-0 start-0 end-0 p-4 z-10'
        sx={{
          background:
            'linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.9) 70%, transparent 100%)',
          backdropFilter: 'blur(8px)'
        }}
      >
        <Button
          fullWidth
          variant='contained'
          disabled={!selectedCrop || loading}
          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, #22c55e 0%, #16a34a 50%, #15803d 100%)',
            boxShadow: '0 4px 20px rgba(34, 197, 94, 0.4)',
            '&:hover': {
              background:
                'linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%)',
              boxShadow: '0 6px 28px rgba(34, 197, 94, 0.5)'
            },
            '&:disabled': {
              background: 'action.disabledBackground',
              color: 'action.disabled'
            }
          }}
        >
          {t('generateCta')}
        </Button>
      </Box>
    </Box>
  )
}

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

function FarmBadge({
  icon,
  label,
  value
}: {
  icon: string
  label: string
  value: string
}) {
  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, rgba(34, 197, 94, 0.1) 0%, rgba(124, 58, 237, 0.04) 100%)',
        border: '1px solid rgba(34, 197, 94, 0.15)',
        boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.5)'
      }}
    >
      <i className={`${icon} text-xl text-emerald-600`} />
      <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
}) {
  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 ? '#22c55e' : 'transparent',
        background: selected
          ? 'linear-gradient(145deg, rgba(34, 197, 94, 0.15) 0%, rgba(124, 58, 237, 0.06) 100%)'
          : 'linear-gradient(145deg, #ffffff 0%, #faf5ff 100%)',
        boxShadow: selected
          ? '0 4px 20px rgba(34, 197, 94, 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 rgba(34, 197, 94, 0.25)'
            : '0 4px 16px rgba(34, 197, 94, 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, #22c55e 0%, #16a34a 100%)'
            : 'linear-gradient(145deg, rgba(34, 197, 94, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%)'
        }}
      >
        <i
          className={`${crop.icon} text-xl ${selected ? 'text-white' : 'text-emerald-600'}`}
        />
      </Box>
      <Typography
        variant='body2'
        fontWeight={600}
        color={selected ? '#16a34a' : 'text.primary'}
      >
        {label}
      </Typography>
      {selected && (
        <i className='tabler-circle-check-filled text-xl text-emerald-600 ms-auto' />
      )}
    </Card>
  )
}

function PrescriptionRow({
  icon,
  label,
  value
}: {
  icon: string
  label: string
  value: string
}) {
  return (
    <Box
      className='flex items-center gap-4 p-3 rounded-2xl transition-colors duration-200'
      sx={{
        background: 'rgba(34, 197, 94, 0.06)',
        border: '1px solid rgba(34, 197, 94, 0.08)'
      }}
    >
      <i className={`${icon} text-2xl text-emerald-600 shrink-0`} />
      <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>
  )
}