"use client";

import { useState } from "react";
import { useDashboardData } from "../context/DataContext";
import { AggregateHeader } from "../components/AggregateHeader";
import { ServiceCard } from "../components/ServiceCard";
import { ThemeToggle } from "../components/ThemeToggle";

export default function OverviewPage() {
  const data = useDashboardData();
  const [search, setSearch] = useState("");

  const filtered = data.services.filter((s) =>
    s.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <header className="flex items-center justify-between px-6 py-4 bg-surface border-b border-border">
        <h1 className="text-xl font-semibold text-text-primary">
          OWS Dead Endpoints
        </h1>
        <div className="flex items-center gap-4">
          <span className="text-sm text-text-secondary">
            Environment: {data.env} &middot; Generated{" "}
            {new Date(data.generated_at).toLocaleDateString()}
          </span>
          <ThemeToggle />
        </div>
      </header>

      <div className="px-6 py-6 space-y-8">
        <AggregateHeader data={data} />

        <section>
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold text-text-primary">
              Services
            </h2>
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search services…"
              className="w-64 rounded-md border border-border bg-surface px-3 py-1.5 text-sm text-text-primary placeholder:text-text-secondary focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
            />
          </div>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {filtered.map((service) => (
              <ServiceCard key={service.name} service={service} />
            ))}
          </div>
          {search && filtered.length === 0 && (
            <p className="mt-4 text-center text-sm text-text-secondary">
              No services match &ldquo;{search}&rdquo;
            </p>
          )}
        </section>
      </div>
    </div>
  );
}