"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 CO2GantrySettingsPage() {
  const searchParams = useSearchParams();
  const initialQuery = searchParams.get("query") || "";

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

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

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

  const highlight = (text) => {
    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?.name,
      ];
      return fieldsToSearch.filter(Boolean).some((field) =>
        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, cur) => {
    const lens = cur.lens?.name;
    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, 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">CO₂ Gantry 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">
            Explore curated CO₂ gantry settings. Search by material, uploader, or source.
          </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 CO₂ gantry settings. Search or filter results, and click any setting for full configuration and notes.
          </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={`/co2gantry-settings/${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">
              Got a dialed-in gantry setting? Contribute it to the database.
            </p>
          </div>
          <button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
            Coming Soon
          </button>
        </div>
      </div>

      {loading ? (
        <p className="text-muted">Loading settings...</p>
      ) : filtered.length === 0 ? (
        <p className="text-muted">No gantry 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?.filename_disk ? (
                      <Image
                        src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
                        alt={setting.photo.title || "laser preview"}
                        width={64}
                        height={64}
                        className="rounded-md"
                      />
                    ) : (
                      "—"
                    )}
                  </td>
                  <td className="px-2 py-2 whitespace-nowrap">
                    <Link
                      href={`/co2gantry-settings/${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?.name || "—") }} />
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}