'use client'

/**
 * TEMPORARY DEMO FEATURE — delete this file + its import in users-client.tsx to remove.
 * Simulates a new user awaiting account approval for demo/presentation purposes.
 */

import { useState } from'react'
import { FlaskConical } from'lucide-react'
import type { UserRow } from'./users-client'

interface Props {
 onDemoCreated: (user: UserRow) => void
 onDemoReset: (demoUserId: string) => void
 demoUserId: string | null
}

type Phase ='idle'|'pending'|'confirmed'

export default function DemoUserButton({ onDemoCreated, onDemoReset, demoUserId }: Props) {
 const [phase, setPhase] = useState<Phase>(demoUserId ?'pending':'idle')
 const [loading, setLoading] = useState(false)
 const [toast, setToast] = useState<string | null>(null)

 function showToast(msg: string) {
 setToast(msg)
 setTimeout(() => setToast(null), 3000)
 }

 async function handleCreate() {
 setLoading(true)
 const res = await fetch('/api/admin/demo', { method:'POST'})
 if (res.ok) {
 const { profile } = await res.json() as { profile: UserRow }
 onDemoCreated(profile)
 setPhase('pending')
 showToast('Demo-Benutzer erstellt.')
 } else {
 const data = await res.json() as { error?: string }
 showToast(data.error ??'Fehler beim Erstellen.')
 }
 setLoading(false)
 }

 async function handleConfirm() {
 if (!demoUserId) return
 setLoading(true)
 const res = await fetch('/api/admin/demo', { method:'PATCH'})
 if (res.ok) {
 const { profile } = await res.json() as { profile: UserRow }
 onDemoCreated(profile)
 setPhase('confirmed')
 showToast('Demo-Benutzer bestätigt — Status: Aktiv.')
 }
 setLoading(false)
 }

 async function handleReset() {
 setLoading(true)
 await fetch('/api/admin/demo', { method:'DELETE'})
 if (demoUserId) onDemoReset(demoUserId)
 setPhase('idle')
 showToast('Demo-Daten zurückgesetzt.')
 setLoading(false)
 }

 return (
 <div className="flex items-center gap-2 flex-wrap">
 {/* Main button */}
 {phase ==='idle'&& (
 <button
 onClick={() => void handleCreate()}
 disabled={loading}
 className="flex items-center gap-1.5 h-8 px-3 rounded-lg border border-amber-400 text-amber-700 bg-amber-50 text-xs font-medium hover:bg-amber-100 disabled:opacity-50 transition-colors"
 >
 <FlaskConical size={13} />
 Demo: Benutzerbestätigung simulieren
 </button>
 )}

 {phase ==='pending'&& (
 <>
 <button
 onClick={() => void handleConfirm()}
 disabled={loading}
 className="flex items-center gap-1.5 h-8 px-3 rounded-lg border border-amber-400 text-amber-700 bg-amber-50 text-xs font-medium hover:bg-amber-100 disabled:opacity-50 transition-colors"
 >
 <FlaskConical size={13} />
 Demo: Bestätigen
 </button>
 <button
 onClick={() => void handleReset()}
 disabled={loading}
 className="h-8 px-3 rounded-lg border border-border text-muted-foreground text-xs hover:bg-background disabled:opacity-50 transition-colors"
 >
 Reset
 </button>
 </>
 )}

 {phase ==='confirmed'&& (
 <button
 onClick={() => void handleReset()}
 disabled={loading}
 className="flex items-center gap-1.5 h-8 px-3 rounded-lg border border-amber-400 text-amber-700 bg-amber-50 text-xs font-medium hover:bg-amber-100 disabled:opacity-50 transition-colors"
 >
 <FlaskConical size={13} />
 Demo zurücksetzen
 </button>
 )}

 <span className="text-[10px] text-muted-foreground italic">Temporäre Demo-Funktion</span>

 {/* Toast */}
 {toast && (
 <div className="fixed bottom-4 right-4 z-50 bg-foreground text-white text-xs px-4 py-2.5 rounded-lg shadow-lg animate-in fade-in slide-in-from-bottom-2">
 {toast}
 </div>
 )}
 </div>
 )
}