import React, { useState, useEffect } from "react"; import { useFireproof } from "use-fireproof"; import { callAI } from "call-ai"; export default function App() { const { database, useDocument, useLiveQuery } = useFireproof("skincare-scheduler"); const [loading, setLoading] = useState(false); const [selectedTreatment, setSelectedTreatment] = useState(null); const [aiResponse, setAiResponse] = useState(""); const [showHelp, setShowHelp] = useState(false); const { doc: newTreatment, merge: mergeTreatment, submit: submitTreatment, reset: resetTreatment } = useDocument({ type: "treatment", name: "", date: new Date().toISOString().split('T')[0], notes: "", category: "other" }); const { docs: treatments } = useLiveQuery("type", { key: "treatment", descending: true, sortBy: "date" }); const categories = [ { value: "retinol", label: "Retinol/Retin-A" }, { value: "redlight", label: "Red Light Therapy" }, { value: "facial", label: "Facial" }, { value: "peel", label: "Chemical Peel" }, { value: "laser", label: "Laser Treatment" }, { value: "exfoliation", label: "Exfoliation" }, { value: "microneedling", label: "Microneedling" }, { value: "other", label: "Other" } ]; const handleSubmit = (e) => { e.preventDefault(); submitTreatment(); setSelectedTreatment(null); }; const handleDelete = async (id) => { await database.del(id); }; const handleEdit = (treatment) => { resetTreatment(); setSelectedTreatment(treatment); mergeTreatment({ _id: treatment._id, _rev: treatment._rev, name: treatment.name, date: treatment.date, notes: treatment.notes, category: treatment.category, type: "treatment" }); }; const getNextTreatmentRecommendation = async () => { setLoading(true); try { const prompt = `Based on my recent skincare treatments: ${treatments.map(t => `${t.name} (${t.category}) on ${new Date(t.date).toLocaleDateString()}`).join(', ')}, suggest optimal timing for my next treatments considering recovery periods and treatment interactions. Consider that chemical peels and laser treatments need significant recovery time before other treatments. Retinol should be paused before and after aggressive treatments. Red light therapy can be done more frequently. For each treatment category, recommend when I should schedule my next session and any precautions.`; const result = await callAI(prompt, { schema: { properties: { recommendations: { type: "array", items: { type: "object", properties: { category: { type: "string" }, nextBestDate: { type: "string" }, reasoning: { type: "string" }, precautions: { type: "string" } } } }, generalAdvice: { type: "string" } } } }); setAiResponse(JSON.parse(result)); } catch (error) { console.error("Error getting AI recommendations:", error); setAiResponse({ recommendations: [], generalAdvice: "Unable to generate recommendations at this time." }); } setLoading(false); }; const addDemoData = async () => { setLoading(true); try { const today = new Date(); const demoData = await callAI("Generate 5 sample skincare treatments from the past 2 months with realistic dates, names, categories (retinol, redlight, facial, peel, laser, exfoliation, microneedling, or other) and notes", { schema: { properties: { treatments: { type: "array", items: { type: "object", properties: { name: { type: "string" }, date: { type: "string" }, notes: { type: "string" }, category: { type: "string" } } } } } } }); const parsedData = JSON.parse(demoData); for (const treatment of parsedData.treatments) { await database.put({ ...treatment, type: "treatment" }); } } catch (error) { console.error("Error adding demo data:", error); } setLoading(false); }; const formatDate = (dateString) => { const date = new Date(dateString); return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }; const getBgColorForCategory = (category) => { const colors = { retinol: "bg-pink-200", redlight: "bg-red-200", facial: "bg-blue-200", peel: "bg-orange-200", laser: "bg-purple-200", exfoliation: "bg-yellow-200", microneedling: "bg-green-200", other: "bg-gray-200" }; return colors[category] || "bg-gray-200"; }; const getTimelineDot = (category) => { const colors = { retinol: "bg-pink-500", redlight: "bg-red-500", facial: "bg-blue-500", peel: "bg-orange-500", laser: "bg-purple-500", exfoliation: "bg-yellow-500", microneedling: "bg-green-500", other: "bg-gray-500" }; return colors[category] || "bg-gray-500"; }; return (

✨ Glow Guru ✨

Your personalized skincare regime scheduler to optimize timing between treatments and maximize results.

{showHelp && (

Glow Guru helps you schedule and track your skincare treatments to ensure optimal timing between procedures.

Add treatments by selecting a category, name, date, and optional notes
Your treatments will appear on the timeline in chronological order
Use the AI Recommendation feature to get personalized advice on timing your next treatments
Edit or delete treatments as needed
For demonstration purposes, you can add sample data

)}

Add Treatment

Treatment Category

Treatment Name mergeTreatment({ name: e.target.value })} placeholder="e.g., Monthly Hydrating Facial" className="w-full p-2 border-2 border-gray-300 rounded-lg" required />

Date mergeTreatment({ date: e.target.value })} className="w-full p-2 border-2 border-gray-300 rounded-lg" required />

Notes

mergeTreatment({ notes: e.target.value })}
                  placeholder="Any comments about this treatment"
                  className="w-full p-2 border-2 border-gray-300 rounded-lg"
                  rows="2"
                />
              </div>
            </div>
            
            <div className="flex justify-end space-x-2">
              {selectedTreatment && (
                <button 
                  type="button" 
                  onClick={() => {
                    resetTreatment();
                    setSelectedTreatment(null);
                  }}
                  className="px-4 py-2 bg-gray-500 text-white rounded-lg"
                >
                  Cancel
                </button>
              )}
              <button 
                type="submit" 
                className="px-4 py-2 rounded-lg text-white font-semibold"
                style={{ backgroundColor: "#ff70a6" }}
              >
                {selectedTreatment ? 'Update Treatment' : 'Add Treatment'}
              </button>
            </div>
          </form>
        </div>

<div className="mb-8">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-2xl font-semibold" style={{ color: "#70d6ff" }}>Treatment Timeline</h2>
            <div className="flex space-x-2">
              <button 
                onClick={addDemoData}
                className="px-3 py-1.5 bg-ffd670 text-gray-700 rounded-lg text-sm"
                disabled={loading}
              >
                Demo Data
              </button>
              <button 
                onClick={getNextTreatmentRecommendation}
                className="px-3 py-1.5 bg-ff9770 text-white rounded-lg text-sm"
                disabled={loading}
              >
                Get AI Recommendations
              </button>
            </div>
          </div>
          
          {treatments.length === 0 ? (
            <div className="text-center p-8 bg-white rounded-lg border-2 border-dashed border-gray-300">
              <p className="text-gray-500">No treatments recorded yet. Add your first treatment or load demo data.</p>
            </div>
          ) : (
            <div className="relative pl-8">
              <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-300"></div>
              {treatments.map((treatment, index) => (
                <div key={treatment._id} className="mb-4 relative">
                  <div className={`absolute left-0 -translate-x-1/2 w-4 h-4 rounded-full ${getTimelineDot(treatment.category)} border-2 border-white z-10`}></div>
                  
                  <div className={`p-4 rounded-lg shadow-sm ${getBgColorForCategory(treatment.category)}`}>
                    <div className="flex justify-between items-start">
                      <div>
                        <div className="text-sm font-medium text-gray-500">
                          {formatDate(treatment.date)}
                        </div>
                        <h3 className="text-lg font-semibold">{treatment.name}</h3>
                        <div className="inline-block px-2 py-1 rounded text-xs font-medium bg-white/50 mt-1">
                          {categories.find(c => c.value === treatment.category)?.label || 'Other'}
                        </div>
                        {treatment.notes && (
                          <p className="mt-2 text-gray-700">{treatment.notes}</p>
                        )}
                      </div>
                      <div className="flex space-x-1">
                        <button 
                          onClick={() => handleEdit(treatment)}
                          className="p-1 text-gray-600 hover:text-gray-900"
                        >
                          ✏️
                        </button>
                        <button 
                          onClick={() => handleDelete(treatment._id)}
                          className="p-1 text-gray-600 hover:text-red-600"
                        >
                          🗑️
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
        
        {aiResponse && Object.keys(aiResponse).length > 0 && (
          <div className="mb-8 p-6 rounded-lg border-4 border-ff9770 bg-white shadow-lg">
            <h2 className="text-2xl font-semibold mb-4" style={{ color: "#ff9770" }}>AI Recommendations</h2>
            
            <div className="mb-4">
              <h3 className="font-medium mb-2">General Advice:</h3>
              <p className="text-gray-700">{aiResponse.generalAdvice}</p>
            </div>
            
            <h3 className="font-medium mb-2">Treatment Recommendations:</h3>
            <div className="space-y-4">
              {aiResponse.recommendations && aiResponse.recommendations.map((rec, index) => (
                <div 
                  key={index} 
                  className={`p-4 rounded-lg ${getBgColorForCategory(rec.category.toLowerCase())}`}
                >
                  <h4 className="font-semibold">{categories.find(c => c.value === rec.category.toLowerCase())?.label || rec.category}</h4>
                  <p className="mb-2"><strong>Next Best Date:</strong> {rec.nextBestDate}</p>
                  <p className="mb-2"><strong>Reasoning:</strong> {rec.reasoning}</p>
                  <p><strong>Precautions:</strong> {rec.precautions}</p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}</article></body></html>