Trainer — Bengkelmu.

import React, { useState, useEffect, useMemo, useRef } from 'react'; import { initializeApp } from 'firebase/app'; import { getFirestore, doc, setDoc, getDoc, collection, onSnapshot, updateDoc, arrayUnion } from 'firebase/firestore'; import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth'; import { Calendar as CalendarIcon, Users, Building, Plane, Car, Bus, PlusCircle, Trash2, Bot, CalendarDays, Clock, Wand2, PartyPopper, UploadCloud, FileText, Table, GanttChartSquare, History, CheckCircle } from 'lucide-react'; // --- SHADCN UI DUMMY COMPONENTS (for self-contained example) --- const Card = ({ children, className }) =>

{children}

; const CardHeader = ({ children, className }) =>

{children}

; const CardTitle = ({ children, className }) =>

{children}

; const CardDescription = ({ children, className }) =>

{children}

; const CardContent = ({ children, className }) =>

{children}

; const Button = ({ children, onClick, className, variant, size, disabled }) => { const baseStyle = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none"; const variantStyles = { default: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600", destructive: "bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700", outline: "border border-gray-300 dark:border-gray-700 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800", }; const sizeStyles = { default: "h-10 py-2 px-4", sm: "h-9 px-3 rounded-md", lg: "h-11 px-8 rounded-md", }; return ; }; const Input = (props) => ; const Label = (props) => ; const Textarea = (props) =>

;
const Badge = ({ children, className, variant }) => {
    const variantStyles = {
        default: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200",
        success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
        warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
        info: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
        travel: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200",
    };
    return <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold ${variantStyles[variant] || variantStyles.default} ${className}`}>{children}</span>;
}

// --- Gantt Chart Component ---
const Gantt = ({ tasks }) => {
    const ganttContainer = useRef(null);

useEffect(() => {
        if (!ganttContainer.current || typeof window.gantt === 'undefined') return;

window.gantt.init(ganttContainer.current);
        window.gantt.clearAll();
        window.gantt.parse(tasks);

}, [tasks]);

return (
        <>
            <style>{`
                .gantt_project_task {
                    background-color: #4a5568 !important;
                    border-color: #2d3748 !important;
                }
                .gantt_project_task .gantt_task_progress {
                    background-color: #2d3748 !important;
                }
                .gantt_task_travel { background-color: #667eea !important; border-color: #5a67d8 !important; }
                .gantt_task_training { background-color: #4299e1 !important; border-color: #3182ce !important; }
                .gantt_task_day_off { background-color: #a0aec0 !important; border-color: #718096 !important; }
            `}</style>
            <div ref={ganttContainer} style={{ width: '100%', height: '500px' }}></div>
        </>
    );
};

// --- Firebase Configuration ---
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-trainer-scheduler';

// --- Main App Component ---
export default function App() {
    // --- State Management ---
    const [db, setDb] = useState(null);
    const [auth, setAuth] = useState(null);
    const [userId, setUserId] = useState(null);
    
    // Data states
    const [merchantName, setMerchantName] = useState("Mega Retail Corp");
    const [outlets, setOutlets] = useState("Manila\nCebu\nDavao\nBaguio\nIloilo City\nCagayan de Oro\nBacolod\nGeneral Santos");
    const [trainers, setTrainers] = useState([{ id: 1, name: 'Alex', location: 'Manila' }, { id: 2, name: 'Bea', location: 'Manila' }]);
    const [blackoutDates, setBlackoutDates] = useState("2025-12-24\n2025-12-31");
    const [projectStartDate, setProjectStartDate] = useState("2025-10-01");
    const [allowWeekends, setAllowWeekends] = useState(false);
    const [uploadedSchedule, setUploadedSchedule] = useState(null);
    const [scheduleFileName, setScheduleFileName] = useState('');
    const [locationFileName, setLocationFileName] = useState('');
    
    // App logic states
    const [holidays, setHolidays] = useState([]);
    const [generatedSchedule, setGeneratedSchedule] = useState(null); // Will hold { timestamp, schedule: [] }
    const [scheduleHistory, setScheduleHistory] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const [isAuthReady, setIsAuthReady] = useState(false);
    const [activeView, setActiveView] = useState('table'); // 'table' or 'gantt'

// --- Dynamically Load External Libraries ---
    useEffect(() => {
        const libs = [
            { id: 'sheetjs-script', src: "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" },
            { id: 'gantt-css', rel: 'stylesheet', href: 'https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css' },
            { id: 'gantt-script', src: 'https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js' }
        ];

libs.forEach(lib => {
            if (document.getElementById(lib.id)) return;
            let element;
            if (lib.rel === 'stylesheet') {
                element = document.createElement('link');
                element.rel = lib.rel;
                element.href = lib.href;
            } else {
                element = document.createElement('script');
                element.src = lib.src;
                element.async = true;
            }
            element.id = lib.id;
            document.head.appendChild(element);
        });
    }, []);

// --- Firebase Initialization and Auth ---
    useEffect(() => {
        try {
            if (Object.keys(firebaseConfig).length > 0) {
                const app = initializeApp(firebaseConfig);
                const firestore = getFirestore(app);
                const authInstance = getAuth(app);
                setDb(firestore);
                setAuth(authInstance);

onAuthStateChanged(authInstance, async (user) => {
                    if (user) {
                        setUserId(user.uid);
                    } else {
                        try {
                            if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                                await signInWithCustomToken(authInstance, __initial_auth_token);
                            } else {
                                await signInAnonymously(authInstance);
                            }
                        } catch (authError) {
                            console.error("Authentication failed:", authError);
                            setError("Could not authenticate with the server. Data will not be saved.");
                        }
                    }
                    setIsAuthReady(true);
                });
            } else {
                console.warn("Firebase config is missing.");
                setIsAuthReady(true);
            }
        } catch(e) {
            console.error("Firebase initialization error:", e);
            setError("Could not initialize the database connection.");
            setIsAuthReady(true);
        }
    }, []);

// --- Data Loading from Firestore ---
    useEffect(() => {
        if (isAuthReady && db && userId) {
            const docRef = doc(db, 'artifacts', appId, 'users', userId);
            const unsubscribe = onSnapshot(docRef, (docSnap) => {
                if (docSnap.exists()) {
                    const data = docSnap.data();
                    if(data.merchantName) setMerchantName(data.merchantName);
                    if(data.outlets) setOutlets(data.outlets);
                    if(data.trainers) setTrainers(data.trainers);
                    if(data.blackoutDates) setBlackoutDates(data.blackoutDates);
                    if(data.projectStartDate) setProjectStartDate(data.projectStartDate);
                    if(data.allowWeekends) setAllowWeekends(data.allowWeekends);
                    if(data.activeSchedule) setGeneratedSchedule(data.activeSchedule);
                    if(data.scheduleHistory) {
                        const sortedHistory = data.scheduleHistory.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
                        setScheduleHistory(sortedHistory);
                    }
                }
            }, (err) => {
                console.error("Firestore snapshot error:", err);
            });
            return () => unsubscribe();
        }
    }, [isAuthReady, db, userId]);
    
    // --- Holiday Fetching for 2025 and 2026 ---
    useEffect(() => {
        const fetchHolidays = async () => {
            const startYear = projectStartDate ? new Date(projectStartDate).getFullYear() : new Date().getFullYear();
            const endYear = 2026;
            const yearsToFetch = [];
            for (let year = startYear; year <= endYear; year++) {
                yearsToFetch.push(year);
            }

try {
                const holidayPromises = yearsToFetch.map(year =>
                    fetch(`https://date.nager.at/api/v3/PublicHolidays/${year}/PH`).then(res => {
                        if (!res.ok) throw new Error(`Failed to fetch holidays for ${year}`);
                        return res.json();
                    })
                );
                const allHolidaysNested = await Promise.all(holidayPromises);
                const allHolidaysFlat = allHolidaysNested.flat();
                const uniqueHolidays = Array.from(new Set(allHolidaysFlat.map(h => h.date)))
                    .map(date => {
                        const holiday = allHolidaysFlat.find(h => h.date === date);
                        return { date: holiday.date, name: holiday.name };
                    });
                setHolidays(uniqueHolidays);
            } catch (error) {
                console.error("Failed to fetch holidays:", error);
                setError("Could not fetch Philippine holidays. Scheduling will proceed with a fallback list.");
                setHolidays([
                    { date: "2025-01-01", name: "New Year's Day" },
                    { date: "2025-12-25", name: "Christmas Day" },
                    { date: "2026-01-01", name: "New Year's Day" },
                    { date: "2026-12-25", name: "Christmas Day" },
                ]);
            }
        };
        fetchHolidays();
    }, [projectStartDate]);

// --- Trainer Management ---
    const handleAddTrainer = () => setTrainers([...trainers, { id: Date.now(), name: '', location: 'Manila' }]);
    const handleTrainerChange = (id, field, value) => setTrainers(trainers.map(t => t.id === id ? { ...t, [field]: value } : t));
    const handleRemoveTrainer = (id) => setTrainers(trainers.filter(t => t.id !== id));

// --- File Upload Handlers ---
    const handleScheduleFileChange = (event) => {
        const file = event.target.files[0];
        if (!file) return;

setScheduleFileName(file.name);
        const reader = new FileReader();
        const fileExtension = file.name.split('.').pop().toLowerCase();

if (fileExtension === 'csv') {
            reader.onload = (e) => {
                const text = e.target.result;
                const lines = text.split('\n').filter(line => line.trim() !== '');
                if (lines.length > 1) {
                    const headers = lines[0].split(',').map(h => h.trim());
                    const data = lines.slice(1).map(line => {
                        const values = line.split(',').map(v => v.trim());
                        return headers.reduce((obj, header, index) => {
                            obj[header] = values[index];
                            return obj;
                        }, {});
                    });
                    setUploadedSchedule(data);
                    setError(null);
                } else { setError("CSV file is empty or invalid."); }
            };
            reader.readAsText(file);
        } else if (fileExtension === 'xlsx' || fileExtension === 'xls') {
            if (typeof XLSX === 'undefined') { setError("Excel parsing library is still loading. Please try again in a moment."); return; }
            reader.onload = (e) => {
                const data = e.target.result;
                const workbook = XLSX.read(data, { type: 'array' });
                const sheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[sheetName];
                const json = XLSX.utils.sheet_to_json(worksheet);
                setUploadedSchedule(json);
                setError(null);
            };
            reader.readAsArrayBuffer(file);
        } else {
            setError("Unsupported file type for schedules. Please upload CSV or Excel.");
            setUploadedSchedule(null);
            setScheduleFileName('');
        }
    };
    
    const handleLocationFileChange = (event) => {
        const file = event.target.files[0];
        if (!file) return;

setLocationFileName(file.name);
        const reader = new FileReader();
        const fileExtension = file.name.split('.').pop().toLowerCase();

if (fileExtension === 'csv') {
            reader.onload = (e) => {
                const text = e.target.result;
                const locations = text.split('\n').map(line => line.trim()).filter(Boolean);
                processLocations(locations);
            };
            reader.readAsText(file);
        } else if (fileExtension === 'xlsx' || fileExtension === 'xls') {
            if (typeof XLSX === 'undefined') { setError("Excel parsing library is still loading. Please try again in a moment."); return; }
            reader.onload = (e) => {
                const data = e.target.result;
                const workbook = XLSX.read(data, { type: 'array' });
                const sheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[sheetName];
                const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                const locations = json.map(row => row[0]).filter(Boolean);
                processLocations(locations);
            };
            reader.readAsArrayBuffer(file);
        } else {
            setError("Unsupported file type for locations. Please upload CSV or Excel.");
            setLocationFileName('');
        }
    };

// --- Schedule Generation & History ---
    const generateSchedule = async () => {
        setIsLoading(true);
        setError(null);

const scheduleToBuildOn = uploadedSchedule || (generatedSchedule ? generatedSchedule.schedule : null);

const existingSchedulePrompt = scheduleToBuildOn
            ? `7.  **Existing Schedule (must be respected):**\n${JSON.stringify(scheduleToBuildOn, null, 2)}`
            : '';

const prompt = `
            You are an expert logistics and training scheduler for a large-scale deployment in the Philippines.
            Your task is to create an efficient training schedule.

**Output Format:**
            Your response MUST be a valid JSON object with a single key "schedule" which is an array of daily events.
            Each event must have: "date", "dayOfWeek", "trainer", "activity", "details", "location", "isWorkDay".

**Input Data & Constraints:**
            1.  **Project Start Date:** ${projectStartDate}
            2.  **Merchant:** ${merchantName}
            3.  **Outlets to be Trained:**\n${outlets}
            4.  **Available Trainers:**\n${JSON.stringify(trainers, null, 2)}
            5.  **Philippine Public Holidays (Blocked):**\n${holidays.map(h => h.date).join('\n')}
            6.  **Merchant Blackout Dates (Blocked):**\n${blackoutDates}
            ${existingSchedulePrompt}

**Scheduling Rules:**
            - **Priority:** The "Existing Schedule" is the highest priority. Plan new trainings for outlets NOT mentioned in the existing schedule.
            - **Work Week:** Monday to Friday, 9 AM - 6 PM. Weekends only if "Allow Weekends: ${allowWeekends}" is true.
            - **Capacity:** Max 2 face-to-face trainings/day in the same city. Only 1 if inter-city travel is needed. Max 3 online trainings/day.
            - **Travel:** A full day of "Travel" is needed to move between major islands (e.g., Manila to Cebu).
            - **Efficiency:** Group trainings by region to minimize travel.
            - **Completeness:** Ensure every outlet in the list is scheduled exactly once, considering both the existing and newly generated schedule.
            - **Holidays/Blackouts:** These are non-working "Day Off" days.

Generate a complete and logical schedule starting from the project start date.
        `;

try {
            const chatHistory = [{ role: "user", parts: [{ text: prompt }] }];
            const payload = { contents: chatHistory };
            const apiKey = "";
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;

const response = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

if (!response.ok) {
                const errorBody = await response.text();
                throw new Error(`API Error: ${response.status} - ${errorBody}`);
            }

const result = await response.json();
            
            if (result.candidates?.[0]?.content?.parts?.[0]?.text) {
              let rawText = result.candidates[0].content.parts[0].text;
              rawText = rawText.replace(/^```json\s*/, '').replace(/```$/, '').trim();
              const scheduleData = JSON.parse(rawText);
              
              const historyEntry = {
                  timestamp: new Date().toISOString(),
                  schedule: scheduleData.schedule 
              };

setGeneratedSchedule(historyEntry);
              
              if (db && userId) {
                  const docRef = doc(db, 'artifacts', appId, 'users', userId);
                  await updateDoc(docRef, {
                      activeSchedule: historyEntry,
                      scheduleHistory: arrayUnion(historyEntry)
                  }).catch(async (err) => {
                      if (err.code === 'not-found') {
                          await setDoc(docRef, {
                              activeSchedule: historyEntry,
                              scheduleHistory: [historyEntry]
                          });
                      }
                  });
              }
            } else {
              throw new Error("The AI returned an empty or malformed response.");
            }

} catch (e) {
            console.error("Error generating or parsing schedule:", e);
            setError(`Failed to generate schedule. ${e.message}`);
        } finally {
            setIsLoading(false);
        }
    };

const tasks = [];
        const trainersMap = {};
        let taskId = 1;

trainers.forEach((trainer) => {
            const trainerId = `trainer_${trainer.id}`;
            trainersMap[trainer.name] = trainerId;
            tasks.push({ id: trainerId, text: trainer.name, type: 'project', open: true });
            taskId++;
        });

generatedSchedule.schedule.forEach(event => {
            const parentId = trainersMap[event.trainer];
            if (!parentId) return;

let color = 'day_off';
            if (event.activity.toLowerCase().includes('travel')) color = 'travel';
            if (event.activity.toLowerCase().includes('training')) color = 'training';

tasks.push({
                id: taskId++,
                text: event.details,
                start_date: event.date,
                duration: 1,
                parent: parentId,
                color: color
            });
        });
        
        return { data: tasks };
    }, [generatedSchedule, trainers]);

return (
        <div className="bg-gray-50 dark:bg-gray-950 min-h-screen font-sans text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
            <div className="max-w-screen-xl mx-auto">
                <header className="mb-8">
                    <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white flex items-center">
                        <CalendarDays className="mr-3 text-blue-600 dark:text-blue-500" />
                        Enterprise On-Site Trainer Planning Software
                    </h1>
                    <p className="mt-2 text-gray-600 dark:text-gray-400">
                        Input project details, upload existing schedules, and let AI generate an optimized plan.
                    </p>
                    {userId && <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">User ID: {userId}</p>}
                </header>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* --- LEFT COLUMN: INPUTS --- */}
                    <div className="lg:col-span-1 flex flex-col gap-6">
                        <Card>
                            <CardHeader>
                                <CardTitle className="flex items-center"><Building className="mr-2" />Merchant Details</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div>
                                    <Label htmlFor="merchantName">Merchant Name</Label>
                                    <Input id="merchantName" value={merchantName} onChange={e => setMerchantName(e.target.value)} />
                                </div>
                                <div>
                                    <Label htmlFor="outlets">Outlet Locations (one per line or upload)</Label>
                                    <Textarea id="outlets" value={outlets} onChange={e => setOutlets(e.target.value)} rows={4} />
                                    <div className="mt-2">
                                        <Input id="location-file-upload" type="file" accept=".csv,.xlsx,.xls" onChange={handleLocationFileChange} className="text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-gray-50 file:text-gray-700 hover:file:bg-gray-100"/>
                                        {locationFileName && <p className="text-xs text-gray-500 mt-2 flex items-center"><FileText size={14} className="mr-1"/>{locationFileName}</p>}
                                    </div>
                                </div>
                            </CardContent>
                        </Card>

<Card>
                            <CardHeader>
                                <CardTitle className="flex items-center"><UploadCloud className="mr-2" />Upload Existing Schedule</CardTitle>
                                <CardDescription>Upload a CSV, XLS, or XLSX file.</CardDescription>
                            </CardHeader>
                            <CardContent>
                                <Input id="schedule-file-upload" type="file" accept=".csv,.xlsx,.xls" onChange={handleScheduleFileChange} className="text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" />
                                {scheduleFileName && <p className="text-xs text-gray-500 mt-2 flex items-center"><FileText size={14} className="mr-1"/>{scheduleFileName}</p>}
                            </CardContent>
                        </Card>
                        
                        <Card>
                            <CardHeader>
                                <CardTitle className="flex items-center"><History className="mr-2" />Schedule History</CardTitle>
                                <CardDescription>Load a previously generated schedule.</CardDescription>
                            </CardHeader>
                            <CardContent className="max-h-48 overflow-y-auto space-y-2">
                                {scheduleHistory.length > 0 ? scheduleHistory.map((item) => (
                                    <button key={item.timestamp} onClick={() => loadScheduleFromHistory(item)} className="w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-between">
                                        <span className="text-sm">
                                            {new Date(item.timestamp).toLocaleString()}
                                        </span>
                                        {generatedSchedule?.timestamp === item.timestamp && <CheckCircle size={16} className="text-green-500" />}
                                    </button>
                                )) : (
                                    <p className="text-xs text-gray-500">No history yet. Generate a schedule to start.</p>
                                )}
                            </CardContent>
                        </Card>

<Card>
                            <CardHeader>
                                <CardTitle className="flex items-center"><Users className="mr-2" />Trainer Roster</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-3">
                                {trainers.map((trainer) => (
                                    <div key={trainer.id} className="flex items-center gap-2">
                                        <Input value={trainer.name} onChange={e => handleTrainerChange(trainer.id, 'name', e.target.value)} placeholder="Trainer Name"/>
                                        <Input value={trainer.location} onChange={e => handleTrainerChange(trainer.id, 'location', e.target.value)} placeholder="Home Base"/>
                                        <Button variant="destructive" size="sm" onClick={() => handleRemoveTrainer(trainer.id)}><Trash2 size={16} /></Button>
                                    </div>
                                ))}
                                <Button variant="outline" size="sm" onClick={handleAddTrainer} className="w-full"><PlusCircle size={16} className="mr-2" />Add Trainer</Button>
                            </CardContent>
                        </Card>

<Card>
                            <CardHeader>
                                <CardTitle className="flex items-center"><CalendarIcon className="mr-2" />Project Configuration</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div>
                                    <Label htmlFor="startDate">Project Start Date</Label>
                                    <Input id="startDate" type="date" value={projectStartDate} onChange={e => setProjectStartDate(e.target.value)} />
                                </div>
                                <div>
                                    <Label htmlFor="blackoutDates">Merchant Blackout Dates (YYYY-MM-DD, one per line)</Label>
                                    <Textarea id="blackoutDates" value={blackoutDates} onChange={e => setBlackoutDates(e.target.value)} rows={3} />
                                </div>
                                <div className="flex items-center space-x-2">
                                    <input type="checkbox" id="allowWeekends" checked={allowWeekends} onChange={e => setAllowWeekends(e.target.checked)} className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
                                    <Label htmlFor="allowWeekends">Allow Weekend Training</Label>
                                </div>
                                <div>
                                    <CardTitle className="text-base flex items-center"><PartyPopper size={18} className="mr-2 text-yellow-500"/>PH Public Holidays</CardTitle>
                                    <div className="mt-2 max-h-32 overflow-y-auto rounded-md border p-2 text-xs bg-gray-50 dark:bg-gray-800">
                                        {holidays.length > 0 ? holidays.map(h => <div key={h.date}>{h.date}: {h.name}</div>) : "Loading holidays..."}
                                    </div>
                                </div>
                            </CardContent>
                        </Card>

<Button onClick={generateSchedule} disabled={isLoading || !isAuthReady} className="w-full h-12 text-lg font-bold">
                            {isLoading ? <><Bot size={20} className="mr-2 animate-spin" /> Generating...</> : <><Wand2 size={20} className="mr-2" /> Generate Schedule with AI</>}
                        </Button>
                        {!isAuthReady && <p className="text-center text-xs text-yellow-600">Connecting to server...</p>}
                        {error && <div className="bg-red-100 dark:bg-red-900 border-l-4 border-red-500 text-red-700 dark:text-red-200 p-4 rounded-md text-sm">{error}</div>}
                    </div>

{/* --- RIGHT COLUMN: OUTPUT --- */}
                    <div className="lg:col-span-2">
                         <Card className="h-full">
                            <CardHeader>
                                <CardTitle>Generated Training Schedule</CardTitle>
                                <div className="flex items-center border-b border-gray-200 dark:border-gray-700">
                                    <button onClick={() => setActiveView('table')} className={`flex items-center px-4 py-2 text-sm font-medium ${activeView === 'table' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}>
                                        <Table size={16} className="mr-2" /> Table View
                                    </button>
                                    <button onClick={() => setActiveView('gantt')} className={`flex items-center px-4 py-2 text-sm font-medium ${activeView === 'gantt' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}>
                                        <GanttChartSquare size={16} className="mr-2" /> Gantt Chart View
                                    </button>
                                </div>
                            </CardHeader>
                            <CardContent className="overflow-x-auto">
                                {isLoading && <div className="text-center p-10"><p>AI is planning the logistics. Please wait...</p></div>}
                                {!isLoading && !generatedSchedule && (
                                    <div className="text-center py-16 px-6 border-2 border-dashed rounded-lg">
                                        <Bot size={48} className="mx-auto text-gray-400" />
                                        <h3 className="mt-2 text-sm font-medium">Schedule will appear here</h3>
                                        <p className="mt-1 text-sm text-gray-500">Click "Generate Schedule with AI" to begin.</p>
                                    </div>
                                )}
                                {generatedSchedule?.schedule?.length > 0 && (
                                    <>
                                        {activeView === 'table' && (
                                            <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                                                <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                                    <tr>
                                                        <th scope="col" className="px-4 py-3">Date</th>
                                                        <th scope="col" className="px-4 py-3">Day</th>
                                                        <th scope="col" className="px-4 py-3">Trainer</th>
                                                        <th scope="col" className="px-4 py-3">Activity</th>
                                                        <th scope="col" className="px-4 py-3">Details</th>
                                                        <th scope="col" className="px-4 py-3">Location</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {generatedSchedule.schedule.map((event, index) => {
                                                        const isHoliday = holidays.some(h => h.date === event.date);
                                                        return (
                                                            <tr key={index} className={`border-b dark:border-gray-700 ${event.isWorkDay ? 'bg-white dark:bg-gray-800' : 'bg-gray-100 dark:bg-gray-900'}`}>
                                                                <td className="px-4 py-3 font-medium whitespace-nowrap">{event.date}</td>
                                                                <td className="px-4 py-3">{event.dayOfWeek}</td>
                                                                <td className="px-4 py-3">{event.trainer}</td>
                                                                <td className="px-4 py-3">
                                                                    <Badge variant={event.activity.toLowerCase().includes('travel') ? 'travel' : event.activity.toLowerCase().includes('training') ? 'info' : 'default'}>
                                                                        {isHoliday ? `Holiday: ${holidays.find(h=>h.date===event.date).name}` : event.activity}
                                                                    </Badge>
                                                                </td>
                                                                <td className="px-4 py-3">{event.details}</td>
                                                                <td className="px-4 py-3">{event.location}</td>
                                                            </tr>
                                                        );
                                                    })}
                                                </tbody>
                                            </table>
                                        )}
                                        {activeView === 'gantt' && <Gantt tasks={ganttTasks} />}
                                    </>
                                )}
                            </CardContent>
                         </Card>
                    </div>
                </div>
            </div>
        </div>
    );
}<script>Static.COOKIE_BANNER_CAPABLE = true;</script>

    <link rel="stylesheet" type="text/css" href="https://static1.squarespace.com/static/vta/5c5a519771c10ba3470d8101/versioned-assets/1760993719780-8BIQLG2VO0KW1AR5GSNK/static.css">
  </head>

</svg>
    
<div class="sqs-announcement-bar-dropzone"></div>

<div class="header-announcement-bar-wrapper">
      
      <a
        href="#page"
        class="header-skip-link sqs-button-element--primary"
      >
        Skip to Content
      </a>

"
      ></div>
      <div
        class="header-dropshadow"
        data-header-style="dynamic"
        data-header-dropshadow="false"
        data-test="header-dropshadow"
        style=""
      ></div>

<div class="header-burger

menu-overlay-has-visible-non-navigation-items

" data-animation-role="header-element">
  <button class="header-burger-btn burger" data-test="header-burger">
    <span hidden class="js-header-burger-open-title visually-hidden">Open Menu</span>
    <span hidden class="js-header-burger-close-title visually-hidden">Close Menu</span>
    <div class="burger-box">
      <div class="burger-inner header-menu-icon-doubleLineHamburger">
        <div class="top-bun"></div>
        <div class="patty"></div>
        <div class="bottom-bun"></div>
      </div>
    </div>
  </button>
</div>

<div class="header-title-nav-wrapper">

<div
                    class="
                      header-title
                      
                    "
                    data-animation-role="header-element"
                  >
                    
                      <div class="header-title-text">
                        <a id="site-title" href="/" data-animation-role="header-element">Bengkelmu.</a>
                      </div>
                    
                    
                  </div>
                
              
                
                
                <div class="header-nav">
                  <div class="header-nav-wrapper">
                    <nav class="header-nav-list">

</nav>
                  </div>
                </div>
              
              
            </div>
          
            
            
            <div class="header-actions header-actions--right">
              
              
                
                  <div class="header-actions-action header-actions-action--social">
                    
                      
                        <a class="icon icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="http://facebook.com/squarespace" target="_blank" aria-label="facebook-unauth">
                          <svg viewBox="23 23 64 64">
                            <use xlink:href="#facebook-unauth-icon" width="110" height="110"></use>
                          </svg>
                        </a>
                      
                        <a class="icon icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="http://twitter.com/squarespace" target="_blank" aria-label="twitter-unauth">
                          <svg viewBox="23 23 64 64">
                            <use xlink:href="#twitter-unauth-icon" width="110" height="110"></use>
                          </svg>
                        </a>
                      
                        <a class="icon icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="http://instagram.com/squarespace" target="_blank" aria-label="instagram-unauth">
                          <svg viewBox="23 23 64 64">
                            <use xlink:href="#instagram-unauth-icon" width="110" height="110"></use>
                          </svg>
                        </a>
                      
                        <a class="icon icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="http://youtube.com/squarespace" target="_blank" aria-label="youtube-unauth">
                          <svg viewBox="23 23 64 64">
                            <use xlink:href="#youtube-unauth-icon" width="110" height="110"></use>
                          </svg>
                        </a>
                      
                    
                  </div>

</div>

</div>
        <div class="header-display-mobile" data-content-field="site-title">

<div class="header-burger

menu-overlay-has-visible-non-navigation-items

<div class="header-title-nav-wrapper">

</div>
          
          
          
        </div>
      </div>
    </div>
    
    <div class="header-menu header-menu--folder-list
      
      
      
      
      
      "
      data-section-theme=""
      data-current-styles="{
"layout": "navRight",
"action": {
"href": "/tickets",
"buttonText": "Get Tickets",
"newWindow": false
},
"showSocial": true,
"socialOptions": {
"socialBorderShape": "none",
"socialBorderStyle": "outline",
"socialBorderThickness": {
"unit": "px",
"value": 1.0
}
},
"menuOverlayAnimation": "fade",
"cartStyle": "cart",
"cartText": "Cart",
"showEmptyCartState": true,
"cartOptions": {
"iconType": "solid-7",
"cartBorderShape": "none",
"cartBorderStyle": "outline",
"cartBorderThickness": {
"unit": "px",
"value": 1.0
}
},
"showButton": false,
"showCart": true,
"showAccountLogin": true,
"headerStyle": "dynamic",
"languagePicker": {
"enabled": false,
"iconEnabled": false,
"iconType": "globe",
"flagShape": "shiny",
"languageFlags": [ ]
},
"iconOptions": {
"desktopDropdownIconOptions": {
"endcapType": "square",
"folderDropdownIcon": "none",
"languagePickerIcon": "openArrowHead"
},
"mobileDropdownIconOptions": {
"endcapType": "square",
"folderDropdownIcon": "openArrowHead",
"languagePickerIcon": "openArrowHead"
}
},
"mobileOptions": {
"layout": "logoCenterNavLeft",
"menuIconOptions": {
"style": "doubleLineHamburger",
"thickness": {
"unit": "px",
"value": 1.0
}
}
},
"solidOptions": {
"headerOpacity": {
"unit": "%",
"value": 100.0
},
"blurBackground": {
"enabled": false,
"blurRadius": {
"unit": "px",
"value": 12.0
}
},
"backgroundColor": {
"type": "SITE_PALETTE_COLOR",
"sitePaletteColor": {
"colorName": "white",
"alphaModifier": 1.0
}
},
"navigationColor": {
"type": "SITE_PALETTE_COLOR",
"sitePaletteColor": {
"colorName": "black",
"alphaModifier": 1.0
}
}
},
"gradientOptions": {
"gradientType": "faded",
"headerOpacity": {
"unit": "%",
"value": 90.0
},
"blurBackground": {
"enabled": false,
"blurRadius": {
"unit": "px",
"value": 12.0
}
},
"backgroundColor": {
"type": "SITE_PALETTE_COLOR",
"sitePaletteColor": {
"colorName": "white",
"alphaModifier": 1.0
}
},
"navigationColor": {
"type": "SITE_PALETTE_COLOR",
"sitePaletteColor": {
"colorName": "black",
"alphaModifier": 1.0
}
}
},
"dropShadowOptions": {
"enabled": false,
"blur": {
"unit": "px",
"value": 12.0
},
"spread": {
"unit": "px",
"value": 0.0
},
"distance": {
"unit": "px",
"value": 12.0
}
},
"borderOptions": {
"enabled": false,
"position": "allSides",
"thickness": {
"unit": "px",
"value": 4.0
},
"color": {
"type": "SITE_PALETTE_COLOR",
"sitePaletteColor": {
"colorName": "black",
"alphaModifier": 1.0
}
}
},
"showPromotedElement": false,
"buttonVariant": "primary",
"blurBackground": {
"enabled": false,
"blurRadius": {
"unit": "px",
"value": 12.0
}
},
"headerOpacity": {
"unit": "%",
"value": 100.0
}
}"
      data-section-id="overlay-nav"
      data-show-account-login="true"
      data-test="header-menu">
      <div class="header-menu-bg theme-bg--primary"></div>
      <div class="header-menu-nav">
        <nav class="header-menu-nav-list">
          <div data-folder="root" class="header-menu-nav-folder">
            <div class="header-menu-nav-folder-content">
              
<div class="header-menu-nav-wrapper">
  
</div>

</div>
            
              <div class="header-menu-actions social-accounts">
                
                  
                    <div class="header-menu-actions-action header-menu-actions-action--social mobile">
                      <a class="icon icon--lg icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="http://facebook.com/squarespace" target="_blank" aria-label="facebook-unauth">
                        <svg viewBox="23 23 64 64">
                          <use xlink:href="#facebook-unauth-icon" width="110" height="110"></use>
                        </svg>
                      </a>
                    </div>
                  
                    <div class="header-menu-actions-action header-menu-actions-action--social mobile">
                      <a class="icon icon--lg icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="http://twitter.com/squarespace" target="_blank" aria-label="twitter-unauth">
                        <svg viewBox="23 23 64 64">
                          <use xlink:href="#twitter-unauth-icon" width="110" height="110"></use>
                        </svg>
                      </a>
                    </div>
                  
                    <div class="header-menu-actions-action header-menu-actions-action--social mobile">
                      <a class="icon icon--lg icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="http://instagram.com/squarespace" target="_blank" aria-label="instagram-unauth">
                        <svg viewBox="23 23 64 64">
                          <use xlink:href="#instagram-unauth-icon" width="110" height="110"></use>
                        </svg>
                      </a>
                    </div>
                  
                    <div class="header-menu-actions-action header-menu-actions-action--social mobile">
                      <a class="icon icon--lg icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="http://youtube.com/squarespace" target="_blank" aria-label="youtube-unauth">
                        <svg viewBox="23 23 64 64">
                          <use xlink:href="#youtube-unauth-icon" width="110" height="110"></use>
                        </svg>
                      </a>
                    </div>
                  
                
              </div>
            
            
            
          </div>
        </nav>
      </div>
    </div>
  </header>

</main>
      
        <footer class="sections" id="footer-sections" data-footer-sections>

.fe-64afa4c32185665ef14d3109 {
  --grid-gutter: calc(var(--sqs-mobile-site-gutter, 6vw) - 11.0px);
  --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (11.0px * (8 - 1)) ) / 8 );

display: grid;
  position: relative;
  grid-area: 1/1/-1/-1;
  grid-template-rows: repeat(6,minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 11.0px;
  column-gap: 11.0px;
  overflow-x: hidden;
  overflow-x: clip;
}

@media (min-width: 768px) {
  .background-width--inset .fe-64afa4c32185665ef14d3109 {
    --inset-padding: calc(var(--sqs-site-gutter) * 2);
  }

.fe-64afa4c32185665ef14d3109 {
    --grid-gutter: calc(var(--sqs-site-gutter, 4vw) - 11.0px);
    --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (11.0px * (24 - 1)) ) / 24 );
    --inset-padding: 0vw;

--row-height-scaling-factor: 0.0215;
    --container-width: min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2 - var(--inset-padding) ));

grid-template-rows: repeat(4,minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

.fe-block-36d47d8b0c33daef3806 {
    grid-area: 1/2/7/10;
    z-index: 0;

@media (max-width: 767px) {
      
      
    }
  }

.fe-block-36d47d8b0c33daef3806 .sqs-block {
    justify-content: flex-start;
  }

.fe-block-36d47d8b0c33daef3806 .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-36d47d8b0c33daef3806 {
      grid-area: 1/5/5/23;
      z-index: 0;

}

.fe-block-36d47d8b0c33daef3806 .sqs-block {
      justify-content: flex-start;
    }

.fe-block-36d47d8b0c33daef3806 .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

</style><div class="fluid-engine fe-64afa4c32185665ef14d3109"><div class="fe-block fe-block-36d47d8b0c33daef3806"><div class="sqs-block html-block sqs-block-html" data-block-type="2" data-border-radii="{"topLeft":{"unit":"px","value":0.0},"topRight":{"unit":"px","value":0.0},"bottomLeft":{"unit":"px","value":0.0},"bottomRight":{"unit":"px","value":0.0}}" data-sqsp-block="text" id="block-36d47d8b0c33daef3806"><div class="sqs-block-content">

<div class="sqs-html-content" data-sqsp-text-block-content>
  <h3 style="text-align:center;white-space:pre-wrap;"><a href="https://www.facebook.com/squarespace" target="_blank">Facebook</a>  <a href="https://twitter.com/squarespace" target="_blank">Twitter</a>  <a href="https://www.instagram.com/squarespace/" target="_blank">Instagram</a></h3><p style="text-align:center;white-space:pre-wrap;" class="">Copyright © 2023 bengkelmu. All rights reserved.</p>
</div>

</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

</footer>

</div>

</body>
</html>