import React, { useState } from 'react';

export default function KeyspaceManager({ keyspaces, onUnlock, onCreate, locked, onLock, currentKeyspace }) {
  const [selected, setSelected] = useState(keyspaces[0] || '');
  const [password, setPassword] = useState('');
  const [newKeyspace, setNewKeyspace] = useState('');

  if (locked) {
    return (
      <div className="keyspace-manager">
        <label>Keyspace:</label>
        <select value={selected} onChange={e => setSelected(e.target.value)}>
          {keyspaces.map(k => <option key={k} value={k}>{k}</option>)}
        </select>
        <button onClick={() => onUnlock(selected, password)} disabled={!selected || !password}>Unlock</button>
        <div style={{marginTop: '0.5rem'}}>
          <input placeholder="New keyspace name" value={newKeyspace} onChange={e => setNewKeyspace(e.target.value)} />
          <input placeholder="Password" type="password" value={password} onChange={e => setPassword(e.target.value)} />
          <button onClick={() => onCreate(newKeyspace, password)} disabled={!newKeyspace || !password}>Create</button>
        </div>
      </div>
    );
  }
  return (
    <div className="keyspace-manager">
      <span>Keyspace: <b>{currentKeyspace}</b></span>
      <button onClick={onLock} style={{marginLeft: 8}}>Lock Session</button>
    </div>
  );
}