Nye-TeeOff/kode_eksport_1/frontend_src_app_FacilitySearch_tsx.txt

"use client";
/**
 * TEE OFF SYSTEM INSTRUCTIONS - FACILITY CARDS v3.4 (STABLE)
 * ---------------------------------------------------------------------------
 * REGEL 1: Status-badge SKAL vises øverst til venstre. Bruk STATUS_MAP for tekst.
 * REGEL 2: DATA-PARSING: Bruk parseJson() for 'course_statuses', 'amenities' og 'nsg_data' 
 *          fordi API-et ofte returnerer disse som strenger.
 * REGEL 3: Avstand-pillen skal ha fargen #2d3319 (Mørk oliven) med hvit tekst.
 * REGEL 4: NSG (Blå 'N') og Golfamore (Oransje 'G') sirkler skal ha hvit kant (border-2).
 * REGEL 5: Bunnen: Antall Hull (grønn pill), Banetype (grå pill), og Ikon-sirkler.
 * REGEL 6: LOSBY-LOGIKK: Sjekk alle baner i arrayen. Hvis én er åpen, vis 'aapen'.
 * ---------------------------------------------------------------------------
 */

import { STATUS_MAP } from "@/config/constants";
import { useState, useEffect, useMemo } from 'react';
import Link from 'next/link';

function getDistance(lat1: number, lon1: number, lat2: number, lon2: number) {
  try {
    const R = 6371;
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLon = (lon2 - lon1) * Math.PI / 180;
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2);
    return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  } catch (e) { return Infinity; }
}

export default function FacilitySearch({ initialFacilities }: { initialFacilities: any[] }) {
  const [searchQuery, setSearchQuery] = useState("");
  const [userLocation, setUserLocation] = useState<{ lat: number, lng: number } | null>(null);
  const [sortMethod, setSortMethod] = useState<'dist' | 'alpha'>('alpha');

  useEffect(() => {
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition(p => {
        setUserLocation({ lat: p.coords.latitude, lng: p.coords.longitude });
        setSortMethod('dist');
      });
    }
  }, []);

  const processed = useMemo(() => {
    if (!Array.isArray(initialFacilities)) return [];

    return initialFacilities.map(f => {
      // --- ROBUST DATA-PARSING (Håndterer tekst vs objekt fra API) ---
      const parseJson = (val: any, fallback: any) => {
        if (!val) return fallback;
        if (typeof val === 'object') return val;
        try { return JSON.parse(val); } catch (e) { return fallback; }
      };

      const statuses = parseJson(f.course_statuses, []);
      const amenities = parseJson(f.amenities, {});
      const nsgData = parseJson(f.nsg_data, {});

      const dist = userLocation && f.lat && f.lng ? getDistance(userLocation.lat, userLocation.lng, f.lat, f.lng) : Infinity;
      const hasNSG = nsgData && Object.keys(nsgData).length > 0;
      const hasGolfamore = f.golfamore === true;
      
      const words = searchQuery.toLowerCase().trim().split(/\s+/).filter(w => w.length > 0);
      const blob = `${f.name} ${f.city} ${f.county}`.toLowerCase();
      const matches = words.every(w => blob.includes(w));

      return { ...f, statuses, amenities, dist, hasNSG, hasGolfamore, matches };
    })
    .filter(f => f.matches)
    .sort((a, b) => {
        if (sortMethod === 'dist' && a.dist !== b.dist) return a.dist - b.dist;
        return a.name.localeCompare(b.name, 'nb');
    });
  }, [searchQuery, initialFacilities, userLocation, sortMethod]);

  return (
    <div className="max-w-[1400px] mx-auto px-6 py-12 relative z-40">
      <div className="text-center mb-6">
        <button onClick={() => setSortMethod(sortMethod === 'dist' ? 'alpha' : 'dist')} className="bg-white px-6 py-3 rounded-full shadow-md text-[10px] font-black text-[#8bc34a] uppercase tracking-widest border border-gray-100">
          {sortMethod === 'dist' ? "📍 Nærmeste baner først" : "🔠 Alfabetisk visning"} • {processed.length} baner
        </button>
      </div>

      <input className="w-full p-8 rounded-[2.5rem] shadow-2xl mb-16 text-gray-900 border-none ring-1 ring-black/5 text-2xl outline-none focus:ring-4 focus:ring-[#8bc34a]/20 transition-all bg-white" placeholder='Søk baner...' value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
        {processed.map((f: any) => {
          // --- STATUS LOGIKK ---
          const sArr = Array.isArray(f.statuses) ? f.statuses : [];
          const activeStatus = sArr.find((s:any) => s.status === 'aapen') || sArr[0] || { status: 'ukjent' };
          const rawStatus = (activeStatus.status || "ukjent").toLowerCase();
          
          let statusColor = "bg-gray-400"; 
          if (rawStatus === 'aapen') statusColor = "bg-[#8bc34a]";
          else if (rawStatus.includes('vinter') || rawStatus === 'stenger_snart') statusColor = "bg-[#ff5722]";
          else if (rawStatus === 'aapner_snart') statusColor = "bg-amber-500";
          else if (rawStatus === 'stengt') statusColor = "bg-red-600";
          else if (rawStatus === 'nedlagt') statusColor = "bg-black";
          else if (rawStatus === 'under_utvikling') statusColor = "bg-blue-500";

          return (
            <Link href={`/golfbaner/${f.slug}`} key={f.id} className="bg-white rounded-[2.5rem] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-gray-100 flex flex-col group relative">
              <div className="h-64 relative overflow-hidden bg-gray-100">
                <img src={f.image_url || "/Toppbilde-standard.jpg"} className="w-full h-full object-cover transition duration-1000 group-hover:scale-105" alt={f.name} />
                
                {/* Status Badge */}
                <div className={`absolute top-5 left-5 ${statusColor} text-white px-4 py-1.5 rounded-xl text-[10px] font-black uppercase shadow-xl z-20`}>
                    {STATUS_MAP[rawStatus] || rawStatus}
                </div>

                {/* Avstandspille (Mørk oliven #2d3319) */}
                {f.dist !== Infinity && (
                    <div className="absolute bottom-5 right-5 bg-[#2d3319] text-white px-4 py-2 rounded-2xl text-[10px] font-black shadow-lg z-20">
                        {Math.round(f.dist)} km unna
                    </div>
                )}
              </div>

              <div className="p-8 flex flex-col flex-grow">
                <h3 className="font-black text-3xl text-[#11280f] mb-1 group-hover:text-[#8bc34a] transition-colors leading-tight">{f.name}</h3>
                <p className="text-gray-400 text-[11px] font-bold uppercase tracking-widest mb-8">{f.city} • {f.county}</p>
                
                <div className="mt-auto flex items-center justify-between">
                    <div className="flex items-center gap-2">
                        {/* Hull-pille */}
                        <span className="bg-[#f1f7ed] text-[#8bc34a] px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest">
                            {f.amenities?.antall_hull || '--'} HULL
                        </span>
                        {/* Banetype-pille */}
                        <span className="bg-gray-50 text-gray-400 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest border border-gray-100">
                            {f.banetype || 'SKOGSBANE'}
                        </span>
                    </div>

                    {/* Sirkel-ikoner (NSG / Golfamore) */}
                    <div className="flex gap-2">
                        {f.hasNSG && (
                            <div className="w-9 h-9 bg-blue-600 text-white rounded-full flex items-center justify-center font-black text-sm shadow-lg border-2 border-white translate-y-1">N</div>
                        )}
                        {f.hasGolfamore && (
                            <div className="w-9 h-9 bg-[#ff5722] text-white rounded-full flex items-center justify-center font-black text-sm shadow-lg border-2 border-white translate-y-1">G</div>
                        )}
                    </div>
                </div>
              </div>
            </Link>
          );
        })}
      </div>
    </div>
  );
}