import { useEffect, useState } from 'react';

import { fetchOmnlChainRegistry, type ChainRegistryResponse, type OmnlChainSummary } from '../../config/supported-chains';

import NasaIcon, { StatusIcon } from '../../components/icons/NasaIcon';



type Filter = 'all' | 'active' | 'primary' | 'l2';



export default function ChainMatrixPanel() {

  const [registry, setRegistry] = useState<ChainRegistryResponse | null>(null);

  const [filter, setFilter] = useState<Filter>('active');

  const [search, setSearch] = useState('');



  useEffect(() => {

    fetchOmnlChainRegistry().then(setRegistry);

  }, []);



  const chains = (registry?.chains ?? []).filter((c) => {

    if (filter === 'active' && c.status !== 'active') return false;

    if (filter === 'primary' && c.omnlRole !== 'settlement-hub' && c.omnlRole !== 'mirror-target') return false;

    if (filter === 'l2' && c.tier !== 'l2') return false;

    if (search) {

      const q = search.toLowerCase();

      return c.name.toLowerCase().includes(q) || String(c.chainId).includes(q) || c.nativeSymbol.toLowerCase().includes(q);

    }

    return true;

  });



  return (

    <section className="dash-card cb-card lg:col-span-2">

      <div className="flex flex-wrap items-center justify-between gap-3 mb-4">

        <div>

          <h2 className="dash-section-title flex items-center gap-2">

            <NasaIcon name="network" size={14} className="nasa-icon--telemetry" />

            128-chain network matrix

          </h2>

          <p className="text-xs text-[#7a9bb8] font-mono mt-1">

            {registry?.stats?.active ?? 0} active · {registry?.stats?.staged ?? 0} staged ·{' '}

            {registry?.stats?.reserved ?? 0} reserved · primary {registry?.primaryChainId ?? 138}

          </p>

        </div>

        <div className="flex items-center gap-2">

          <NasaIcon name="search" size={14} className="nasa-icon--telemetry" />

          <input

            type="search"

            placeholder="Search chain…"

            value={search}

            onChange={(e) => setSearch(e.target.value)}

            className="nasa-input !min-h-[36px] !w-48 text-sm"

          />

        </div>

      </div>



      <div className="flex gap-2 mb-4 flex-wrap">

        {(['all', 'active', 'primary', 'l2'] as Filter[]).map((f) => (

          <button

            key={f}

            type="button"

            onClick={() => setFilter(f)}

            className={`px-3 py-1 text-xs capitalize font-mono border ${

              filter === f

                ? 'border-[#00d4ff] text-[#00d4ff] bg-[#00d4ff]/10'

                : 'border-[#1e4a8a] text-[#7a9bb8]'

            }`}

          >

            {f}

          </button>

        ))}

      </div>



      <div className="overflow-x-auto max-h-[360px] overflow-y-auto">

        <table className="w-full text-sm nasa-table">

          <thead className="sticky top-0">

            <tr className="text-left">

              <th className="py-2 pr-3">ID</th>

              <th className="py-2 pr-3">Network</th>

              <th className="py-2 pr-3">Role</th>

              <th className="py-2 pr-3">Status</th>

              <th className="py-2 pr-3">Swap</th>

              <th className="py-2">Bridge</th>

            </tr>

          </thead>

          <tbody>

            {chains.map((c: OmnlChainSummary) => (

              <tr key={c.chainId}>

                <td className="py-1.5 pr-3 font-mono text-[#00d4ff]">{c.chainId}</td>

                <td className="py-1.5 pr-3 text-[#e8f4ff]">{c.name}</td>

                <td className="py-1.5 pr-3 text-xs text-[#7a9bb8]">{c.omnlRole}</td>

                <td className="py-1.5 pr-3">

                  <span

                    className={`text-xs px-1.5 py-0.5 font-mono uppercase ${

                      c.status === 'active'

                        ? 'text-[#3dff8a] border border-[#3dff8a]/35'

                        : c.status === 'staged'

                          ? 'text-[#ffb347] border border-[#ffb347]/35'

                          : 'text-[#7a9bb8] border border-[#7a9bb8]/35'

                    }`}

                  >

                    {c.status}

                  </span>

                </td>

                <td className="py-1.5 pr-3"><StatusIcon ok={!!c.settlement?.swapEnabled} /></td>

                <td className="py-1.5"><StatusIcon ok={!!c.settlement?.bridgeEnabled} /></td>

              </tr>

            ))}

          </tbody>

        </table>

      </div>

    </section>

  );

}

