"use client";

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

export default function FiberSettingsPage() {
  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);

  // canonical detail href builder (no modal yet)
  const detailHref = (id: string | number) => `/settings/fiber/${id}`;

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

  useEffect(() => {
    // Include owner fields now that settings have an M2O "owner"
    const url =
    `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber` +
    `?fields=` +
    [
      "submission_id",
      "setting_title",
      "uploader",
      "owner.display_name",
      "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) => res.json())
    .then((data) => {
      setSettings(data?.data || []);
      setLoading(false);
    })
    .catch(() => setLoading(false));
  }, []);

  const ownerName = (row: any) => {
    const o = row?.owner || {};
    return (
      o.display_name ||
      [o.first_name, o.last_name].filter(Boolean).join(" ") ||
      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,
        entry.uploader,
        ownerName(entry),
                           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 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 lens = cur.lens?.field_size;
    if (!lens) return acc;
    acc[lens] = (acc[lens] || 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">Fiber 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 fiber laser 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 fiber laser settings. Use the search to narrow
      results. Click any setting title to view its 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>{" "}
        {/* keep uploader for now while claims/owners migrate */}
        <span className="text-muted-foreground">
        by {ownerName(s) !== "—" ? ownerName(s) : 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 fiber 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) => (
          <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(ownerName(setting)) }}
          />

          <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(setting.lens?.field_size || "—"),
          }}
          />
          </tr>
        ))}
        </tbody>
        </table>
        </div>
      )}
      </div>
  );
}