"use client";

import { useEffect, useState, useMemo } from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";
import Image from "next/image";

type Owner = {
  id?: string | number;
  first_name?: string | null;
  last_name?: string | null;
  email?: string | null;
};

export default function UVSettingsPage() {
  const searchParams = useSearchParams();
  const initialQuery = searchParams.get("query") || "";

  const [query, setQuery] = useState(initialQuery);
  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
  const [settings, setSettings] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  const detailHref = (id: string | number) => `/settings/uv/${id}`;

  useEffect(() => {
    const t = setTimeout(() => setDebouncedQuery(query), 300);
    return () => clearTimeout(t);
  }, [query]);

  useEffect(() => {
    const url =
    `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_uv` +
    `?fields=` +
    [
      "submission_id",
      "setting_title",
      "uploader",
      // owner (M2O) – minimal, safe fields
      "owner.id",
      "owner.first_name",
      "owner.last_name",
      "owner.email",
      "photo.id",
      "photo.title",
      "mat.name",
      "mat_coat.name",
      "source.model",
      "lens.field_size",
    ].join(",") +
    `&limit=-1`;

    fetch(url, { cache: "no-store" })
    .then((res) => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.json();
    })
    .then((data) => setSettings(data?.data || []))
    .catch((e) => {
      console.error("UV settings fetch failed:", e);
      setSettings([]);
    })
    .finally(() => setLoading(false));
  }, []);

  const ownerLabel = (o?: Owner) => {
    if (!o) return "—";
    const name = [o.first_name, o.last_name].filter(Boolean).join(" ").trim();
    return name || o.email || "—";
  };

  const highlight = (text?: string) => {
    if (!debouncedQuery) return text || "";
    const regex = new RegExp(`(${debouncedQuery})`, "gi");
    return (text || "").replace(regex, "<mark>$1</mark>");
  };

  const filtered = useMemo(() => {
    const q = debouncedQuery.toLowerCase();
    return settings.filter((entry) => {
      const fieldsToSearch = [
        entry.setting_title,
        ownerLabel(entry.owner),
                           entry.uploader,
                           entry.mat?.name,
                           entry.mat_coat?.name,
                           entry.source?.model,
                           entry.lens?.field_size,
      ];
      return fieldsToSearch
      .filter(Boolean)
      .some((field: string) => String(field).toLowerCase().includes(q));
    });
  }, [settings, debouncedQuery]);

  const total = settings.length;
  const uniqueMaterials = new Set(settings.map((s) => s.mat?.name).filter(Boolean)).size;

  const lensCounts = settings.reduce((acc: Record<string, number>, cur) => {
    const v = cur.lens?.field_size;
    if (!v) return acc;
    acc[v] = (acc[v] || 0) + 1;
    return acc;
  }, {});
  const mostCommonLens =
  Object.entries(lensCounts).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] ||
  "—";

const srcCounts = settings.reduce((acc: Record<string, number>, cur) => {
  const v = cur.source?.model;
  if (!v) return acc;
  acc[v] = (acc[v] || 0) + 1;
  return acc;
}, {});
const mostCommonSource =
Object.entries(srcCounts).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] ||
"—";

const recent = [...settings]
.sort((a, b) => Number(b.submission_id) - Number(a.submission_id))
.slice(0, 5);

return (
  <div className="p-6 max-w-7xl mx-auto">
  <style jsx global>{`
    mark {
      background: #ffde59;
      color: #242424;
      padding: 0 2px;
      border-radius: 2px;
    }
    `}</style>

    {/* Header / Search */}
    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
    <div className="card bg-card text-card-foreground p-4">
    <h1 className="text-2xl font-bold mb-2">UV Laser Settings</h1>
    <input
    type="search"
    value={query}
    onChange={(e) => setQuery(e.target.value)}
    placeholder="Search by material, owner, uploader, model, lens…"
    className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
    />
    <p className="text-sm text-muted-foreground">
    View and explore detailed UV laser settings with context.
    </p>
    </div>

    {/* How to use */}
    <div className="card bg-card text-card-foreground p-4">
    <h2 className="text-lg font-semibold mb-2">How to Use</h2>
    <p className="text-sm">
    Browse community UV settings. Use search to narrow results. Click a row to view full configuration,
    notes, and photos.
    </p>
    </div>

    {/* Stats */}
    <div className="card bg-card text-card-foreground p-4">
    <h2 className="text-lg font-semibold mb-2">Stats Summary</h2>
    <ul className="text-sm space-y-1">
    <li>Total Settings: {total}</li>
    <li>Unique Materials: {uniqueMaterials}</li>
    <li>Most Common Lens: {mostCommonLens}</li>
    <li>Most Used Source: {mostCommonSource}</li>
    </ul>
    </div>

    {/* Recently Added */}
    <div className="card bg-card text-card-foreground p-4 xl:col-span-3">
    <h2 className="text-lg font-semibold mb-2">Recently Added</h2>
    <ul className="text-sm space-y-1">
    {recent.map((s) => (
      <li key={s.submission_id}>
      <Link href={detailHref(s.submission_id)} className="underline text-accent">
      {s.setting_title || "Untitled"}
      </Link>{" "}
      <span className="text-muted-foreground">
      by {ownerLabel(s.owner)}{s.uploader ? ` (uploader: ${s.uploader})` : ""}
      </span>
      </li>
    ))}
    </ul>
    </div>
    </div>

    {/* Table */}
    {loading ? (
      <p className="text-muted">Loading settings...</p>
    ) : filtered.length === 0 ? (
      <p className="text-muted">No UV settings found.</p>
    ) : (
      <div className="overflow-x-auto">
      <table className="w-full text-sm">
      <thead>
      <tr>
      <th className="px-2 py-2 text-left">Photo</th>
      <th className="px-2 py-2 text-left">Title</th>
      <th className="px-2 py-2 text-left">Owner</th>
      <th className="px-2 py-2 text-left">Uploader</th>
      <th className="px-2 py-2 text-left">Material</th>
      <th className="px-2 py-2 text-left">Coating</th>
      <th className="px-2 py-2 text-left">Source</th>
      <th className="px-2 py-2 text-left">Lens</th>
      </tr>
      </thead>
      <tbody>
      {filtered.map((s) => (
        <tr key={s.submission_id} className="border-t border-border">
        <td className="px-2 py-2">
        {s.photo?.id ? (
          <Image
          src={`https://forms.lasereverything.net/assets/${s.photo.id}`}
          alt={s.photo.title || "laser preview"}
          width={64}
          height={64}
          className="rounded-md"
          />
        ) : (
          "—"
        )}
        </td>
        <td className="px-2 py-2 whitespace-nowrap">
        <Link
        href={detailHref(s.submission_id)}
        className="text-accent underline"
        dangerouslySetInnerHTML={{ __html: highlight(s.setting_title || "—") }}
        />
        </td>
        <td
        className="px-2 py-2 whitespace-nowrap"
        dangerouslySetInnerHTML={{ __html: highlight(ownerLabel(s.owner)) }}
        />
        <td
        className="px-2 py-2 whitespace-nowrap"
        dangerouslySetInnerHTML={{ __html: highlight(s.uploader || "—") }}
        />
        <td
        className="px-2 py-2 whitespace-nowrap"
        dangerouslySetInnerHTML={{ __html: highlight(s.mat?.name || "—") }}
        />
        <td
        className="px-2 py-2 whitespace-nowrap"
        dangerouslySetInnerHTML={{ __html: highlight(s.mat_coat?.name || "—") }}
        />
        <td
        className="px-2 py-2 whitespace-nowrap"
        dangerouslySetInnerHTML={{ __html: highlight(s.source?.model || "—") }}
        />
        <td
        className="px-2 py-2 whitespace-nowrap"
        dangerouslySetInnerHTML={{ __html: highlight(s.lens?.field_size || "—") }}
        />
        </tr>
      ))}
      </tbody>
      </table>
      </div>
    )}
    </div>
);
}