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

/* =====================================================
   PARROCCHIA SAN NICOLA - PORTALE DIGITALE (FIX TSX)
   NO PHP - REACT LOCAL STORAGE CMS
   ===================================================== */

export default function ParrocchiaSanNicola() {
  const users = {
    admin: "1234",
    parroco: "messa",
  };

  const [user, setUser] = useState(null);
  const [login, setLogin] = useState({ u: "", p: "" });

  const [avvisi, setAvvisi] = useState([]);
  const [eventi, setEventi] = useState([]);
  const [newsletter, setNewsletter] = useState([]);
  const [prenotazioni, setPrenotazioni] = useState([]);

  const [formAvviso, setFormAvviso] = useState("");
  const [formEvento, setFormEvento] = useState({ titolo: "", descrizione: "" });
  const [email, setEmail] = useState("");
  const [prenota, setPrenota] = useState({ nome: "", evento: "" });

  useEffect(() => {
    setAvvisi(JSON.parse(localStorage.getItem("avvisi") || "[]"));
    setEventi(JSON.parse(localStorage.getItem("eventi") || "[]"));
    setNewsletter(JSON.parse(localStorage.getItem("newsletter") || "[]"));
    setPrenotazioni(JSON.parse(localStorage.getItem("prenotazioni") || "[]"));
  }, []);

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

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

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

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

  function doLogin() {
    if (users[login.u] && users[login.u] === login.p) {
      setUser(login.u);
    } else {
      alert("Login errato");
    }
  }

  function addAvviso() {
    if (!formAvviso) return;
    setAvvisi([{ text: formAvviso }, ...avvisi]);
    setFormAvviso("");
  }

  function addEvento() {
    if (!formEvento.titolo) return;
    setEventi([{ ...formEvento }, ...eventi]);
    setFormEvento({ titolo: "", descrizione: "" });
  }

  function addNewsletter() {
    if (!email) return;
    setNewsletter([{ email }, ...newsletter]);
    setEmail("");
  }

  function addPrenotazione() {
    if (!prenota.nome) return;
    setPrenotazioni([{ ...prenota }, ...prenotazioni]);
    setPrenota({ nome: "", evento: "" });
  }

  function removeAvviso(i) {
    setAvvisi(avvisi.filter((_, idx) => idx !== i));
  }

  function runTests() {
    console.assert(Array.isArray(avvisi), "avvisi array OK");
    console.assert(users.admin === "1234", "login OK");
    console.log("TEST OK");
  }

  if (!user) {
    return (
      <div style={{ padding: 20 }}>
        <h2>Parrocchia San Nicola Login</h2>
        <input placeholder="user" onChange={(e)=>setLogin({...login,u:e.target.value})}/>
        <input type="password" placeholder="pass" onChange={(e)=>setLogin({...login,p:e.target.value})}/>
        <button onClick={doLogin}>Login</button>
      </div>
    );
  }

  return (
    <div style={{ padding: 20, fontFamily: "Arial" }}>
      <h1>Parrocchia San Nicola</h1>
      <button onClick={()=>setUser(null)}>Logout</button>
      <button onClick={runTests}>Run Tests</button>

      <h2>Avvisi</h2>
      <input value={formAvviso} onChange={(e)=>setFormAvviso(e.target.value)} />
      <button onClick={addAvviso}>Aggiungi</button>
      {avvisi.map((a,i)=>(
        <div key={i}>
          {a.text}
          <button onClick={()=>removeAvviso(i)}>Elimina</button>
        </div>
      ))}

      <h2>Eventi</h2>
      <input placeholder="titolo" value={formEvento.titolo} onChange={(e)=>setFormEvento({...formEvento,titolo:e.target.value})}/>
      <input placeholder="descrizione" value={formEvento.descrizione} onChange={(e)=>setFormEvento({...formEvento,descrizione:e.target.value})}/>
      <button onClick={addEvento}>Aggiungi</button>

      <h2>Newsletter</h2>
      <input value={email} onChange={(e)=>setEmail(e.target.value)}/>
      <button onClick={addNewsletter}>Iscriviti</button>

      <h2>Prenotazioni</h2>
      <input placeholder="nome" value={prenota.nome} onChange={(e)=>setPrenota({...prenota,nome:e.target.value})}/>
      <input placeholder="evento" value={prenota.evento} onChange={(e)=>setPrenota({...prenota,evento:e.target.value})}/>
      <button onClick={addPrenotazione}>Prenota</button>
    </div>
  );
}