import { useState, useEffect } from 'react'
import { Plus, Trash2, Pencil, Check, X, Shield, Key } from 'lucide-react'
import { Link } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import { api } from '../utils/api'

const COLORS = ['#1D9E75','#378ADD','#D85A30','#EF9F27','#7F77DD','#D4537E','#639922','#888780']

function Avatar({ profile, size=36 }) {
  const initials = profile.name.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2)
  return (
    <div style={{width:size,height:size,borderRadius:'50%',background:profile.avatar_color||'#1D9E75',
      display:'flex',alignItems:'center',justifyContent:'center',
      fontSize:size*0.35,fontWeight:700,color:'white',flexShrink:0}}>
      {initials}
    </div>
  )
}

function NewProfileForm({ onSave, onCancel }) {
  const [form, setForm] = useState({
    name:'', pin:'', email:'', avatar_color:COLORS[0],
    sex:'m', height:'', auth_type:'pin', session_days:30
  })
  const [error, setError] = useState(null)
  const set = (k,v) => setForm(f=>({...f,[k]:v}))

  const handleSave = async () => {
    if (!form.name.trim()) return setError('Name eingeben')
    if (form.pin.length < 4) return setError('PIN mind. 4 Zeichen')
    try {
      await onSave({...form, height:parseFloat(form.height)||178})
    } catch(e) { setError(e.message) }
  }

  return (
    <div style={{background:'var(--surface2)',borderRadius:10,padding:14,
      border:'1.5px solid var(--accent)',marginBottom:12}}>
      <div style={{fontWeight:600,fontSize:14,marginBottom:12,color:'var(--accent)'}}>Neues Profil</div>
      <div className="form-row">
        <label className="form-label">Name</label>
        <input type="text" className="form-input" value={form.name} onChange={e=>set('name',e.target.value)} autoFocus/>
        <span className="form-unit"/>
      </div>
      <div style={{marginBottom:10}}>
        <div style={{fontSize:11,color:'var(--text3)',marginBottom:6}}>Farbe</div>
        <div style={{display:'flex',gap:6}}>
          {COLORS.map(c=>(
            <div key={c} onClick={()=>set('avatar_color',c)}
              style={{width:24,height:24,borderRadius:'50%',background:c,cursor:'pointer',
                border:`3px solid ${form.avatar_color===c?'white':'transparent'}`,
                boxShadow:form.avatar_color===c?`0 0 0 2px ${c}`:'none'}}/>
          ))}
        </div>
      </div>
      <div className="form-row">
        <label className="form-label">Geschlecht</label>
        <select className="form-select" value={form.sex} onChange={e=>set('sex',e.target.value)}>
          <option value="m">Männlich</option>
          <option value="f">Weiblich</option>
        </select>
      </div>
      <div className="form-row">
        <label className="form-label">Größe</label>
        <input type="number" className="form-input" placeholder="178" value={form.height} onChange={e=>set('height',e.target.value)}/>
        <span className="form-unit">cm</span>
      </div>
      <div className="form-row">
        <label className="form-label">E-Mail</label>
        <input type="email" className="form-input" placeholder="optional, für Recovery"
          value={form.email} onChange={e=>set('email',e.target.value)}/>
        <span className="form-unit"/>
      </div>
      <div className="form-row">
        <label className="form-label">Login</label>
        <select className="form-select" value={form.auth_type} onChange={e=>set('auth_type',e.target.value)}>
          <option value="pin">PIN</option>
          <option value="password">Passwort</option>
        </select>
      </div>
      <div className="form-row">
        <label className="form-label">PIN/Passwort</label>
        <input type="password" className="form-input" placeholder="Mind. 4 Zeichen"
          value={form.pin} onChange={e=>set('pin',e.target.value)}/>
        <span className="form-unit"/>
      </div>
      <div className="form-row">
        <label className="form-label">Session</label>
        <select className="form-select" value={form.session_days} onChange={e=>set('session_days',parseInt(e.target.value))}>
          <option value={7}>7 Tage</option>
          <option value={30}>30 Tage</option>
          <option value={0}>Immer</option>
        </select>
      </div>
      {error && <div style={{color:'#D85A30',fontSize:12,marginBottom:8}}>{error}</div>}
      <div style={{display:'flex',gap:8}}>
        <button className="btn btn-primary" style={{flex:1}} onClick={handleSave}><Check size={13}/> Erstellen</button>
        <button className="btn btn-secondary" style={{flex:1}} onClick={onCancel}><X size={13}/> Abbrechen</button>
      </div>
    </div>
  )
}

function EmailEditor({ profileId, currentEmail, onSaved }) {
  const [email, setEmail] = useState(currentEmail||'')
  const [msg,   setMsg]   = useState(null)
  const save = async () => {
    const token = localStorage.getItem('bodytrack_token')||''
    await fetch(`/api/admin/profiles/${profileId}/email`, {
      method:'PUT', headers:{'Content-Type':'application/json','X-Auth-Token':token},
      body: JSON.stringify({email})
    })
    setMsg('✓ Gespeichert'); onSaved()
    setTimeout(()=>setMsg(null),2000)
  }
  return (
    <div style={{display:'flex',gap:8,alignItems:'center'}}>
      <input type="email" className="form-input" placeholder="email@beispiel.de"
        value={email} onChange={e=>setEmail(e.target.value)} style={{flex:1}}/>
      <button className="btn btn-secondary" onClick={save}>Setzen</button>
      {msg && <span style={{fontSize:11,color:'var(--accent)'}}>{msg}</span>}
    </div>
  )
}

function ProfileCard({ profile, currentId, onRefresh }) {
  const [expanded, setExpanded] = useState(false)
  const [perms, setPerms] = useState({
    role: profile.role || 'user',
  })
  const [saving, setSaving] = useState(false)
  const [newPin, setNewPin] = useState('')
  const [pinMsg, setPinMsg] = useState(null)
  const isSelf = profile.id === currentId

  const savePerms = async () => {
    setSaving(true)
    try {
      await api.adminSetPermissions(profile.id, {
        role: perms.role,
      })
      await onRefresh()
    } finally { setSaving(false) }
  }

  const savePin = async () => {
    if (newPin.length < 4) return setPinMsg('Mind. 4 Zeichen')
    try {
      await fetch(`/api/admin/profiles/${profile.id}/pin`, {
        method:'PUT', headers:{'Content-Type':'application/json',
          'X-Auth-Token': localStorage.getItem('bodytrack_token')||''},
        body: JSON.stringify({pin: newPin})
      })
      setNewPin(''); setPinMsg('✓ PIN geändert')
      setTimeout(()=>setPinMsg(null),2000)
    } catch(e) { setPinMsg('Fehler: '+e.message) }
  }

  const deleteProfile = async () => {
    if (!confirm(`Profil "${profile.name}" und ALLE Daten löschen?`)) return
    await api.adminDeleteProfile(profile.id)
    await onRefresh()
  }

  return (
    <div className="card section-gap">
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <Avatar profile={profile}/>
        <div style={{flex:1}}>
          <div style={{fontWeight:600,fontSize:14,display:'flex',alignItems:'center',gap:6}}>
            {profile.name}
            {profile.role==='admin' && <span style={{fontSize:10,color:'var(--accent)',background:'var(--accent-light)',padding:'1px 5px',borderRadius:4}}>👑 Admin</span>}
            {isSelf && <span style={{fontSize:10,color:'var(--text3)'}}>Du</span>}
          </div>
          <div style={{fontSize:11,color:'var(--text3)'}}>
            Tier: {profile.tier || 'free'} ·
            Email: {profile.email || 'nicht gesetzt'}
          </div>
        </div>
        <div style={{display:'flex',gap:6}}>
          <button className="btn btn-secondary" style={{padding:'5px 8px'}}
            onClick={()=>setExpanded(e=>!e)}>
            <Pencil size={12}/>
          </button>
          {!isSelf && (
            <button className="btn btn-danger" style={{padding:'5px 8px'}}
              onClick={deleteProfile}>
              <Trash2 size={12}/>
            </button>
          )}
        </div>
      </div>

      {expanded && (
        <div style={{marginTop:12,paddingTop:12,borderTop:'1px solid var(--border)'}}>
          <div style={{fontSize:12,fontWeight:600,color:'var(--text3)',marginBottom:8}}>BERECHTIGUNGEN</div>

          <div style={{marginBottom:8}}>
            <div style={{fontSize:12,color:'var(--text3)',marginBottom:4}}>Rolle</div>
            <div style={{display:'flex',gap:6}}>
              {['user','admin'].map(r=>(
                <button key={r} onClick={()=>setPerms(p=>({...p,role:r}))}
                  style={{flex:1,padding:'6px',borderRadius:8,border:`1.5px solid ${perms.role===r?'var(--accent)':'var(--border2)'}`,
                    background:perms.role===r?'var(--accent-light)':'var(--surface)',
                    color:perms.role===r?'var(--accent-dark)':'var(--text2)',
                    fontFamily:'var(--font)',fontSize:13,cursor:'pointer'}}>
                  {r==='admin'?'👑 Admin':'👤 Nutzer'}
                </button>
              ))}
            </div>
            <button className="btn btn-primary btn-full" style={{marginTop:8}} onClick={savePerms} disabled={saving}>
              {saving?'Speichern…':'Rolle speichern'}
            </button>
          </div>

          <div style={{marginBottom:12,padding:10,background:'var(--accent-light)',borderRadius:6,fontSize:12}}>
            <strong>Feature-Limits:</strong> Nutze die neue{' '}
            <Link to="/admin/user-restrictions" style={{color:'var(--accent-dark)',fontWeight:600}}>
              User Feature-Overrides
            </Link>{' '}
            Seite um individuelle Limits zu setzen.
          </div>

          <div style={{marginTop:12,paddingTop:12,borderTop:'1px solid var(--border)'}}>
            <div style={{fontSize:12,fontWeight:600,color:'var(--text3)',marginBottom:6}}>E-MAIL (für Recovery & Zusammenfassungen)</div>
            <EmailEditor profileId={profile.id} currentEmail={profile.email} onSaved={onRefresh}/>
          </div>

          <div style={{marginTop:14,paddingTop:12,borderTop:'1px solid var(--border)'}}>
            <div style={{fontSize:12,fontWeight:600,color:'var(--text3)',marginBottom:8,display:'flex',alignItems:'center',gap:4}}>
              <Key size={12}/> PIN / PASSWORT ÄNDERN
            </div>
            <div style={{display:'flex',gap:8}}>
              <input type="password" className="form-input" placeholder="Neue PIN/Passwort"
                value={newPin} onChange={e=>setNewPin(e.target.value)} style={{flex:1}}/>
              <button className="btn btn-secondary" onClick={savePin}>Setzen</button>
            </div>
            {pinMsg && <div style={{fontSize:11,color:pinMsg.startsWith('✓')?'var(--accent)':'#D85A30',marginTop:4}}>{pinMsg}</div>}
          </div>
        </div>
      )}
    </div>
  )
}

export default function AdminUsersPage() {
  const { session } = useAuth()
  const [profiles,  setProfiles]  = useState([])
  const [creating,  setCreating]  = useState(false)
  const [loading,   setLoading]   = useState(true)

  const load = () => api.adminListProfiles().then(data=>{ setProfiles(data); setLoading(false) })
  useEffect(()=>{ load() },[])

  const handleCreate = async (form) => {
    await api.adminCreateProfile(form)
    setCreating(false)
    await load()
  }

  if (loading) return <div className="empty-state"><div className="spinner"/></div>

  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:16}}>
        <Shield size={18} color="var(--accent)"/>
        <h2 style={{fontSize:17,fontWeight:700,margin:0}}>Benutzerverwaltung</h2>
      </div>

      <div style={{padding:'10px 12px',background:'var(--accent-light)',borderRadius:8,
        fontSize:12,color:'var(--accent-dark)',marginBottom:16,lineHeight:1.5}}>
        👑 Profile anlegen, Rollen setzen und Recovery-E-Mail pro Nutzer pflegen. Feature-Limits über „User-Overrides“ in der Seitenleiste.
      </div>

      {creating && (
        <NewProfileForm onSave={handleCreate} onCancel={()=>setCreating(false)}/>
      )}

      {profiles.map(p=>(
        <ProfileCard key={p.id} profile={p} currentId={session?.profile_id} onRefresh={load}/>
      ))}

      {!creating && (
        <button className="btn btn-secondary btn-full" style={{marginTop:12}}
          onClick={()=>setCreating(true)}>
          <Plus size={14}/> Neues Profil anlegen
        </button>
      )}
    </div>
  )
}