// 🧘♀️ FULLY RESTORED DASHBOARD + HOMEWORK + Q&A
import { useState } from 'react';
export default function YTTDashboard() {
const [asanaPractice, setAsanaPractice] = useState(0);
const [breathworkPractice, setBreathworkPractice] = useState(0);
const [videosWatched, setVideosWatched] = useState(0);
const totalVideos = 12;
const [journalEntry, setJournalEntry] = useState("");
const [submittedEntry, setSubmittedEntry] = useState(null);
const [teacherNotes, setTeacherNotes] = useState("");
const [showTeacherView, setShowTeacherView] = useState(false);
const [showPoseList, setShowPoseList] = useState(false);
const [poseNotes, setPoseNotes] = useState({});
const [questionAnswer, setQuestionAnswer] = useState("");
const [submittedAnswer, setSubmittedAnswer] = useState(null);
const [homeworkText, setHomeworkText] = useState("Review your asana alignment and submit a short video.");
const [schedule, setSchedule] = useState([
{ module: 1, title: "Foundations of Yoga + Breathwork", date: "2025-06-01" },
{ module: 2, title: "Sun Salutations + Anatomy I", date: "2025-06-08" },
{ module: 3, title: "Standing Poses + Alignment", date: "2025-06-15" },
{ module: 4, title: "Seated Poses + Adjustments", date: "2025-06-22" },
{ module: 5, title: "Backbends + Chakra Theory", date: "2025-06-29" },
{ module: 6, title: "Twists, Binds, and Pranayama", date: "2025-07-06" },
{ module: 7, title: "Inversions + the Nervous System", date: "2025-07-13" },
{ module: 8, title: "Restorative Yoga + Ethics", date: "2025-07-20" },
{ module: 9, title: "Sequencing & Theming Classes", date: "2025-07-27" },
{ module: 10, title: "Integration + Final Practice Teach", date: "2025-08-03" }
]);
const poseCategories = {
Standing: ["Tadasana (Mountain Pose)", "Utkatasana (Chair Pose)", "Adho Mukha Svanasana (Downward Dog)", "Uttanasana (Standing Forward Bend)", "Virabhadrasana I (Warrior I)", "Virabhadrasana II (Warrior II)", "Virabhadrasana III (Warrior III)", "Utthita Trikonasana (Extended Triangle)", "Parsvakonasana (Side Angle)", "Ardha Chandrasana (Half Moon)", "Parivrtta Trikonasana (Revolved Triangle)", "Parivrtta Parsvakonasana (Revolved Side Angle)"],
Seated: ["Prasarita Padottanasana (Wide-Legged Forward Bend)", "Padangusthasana (Big Toe Pose)", "Padahastasana (Hand Under Foot Pose)", "Paschimottanasana (Seated Forward Bend)", "Janu Sirsasana (Head-to-Knee Forward Bend)", "Baddha Konasana (Bound Angle)", "Upavistha Konasana (Wide-Angle Forward Bend)", "Marichyasana III", "Sukhasana (Easy Pose)", "Padmasana (Lotus Pose)"],
Balancing: ["Vrksasana (Tree Pose)", "Garudasana (Eagle Pose)", "Natarajasana (Dancer Pose)", "Bakasana (Crow Pose)"],
Backbends: ["Bhujangasana (Cobra Pose)", "Urdhva Mukha Svanasana (Upward Facing Dog)", "Salabhasana (Locust Pose)", "Dhanurasana (Bow Pose)", "Setu Bandhasana (Bridge Pose)", "Urdhva Dhanurasana (Wheel Pose)"],
Inversions: ["Halasana (Plow Pose)", "Sarvangasana (Shoulderstand)", "Matsyasana (Fish Pose)"],
Restorative: ["Balasana (Child’s Pose)", "Savasana (Corpse Pose)", "Supta Matsyendrasana (Supine Twist)", "Ardha Matsyendrasana (Half Lord of the Fishes)"]
};
const handleIncrement = (setter) => setter(prev => prev + 1);
const handleScheduleChange = (index, field, value) => {
const updated = [...schedule];
updated[index][field] = value;
setSchedule(updated);
};
const handlePoseNoteChange = (pose, value) => {
setPoseNotes({ ...poseNotes, [pose]: value });
};
return (
<div style={{ padding: '1.5rem', backgroundColor: '#F8F4F8', minHeight: '100vh' }}>
<h1 style={{ fontSize: '2rem', color: '#3E293F', textAlign: 'center', fontWeight: 'bold' }}>🪷 Welcome to Your Yoga Ashram</h1>
{/* Homework */}
<div style={{ marginTop: '2rem', backgroundColor: '#F0E6F0', border: '2px dashed #8F3886', padding: '1rem', borderRadius: '1rem' }}>
<h2 style={{ color: '#653766' }}>📚 Homework</h2>
<textarea
value={homeworkText}
onChange={(e) => setHomeworkText(e.target.value)}
style={{ width: '100%', padding: '0.5rem', marginBottom: '0.5rem' }}
/>
<p style={{ fontStyle: 'italic' }}>This is the current assignment students should complete.</p>
</div>
{/* Q&A */}
<div style={{ marginTop: '2rem', backgroundColor: '#F0E6F0', border: '2px dashed #8F3886', padding: '1rem', borderRadius: '1rem' }}>
<h2 style={{ color: '#653766' }}>📝 Module Q&A</h2>
<p><strong>Question:</strong> What stood out to you most in this week’s lecture?</p>
<textarea
value={questionAnswer}
onChange={(e) => setQuestionAnswer(e.target.value)}
placeholder="Write your answer here..."
style={{ width: '100%', padding: '0.5rem', marginTop: '0.5rem' }}
/>
<button onClick={() => setSubmittedAnswer(questionAnswer)} style={{ marginTop: '0.5rem' }}>Submit Answer</button>
{submittedAnswer && <p>✅ Answer Submitted</p>}
</div>
{/* Calendar */}
<div style={{ marginTop: '2rem', backgroundColor: '#F0E6F0', border: '2px solid #8F3886', padding: '1rem', borderRadius: '1rem' }}>
<h2 style={{ color: '#653766' }}>📅 YTT Training Calendar</h2>
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>Module</th>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>Title</th>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>Date</th>
</tr>
</thead>
<tbody>
{schedule.map((item, index) => (
<tr key={index}>
<td style={{ padding: '0.5rem' }}>Module {item.module}</td>
<td style={{ padding: '0.5rem' }}>
<input
type="text"
value={item.title}
onChange={(e) => handleScheduleChange(index, 'title', e.target.value)}
style={{ width: '100%', padding: '0.3rem' }}
/>
</td>
<td style={{ padding: '0.5rem' }}>
<input
type="date"
value={item.date}
onChange={(e) => handleScheduleChange(index, 'date', e.target.value)}
style={{ padding: '0.3rem' }}
/>
</td>
</tr>
))}
</tbody>
</table>
</div>
{/* Practice Logs */}
<div style={{ display: 'grid', gap: '1.5rem', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', marginTop: '2rem' }}>
<div style={{ backgroundColor: '#F0E6F0', border: '2px solid #8F3886', padding: '1rem', borderRadius: '1rem' }}>
<h2 style={{ color: '#653766' }}>Asana Practice</h2>
<p>Sessions Logged: {asanaPractice}</p>
{asanaPractice >= 5 && <p style={{ color: 'green' }}>🌸 Milestone: 5 Asana sessions!</p>}
<button onClick={() => handleIncrement(setAsanaPractice)}>+ Log Asana</button>
</div>
<div style={{ backgroundColor: '#F0E6F0', border: '2px solid #8F3886', padding: '1rem', borderRadius: '1rem' }}>
<h2 style={{ color: '#653766' }}>Breathwork + Meditation</h2>
<p>Sessions Logged: {breathworkPractice}</p>
{breathworkPractice >= 5 && <p style={{ color: 'green' }}>🌬️ Milestone: 5 Breathwork sessions!</p>}
<button onClick={() => handleIncrement(setBreathworkPractice)}>+ Log Session</button>
</div>
<div style={{ backgroundColor: '#F0E6F0', border: '2px solid #8F3886', padding: '1rem', borderRadius: '1rem' }}>
<h2 style={{ color: '#653766' }}>🎥 Video Progress</h2>
<p>{videosWatched}/{totalVideos} Videos Watched</p>
{videosWatched >= totalVideos && <p style={{ color: 'green' }}>🎉 Milestone: All videos complete!</p>}
<progress value={videosWatched} max={totalVideos} style={{ width: '100%' }} />
<button onClick={() => setVideosWatched(v => Math.min(v + 1, totalVideos))}>+ Mark Video Watched</button>
</div>
</div>
{/* Journal */}
<div style={{ marginTop: '2rem', backgroundColor: '#F0E6F0', border: '2px solid #8F3886', padding: '1rem', borderRadius: '1rem' }}>
<h2 style={{ color: '#653766' }}>📔 Journal & Weekly Reflection</h2>
<p style={{ fontStyle: 'italic' }}>Prompt: "How did this week’s practice shift your perspective or challenge your growth?"</p>
<textarea
value={journalEntry}
onChange={(e) => setJournalEntry(e.target.value)}
placeholder="Type your reflection here..."
style={{ width: '100%', padding: '0.5rem', marginTop: '0.5rem' }}
/>
<button onClick={() => setSubmittedEntry(journalEntry)} style={{ marginTop: '0.5rem' }}>Submit to Teacher</button>
{submittedEntry && <p>✅ Entry Submitted</p>}
</div>
{/* Teacher View */}
<div style={{ marginTop: '2rem' }}>
<button onClick={() => setShowTeacherView(!showTeacherView)}>
{showTeacherView ? "Hide" : "Show"} Teacher View
</button>
{showTeacherView && (
<div style={{ backgroundColor: '#E0A289', border: '2px solid #3E293F', padding: '1rem', marginTop: '1rem', borderRadius: '1rem' }}>
<h2 style={{ color: '#3E293F' }}>👁️ Teacher View</h2>
<p>Journal Submitted:</p>
<blockquote style={{ fontStyle: 'italic', backgroundColor: '#F8F4F8', padding: '1rem', borderRadius: '0.5rem' }}>{submittedEntry}</blockquote>
<p>Q&A Response:</p>
<blockquote style={{ fontStyle: 'italic', backgroundColor: '#F8F4F8', padding: '1rem', borderRadius: '0.5rem' }}>{submittedAnswer}</blockquote>
<div>
<h3 style={{ color: '#3E293F' }}>📊 Practice Overview</h3>
<ul>
<li>Asana: {asanaPractice} sessions</li>
<li>Breathwork + Meditation: {breathworkPractice} sessions</li>
<li>Videos Watched: {videosWatched} / {totalVideos}</li>
</ul>
</div>
<div>
<h3 style={{ color: '#3E293F' }}>📝 Teacher Notes</h3>
<textarea
value={teacherNotes}
onChange={(e) => setTeacherNotes(e.target.value)}
placeholder="Add notes, feedback, or reflection here..."
style={{ width: '100%', padding: '0.5rem' }}
/>
</div>
</div>
)}
</div>
{/* Poses */}
<div style={{ marginTop: '2rem', backgroundColor: '#F0E6F0', border: '2px solid #8F3886', padding: '1rem', borderRadius: '1rem' }}>
<h2 style={{ color: '#653766' }}>📘 Foundational Asanas – 200hr Training Set</h2>
<button onClick={() => setShowPoseList(!showPoseList)} style={{ marginBottom: '1rem' }}>
{showPoseList ? 'Hide Asanas' : 'View Pose List'}
</button>
{showPoseList && (
<div style={{ display: 'grid', gap: '1rem' }}>
{Object.entries(poseCategories).map(([category, poses]) => (
<div key={category} style={{ border: '1px solid #8F3886', borderRadius: '0.5rem', padding: '1rem', backgroundColor: '#fff' }}>
<h3 style={{ color: '#8F3886', marginBottom: '0.5rem' }}>{category} Poses</h3>
<ul style={{ listStyleType: 'disc', paddingLeft: '1.2rem' }}>
{poses.map(pose => (
<li key={pose} style={{ marginBottom: '0.5rem' }}>
<strong>{pose}</strong>
<br />
<textarea
value={poseNotes[pose] || ''}
onChange={(e) => handlePoseNoteChange(pose, e.target.value)}
placeholder="Add personal notes or teaching cues..."
style={{ width: '100%', marginTop: '0.25rem', padding: '0.4rem', borderRadius: '0.25rem' }}
/>
</li>
))}
</ul>
</div>
))}
</div>
)}
</div>
</div>
);
}
