"use client";
import { useState } from "react";
import { Panel, EmptyState } from "@/components/shared/panel";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { StatusBadge } from "@/components/shared/status-badge";
import { dateTime } from "@/lib/format";
import type { OcppLog } from "./logs/mock-data";
export function EventsView({ data }: { data: OcppLog[] }) {
  const [query, setQuery] = useState("");
  const [notice, setNotice] = useState("");
  const rows = data.filter((row) =>
    row.action.toLowerCase().includes(query.toLowerCase()),
  );
  return (
    <Panel
      title="OCPP Events"
      actions={
        <div className="flex gap-2">
          <Input
            placeholder="Search events..."
            aria-label="Search events"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
          <Button
            variant="outline"
            onClick={() => setNotice("Mock events refreshed.")}
          >
            Refresh
          </Button>
        </div>
      }
    >
      <div className="overflow-x-auto">
        <table className="data-table min-w-[950px]">
          <thead>
            <tr>
              {[
                "Type",
                "Status",
                "Connector",
                "Data",
                "Response",
                "Created At",
              ].map((label) => (
                <th key={label}>{label}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row.id}>
                <td>{row.action}</td>
                <td>
                  <StatusBadge tone="success">Completed</StatusBadge>
                </td>
                <td>#1</td>
                <td>
                  <details>
                    <summary className="text-primary">View data</summary>
                    <pre className="mt-2 text-xs">
                      {JSON.stringify(row.request, null, 2)}
                    </pre>
                  </details>
                </td>
                <td>
                  <details>
                    <summary className="text-primary">View response</summary>
                    <pre className="mt-2 text-xs">
                      {JSON.stringify(row.response, null, 2)}
                    </pre>
                  </details>
                </td>
                <td className="whitespace-nowrap">{dateTime(row.timestamp)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {!rows.length && (
          <EmptyState title="No events found for the current filters." />
        )}
      </div>
      {notice && (
        <p role="status" className="mt-4 text-muted-foreground">
          {notice}
        </p>
      )}
    </Panel>
  );
}