import React, { useState } from "react";
import { saveAs } from 'file-saver';
import jsPDF from 'jspdf';
import 'jspdf-autotable';
import './App.css'; // For extra custom styles like fonts, textures

export default function App() {
  const [currentPage, setCurrentPage] = useState("Home");

  // ================= PROFILES =================
  const [profiles, setProfiles] = useState({ adults: [], kids: [], pets: [] });

  // ================= CALENDAR =================
  const [calendarEvents, setCalendarEvents] = useState([]);

  // ================= DAILY PLANNER =================
  const [dailyTasks, setDailyTasks] = useState([]);

  // ================= CHORES & REWARDS =================
  const [chores, setChores] = useState([]);
  const [rewards, setRewards] = useState([]);

  // ================= MEALS & SHOPPING =================
  const [meals, setMeals] = useState({ weeklyPlan: [], allMeals: [] });

  // ================= MUSIC =================
  const [playlists, setPlaylists] = useState([]);

  // ================= TAROT =================
  const [tarotHistory, setTarotHistory] = useState([]);

  // ================= POTTY TRAINING =================
  const [pottyData, setPottyData] = useState({ entries: [], points: 0 });
  const [pottyRewards, setPottyRewards] = useState([]);

  // ================= BABY CARE =================
  const [babyData, setBabyData] = useState({
    feedings: [],
    diapers: [],
    baths: [],
    pumping: [],
    milkStorage: { fridge: 0, freezer: 0 },
    symptoms: []
  });

  // ================= EXPORT FUNCTIONS =================
  const exportCSV = (data, filename) => {
    if (!data || data.length === 0) return;
    const csvRows = [];
    const headers = Object.keys(data[0]);
    csvRows.push(headers.join(','));
    data.forEach(row => csvRows.push(headers.map(h => `\"${row[h]}\"`).join(',')));
    const csvData = new Blob([csvRows.join('\n')], { type: 'text/csv' });
    saveAs(csvData, `${filename}.csv`);
  };

  const exportPDF = (data, filename) => {
    if (!data || data.length === 0) return;
    const doc = new jsPDF();
    const headers = [Object.keys(data[0])];
    const rows = data.map(row => Object.values(row));
    doc.autoTable({ head: headers, body: rows, styles: { font: 'times', fontSize: 10 }, headStyles: { fillColor: [220, 220, 220] } });
    doc.save(`${filename}.pdf`);
  };

  // ================= GALLERY BUTTONS =================
  const galleryButtons = [
    { name: "Profiles", page: "ProfilesPage", color: "bg-indigo-800/80" },
    { name: "Calendar", page: "CalendarPage", color: "bg-green-800/80" },
    { name: "Birthday Tree", page: "BirthdayTreePage", color: "bg-yellow-800/80" },
    { name: "Chores & Rewards", page: "ChorePage", color: "bg-purple-800/80" },
    { name: "Meals & Shopping", page: "MealPage", color: "bg-orange-800/80" },
    { name: "Weekly Notes", page: "WeeklyPage", color: "bg-pink-800/80" },
    { name: "Music", page: "MusicPage", color: "bg-blue-800/80" },
    { name: "Tarot", page: "TarotPage", color: "bg-red-800/80" },
    { name: "Potty & Baby", page: "BabyPottyPage", color: "bg-teal-800/80" },
  ];

  return (
    <div className="min-h-screen p-6 bg-[url('/assets/oil-paint-texture.jpg')] bg-cover text-white font-serif">

      {/* ================= DATE/TIME DISPLAY ================= */}
      <div className="text-center text-4xl drop-shadow-lg mb-10">
        {new Date().toLocaleString("en-US", { dateStyle: "full", timeStyle: "short" })}
      </div>

      {/* ================= GALLERY BUTTONS ================= */}
      <div className="grid grid-cols-3 gap-8 justify-center">
        {galleryButtons.map((btn) => (
          <div
            key={btn.name}
            onClick={() => setCurrentPage(btn.page)}
            className={`${btn.color} cursor-pointer p-8 rounded-2xl hover:scale-110 transition-transform transform shadow-xl shadow-black/50 text-center text-2xl font-bold backdrop-blur-sm border border-white/20`}
          >
            {btn.name}
          </div>
        ))}
      </div>

      {/* ================= PAGE RENDER ================= */}
      {currentPage === "BabyPottyPage" && (
        <BabyPottyPage
          pottyData={pottyData}
          setPottyData={setPottyData}
          babyData={babyData}
          setBabyData={setBabyData}
          exportCSV={exportCSV}
          exportPDF={exportPDF}
        />
      )}
      {/* Placeholder for other pages */}
    </div>
  );
}

// ================= BABY & POTTY PAGE =================
function BabyPottyPage({ pottyData, setPottyData, babyData, setBabyData, exportCSV, exportPDF }) {
  // ======= POTTY FUNCTIONS =======
  const addPottyEntry = (type, success) => {
    const pointsChange = success ? 1 : -1;
    const entry = { type, success, time: new Date().toLocaleTimeString(), pointsChange };
    setPottyData(prev => ({ entries: [entry, ...prev.entries], points: prev.points + pointsChange }));
  };

  // ======= BABY FUNCTIONS =======
  const addFeeding = (method, amount) => {
    const time = new Date().toLocaleTimeString();
    setBabyData(prev => ({ ...prev, feedings: [...prev.feedings, { method, amount, time }], milkStorage: method === 'bottle' ? { fridge: prev.milkStorage.fridge - amount, freezer: prev.milkStorage.freezer } : prev.milkStorage }));
  };
  const addDiaper = (type) => { const time = new Date().toLocaleTimeString(); setBabyData(prev => ({ ...prev, diapers: [...prev.diapers, { type, time }] })); };
  const addBath = () => { const time = new Date().toLocaleTimeString(); setBabyData(prev => ({ ...prev, baths: [...prev.baths, { time }] })); };
  const addPumping = (side, amount) => { const time = new Date().toLocaleTimeString(); setBabyData(prev => ({ ...prev, pumping: [...prev.pumping, { side, amount, time }], milkStorage: { fridge: prev.milkStorage.fridge + amount, freezer: prev.milkStorage.freezer } })); };
  const addSymptom = (description, duration) => { const time = new Date().toLocaleTimeString(); setBabyData(prev => ({ ...prev, symptoms: [...prev.symptoms, { description, duration, time }] })); };

  return (
    <div className="mt-8 p-6 bg-white/10 rounded-3xl shadow-2xl backdrop-blur-lg">
      <h2 className="text-3xl font-serif mb-4 drop-shadow-md">Potty Training Tracker</h2>
      <div className="mb-4 flex flex-wrap justify-center gap-3">
        <button onClick={() => addPottyEntry('pee', true)} className="bg-blue-600 px-5 py-3 rounded-lg hover:bg-blue-500 transition">Successful Pee</button>
        <button onClick={() => addPottyEntry('poop', true)} className="bg-green-600 px-5 py-3 rounded-lg hover:bg-green-500 transition">Successful Poop</button>
        <button onClick={() => addPottyEntry('accident', false)} className="bg-red-600 px-5 py-3 rounded-lg hover:bg-red-500 transition">Accident</button>
      </div>
      <p className="mb-4 text-xl">Total Points: {pottyData.points}</p>
      <div className="mb-6 flex justify-center gap-3">
        <button onClick={() => exportCSV(pottyData.entries, 'Potty_Training')} className="bg-gray-700 px-4 py-2 rounded-lg">Export CSV</button>
        <button onClick={() => exportPDF(pottyData.entries, 'Potty_Training')} className="bg-gray-700 px-4 py-2 rounded-lg">Export PDF</button>
      </div>

      <h2 className="text-3xl font-serif mt-8 mb-4 drop-shadow-md">Baby Care Tracker</h2>
      <div className="mb-4 flex flex-wrap justify-center gap-3">
        <button onClick={() => addFeeding('breast', '15 min')} className="bg-purple-600 px-5 py-3 rounded-lg hover:bg-purple-500 transition">Breastfeeding</button>
        <button onClick={() => addFeeding('bottle', 4)} className="bg-blue-600 px-5 py-3 rounded-lg hover:bg-blue-500 transition">Bottle (oz)</button>
        <button onClick={() => addDiaper('pee')} className="bg-green-600 px-5 py-3 rounded-lg hover:bg-green-500 transition">Diaper Pee</button>
        <button onClick={() => addDiaper('poop')} className="bg-red-600 px-5 py-3 rounded-lg hover:bg-red-500 transition">Diaper Poop</button>
        <button onClick={addBath} className="bg-yellow-600 px-5 py-3 rounded-lg hover:bg-yellow-500 transition">Bath</button>
        <button onClick={() => addPumping('left', 3)} className="bg-pink-600 px-5 py-3 rounded-lg hover:bg-pink-500 transition">Pump Left</button>
        <button onClick={() => addPumping('right', 3)} className="bg-pink-400 px-5 py-3 rounded-lg hover:bg-pink-300 transition">Pump Right</button>
        <button onClick={() => addSymptom('Fever', '2 hours')} className="bg-orange-600 px-5 py-3 rounded-lg hover:bg-orange-500 transition">Add Symptom</button>
      </div>
      <div className="flex justify-center gap-3 mb-6">
        <button onClick={() => exportCSV([...babyData.feedings, ...babyData.diapers, ...babyData.baths, ...babyData.pumping, ...babyData.symptoms], 'Baby_Care')} className="bg-gray-700 px-4 py-2 rounded-lg">Export CSV</button>
        <button onClick={() => exportPDF([...babyData.feedings, ...babyData.diapers, ...babyData.baths, ...babyData.pumping, ...babyData.symptoms], 'Baby_Care')} className="bg-gray-700 px-4 py-2 rounded-lg">Export PDF</button>
      </div>
    </div>
  );
}