import React, { useState, useEffect } from "react";

// Learning Portal for kids (single-file React app)
// - Stores lessons in localStorage so it works offline in the browser
// - Simple admin mode protected by a PIN (stored in localStorage)
// - Lessons support title, ageGroup, summary, content (HTML/markdown-lite), and optional base64 attachments
// - Import / Export JSON for transferring/updating content on other devices
// - Designed to be drop-in for services like Replit, StackBlitz, Netlify or GitHub Pages

// USAGE:
// 1) Create a new React app (Vite or Create React App) or open in Replit/StackBlitz
// 2) Paste this file as `App.jsx` and ensure it's imported from index.js
// 3) (Optional) Add Tailwind in your project for the intended styling, or rely on the simple class names

// Small utility: sanitize minimal HTML (very small) to allow <b>, <i>, <br>, <p>, <ul>, <li>
function sanitizeSimpleHtml(html) {
  // This is intentionally tiny — for more robust use, install a library like DOMPurify.
  return html
    .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "")
    .replace(/on\w+=[\"'][\s\S]*?[\"']/gi, "");
}

const STORAGE_KEY = "lp_lessons_v1";
const ADMIN_PIN_KEY = "lp_admin_pin_v1";

function sampleLessons() {
  return [
    {
      id: "lesson-1",
      title: "Photosynthesis — How plants make food",
      ageGroup: "10-12",
      summary: "A simple explanation of how plants use sunlight to make food.",
      content:
        "<p>Plants use sunlight, water and carbon dioxide to make their own food — this process is called <b>photosynthesis</b>.</p><ul><li>Sunlight provides energy.</li><li>Leaves take in carbon dioxide.</li><li>Roots take in water.</li></ul><p>Try drawing the cycle in your notebook!</p>",
      attachments: [],
      updatedAt: new Date().toISOString(),
    },
    {
      id: "lesson-2",
      title: "Healthy Eating for Kids",
      ageGroup: "8-11",
      summary: "Why balanced meals matter and examples of healthy snacks.",
      content:
        "<p>A balanced meal has proteins, carbohydrates, fats, vitamins and minerals. Try a fruit with a small handful of nuts for a snack.</p>",
      attachments: [],
      updatedAt: new Date().toISOString(),
    },
  ];
}

function useLessons() {
  const [lessons, setLessons] = useState(() => {
    try {
      const raw = localStorage.getItem(STORAGE_KEY);
      if (raw) return JSON.parse(raw);
      const samples = sampleLessons();
      localStorage.setItem(STORAGE_KEY, JSON.stringify(samples));
      return samples;
    } catch (e) {
      console.error(e);
      const samples = sampleLessons();
      return samples;
    }
  });

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(lessons));
  }, [lessons]);

  const addLesson = (lesson) => {
    setLessons((s) => [{ ...lesson, id: `lesson-${Date.now()}`, updatedAt: new Date().toISOString() }, ...s]);
  };

  const updateLesson = (id, patch) => {
    setLessons((s) => s.map((l) => (l.id === id ? { ...l, ...patch, updatedAt: new Date().toISOString() } : l)));
  };

  const deleteLesson = (id) => {
    setLessons((s) => s.filter((l) => l.id !== id));
  };

  const replaceAll = (newLessons) => {
    setLessons(newLessons);
  };

  return { lessons, addLesson, updateLesson, deleteLesson, replaceAll };
}

function AdminPanel({ onLogout, onImport }) {
  const [pin, setPin] = useState("");
  const [newPin, setNewPin] = useState("");

  const savePin = () => {
    if (newPin.length < 4) return alert("Make a PIN of at least 4 digits (important for safety).");
    localStorage.setItem(ADMIN_PIN_KEY, newPin);
    alert("PIN saved. Use it to enter admin mode.");
    setNewPin("");
  };

  return (
    <div className="p-4 rounded-md shadow-md bg-white">
      <h3 className="text-lg font-semibold mb-2">Admin Panel</h3>
      <div className="mb-4">
        <label className="block text-sm">Set new admin PIN</label>
        <div className="flex gap-2 mt-1">
          <input value={newPin} onChange={(e) => setNewPin(e.target.value)} className="border p-2 flex-1" placeholder="New PIN" />
          <button onClick={savePin} className="px-3 py-2 bg-blue-600 text-white rounded">Save PIN</button>
        </div>
      </div>

      <div className="mb-4">
        <label className="block text-sm">Import lessons (JSON)</label>
        <input type="file" accept="application/json" onChange={onImport} className="mt-1" />
      </div>

      <div className="flex gap-2">
        <button onClick={onLogout} className="px-3 py-2 bg-red-600 text-white rounded">Exit Admin</button>
      </div>
    </div>
  );
}

function LessonEditor({ onSave, existing }) {
  const [title, setTitle] = useState(existing?.title || "");
  const [ageGroup, setAgeGroup] = useState(existing?.ageGroup || "");
  const [summary, setSummary] = useState(existing?.summary || "");
  const [content, setContent] = useState(existing?.content || "");

  useEffect(() => {
    setTitle(existing?.title || "");
    setAgeGroup(existing?.ageGroup || "");
    setSummary(existing?.summary || "");
    setContent(existing?.content || "");
  }, [existing]);

  const submit = () => {
    if (!title.trim()) return alert("Please add a title.");
    onSave({ title, ageGroup, summary, content });
    setTitle("");
    setAgeGroup("");
    setSummary("");
    setContent("");
  };

  return (
    <div className="p-4 rounded-md shadow-sm bg-white">
      <h3 className="font-semibold mb-2">{existing ? "Edit Lesson" : "Create Lesson"}</h3>
      <div className="mb-2">
        <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" className="w-full p-2 border" />
      </div>
      <div className="mb-2">
        <input value={ageGroup} onChange={(e) => setAgeGroup(e.target.value)} placeholder="Age group (e.g. 8-10)" className="w-full p-2 border" />
      </div>
      <div className="mb-2">
        <input value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Short summary" className="w-full p-2 border" />
      </div>
      <div className="mb-2">
        <textarea value={content} onChange={(e) => setContent(e.target.value)} placeholder="Content (simple HTML allowed)" rows={6} className="w-full p-2 border" />
      </div>
      <div className="flex gap-2">
        <button onClick={submit} className="px-3 py-2 bg-green-600 text-white rounded">Save</button>
      </div>
    </div>
  );
}

function LessonCard({ lesson, onOpen, onEdit, onDelete }) {
  return (
    <div className="p-3 border rounded bg-white">
      <h4 className="font-semibold">{lesson.title}</h4>
      <div className="text-xs text-gray-600">Age: {lesson.ageGroup || "All"} • Updated: {new Date(lesson.updatedAt).toLocaleDateString()}</div>
      <p className="mt-2 text-sm">{lesson.summary}</p>
      <div className="mt-3 flex gap-2">
        <button onClick={() => onOpen(lesson)} className="px-2 py-1 border rounded">Open</button>
        {onEdit && <button onClick={() => onEdit(lesson)} className="px-2 py-1 border rounded">Edit</button>}
        {onDelete && <button onClick={() => onDelete(lesson.id)} className="px-2 py-1 border rounded">Delete</button>}
      </div>
    </div>
  );
}

function LessonView({ lesson, onClose }) {
  if (!lesson) return null;
  return (
    <div className="fixed inset-0 bg-black/50 p-4 flex items-center justify-center">
      <div className="max-w-2xl w-full bg-white rounded p-4 overflow-auto max-h-[90vh]">
        <div className="flex justify-between items-start">
          <div>
            <h2 className="text-xl font-bold">{lesson.title}</h2>
            <div className="text-xs text-gray-600">Age: {lesson.ageGroup || "All"} • Updated: {new Date(lesson.updatedAt).toLocaleDateString()}</div>
          </div>
          <div>
            <button onClick={onClose} className="px-2 py-1">Close</button>
          </div>
        </div>
        <hr className="my-2" />
        <div dangerouslySetInnerHTML={{ __html: sanitizeSimpleHtml(lesson.content) }} />
        {lesson.attachments?.length > 0 && (
          <div className="mt-4">
            <h4 className="font-semibold">Attachments</h4>
            {lesson.attachments.map((a, i) => (
              <div key={i} className="mt-2">
                <a href={a.data} download={a.name} className="underline">
                  Download {a.name}
                </a>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default function App() {
  const { lessons, addLesson, updateLesson, deleteLesson, replaceAll } = useLessons();
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState(null);
  const [adminMode, setAdminMode] = useState(false);
  const [editing, setEditing] = useState(null);

  useEffect(() => {
    // check if we are already in admin mode (simple persisted flag)
    const pin = localStorage.getItem(ADMIN_PIN_KEY);
    // don't auto-enter admin without user action
  }, []);

  const filtered = lessons.filter((l) => {
    const q = query.toLowerCase();
    return !q || l.title.toLowerCase().includes(q) || (l.summary || "").toLowerCase().includes(q) || (l.content || "").toLowerCase().includes(q);
  });

  const tryEnterAdmin = () => {
    const saved = localStorage.getItem(ADMIN_PIN_KEY);
    if (!saved) return alert("No admin PIN set. Go to Admin Panel to create one.");
    const pin = prompt("Enter admin PIN to enter admin mode:");
    if (pin === saved) {
      setAdminMode(true);
      alert("Admin mode enabled — be careful!");
    } else alert("Wrong PIN.");
  };

  const logoutAdmin = () => {
    setAdminMode(false);
  };

  const handleSaveNew = (data) => {
    if (editing) {
      updateLesson(editing.id, data);
      setEditing(null);
    } else addLesson(data);
  };

  const handleImport = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      try {
        const parsed = JSON.parse(reader.result);
        if (!Array.isArray(parsed)) return alert("Invalid file: top-level array expected.");
        // Basic validation
        const validated = parsed.map((p, i) => ({ id: p.id || `imp-${Date.now()}-${i}`, title: p.title || "Untitled", content: p.content || "", summary: p.summary || "", ageGroup: p.ageGroup || "All", attachments: p.attachments || [], updatedAt: p.updatedAt || new Date().toISOString() }));
        if (confirm(`Import ${validated.length} lessons and replace existing lessons?`)) replaceAll(validated);
      } catch (err) {
        alert("Failed to read JSON: " + err.message);
      }
    };
    reader.readAsText(file);
  };

  const exportLessons = () => {
    const blob = new Blob([JSON.stringify(lessons, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `lessons-export-${new Date().toISOString()}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="min-h-screen bg-gray-100 p-4 font-sans">
      <div className="max-w-5xl mx-auto">
        <header className="flex items-center justify-between mb-4">
          <div>
            <h1 className="text-2xl font-bold">Community Learning Portal</h1>
            <div className="text-sm text-gray-600">Free, offline-friendly lessons for kids</div>
          </div>
          <div className="flex gap-2 items-center">
            <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search lessons" className="border p-2 rounded" />
            <button onClick={() => exportLessons()} className="px-3 py-2 border rounded">Export</button>
            <button onClick={() => tryEnterAdmin()} className="px-3 py-2 bg-yellow-400 rounded">Admin</button>
          </div>
        </header>

        <main className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <section className="md:col-span-2 space-y-4">
            {filtered.length === 0 && <div className="p-4 bg-white rounded">No lessons found.</div>}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              {filtered.map((l) => (
                <LessonCard key={l.id} lesson={l} onOpen={(lesson) => setSelected(lesson)} onEdit={adminMode ? (lesson) => setEditing(lesson) : null} onDelete={adminMode ? (id) => { if (confirm('Delete this lesson?')) deleteLesson(id); } : null} />
              ))}
            </div>
          </section>

          <aside>
            <div className="sticky top-4 space-y-4">
              <div className="p-3 rounded bg-white">
                <h3 className="font-semibold mb-2">About</h3>
                <p className="text-sm text-gray-700">This portal stores lessons locally in your browser. To share updated materials with other devices, use Export/Import.</p>
              </div>

              {adminMode ? (
                <div>
                  <LessonEditor onSave={handleSaveNew} existing={editing} />
                  <div className="mt-3">
                    <AdminPanel onLogout={logoutAdmin} onImport={handleImport} />
                  </div>
                </div>
              ) : (
                <div className="p-3 rounded bg-white">
                  <h4 className="font-semibold">Get Content</h4>
                  <p className="text-sm">Ask a teacher or volunteer to export lessons (JSON) and import them here. Or enter Admin mode to add lessons locally.</p>
                </div>
              )}

              <div className="p-3 rounded bg-white">
                <h4 className="font-semibold">Tips</h4>
                <ul className="text-sm list-disc ml-5 mt-2">
                  <li>Export frequently to back up updated lessons.</li>
                  <li>Use devices in shared spaces (library, community center) for group learning.</li>
                  <li>Keep lessons short, colorful, and interactive.</li>
                </ul>
              </div>
            </div>
          </aside>
        </main>

        <footer className="mt-6 text-center text-xs text-gray-600">Built to be free and simple • Save or export your lessons to keep them across devices.</footer>
      </div>

      <LessonView lesson={selected} onClose={() => setSelected(null)} />
    </div>
  );
}