"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 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 timer = setTimeout(() => setDebouncedQuery(query), 300);
    return () => clearTimeout(timer);
  }, [query]);

  useEffect(() => {
    fetch(
      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber?fields=submission_id,setting_title,uploader,photo.id,photo.title,mat.name,mat_coat.name,source.model,lens.field_size&limit=-1`
    )
    .then((res) => res.json())
    .then((data) => {
      setSettings(data.data || []);
      setLoading(false);
    })
    .catch(() => setLoading(false));
  }, []);

  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,
        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) => b.submission_id - 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>

      <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 settings by material, uploader, etc..."
      className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
      />
      <p className="text-sm text-muted-foreground mb-2">
      View and explore detailed fiber laser settings with context.
      </p>
      <a
      href="/"
      className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
      >
      ← Back to Main Menu
      </a>
      </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 real-world fiber laser settings from the community. Use the search to narrow results. Click any setting to view its full configuration, notes, and photos. Click any linked term to find related settings.
      </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>{" "}
        by {s.uploader || "—"}
        </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 className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
      <div>
      <h2 className="text-md font-semibold mb-2">Submit a Setting</h2>
      <p className="text-sm text-muted-foreground mb-2">
      Have a reliable fiber setting to share? Contribute to the community database.
      </p>
      </div>
      <Link
      href="/submit/settings?target=settings_fiber"
      className="bg-accent text-background text-sm px-4 py-2 rounded hover:opacity-90 transition"
      >
      Submit a Setting
      </Link>
      </div>
      </div>

      {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">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(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>
  );
}