// app/lasers/page.tsx
'use client';

import { useEffect, useState, useMemo } from 'react';
import Link from 'next/link';

type LaserRow = {
  id: string | number;
  submission_id?: string | number;
  make?: string;
  model?: string;
  w?: string;
  mj?: string;
  nm?: string;
  kHz?: string;
  ns?: string;
  v?: string;
  op?: { label?: string; name?: string } | string | null;
};

export default function LaserSourcesPage() {
  const [sources, setSources] = useState<LaserRow[]>([]);
  const [query, setQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState('');
  const [wavelengthFilters, setWavelengthFilters] = useState<Record<string, number | null>>({});
  const [sortKey, setSortKey] = useState<keyof LaserRow | 'op' | 'model'>('model');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');

  const API = (process.env.NEXT_PUBLIC_API_BASE_URL || '').replace(/\/$/, '');

  // canonical href builder (prefers submission_id if present)
  const detailHref = (row: LaserRow) => `/lasers/${row.submission_id ?? row.id}`;

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

  useEffect(() => {
    fetch(`${API}/items/laser_source?limit=-1&fields=*`, { cache: 'no-store' })
    .then((res) => res.json())
    .then((data) => setSources(data?.data || []))
    .catch(() => setSources([]));
  }, [API]);

  const highlightMatch = (text?: string, q?: string) => {
    const safeText = String(text ?? '');
    const query = String(q ?? '');
    if (!query) return safeText;
    const parts = safeText.split(new RegExp(`(${query})`, 'gi'));
    return parts.map((part, i) =>
    part.toLowerCase() === query.toLowerCase() ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>
    );
  };

  const opText = (row: LaserRow) => {
    const v = row.op as any;
    if (v && typeof v === 'object') return String(v.label ?? v.name ?? '—');
    return v == null || v === '' ? '—' : String(v);
  };

  const filtered = useMemo(() => {
    const q = debouncedQuery.toLowerCase();
    return sources.filter((src) => {
      const matchesQuery = [src.make, src.model]
      .filter(Boolean)
      .some((field) => String(field).toLowerCase().includes(q));
      return matchesQuery;
    });
  }, [sources, debouncedQuery]);

  const grouped = useMemo<Record<string, LaserRow[]>>(
    () =>
    filtered.reduce((acc, src) => {
      const key = src.make || 'Unknown Make';
      (acc[key] = acc[key] || []).push(src);
      return acc;
    }, {} as Record<string, LaserRow[]>),
    [filtered]
  );

  const toggleFilter = (make: string, value: number) => {
    setWavelengthFilters((prev) => ({
      ...prev,
      [make]: prev[make] === value ? null : value,
    }));
  };

  const toggleSort = (key: keyof LaserRow | 'op' | 'model') => {
    setSortKey(key);
    setSortOrder((prev) => (prev === 'asc' ? 'desc' : 'asc'));
  };

  const getSortableValue = (row: LaserRow, key: keyof LaserRow | 'op' | 'model') => {
    const val = key === 'op' ? opText(row) : (row as any)[key];
    if (val == null) return '';
    const k = String(key).toLowerCase();

    if (k === 'w') return parseFloat(String(val).replace(/[^\d.]/g, '')) || 0;
    if (['mj', 'nm', 'khz', 'ns', 'v'].includes(k)) return parseFloat(String(val)) || 0;

    return String(val).toLowerCase();
  };

  const sortArrow = (key: keyof LaserRow | 'op' | 'model') =>
  sortKey === key ? (sortOrder === 'asc' ? ' ▲' : ' ▼') : '';

  const summaryStats = useMemo(() => {
    const makes = new Set<string>();
    const nmCounts: Record<string, number> = {};
    for (const src of sources) {
      if (src.make) makes.add(src.make);
      if (src.nm) {
        const nm = String(src.nm);
        nmCounts[nm] = (nmCounts[nm] || 0) + 1;
      }
    }
    const mostCommonNm =
    Object.entries(nmCounts).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || '—';
    return { total: sources.length, uniqueMakes: makes.size, commonNm: mostCommonNm };
  }, [sources]);

  return (
    <div className="p-6 max-w-7xl mx-auto">
    <div className="grid gap-4 md:grid-cols-3 mb-6">
    <div className="card p-4">
    <h2 className="text-lg font-semibold mb-2">Database Summary</h2>
    <p>Total Sources: {summaryStats.total}</p>
    <p>Unique Makes: {summaryStats.uniqueMakes}</p>
    <p>Most Common Wavelength: {summaryStats.commonNm}</p>
    </div>

    <div className="card p-4">
    <h2 className="text-lg font-semibold mb-2">Recent Additions</h2>
    <ul className="text-sm list-disc pl-4">
    {[...sources]
      .filter((s) => s.submission_id != null)
      .sort((a, b) => Number(b.submission_id) - Number(a.submission_id))
      .slice(0, 5)
      .map((src) => (
        <li key={src.id}>
        <Link className="text-accent underline" href={detailHref(src)}>
        {src.make} {src.model}
        </Link>
        </li>
      ))}
      </ul>
      </div>

      <div className="card p-4">
      <h2 className="text-lg font-semibold mb-2">Feedback</h2>
      <p className="text-sm mb-2">See something wrong or want to suggest an improvement?</p>
      <Link href="#" className="btn-primary inline-block">
      Submit Feedback
      </Link>
      </div>
      </div>

      <div className="mb-6 card bg-card text-card-foreground">
      <h1 className="text-3xl font-bold mb-2">Laser Source Database</h1>
      <input
      type="search"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search by make or model..."
      className="w-full max-w-md mb-4 dark:bg-background border border-border rounded-md p-2"
      />
      <p className="text-sm text-muted-foreground">
      Browse laser source specifications collected from community-submitted and verified sources.
      </p>
      </div>

      {Object.entries(grouped).length === 0 ? (
        <p className="text-muted">No laser sources found.</p>
      ) : (
        <div className="space-y-6">
        {Object.entries(grouped).map(([make, items]) => {
          const filteredItems =
          wavelengthFilters[make] != null
          ? items.filter((item) => Number(item.nm) === wavelengthFilters[make])
          : items;

          const sortedItems = [...filteredItems].sort((a, b) => {
            const aVal = getSortableValue(a, sortKey);
            const bVal = getSortableValue(b, sortKey);
            if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
            if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
            return 0;
          });

          return (
            <details key={make} className="border border-border rounded-md">
            <summary className="bg-card px-4 py-2 font-semibold cursor-pointer flex justify-between items-center">
            <span>
            {make} <span className="text-sm text-muted">({filteredItems.length})</span>
            </span>
            <div className="space-x-2">
            {[10600, 1064, 455, 355].map((w) => (
              <button
              key={w}
              onClick={(e) => {
                e.stopPropagation();
                toggleFilter(make, w);
              }}
              className={`px-2 py-1 text-xs rounded-md border ${
                wavelengthFilters[make] === w ? 'bg-accent text-white' : 'bg-muted text-muted-foreground'
              }`}
              >
              {w}
              </button>
            ))}
            </div>
            </summary>

            <div className="overflow-x-auto">
            <table className="w-full min-w-[900px] text-sm whitespace-nowrap">
            <thead>
            <tr>
            <th className="px-2 py-2 text-left">Make</th>
            <th className="px-2 py-2 text-left w-64">
            <button onClick={() => toggleSort('model')}>Model{sortArrow('model')}</button>
            </th>
            <th className="px-2 py-2 text-left">
            <button onClick={() => toggleSort('w')}>W{sortArrow('w')}</button>
            </th>
            <th className="px-2 py-2 text-left">
            <button onClick={() => toggleSort('mj')}>mJ{sortArrow('mj')}</button>
            </th>
            <th className="px-2 py-2 text-left">
            <button onClick={() => toggleSort('op')}>OP{sortArrow('op')}</button>
            </th>
            <th className="px-2 py-2 text-left">
            <button onClick={() => toggleSort('nm')}>nm{sortArrow('nm')}</button>
            </th>
            <th className="px-2 py-2 text-left">
            <button onClick={() => toggleSort('kHz')}>kHz{sortArrow('kHz')}</button>
            </th>
            <th className="px-2 py-2 text-left">
            <button onClick={() => toggleSort('ns')}>ns{sortArrow('ns')}</button>
            </th>
            <th className="px-2 py-2 text-left">
            <button onClick={() => toggleSort('v')}>V{sortArrow('v')}</button>
            </th>
            </tr>
            </thead>
            <tbody>
            {sortedItems.map((src) => (
              <tr key={src.id} className="border-t border-border">
              <td className="px-2 py-2 truncate max-w-[10rem]">
              {highlightMatch(src.make || '—', debouncedQuery)}
              </td>
              <td className="px-2 py-2 truncate max-w-[16rem]">
              <Link href={detailHref(src)} className="text-accent underline">
              {highlightMatch(src.model || '—', debouncedQuery)}
              </Link>
              </td>
              <td className="px-2 py-2 whitespace-nowrap">{src.w || '—'}</td>
              <td className="px-2 py-2 whitespace-nowrap">{src.mj || '—'}</td>
              <td className="px-2 py-2 whitespace-nowrap">{opText(src)}</td>
              <td className="px-2 py-2 whitespace-nowrap">{src.nm || '—'}</td>
              <td className="px-2 py-2 whitespace-nowrap">{src.kHz || '—'}</td>
              <td className="px-2 py-2 whitespace-nowrap">{src.ns || '—'}</td>
              <td className="px-2 py-2 whitespace-nowrap">{src.v || '—'}</td>
              </tr>
            ))}
            </tbody>
            </table>
            </div>
            </details>
          );
        })}
        </div>
      )}
      </div>
  );
}