// pages/Meldungen.jsx
import React, { useState } from "react";
import Layout from "../components/Layout";

function Meldungen() {
  const [rowsPerPage, setRowsPerPage] = useState(25);
  const [filter, setFilter] = useState("");
  const [selectedMonth, setSelectedMonth] = useState("01");
  const [selectedYear, setSelectedYear] = useState("23");
  const [selectedDay, setSelectedDay] = useState("");

  // Platzhalter für Meldungen
  const messages = Array.from({ length: 50 }, (_, i) => ({
    date: `2023-01-${String(i + 1).padStart(2, "0")}`,
    message: `Meldung ${i + 1}`,
  }));

  const filteredMessages = messages.filter((msg) => {
    const dayMatch = selectedDay
      ? msg.date.split("-")[2] === selectedDay.padStart(2, "0")
      : true;
    const monthMatch = msg.date.split("-")[1] === selectedMonth;
    const yearMatch = msg.date.split("-")[0].substring(2) === selectedYear;
    const filterMatch = msg.message
      .toLowerCase()
      .includes(filter.toLowerCase());
    return dayMatch && monthMatch && yearMatch && filterMatch;
  });

  return (
    <Layout>
      <div className="flex flex-col h-full">
        {/* Filterleiste */}
        <div className="flex justify-between items-center bg-blue-500 p-4 text-white rounded-t">
          <div className="flex items-center space-x-4">
            <span>Interner Meldungsspeicher</span>
            <select
              value={selectedMonth}
              onChange={(e) => setSelectedMonth(e.target.value)}
              className="bg-white text-black p-1 rounded"
            >
              <option value="01">Januar</option>
              <option value="02">Februar</option>
              <option value="03">März</option>
              <option value="04">April</option>
              <option value="05">Mai</option>
              <option value="06">Juni</option>
              <option value="07">Juli</option>
              <option value="08">August</option>
              <option value="09">September</option>
              <option value="10">Oktober</option>
              <option value="11">November</option>
              <option value="12">Dezember</option>
            </select>
            <select
              value={selectedYear}
              onChange={(e) => setSelectedYear(e.target.value)}
              className="bg-white text-black p-1 rounded"
            >
              <option value="22">2022</option>
              <option value="23">2023</option>
              <option value="24">2024</option>
              <option value="25">2025</option>
              <option value="26">2026</option>
            </select>
            <input
              type="number"
              value={selectedDay}
              onChange={(e) => setSelectedDay(e.target.value)}
              min="1"
              max="31"
              placeholder="Tag"
              className="bg-white text-black p-1 rounded"
            />
          </div>
          <div className="flex items-center space-x-4">
            <input
              type="text"
              value={filter}
              onChange={(e) => setFilter(e.target.value)}
              placeholder="Filter"
              className="bg-white text-black p-1 rounded"
            />
            <select
              value={rowsPerPage}
              onChange={(e) => setRowsPerPage(e.target.value)}
              className="bg-white text-black p-1 rounded"
            >
              <option value="5">5</option>
              <option value="10">10</option>
              <option value="25">25</option>
              <option value="50">50</option>
            </select>
          </div>
        </div>

        {/* Meldungen Tabelle */}
        <div className="flex-grow overflow-auto mt-4">
          <table className="min-w-full bg-white border border-gray-300">
            <thead>
              <tr className="bg-gray-200 text-gray-600 text-sm leading-normal">
                <th className="py-3 px-4 text-left">Datum</th>
                <th className="py-3 px-4 text-left">Meldung</th>
              </tr>
            </thead>
            <tbody className="text-gray-600 text-sm">
              {filteredMessages.slice(0, rowsPerPage).map((msg, index) => (
                <tr key={index} className="border-b border-gray-200">
                  <td className="py-3 px-4">{msg.date}</td>
                  <td className="py-3 px-4">{msg.message}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        <div className="flex justify-center mt-4">
          <ul className="flex space-x-2">
            {Array.from(
              { length: Math.ceil(filteredMessages.length / rowsPerPage) },
              (_, i) => (
                <li
                  key={i}
                  className="cursor-pointer bg-blue-500 text-white p-2 rounded"
                >
                  {i + 1}
                </li>
              )
            )}
          </ul>
        </div>
      </div>
    </Layout>
  );
}

export default Meldungen;
