App.jsx

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import './index.css'

const BACKEND = import.meta.env.VITE_BACKEND_URL || 'http://localhost:8000'

export default function App() {
  const [caption, setCaption] = useState('My Nairobi street food idea...')
  const [platform, setPlatform] = useState('TikTok')
  const [hashtags, setHashtags] = useState([])
  const [schedules, setSchedules] = useState([])
  const [time, setTime] = useState(new Date().toISOString().slice(0,16)) // local datetime input format

  useEffect(()=>{ fetchSchedules() },[])

  async function fetchSchedules(){
    try{
      const res = await axios.get(`${BACKEND}/schedules`)
      setSchedules(res.data)
    }catch(e){
      console.error(e)
    }
  }

  async function genHashtags(){
    try{
      const res = await axios.post(`${BACKEND}/generate/hashtags?caption=${encodeURIComponent(caption)}`)
      setHashtags(res.data.hashtags || [])
    }catch(e){
      console.error(e)
      alert('Could not reach backend')
    }
  }

  async function schedulePost(){
    try{
      const iso = new Date(time).toISOString()
      const payload = { platform, caption, scheduled_time: iso }
      const res = await axios.post(`${BACKEND}/schedule`, payload)
      alert('Scheduled: ' + JSON.stringify(res.data))
      fetchSchedules()
    }catch(e){
      console.error(e)
      alert('Failed to schedule')
    }
  }

  return (
    <div className="min-h-screen p-6">
      <header className="header-color rounded-lg p-4 mb-6">
        <h1 className="text-2xl font-semibold">Lilo</h1>
        <p className="text-sm text-gray-200">Creator toolkit — schedule, generate, analyze</p>
      </header>

      <main className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <section className="md:col-span-2 space-y-4">
          <div className="card">
            <h2 className="text-lg font-medium mb-2">Composer</h2>
            <textarea value={caption} onChange={e=>setCaption(e.target.value)} rows={6} className="w-full border rounded p-2" />
            <div className="flex items-center gap-3 mt-3">
              <select value={platform} onChange={e=>setPlatform(e.target.value)} className="border rounded p-2">
                <option>TikTok</option>
                <option>YouTube</option>
                <option>Instagram</option>
                <option>WhatsApp</option>
              </select>
              <button onClick={genHashtags} className="px-4 py-2 bg-indigo-600 text-white rounded">Generate Hashtags</button>
              <div className="text-sm text-gray-600">{hashtags.join(' ')}</div>
            </div>
          </div>

          <div className="card">
            <h3 className="text-md font-medium mb-2">Schedule</h3>
            <div className="flex items-center gap-3">
              <input type='datetime-local' value={time} onChange={e=>setTime(e.target.value)} className="border rounded p-2" />
              <button onClick={schedulePost} className="px-4 py-2 bg-green-600 text-white rounded">Schedule Post</button>
            </div>
          </div>
        </section>

        <aside className="space-y-4">
          <div className="card">
            <h3 className="font-medium">OAuth</h3>
            <p className="text-sm text-gray-600">Connect platforms (demo stubs)</p>
            <div className="mt-2 flex flex-col gap-2">
              <a href={`${BACKEND}/auth/tiktok`} className="px-3 py-2 bg-red-500 text-white rounded text-center">Connect TikTok</a>
              <a href={`${BACKEND}/auth/youtube`} className="px-3 py-2 bg-sky-600 text-white rounded text-center">Connect YouTube</a>
            </div>
          </div>

          <div className="card">
            <h3 className="font-medium">Upcoming</h3>
            <ul className="mt-2 space-y-2 text-sm">
              {schedules.map(s=> (
                <li key={s.id} className="border-b pb-2">
                  <div className="text-xs text-gray-500">[{s.status}] {s.platform}</div>
                  <div className="font-semibold">{new Date(s.scheduled_time).toLocaleString()}</div>
                  <div className="text-gray-700">{s.caption.slice(0,80)}...</div>
                </li>
              ))}
            </ul>
          </div>
        </aside>
      </main>
    </div>
  )
}


<footer className='mt-8 text-center text-sm text-gray-500'>© Dipark Solutions</footer>