"use client";

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

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.display_name",
      "owner.first_name",
      "owner.last_name",
      "owner.username",
      "owner.email",
      "photo.id",
      "photo.title",
      "mat.name",
      "mat_coat.name",
      "source.model",
      "lens.field_size",
      "lens.name",
    ].join(",") +
    "&limit=-1";

    fetch(url, { cache: "no-store" })
    .then((res) => res.json())
    .then((data) => {
      setSettings(data?.data || []);
      setLoading(false);
    })
    .catch(() => setLoading(false));
  }, []);

  const ownerName = (owner?: any) => {
    if (!owner) return "—";
    return (
      owner.display_name ||
      [owner.first_name, owner.last_name].filter(Boolean).join(" ").trim() ||
      owner.username ||
      owner.email ||
      "—"
    );
  };

  const lensLabel = (row: any) => row?.lens?.field_size ?? row?.lens?.name ?? "—";

  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,
        ownerName(entry.owner),
                           entry.uploader,
                           entry.mat?.name,
                           entry.mat_coat?.name,
                           entry.source?.model,
                           lensLabel(entry),
      ];
      return fieldsToSearch
      .filter(Boolean)
      .some((field: string) => String(field).toLowerCase().includes(q));
    });
  }, [settings, debouncedQuery]);

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

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

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

const recentSettings = [...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, etc…"
    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 settings with context.
    </p>
    </div>

    <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 laser settings. Use search to narrow results. Click any
    title to view full configuration, notes, and photos.
    </p>
    </div>

    <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: {totalSettings}</li>
    <li>Unique Materials: {uniqueMaterials}</li>
    <li>Most Common Lens: {mostCommonLens}</li>
    <li>Most Used Source: {mostCommonSource}</li>
    </ul>
    </div>

    <div className="card bg-card text-card-foreground p-4">
    <h2 className="text-lg font-semibold mb-2">Recently Added</h2>
    <ul className="text-sm space-y-1">
    {recentSettings.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 {ownerName(s.owner) !== "—" ? ownerName(s.owner) : s.uploader || "—"}
      </span>
      </li>
    ))}
    </ul>
    </div>

    <div className="card bg-card text-card-foreground p-4">
    <h2 className="text-lg font-semibold mb-2">Resources</h2>
    <ul className="text-sm space-y-1">
    <li>
    <a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">
    Material Safety Guide
    </a>
    </li>
    <li>
    <a
    href="https://lasereverything.net/scripts/laspwrconvert.php"
    target="_blank"
    rel="noopener noreferrer"
    className="underline text-accent"
    >
    Laser Parameter Calculator
    </a>
    </li>
    <li>
    <a
    href="https://jptoe.com/downloads"
    target="_blank"
    rel="noopener noreferrer"
    className="underline text-accent"
    >
    JPT Datasheets
    </a>
    </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((setting) => {
        const ownerText = ownerName(setting.owner);
        return (
          <tr key={setting.submission_id} className="border-t border-border">
          <td className="px-2 py-2">
          {setting.photo?.id ? (
            <Image
            src={`https://forms.lasereverything.net/assets/${setting.photo.id}`}
            alt={setting.photo.title || "laser preview"}
            width={64}
            height={64}
            className="rounded-md"
            />
          ) : (
            "—"
          )}
          </td>
          <td className="px-2 py-2 whitespace-nowrap">
          <Link
          href={detailHref(setting.submission_id)}
          className="text-accent underline"
          dangerouslySetInnerHTML={{
            __html: highlight(setting.setting_title || "—"),
          }}
          />
          </td>
          <td
          className="px-2 py-2 whitespace-nowrap"
          dangerouslySetInnerHTML={{ __html: highlight(ownerText) }}
          />
          <td
          className="px-2 py-2 whitespace-nowrap"
          dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }}
          />
          <td
          className="px-2 py-2 whitespace-nowrap"
          dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }}
          />
          <td
          className="px-2 py-2 whitespace-nowrap"
          dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }}
          />
          <td
          className="px-2 py-2 whitespace-nowrap"
          dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }}
          />
          <td
          className="px-2 py-2 whitespace-nowrap"
          dangerouslySetInnerHTML={{ __html: highlight(lensLabel(setting)) }}
          />
          </tr>
        );
      })}
      </tbody>
      </table>
      </div>
    )}
    </div>
);
}