/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const INITIAL_EVENTS = { friday: [ { name: "Never Give Up Never Surrender: Galaxy Quest", description: "A pre-show Galaxy Quest Convention experience followed by a stellar Stage Parody Show.", venue: "Chain Theatre", address: "312 West 36th Street, third floor, Manhattan", time: "7:30p", price: "$20 advance, $25 door", link: "https://www.usualrejects.com/" }, // ... other existing events ] }; function EventSubmissionForm({ onSubmit }) { const [formData, setFormData] = useState({ name: '', description: '', venue: '', address: '', date: '', time: '' }); const handleSubmit = (e) => { e.preventDefault(); onSubmit(formData); setFormData({ name: '', description: '', venue: '', address: '', date: '', time: '' }); }; return (

🌋 Submit Your Underground Event

This is YOUR platform. Share the weird, the wild, the uncharted.

setFormData({...formData, name: e.target.value})} required style={{ width: '100%', padding: '10px', background: '#2a2a2a', color: 'white', border: 'none' }} />

setFormData({...formData, description: e.target.value})}
          required
          style={{ width: '100%', padding: '10px', background: '#2a2a2a', color: 'white', border: 'none', minHeight: '100px' }}
        />
        <input
          type="text"
          placeholder="Venue"
          value={formData.venue}
          onChange={(e) => setFormData({...formData, venue: e.target.value})}
          style={{ width: '100%', padding: '10px', background: '#2a2a2a', color: 'white', border: 'none' }}
        />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
          <input
            type="text"
            placeholder="Address"
            value={formData.address}
            onChange={(e) => setFormData({...formData, address: e.target.value})}
            style={{ padding: '10px', background: '#2a2a2a', color: 'white', border: 'none' }}
          />
          <input
            type="text"
            placeholder="Date & Time"
            value={formData.time}
            onChange={(e) => setFormData({...formData, time: e.target.value})}
            style={{ padding: '10px', background: '#2a2a2a', color: 'white', border: 'none' }}
          />
        </div>
        <button 
          type="submit" 
          style={{
            background: '#ff6b6b', 
            color: 'black', 
            padding: '10px', 
            border: 'none', 
            fontWeight: 'bold',
            cursor: 'pointer'
          }}
        >
          🚀 UNLEASH THIS EVENT
        </button>
      </div>
    </form>
  );
}

function EventCard({ event, onFeedback }) {
  const [showFeedback, setShowFeedback] = useState(false);
  const [feedbackText, setFeedbackText] = useState('');
  const [rating, setRating] = useState(0);

const handleFeedbackSubmit = () => {
    onFeedback({
      event_name: event.name,
      feedback_text: feedbackText,
      rating
    });
    setShowFeedback(false);
    setFeedbackText('');
    setRating(0);
  };

return (
    <div style={{
      border: '1px solid #333',
      borderRadius: '8px',
      padding: '15px',
      margin: '10px 0',
      backgroundColor: '#121212',
      color: '#e0e0e0'
    }}>
      <h3 style={{ color: '#ff6b6b' }}>{event.name}</h3>
      <p style={{ color: '#aaa' }}>{event.description}</p>
      <div style={{ display: 'flex', justifyContent: 'space-between', color: '#888' }}>
        <div>
          <strong>{event.venue}</strong>
          <p>{event.address}</p>
        </div>
        <div style={{ textAlign: 'right' }}>
          <p>{event.time}</p>
          <p>{event.price || 'Price not specified'}</p>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px' }}>
        {event.link && (
          <a 
            href={event.link} 
            target="_blank" 
            rel="noopener noreferrer"
            style={{ 
              color: '#ff6b6b',
              textDecoration: 'none'
            }}
          >
            More Info
          </a>
        )}
        <button 
          onClick={() => setShowFeedback(!showFeedback)}
          style={{
            background: 'transparent',
            border: '1px solid #ff6b6b',
            color: '#ff6b6b',
            padding: '5px 10px',
            cursor: 'pointer'
          }}
        >
          {showFeedback ? 'Cancel' : 'Share Experience'}
        </button>
      </div>
      {showFeedback && (
        <div style={{ marginTop: '10px', background: '#1a1a1a', padding: '10px', borderRadius: '5px' }}>
          <textarea
            placeholder="What happened? Was it mind-blowing or a total letdown?"
            value={feedbackText}
            onChange={(e) => setFeedbackText(e.target.value)}
            style={{ 
              width: '100%', 
              background: '#2a2a2a', 
              color: 'white', 
              border: 'none', 
              padding: '10px',
              minHeight: '100px'
            }}
          />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px' }}>
            <div>
              {[1,2,3,4,5].map(star => (
                <span 
                  key={star} 
                  onClick={() => setRating(star)}
                  style={{ 
                    cursor: 'pointer', 
                    color: star <= rating ? '#ffd700' : '#555',
                    fontSize: '24px'
                  }}
                >
                  ★
                </span>
              ))}
            </div>
            <button 
              onClick={handleFeedbackSubmit}
              style={{
                background: '#ff6b6b', 
                color: 'black', 
                border: 'none', 
                padding: '5px 10px',
                cursor: 'pointer'
              }}
            >
              Submit Feedback
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

function App() {
  const [events, setEvents] = useState(INITIAL_EVENTS);

const handleEventSubmission = async (newEvent) => {
    try {
      const response = await fetch('/submit-event', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(newEvent)
      });

if (response.ok) {
        alert('Event submitted! Our curators will review it soon.');
      } else {
        alert('Failed to submit event. Please try again.');
      }
    } catch (error) {
      console.error('Event submission failed', error);
      alert('Network error. Please try again.');
    }
  };

const handleFeedback = async (feedback) => {
    try {
      const response = await fetch('/submit-feedback', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(feedback)
      });

if (response.ok) {
        alert('Feedback received! Thank you for contributing.');
      } else {
        alert('Failed to submit feedback. Please try again.');
      }
    } catch (error) {
      console.error('Feedback submission failed', error);
      alert('Network error. Please try again.');
    }
  };

return (
    <div style={{ 
      maxWidth: '800px', 
      margin: '0 auto', 
      fontFamily: 'monospace',
      background: '#0a0a0a',
      color: '#e0e0e0',
      padding: '20px'
    }}>
      <header style={{ 
        textAlign: 'center', 
        borderBottom: '2px solid #ff6b6b', 
        paddingBottom: '20px',
        marginBottom: '20px'
      }}>
        <h1 style={{ color: '#ff6b6b', fontSize: '2.5em' }}>NONSENSE NYC</h1>
        <p style={{ color: '#888' }}>
          A discriminating resource for underground culture, weird events, and senseless happenings
        </p>
      </header>

<section style={{ marginTop: '30px' }}>
        <h2 style={{ color: '#ff6b6b', borderBottom: '1px solid #333' }}>
          🔥 This Weekend's Chaos
        </h2>
        {Object.entries(events).map(([day, dayEvents]) => (
          <div key={day}>
            <h3 style={{ color: '#aaa', textTransform: 'uppercase' }}>
              {day.charAt(0).toUpperCase() + day.slice(1)}
            </h3>
            {dayEvents.map((event, index) => (
              <EventCard 
                key={index} 
                event={event} 
                onFeedback={handleFeedback}
              />
            ))}
          </div>
        ))}
      </section>

<footer style={{ 
        marginTop: '30px', 
        textAlign: 'center', 
        color: '#666',
        borderTop: '1px solid #333',
        paddingTop: '20px'
      }}>
        <p>
          This platform exists because of YOU. 
          Share, contribute, make NYC weirder. 
          We're just the megaphone. 🎤
        </p>
        <a 
          href={import.meta.url.replace("esm.town", "val.town")} 
          target="_top" 
          style={{ 
            color: '#ff6b6b',
            textDecoration: 'none'
          }}
        >
          View Source / Contribute
        </a>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  // Handle event submission
  if (request.method === 'POST' && new URL(request.url).pathname === '/submit-event') {
    try {
      const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
      const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
      const newEvent = await request.json();

await sqlite.execute(`
        CREATE TABLE IF NOT EXISTS ${KEY}_events (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          name TEXT NOT NULL,
          description TEXT,
          venue TEXT,
          address TEXT,
          date TEXT,
          time TEXT,
          submitter TEXT,
          approved INTEGER DEFAULT 0
        )
      `);

await sqlite.execute(`
        INSERT INTO ${KEY}_events 
        (name, description, venue, address, date, time, submitter, approved) 
        VALUES (?, ?, ?, ?, ?, ?, ?, ?)
      `, [
        newEvent.name, 
        newEvent.description, 
        newEvent.venue, 
        newEvent.address, 
        newEvent.date, 
        newEvent.time, 
        'anonymous', 
        0
      ]);

return new Response(JSON.stringify({ success: true }), {
        headers: { 'Content-Type': 'application/json' }
      });
    } catch (error) {
      console.error('Event submission error:', error);
      return new Response(JSON.stringify({ success: false, error: error.message }), {
        status: 500,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }

// Handle feedback submission
  if (request.method === 'POST' && new URL(request.url).pathname === '/submit-feedback') {
    try {
      const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
      const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
      const feedback = await request.json();

await sqlite.execute(`
        CREATE TABLE IF NOT EXISTS ${KEY}_feedback (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          event_name TEXT,
          feedback_text TEXT,
          rating INTEGER,
          submitted_at DATETIME DEFAULT CURRENT_TIMESTAMP
        )
      `);

await sqlite.execute(`
        INSERT INTO ${KEY}_feedback 
        (event_name, feedback_text, rating) 
        VALUES (?, ?, ?)
      `, [
        feedback.event_name, 
        feedback.feedback_text, 
        feedback.rating
      ]);

return new Response(JSON.stringify({ success: true }), {
        headers: { 'Content-Type': 'application/json' }
      });
    } catch (error) {
      console.error('Feedback submission error:', error);
      return new Response(JSON.stringify({ success: false, error: error.message }), {
        status: 500,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }

// Serve the main HTML
  return new Response(`
    <html>
      <head>
        <title>NONSENSE NYC</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          body { 
            margin: 0; 
            background: #0a0a0a; 
            color: #e0e0e0; 
          }
        </style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: {
      "content-type": "text/html",
    },
  });
}</article></body></html>

eventsInNYC