import { useState } from 'react';

export default function Counter() {
  const [customText, setCustomText] = useState("");
  const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");

  // Reusable helper to talk to the backend
  const send = async (type: string, context: string) => {
    try {
      await fetch("http://localhost:8000/button_pressed", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ type, context }),
      });
      // Backticks restored here:
      console.log(`Sent ${type}: ${context}`);
    } catch (err) {
      // Backticks restored here:
      console.error(`Error sending ${type}:`, err);
    }
  };

  function list_generator(header: string, items: string[]) {
    return (
      <div style={{ flex: 1, minWidth: '200px' }}>
        <strong style={{ display: 'block', marginBottom: '10px', borderBottom: '1px solid #eee' }}>{header}</strong>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
          {items.map((item, index) => (
            <li key={index} style={{ 
              display: 'flex', 
              justifyContent: 'space-between', 
              alignItems: 'center', 
              marginBottom: '8px',
              fontSize: '14px' 
            }}>
              <span>{item}</span>
              <button 
                onClick={() => send("override", "2")} 
                style={{ 
                  width: '20px', 
                  height: '20px', 
                  padding: 0, 
                  display: 'flex', 
                  alignItems: 'center', 
                  justifyContent: 'center',
                  cursor: 'pointer',
                  fontSize: '12px'
                }}
                title="Send Override 2"
              >
                ▶
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '20px' }}>
      
      <div style={{ display: 'flex', gap: '10px' }}>
        <input 
          type="text" 
          value={customText} 
          onChange={(e) => setCustomText(e.target.value)}
          placeholder="Type something for Pepper to say..."
          style={{ padding: '8px', flex: 1 }}
        />
        <button onClick={() => send("speech", customText)} style={{ padding: '8px 16px' }}>
          Say Custom Text
        </button>
      </div>

      <div style={{ display: 'flex', gap: '10px' }}>
        <button onClick={() => send("speech", "Hello, I'm Pepper")}>
          "Hello, I'm Pepper"
        </button>
        <button onClick={() => send("speech", "Could you repeat that please")}>
          "Repeat please"
        </button>
        <button onClick={() => send("speech", "Tell me something about yourself")}>
          "About yourself"
        </button>
      </div>

      <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
        <label htmlFor="gesture-select">Select Gesture:</label>
        <select 
          id="gesture-select"
          value={selectedGesture} 
          onChange={(e) => setSelectedGesture(e.target.value)}
          style={{ padding: '8px', borderRadius: '4px', flex: 1 }}
        >
          <option value="animations/Stand/BodyTalk/Speaking/BodyTalk_1">Body Talk 1</option>
          <option value="animations/Stand/Gestures/Thinking_8">Thinking "8"</option>
          <option value="animations/Stand/Gestures/Thinking_1">Thinking "1"</option>
          <option value="animations/Stand/Emotions/Positive/Happy_1">Happy</option>
        </select>
        <button onClick={() => send("gesture", selectedGesture)} style={{ padding: '8px 16px' }}>
          Actuate Gesture
        </button>
      </div>

      <div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap' }}>
        {list_generator("Goals to complete:", ["Greet user", "Introduce self", "Ask for name"])}
        {list_generator("Conditional norms:", ["If {user_tired}, be less energetic", "If {play_mundo}, go where you please"])}
        {list_generator("Activate triggers:", ["If {user_thirsty}, offer drink", "If {name == Karen}, be triggered"])}
      </div>
    </div>
  );
}