import { useState } from 'react'
import { ChevronRight, ChevronLeft, Check, X, BookOpen } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { api } from '../utils/api'
import { calcBodyFat, getBfCategory, METHOD_POINTS } from '../utils/calc'
import { CIRCUMFERENCE_POINTS, CALIPER_POINTS, CALIPER_METHODS } from '../utils/guideData'
import dayjs from 'dayjs'

// ── Circumference Wizard ──────────────────────────────────────────────────────
function CircumWizard({ onDone, onCancel }) {
  const [step,   setStep]   = useState(0)
  const [date,   setDate]   = useState(dayjs().format('YYYY-MM-DD'))
  const [values, setValues] = useState({})
  const [saving, setSaving] = useState(false)

  const points = CIRCUMFERENCE_POINTS
  const current = points[step]
  const totalSteps = points.length

  const handleNext = () => {
    if (step < totalSteps - 1) setStep(s => s + 1)
    else handleSave()
  }

  const handleSave = async () => {
    setSaving(true)
    try {
      const payload = { date }
      Object.entries(values).forEach(([k,v]) => { if(v) payload[k] = parseFloat(v) })
      await api.upsertCirc(payload)
      onDone()
    } finally { setSaving(false) }
  }

  const progress = ((step + 1) / totalSteps) * 100

  return (
    <div style={{display:'flex',flexDirection:'column',minHeight:'calc(100vh - 120px)'}}>
      {/* Header */}
      <div style={{marginBottom:20}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
          <span style={{fontSize:12,color:'var(--text3)'}}>Schritt {step+1} von {totalSteps}</span>
          <button onClick={onCancel} style={{background:'none',border:'none',cursor:'pointer',color:'var(--text3)'}}>
            <X size={18}/>
          </button>
        </div>
        <div style={{height:4,background:'var(--border)',borderRadius:2}}>
          <div style={{height:'100%',background:'var(--accent)',borderRadius:2,width:`${progress}%`,transition:'width 0.3s'}}/>
        </div>
      </div>

      {/* Datum (nur erster Schritt) */}
      {step === 0 && (
        <div className="card" style={{marginBottom:16}}>
          <div className="form-row">
            <label className="form-label">Datum</label>
            <input type="date" className="form-input" style={{width:140}}
              value={date} onChange={e=>setDate(e.target.value)}/>
            <span className="form-unit"/>
          </div>
        </div>
      )}

      {/* Messpunkt */}
      <div className="card" style={{flex:1,marginBottom:16}}>
        {/* Punkt-Indikator */}
        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:16}}>
          <div style={{width:40,height:40,borderRadius:'50%',background:current.color,
            display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
            <span style={{fontSize:16,fontWeight:700,color:'white'}}>{step+1}</span>
          </div>
          <div>
            <div style={{fontSize:18,fontWeight:700}}>{current.label}</div>
            <div style={{fontSize:11,color:'var(--text3)'}}>Umfang messen</div>
          </div>
        </div>

        {/* Anleitung */}
        <div style={{display:'flex',flexDirection:'column',gap:10,marginBottom:20}}>
          {[
            ['📍 Wo', current.where],
            ['🧍 Haltung', current.posture],
            ['📏 Maßband', current.how],
            ['💡 Tipp', current.tip],
          ].map(([label, text]) => (
            <div key={label} style={{background:'var(--surface2)',borderRadius:8,padding:'10px 12px'}}>
              <div style={{fontSize:11,fontWeight:600,color:'var(--text3)',marginBottom:3}}>{label}</div>
              <div style={{fontSize:13,color:'var(--text1)',lineHeight:1.55}}>{text}</div>
            </div>
          ))}
        </div>

        {/* Eingabe */}
        <div style={{display:'flex',gap:10,alignItems:'center'}}>
          <input
            type="number" min={10} max={200} step={0.1}
            className="form-input"
            style={{flex:1,fontSize:24,fontWeight:700,textAlign:'center',height:56}}
            placeholder="–"
            value={values[current.id] || ''}
            onChange={e => setValues(v => ({...v, [current.id]: e.target.value}))}
            onKeyDown={e => e.key==='Enter' && handleNext()}
            autoFocus
          />
          <span style={{fontSize:18,color:'var(--text3)',fontWeight:500}}>cm</span>
        </div>
        {values[current.id] && (
          <div style={{textAlign:'center',marginTop:8,fontSize:12,color:'var(--accent)'}}>
            ✓ {values[current.id]} cm erfasst
          </div>
        )}
      </div>

      {/* Navigation */}
      <div style={{display:'flex',gap:8}}>
        <button className="btn btn-secondary" style={{flex:1}} onClick={()=>setStep(s=>s-1)} disabled={step===0}>
          <ChevronLeft size={16}/> Zurück
        </button>
        <button className="btn btn-primary" style={{flex:2}} onClick={handleNext} disabled={saving}>
          {saving ? <div className="spinner" style={{width:14,height:14}}/> :
           step === totalSteps-1
             ? <><Check size={16}/> Speichern</>
             : <>Weiter <ChevronRight size={16}/></>}
        </button>
      </div>

      {/* Übersicht bereits erfasster Werte */}
      {Object.keys(values).length > 0 && (
        <div style={{marginTop:14,padding:'10px 12px',background:'var(--surface2)',borderRadius:8}}>
          <div style={{fontSize:11,fontWeight:600,color:'var(--text3)',marginBottom:6}}>Bisher erfasst:</div>
          <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
            {points.slice(0, step+1).map(p => values[p.id] ? (
              <span key={p.id} onClick={()=>setStep(points.indexOf(p))}
                style={{fontSize:12,background:'var(--accent-light)',color:'var(--accent-dark)',
                  padding:'2px 8px',borderRadius:6,cursor:'pointer'}}>
                {p.label}: {values[p.id]}
              </span>
            ) : null)}
          </div>
        </div>
      )}
    </div>
  )
}

// ── Caliper Wizard ────────────────────────────────────────────────────────────
function CaliperWizard({ onDone, onCancel, profile }) {
  const [method,  setMethod]  = useState('jackson3')
  const [step,    setStep]    = useState(-1) // -1 = method select
  const [date,    setDate]    = useState(dayjs().format('YYYY-MM-DD'))
  const [values,  setValues]  = useState({})
  const [saving,  setSaving]  = useState(false)

  const sex = profile?.sex || 'm'
  const age = profile?.dob ? Math.floor((Date.now()-new Date(profile.dob))/(365.25*24*3600*1000)) : 30
  const sfPoints = METHOD_POINTS[method]?.[sex] || []
  const current = step >= 0 ? CALIPER_POINTS[sfPoints[step]] : null
  const totalSteps = sfPoints.length

  // Live BF calculation
  const sfVals = {}
  sfPoints.forEach(k => { const v=values[`sf_${k}`]; if(v) sfVals[k]=parseFloat(v) })
  const bfPct = Object.keys(sfVals).length === sfPoints.length && sfPoints.length > 0
    ? Math.round(calcBodyFat(method, sfVals, sex, age)*10)/10 : null
  const bfCat = bfPct ? getBfCategory(bfPct, sex) : null

  const handleNext = () => {
    if (step < totalSteps - 1) setStep(s => s+1)
    else handleSave()
  }

  const handleSave = async () => {
    setSaving(true)
    try {
      const payload = { date, sf_method: method }
      Object.entries(values).forEach(([k,v]) => { if(v) payload[k]=parseFloat(v) })
      if (bfPct) {
        payload.body_fat_pct = bfPct
        if (profile?.weight || values.weight) {
          const w = parseFloat(profile?.weight || values.weight)
          payload.lean_mass = Math.round(w*(1-bfPct/100)*10)/10
          payload.fat_mass  = Math.round(w*(bfPct/100)*10)/10
        }
      }
      await api.upsertCaliper(payload)
      onDone()
    } finally { setSaving(false) }
  }

  const progress = step >= 0 ? ((step+1)/totalSteps)*100 : 0

  // Method selection screen
  if (step === -1) {
    return (
      <div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
          <h2 style={{fontSize:18,fontWeight:700,margin:0}}>Caliper-Methode</h2>
          <button onClick={onCancel} style={{background:'none',border:'none',cursor:'pointer',color:'var(--text3)'}}>
            <X size={18}/>
          </button>
        </div>
        <div className="form-row" style={{marginBottom:16}}>
          <label className="form-label">Datum</label>
          <input type="date" className="form-input" style={{width:140}}
            value={date} onChange={e=>setDate(e.target.value)}/>
          <span className="form-unit"/>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:10,marginBottom:20}}>
          {Object.entries(CALIPER_METHODS).map(([k,m]) => (
            <button key={k} onClick={()=>setMethod(k)}
              style={{padding:'14px 16px',borderRadius:12,border:`2px solid ${method===k?'var(--accent)':'var(--border2)'}`,
                background:method===k?'var(--accent-light)':'var(--surface)',cursor:'pointer',
                fontFamily:'var(--font)',textAlign:'left',transition:'all 0.15s'}}>
              <div style={{fontSize:15,fontWeight:600,color:method===k?'var(--accent-dark)':'var(--text1)'}}>{m.label}</div>
              <div style={{fontSize:12,color:'var(--text3)',marginTop:2}}>{m.points_m.length} Messpunkte</div>
            </button>
          ))}
        </div>
        <div style={{padding:'10px 12px',background:'var(--warn-bg)',borderRadius:8,marginBottom:16,fontSize:12,color:'var(--warn-text)'}}>
          Immer rechte Körperseite · Falte 1 cm abheben · Caliper 2 Sek. · 3× messen, Mittelwert
        </div>
        <button className="btn btn-primary btn-full" onClick={()=>setStep(0)}>
          Weiter mit {CALIPER_METHODS[method]?.label} <ChevronRight size={16}/>
        </button>
      </div>
    )
  }

  return (
    <div style={{display:'flex',flexDirection:'column',minHeight:'calc(100vh - 120px)'}}>
      {/* Header */}
      <div style={{marginBottom:20}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
          <span style={{fontSize:12,color:'var(--text3)'}}>Punkt {step+1} von {totalSteps} · {CALIPER_METHODS[method]?.label}</span>
          <button onClick={onCancel} style={{background:'none',border:'none',cursor:'pointer',color:'var(--text3)'}}>
            <X size={18}/>
          </button>
        </div>
        <div style={{height:4,background:'var(--border)',borderRadius:2}}>
          <div style={{height:'100%',background:'#D85A30',borderRadius:2,width:`${progress}%`,transition:'width 0.3s'}}/>
        </div>
      </div>

      {/* Live BF Preview */}
      {bfPct && (
        <div style={{padding:'10px 14px',background:'var(--accent-light)',borderRadius:10,marginBottom:14,
          display:'flex',alignItems:'center',gap:10}}>
          <div style={{fontSize:22,fontWeight:700,color:bfCat?.color||'var(--accent)'}}>{bfPct}%</div>
          {bfCat && <div style={{fontSize:12,color:'var(--accent-dark)'}}>{bfCat.label}</div>}
          <div style={{flex:1,fontSize:11,color:'var(--accent-dark)',textAlign:'right'}}>Körperfett (live)</div>
        </div>
      )}

      {/* Messpunkt */}
      {current && (
        <div className="card" style={{flex:1,marginBottom:16}}>
          <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:16}}>
            <div style={{width:40,height:40,borderRadius:'50%',background:current.color,
              display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
              <span style={{fontSize:16,fontWeight:700,color:'white'}}>{step+1}</span>
            </div>
            <div>
              <div style={{fontSize:18,fontWeight:700}}>{current.label}</div>
              <div style={{fontSize:11,color:'var(--text3)'}}>Hautfalte messen</div>
            </div>
          </div>

          <div style={{display:'flex',flexDirection:'column',gap:10,marginBottom:20}}>
            {[
              ['📍 Wo', current.where],
              ['🧍 Haltung', current.posture],
              ['🔧 Technik', current.how],
              ['💡 Tipp', current.tip],
            ].map(([label, text]) => (
              <div key={label} style={{background:'var(--surface2)',borderRadius:8,padding:'10px 12px'}}>
                <div style={{fontSize:11,fontWeight:600,color:'var(--text3)',marginBottom:3}}>{label}</div>
                <div style={{fontSize:13,color:'var(--text1)',lineHeight:1.55}}>{text}</div>
              </div>
            ))}
          </div>

          <div style={{display:'flex',gap:10,alignItems:'center'}}>
            <input
              type="number" min={2} max={80} step={0.5}
              className="form-input"
              style={{flex:1,fontSize:24,fontWeight:700,textAlign:'center',height:56}}
              placeholder="–"
              value={values[`sf_${sfPoints[step]}`] || ''}
              onChange={e => setValues(v => ({...v, [`sf_${sfPoints[step]}`]: e.target.value}))}
              onKeyDown={e => e.key==='Enter' && handleNext()}
              autoFocus
            />
            <span style={{fontSize:18,color:'var(--text3)',fontWeight:500}}>mm</span>
          </div>
          {values[`sf_${sfPoints[step]}`] && (
            <div style={{textAlign:'center',marginTop:8,fontSize:12,color:'var(--accent)'}}>
              ✓ {values[`sf_${sfPoints[step]}`]} mm erfasst
            </div>
          )}
        </div>
      )}

      {/* Navigation */}
      <div style={{display:'flex',gap:8}}>
        <button className="btn btn-secondary" style={{flex:1}}
          onClick={()=>setStep(s=>s<=0?-1:s-1)}>
          <ChevronLeft size={16}/> Zurück
        </button>
        <button className="btn btn-primary" style={{flex:2}} onClick={handleNext} disabled={saving}>
          {saving ? <div className="spinner" style={{width:14,height:14}}/> :
           step === totalSteps-1
             ? <><Check size={16}/> Speichern</>
             : <>Weiter <ChevronRight size={16}/></>}
        </button>
      </div>

      {/* Übersicht */}
      {Object.keys(values).length > 0 && (
        <div style={{marginTop:14,padding:'10px 12px',background:'var(--surface2)',borderRadius:8}}>
          <div style={{fontSize:11,fontWeight:600,color:'var(--text3)',marginBottom:6}}>Bisher erfasst:</div>
          <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
            {sfPoints.slice(0,step+1).map((k,idx) => values[`sf_${k}`] ? (
              <span key={k} onClick={()=>setStep(idx)}
                style={{fontSize:12,background:'#D85A3022',color:'#D85A30',
                  padding:'2px 8px',borderRadius:6,cursor:'pointer'}}>
                {CALIPER_POINTS[k]?.label}: {values[`sf_${k}`]}mm
              </span>
            ) : null)}
          </div>
        </div>
      )}
    </div>
  )
}

// ── Main Wizard Page ──────────────────────────────────────────────────────────
export default function MeasureWizard() {
  const [mode,    setMode]    = useState(null) // null | 'circum' | 'caliper'
  const [done,    setDone]    = useState(false)
  const [profile, setProfile] = useState(null)
  const nav = useNavigate()

  useState(() => { api.getProfile().then(setProfile) })

  if (done) {
    return (
      <div className="capture-page" style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',
        minHeight:'60vh',gap:16,textAlign:'center'}}>
        <div style={{fontSize:48}}>✅</div>
        <h2 style={{fontSize:20,fontWeight:700}}>Gespeichert!</h2>
        <p style={{color:'var(--text2)',fontSize:14}}>Deine Messung wurde erfolgreich gespeichert.</p>
        <div style={{display:'flex',gap:8}}>
          <button className="btn btn-primary" onClick={()=>{ setDone(false); setMode(null) }}>
            Weitere Messung
          </button>
          <button className="btn btn-secondary" onClick={()=>nav('/')}>
            Zum Dashboard
          </button>
        </div>
      </div>
    )
  }

  if (mode === 'circum') return (
    <div className="capture-page">
      <CircumWizard onDone={()=>setDone(true)} onCancel={()=>setMode(null)}/>
    </div>
  )
  if (mode === 'caliper') return (
    <div className="capture-page">
      <CaliperWizard onDone={()=>setDone(true)} onCancel={()=>setMode(null)} profile={profile}/>
    </div>
  )

  return (
    <div className="capture-page">
      <h1 className="page-title">Assistent</h1>
      <p style={{fontSize:13,color:'var(--text2)',marginBottom:20,lineHeight:1.6}}>
        Der Assistent führt dich Schritt für Schritt durch die Messung – mit Anleitung für jeden Messpunkt.
      </p>
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        <button onClick={()=>setMode('circum')}
          style={{padding:'20px 16px',borderRadius:14,border:'1.5px solid var(--border2)',
            background:'var(--surface)',cursor:'pointer',fontFamily:'var(--font)',textAlign:'left',
            display:'flex',alignItems:'center',gap:14}}>
          <div style={{fontSize:32}}>📏</div>
          <div>
            <div style={{fontSize:16,fontWeight:600}}>Umfänge messen</div>
            <div style={{fontSize:12,color:'var(--text3)',marginTop:2}}>
              8 Messpunkte · Hals, Brust, Taille, Bauch, Hüfte, Oberschenkel, Wade, Oberarm
            </div>
          </div>
          <ChevronRight size={20} style={{marginLeft:'auto',color:'var(--text3)'}}/>
        </button>

        <button onClick={()=>setMode('caliper')}
          style={{padding:'20px 16px',borderRadius:14,border:'1.5px solid var(--border2)',
            background:'var(--surface)',cursor:'pointer',fontFamily:'var(--font)',textAlign:'left',
            display:'flex',alignItems:'center',gap:14}}>
          <div style={{fontSize:32}}>📐</div>
          <div>
            <div style={{fontSize:16,fontWeight:600}}>Caliper Körperfett</div>
            <div style={{fontSize:12,color:'var(--text3)',marginTop:2}}>
              3–9 Messpunkte · Jackson/Pollock, Durnin oder Parrillo
            </div>
          </div>
          <ChevronRight size={20} style={{marginLeft:'auto',color:'var(--text3)'}}/>
        </button>

        <div style={{marginTop:8,padding:'12px 14px',background:'var(--surface2)',borderRadius:10,
          fontSize:12,color:'var(--text3)',lineHeight:1.6}}>
          💡 Für schnelle Einzeleingaben oder Bearbeitung bestehender Werte nutze die direkten Screens
          unter <strong>Gewicht</strong>, <strong>Umfänge</strong> und <strong>Caliper</strong>.
        </div>
      </div>
    </div>
  )
}