import React from 'react';
import { useAuth } from '../../context/AuthContext';

const inputStyle:React.CSSProperties={display:'block',width:'100%',boxSizing:'border-box',padding:10,margin:'6px 0 16px'};
export default function FirstRunSetup():React.ReactElement{
 const{completeSetup}=useAuth();const[username,setUsername]=React.useState(''),[displayName,setDisplayName]=React.useState(''),[email,setEmail]=React.useState(''),[password,setPassword]=React.useState(''),[confirm,setConfirm]=React.useState(''),[error,setError]=React.useState(''),[busy,setBusy]=React.useState(false);
 const submit=async(e:React.FormEvent)=>{e.preventDefault();setError('');if(password!==confirm){setError('Passwords do not match.');return;}setBusy(true);try{await completeSetup({username,password,displayName,email});}catch(x){setError(x instanceof Error?x.message:'Initial setup failed.');}finally{setBusy(false)}};
 return <main style={{maxWidth:480,margin:'6vh auto',padding:32,border:'1px solid #d0d7de',borderRadius:8,background:'#fff'}}><h1 style={{marginTop:0}}>Set up Conductor</h1><p>Create the first administrator for this installation. Additional users can be added later from User management.</p><form onSubmit={submit}><label>Username<input required autoFocus autoComplete="username" value={username} onChange={e=>setUsername(e.target.value)} style={inputStyle}/></label><label>Display name <small>(optional)</small><input autoComplete="name" value={displayName} onChange={e=>setDisplayName(e.target.value)} style={inputStyle}/></label><label>Email or contact address <small>(optional)</small><input type="email" autoComplete="email" value={email} onChange={e=>setEmail(e.target.value)} style={inputStyle}/></label><label>Password<input required type="password" minLength={12} autoComplete="new-password" value={password} onChange={e=>setPassword(e.target.value)} style={inputStyle}/></label><label>Confirm password<input required type="password" minLength={12} autoComplete="new-password" value={confirm} onChange={e=>setConfirm(e.target.value)} style={inputStyle}/></label><p style={{fontSize:13,color:'#57606a'}}>Use at least 12 characters. The password is submitted securely and is never displayed again.</p>{error&&<p role="alert" style={{color:'#cf222e'}}>{error}</p>}<button disabled={busy} style={{padding:'10px 18px'}}>{busy?'Creating administrator…':'Create administrator'}</button></form></main>;
}