/* @component-map
 * App — Main container, handles view switching between input and greeting
 * @end-component-map */

import { useState } from 'react';
import { useCollection } from '@deplixo/sdk';

function getGreeting(name) {
  const h = new Date().getHours();
  if (h < 12) return { text: `Good morning, ${name}!`, sub: "Hope your day is off to a great start!" };
  if (h < 17) return { text: `Good afternoon, ${name}!`, sub: "Hope you're having a wonderful day!" };
  if (h < 21) return { text: `Good evening, ${name}!`, sub: "Winding down? You've earned it." };
  return { text: `Hello, night owl ${name}!`, sub: "Burning the midnight oil, I see!" };
}

function App() {
  const { items, loading, add, remove } = useCollection('users', { personal: true });
  const [inputValue, setInputValue] = useState('');

  const savedEntry = items.find(item => item.savedName);
  const savedName = savedEntry ? savedEntry.savedName : null;

  async function handleGreet() {
    const name = inputValue.trim();
    if (!name) return;
    if (savedEntry) await remove(savedEntry.id);
    await add({ savedName: name });
    setInputValue('');
  }

  async function handleReset() {
    if (savedEntry) await remove(savedEntry.id);
    setInputValue('');
  }

  function handleKeyDown(e) {
    if (e.key === 'Enter') handleGreet();
  }

  if (loading) {
    return (
      <div className="container">
        <div className="loading">Loading...</div>
      </div>
    );
  }

  if (savedName) {
    const { text, sub } = getGreeting(savedName);
    return (
      <div className="container">
        <div className="greeting-view">
          <div className="avatar">{savedName.charAt(0).toUpperCase()}</div>
          <p className="greeting-text">{text}</p>
          <p className="sub-text">{sub}</p>
          <button className="btn-secondary" onClick={handleReset}>Not you? Start over</button>
        </div>
      </div>
    );
  }

  return (
    <div className="container">
      <div className="input-view">
        <h1>👋 What's your name?</h1>
        <div className="input-group">
          <input
            type="text"
            placeholder="Enter your name"
            value={inputValue}
            onChange={e => setInputValue(e.target.value)}
            onKeyDown={handleKeyDown}
          />
          <button className="btn-primary" onClick={handleGreet}>Say hello</button>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);