Nye-TeeOff/frontend/src/app/admin/rediger/[slug]/EditFacilityClient.tsx

"use client";
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

// KOMPONENT 1: MultiSelect for samarbeidende klubber
const MultiSelect = ({ label, options, selected, onChange }: { label: string, options: any[], selected: string[], onChange: (s: string[]) => void }) => {
    const toggle = (val: string) => {
        if (selected.includes(val)) onChange(selected.filter(x => x !== val));
        else onChange([...selected, val]);
    };
    return (
        <div className="flex flex-col gap-2 mb-8 col-span-1 md:col-span-2">
            <label className="text-xs font-black uppercase tracking-widest text-gray-600">{label}</label>
            <div className="p-4 rounded-2xl border-2 border-gray-300 bg-white shadow-sm max-h-64 overflow-y-auto grid grid-cols-1 md:grid-cols-2 gap-2">
                {options.map(opt => (
                    <label key={opt.slug} className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg cursor-pointer border border-transparent hover:border-gray-200 transition-all">
                        <input type="checkbox" checked={selected.includes(opt.slug)} onChange={() => toggle(opt.slug)} className="w-5 h-5 accent-[#8bc34a]" />
                        <span className="text-sm font-bold text-gray-700">{opt.name}</span>
                    </label>
                ))}
            </div>
        </div>
    );
};

// KOMPONENT 2: Viser flate JSON-objekter (som fasiliteter) som rader med Nøkkel og Verdi
const KeyValueEditor = ({ label, value, onChange }: { label: string, value: any, onChange: (v: any) => void }) => {
    const entries = Object.entries(value || {});

    const updateKey = (oldKey: string, newKey: string, val: any) => {
        const newObj: any = {};
        for (const [k, v] of entries) {
            if (k === oldKey) {
                if (newKey.trim()) newObj[newKey] = val; 
            } else {
                newObj[k] = v;
            }
        }
        onChange(newObj);
    };

    const updateVal = (key: string, val: string) => {
        onChange({ ...value, [key]: val });
    };

    const removeKey = (key: string) => {
        const newObj = { ...value };
        delete newObj[key];
        onChange(newObj);
    };

    const addRow = () => {
        const tempKey = `ny_rad_${Date.now()}`;
        onChange({ ...value, [tempKey]: "" });
    };

    return (
        <div className="flex flex-col gap-4 mb-8 bg-gray-100 p-6 md:p-8 rounded-[2rem] border border-gray-200 shadow-sm">
            <label className="text-sm font-black uppercase tracking-widest text-[#11280f]">{label}</label>
            <div className="space-y-3">
                {entries.map(([k, v]) => (
                    <div key={k} className="flex gap-3 items-center">
                        <input 
                            className="w-1/3 p-4 rounded-xl border-2 border-gray-300 text-sm font-bold text-black bg-white focus:border-[#8bc34a] outline-none shadow-sm" 
                            placeholder="Nøkkel (f.eks proshop)" 
                            defaultValue={k.startsWith('ny_rad_') ? '' : k} 
                            onBlur={e => updateKey(k, e.target.value, v)} 
                        />
                        <input 
                            className="w-full p-4 rounded-xl border-2 border-gray-300 text-base font-medium text-black bg-white focus:border-[#8bc34a] outline-none shadow-sm" 
                            placeholder="Verdi (f.eks Ja, eller et navn)" 
                            value={String(v)} 
                            onChange={e => updateVal(k, e.target.value)} 
                        />
                        <button onClick={() => removeKey(k)} className="p-4 bg-red-100 text-red-700 hover:bg-red-200 hover:text-red-900 rounded-xl font-black text-lg transition-colors border border-red-200">✕</button>
                    </div>
                ))}
            </div>
            <button onClick={addRow} className="mt-2 text-left text-sm font-black text-[#8bc34a] hover:text-[#11280f] transition-colors bg-white px-6 py-3 rounded-xl border-2 border-[#8bc34a] self-start">+ Legg til ny rad</button>
        </div>
    );
};

// KOMPONENT 3: Viser Arrays med objekter (som Greenfee-lister) som små pene kort
const ListObjectEditor = ({ label, value, templateKeys, onChange }: { label: string, value: any[], templateKeys: string[], onChange: (v: any[]) => void }) => {
    const items = Array.isArray(value) ? value : [];

    const updateField = (index: number, key: string, val: string | number) => {
        const newItems = [...items];
        const parsedVal = (!isNaN(Number(val)) && val !== "") ? Number(val) : val;
        newItems[index] = { ...newItems[index], [key]: parsedVal };
        onChange(newItems);
    };

    const addRow = () => {
        const newItem: any = {};
        templateKeys.forEach(k => newItem[k] = "");
        onChange([...items, newItem]);
    };

    const removeRow = (index: number) => {
        const newItems = items.filter((_, i) => i !== index);
        onChange(newItems);
    };

    return (
        <div className="flex flex-col gap-4 mb-8 bg-gray-100 p-6 md:p-8 rounded-[2rem] border border-gray-200 shadow-sm">
            <label className="text-sm font-black uppercase tracking-widest text-[#11280f]">{label}</label>
            <div className="space-y-6">
                {items.map((item, idx) => (
                    <div key={idx} className="flex flex-col bg-white p-6 rounded-2xl border-2 border-gray-300 shadow-sm relative group hover:border-[#8bc34a] transition-colors">
                        <button onClick={() => removeRow(idx)} className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center bg-red-100 text-red-700 hover:bg-red-200 hover:text-red-900 rounded-full text-sm font-black transition-colors border border-red-200">✕</button>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pr-10">
                            {templateKeys.map(key => (
                                <div key={key} className="flex flex-col gap-2">
                                    <label className="text-xs uppercase font-black text-gray-600 tracking-wider">{key.replace(/_/g, ' ')}</label>
                                    <input 
                                        className="p-3 rounded-lg border-2 border-gray-300 text-base font-bold text-black bg-gray-50 focus:bg-white focus:border-[#8bc34a] outline-none transition-colors" 
                                        value={item[key] || ""} 
                                        onChange={e => updateField(idx, key, e.target.value)} 
                                    />
                                </div>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
            <button onClick={addRow} className="mt-2 text-left text-sm font-black text-[#8bc34a] hover:text-[#11280f] transition-colors bg-white px-6 py-3 rounded-xl border-2 border-[#8bc34a] self-start">+ Legg til nytt element</button>
        </div>
    );
};

// KOMPONENT 4: DEN NYE SCOREKORT-BYGGEREN
const ScorecardBuilder = ({ course, onChange }: { course: any, onChange: (c: any) => void }) => {
    const ALL_KEYS = ['lengst', 'lang', 'mellomlang', 'mellomkort', 'kort', 'kortest'];

    const [holes, setHoles] = useState<any[]>(() => {
        const h = course.holes || [];
        if (h.length === 0) {
            return Array.from({length: 18}, (_, i) => ({ hole_number: i+1, par: '', hcp_index: '', lengths: {} }));
        }
        return h.sort((a: any, b: any) => a.hole_number - b.hole_number);
    });

    const [activeKeys, setActiveKeys] = useState<string[]>(() => {
        const keys = new Set<string>();
        holes.forEach(h => {
            if (h.lengths) Object.keys(h.lengths).forEach(k => keys.add(k));
        });
        return ALL_KEYS.filter(k => keys.has(k));
    });

    const [tees, setTees] = useState<any>(() => {
        const herrer = course.tee_boxes?.herrer || [];
        const damer = course.tee_boxes?.damer || [];
        const initialTees = { herrer: {} as any, damer: {} as any };
        activeKeys.forEach((key, idx) => {
            initialTees.herrer[key] = herrer[idx] || { navn_utslag: '', baneverdi: '', slopeverdi: '' };
            initialTees.damer[key] = damer[idx] || { navn_utslag_damer: '', baneverdi_damer: '', slopeverdi_damer: '' };
        });
        return initialTees;
    });

    const syncToParent = (newHoles: any[], newKeys: string[], newTees: any) => {
        const updatedTeeBoxes = {
            herrer: newKeys.map(k => newTees.herrer[k] || {}),
            damer: newKeys.map(k => newTees.damer[k] || {})
        };
        onChange({
            ...course,
            holes: newHoles,
            tee_boxes: updatedTeeBoxes
        });
    };

    const toggleKey = (key: string) => {
        const newKeys = activeKeys.includes(key)
            ? activeKeys.filter(k => k !== key)
            : ALL_KEYS.filter(k => activeKeys.includes(k) || k === key);
        setActiveKeys(newKeys);

        const newTees = { ...tees };
        if (!newTees.herrer[key]) newTees.herrer[key] = { navn_utslag: '', baneverdi: '', slopeverdi: '' };
        if (!newTees.damer[key]) newTees.damer[key] = { navn_utslag_damer: '', baneverdi_damer: '', slopeverdi_damer: '' };
        setTees(newTees);
        syncToParent(holes, newKeys, newTees);
    };

    const updateTee = (gender: 'herrer'|'damer', key: string, field: string, value: string) => {
        const newTees = { ...tees };
        newTees[gender][key] = { ...newTees[gender][key], [field]: value };
        setTees(newTees);
        syncToParent(holes, activeKeys, newTees);
    };

    const updateHole = (index: number, field: string, value: string, lengthKey: string | null = null) => {
        const newHoles = [...holes];
        if (lengthKey) {
            newHoles[index].lengths = { ...newHoles[index].lengths, [lengthKey]: value === '' ? '' : Number(value) };
        } else {
            newHoles[index][field] = value === '' ? '' : Number(value);
        }
        setHoles(newHoles);
        syncToParent(newHoles, activeKeys, tees);
    };

    const addHole = () => {
        const newHoles = [...holes, { hole_number: holes.length + 1, par: '', hcp_index: '', lengths: {} }];
        setHoles(newHoles);
        syncToParent(newHoles, activeKeys, tees);
    };

    const removeLastHole = () => {
        const newHoles = holes.slice(0, -1);
        setHoles(newHoles);
        syncToParent(newHoles, activeKeys, tees);
    };

    return (
        <div className="flex flex-col gap-4 mt-6">
            <div className="flex flex-wrap gap-4 items-center bg-gray-100 p-4 rounded-xl border-2 border-gray-200">
                <span className="text-xs font-black uppercase tracking-widest text-gray-600">Aktive Utslagskolonner:</span>
                {ALL_KEYS.map(k => (
                    <label key={k} className="flex items-center gap-2 text-sm font-bold cursor-pointer text-black">
                        <input 
                            type="checkbox" 
                            checked={activeKeys.includes(k)} 
                            onChange={() => toggleKey(k)} 
                            className="w-5 h-5 accent-[#8bc34a]"
                        />
                        {k.toUpperCase()}
                    </label>
                ))}
            </div>

            <div className="overflow-x-auto rounded-2xl border-2 border-gray-300 shadow-sm bg-white pb-2">
                <table className="w-full text-center text-sm min-w-[800px] border-collapse">
                    <thead>
                        <tr className="bg-gray-100 text-gray-700 text-xs font-black uppercase tracking-widest border-b-2 border-gray-300">
                            <th className="p-3 border-r border-gray-200">Hull</th>
                            <th className="p-3 border-r border-gray-200">Par</th>
                            <th className="p-3 border-r border-gray-300">HCP</th>
                            {activeKeys.map(k => <th key={k} className="p-3 border-r border-gray-300 w-32">{k}</th>)}
                        </tr>
                        {/* Herrer */}
                        <tr className="bg-blue-50 border-b border-gray-300">
                            <th colSpan={3} className="p-3 text-right text-[10px] font-black text-blue-900 uppercase tracking-widest border-r border-gray-300">
                                Herrer (Navn / CR / Slope)
                            </th>
                            {activeKeys.map(k => (
                                <td key={k} className="p-2 border-r border-gray-300 align-top">
                                    <div className="flex flex-col gap-1">
                                        <input placeholder="Eks: Gul" className="w-full p-2 text-xs font-bold text-center border border-blue-200 rounded outline-none focus:border-blue-500 bg-white text-black" value={tees.herrer[k]?.navn_utslag || ''} onChange={e => updateTee('herrer', k, 'navn_utslag', e.target.value)} />
                                        <div className="flex gap-1">
                                            <input placeholder="CR" className="w-1/2 p-2 text-xs text-center border border-blue-200 rounded outline-none focus:border-blue-500 bg-white text-black" value={tees.herrer[k]?.baneverdi || ''} onChange={e => updateTee('herrer', k, 'baneverdi', e.target.value)} />
                                            <input placeholder="Slope" className="w-1/2 p-2 text-xs text-center border border-blue-200 rounded outline-none focus:border-blue-500 bg-white text-black" value={tees.herrer[k]?.slopeverdi || ''} onChange={e => updateTee('herrer', k, 'slopeverdi', e.target.value)} />
                                        </div>
                                    </div>
                                </td>
                            ))}
                        </tr>
                        {/* Damer */}
                        <tr className="bg-red-50 border-b-4 border-gray-400">
                            <th colSpan={3} className="p-3 text-right text-[10px] font-black text-red-900 uppercase tracking-widest border-r border-gray-300">
                                Damer (Navn / CR / Slope)
                            </th>
                            {activeKeys.map(k => (
                                <td key={k} className="p-2 border-r border-gray-300 align-top">
                                    <div className="flex flex-col gap-1">
                                        <input placeholder="Eks: Rød" className="w-full p-2 text-xs font-bold text-center border border-red-200 rounded outline-none focus:border-red-500 bg-white text-black" value={tees.damer[k]?.navn_utslag_damer || ''} onChange={e => updateTee('damer', k, 'navn_utslag_damer', e.target.value)} />
                                        <div className="flex gap-1">
                                            <input placeholder="CR" className="w-1/2 p-2 text-xs text-center border border-red-200 rounded outline-none focus:border-red-500 bg-white text-black" value={tees.damer[k]?.baneverdi_damer || ''} onChange={e => updateTee('damer', k, 'baneverdi_damer', e.target.value)} />
                                            <input placeholder="Slope" className="w-1/2 p-2 text-xs text-center border border-red-200 rounded outline-none focus:border-red-500 bg-white text-black" value={tees.damer[k]?.slopeverdi_damer || ''} onChange={e => updateTee('damer', k, 'slopeverdi_damer', e.target.value)} />
                                        </div>
                                    </div>
                                </td>
                            ))}
                        </tr>
                    </thead>
                    <tbody>
                        {holes.map((h, idx) => (
                            <tr key={idx} className="border-b border-gray-200 hover:bg-gray-50">
                                <td className="p-2 font-black text-lg text-gray-800 border-r border-gray-200">{h.hole_number}</td>
                                <td className="p-2 border-r border-gray-200"><input type="number" className="w-full p-3 text-center border-2 border-gray-200 rounded-xl font-bold text-black outline-none focus:border-[#8bc34a] bg-white" value={h.par || ''} onChange={e => updateHole(idx, 'par', e.target.value)} /></td>
                                <td className="p-2 border-r border-gray-300"><input type="number" className="w-full p-3 text-center border-2 border-gray-200 rounded-xl font-bold text-black outline-none focus:border-[#8bc34a] bg-white" value={h.hcp_index || ''} onChange={e => updateHole(idx, 'hcp_index', e.target.value)} /></td>
                                {activeKeys.map(k => (
                                    <td key={k} className="p-2 border-r border-gray-300 bg-gray-50/50">
                                        <input type="number" placeholder="Lengde" className="w-full p-3 text-center border-2 border-gray-200 rounded-xl font-mono font-bold text-black outline-none focus:border-[#8bc34a] bg-white" value={h.lengths?.[k] || ''} onChange={e => updateHole(idx, 'lengths', e.target.value, k)} />
                                    </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            
            <div className="flex gap-4 px-2">
                <button onClick={addHole} className="text-sm font-black text-[#8bc34a] hover:text-[#11280f] px-4 py-2 border-2 border-[#8bc34a] rounded-xl">+ Legg til hull</button>
                <button onClick={removeLastHole} className="text-sm font-black text-red-500 hover:text-red-700 px-4 py-2 border-2 border-red-500 rounded-xl">- Slett siste hull</button>
            </div>
        </div>
    );
};


export default function EditFacilityClient({ initialData, allFacilities }: { initialData: any, allFacilities: any[] }) {
    const router = useRouter();
    const [formData, setFormData] = useState(initialData);
    const [activeTab, setActiveTab] = useState('generelt');
    const [saving, setSaving] = useState(false);

    // Trekk ut unike arkitekter fra alle anlegg
    const uniqueArchitects = Array.from(new Set(allFacilities.map(f => f.architect).filter(Boolean))).sort();
    
    // Sørg for at cooperating_clubs er et array
    const [coopClubs, setCoopClubs] = useState<string[]>(
        Array.isArray(initialData.cooperating_clubs) ? initialData.cooperating_clubs : 
        (typeof initialData.cooperating_clubs === 'string' ? JSON.parse(initialData.cooperating_clubs) : [])
    );

    const handleChange = (field: string, value: any) => {
        setFormData((prev: any) => ({ ...prev, [field]: value }));
    };

    const handleSave = async () => {
        setSaving(true);
        try {
            const res = await fetch(`/api/admin/facilities/${initialData.id}/full`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
            
            if (res.ok) {
                alert("Lagret suksessfullt!");
                router.refresh();
            } else {
                alert("Noe gikk galt under lagring.");
            }
        } catch (e) {
            alert("Nettverksfeil.");
        }
        setSaving(false);
    };

    const tabs = [
        { id: 'generelt', label: 'Generelt' },
        { id: 'lokasjon', label: 'Lokasjon & Kontakt' },
        { id: 'linker', label: 'Lenker & Media' },
        { id: 'okonomi', label: 'Økonomi & Medlemskap' },
        { id: 'baner', label: 'Baner & Scorekort' }
    ];

    const Input = ({ field, label, type = "text" }: { field: string, label: string, type?: string }) => {
        // Håndter dato-formatet (YYYY-MM-DD) slik at HTML5 date picker forstår det
        let displayValue = formData[field] || "";
        if (type === 'date' && displayValue) {
            displayValue = displayValue.split('T')[0]; // Kutter vekk klokkeslettet
        }

        return (
            <div className="flex flex-col gap-2 mb-8">
                <label className="text-xs font-black uppercase tracking-widest text-gray-600">{label}</label>
                {type === 'textarea' ? (
                    <textarea 
                        className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base shadow-sm focus:border-[#8bc34a] outline-none transition-all" 
                        rows={4} 
                        value={displayValue} 
                        onChange={e => handleChange(field, e.target.value)} 
                    />
                ) : (
                    <input 
                        type={type} 
                        className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none transition-all" 
                        value={displayValue} 
                        onChange={e => handleChange(field, type === 'number' ? Number(e.target.value) : e.target.value)} 
                    />
                )}
            </div>
        );
    };

    return (
        <div className="max-w-[1400px] mx-auto p-4 md:p-8 relative z-40 bg-white min-h-screen">
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 pb-6 border-b border-gray-200 gap-6">
                <div>
                    <Link href="/admin" className="text-sm font-bold text-gray-500 hover:text-[#8bc34a] mb-2 block">← Tilbake til oversikten</Link>
                    <h1 className="text-4xl font-black text-[#11280f]">Rediger: <span className="text-[#8bc34a]">{initialData.name}</span></h1>
                </div>
                <button 
                    onClick={handleSave} 
                    disabled={saving}
                    className="bg-[#11280f] text-white px-8 py-4 rounded-full font-black uppercase tracking-widest hover:bg-[#8bc34a] transition-colors shadow-xl disabled:opacity-50 w-full md:w-auto"
                >
                    {saving ? "Lagrer..." : "Lagre endringer"}
                </button>
            </div>

            <div className="flex flex-col md:flex-row gap-10">
                {/* SIDEBAR MENY */}
                <div className="w-full md:w-1/4 flex flex-col gap-3">
                    {tabs.map(tab => (
                        <button 
                            key={tab.id} 
                            onClick={() => setActiveTab(tab.id)}
                            className={`p-4 rounded-2xl text-left font-black uppercase text-sm tracking-widest transition-all ${activeTab === tab.id ? 'bg-[#8bc34a] text-white shadow-lg translate-x-2' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
                        >
                            {tab.label}
                        </button>
                    ))}
                </div>

                {/* SKJEMA OMRÅDE */}
                <div className="w-full md:w-3/4">
                    {activeTab === 'generelt' && (
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
                            <div className="col-span-1 md:col-span-2"><Input field="name" label="Anleggsnavn" /></div>
                            
                            {/* NYTT: Viktig beskjed / Kursiv intro */}
                            <div className="col-span-1 md:col-span-2"><Input field="footnote" label="Viktig beskjed (Kursiv intro-tekst over beskrivelsen)" type="textarea" /></div>
                            
                            <div className="col-span-1 md:col-span-2"><Input field="description" label="Hovedbeskrivelse" type="textarea" /></div>
                            
                            <Input field="banetype" label="Banetype (f.eks Park/Skog)" />
                            <Input field="season" label="Sesong (f.eks April-Oktober)" />
                            <Input field="established_year" label="Byggeår" type="number" />
                            
                            {/* NYTT: Arkitekt med forslag */}
                            <div className="flex flex-col gap-2 mb-8">
                                <label className="text-xs font-black uppercase tracking-widest text-gray-600">Arkitekt</label>
                                <input 
                                    list="architect-list"
                                    className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none transition-all" 
                                    value={formData.architect || ""} 
                                    onChange={e => handleChange('architect', e.target.value)} 
                                    placeholder="Velg eller skriv inn ny..."
                                />
                                <datalist id="architect-list">
                                    <option value="Ukjent" />
                                    {uniqueArchitects.map((arch: any) => <option key={arch} value={arch} />)}
                                </datalist>
                            </div>
                            
                            <Input field="length_meters" label="Totallengde (meter)" type="number" />

                            {/* NYTT: Samarbeidende klubber */}
                            <MultiSelect 
                                label="Samarbeidende Klubber (Gjestespill etc.)" 
                                options={allFacilities.filter(f => f.id !== initialData.id)} 
                                selected={coopClubs} 
                                onChange={(val) => {
                                    setCoopClubs(val);
                                    handleChange('cooperating_clubs', val);
                                }} 
                            />
                        </div>
                    )}

                    {activeTab === 'lokasjon' && (
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
                            <div className="col-span-1 md:col-span-2"><Input field="address" label="Gateadresse" /></div>
                            <Input field="zipcode" label="Postnummer" />
                            <Input field="city" label="Poststed / By" />
                            <Input field="county" label="Fylke" />
                            <Input field="phone" label="Telefon" />
                            <Input field="email" label="E-post" />
                            <Input field="lat" label="Breddegrad (Latitude)" type="number" />
                            <Input field="lng" label="Lengdegrad (Longitude)" type="number" />
                        </div>
                    )}

                    {activeTab === 'linker' && (
                        <div className="flex flex-col">
                            <Input field="website_url" label="Nettside URL" />
                            <Input field="golfbox_booking_url" label="Golfbox Booking URL" />
                            <Input field="golfbox_tournament_url" label="Golfbox Turnering URL" />
                            <Input field="baneguide_url" label="Baneguide URL" />
                            <Input field="flyfoto_url" label="Flyfoto URL" />
                            <Input field="weather_url" label="Vær URL (YR)" />
                            <Input field="webcam_url" label="Webkamera URL" />
                            <Input field="video_url" label="Video URL (YouTube/Vimeo)" />
                            
                            {/* NYTT: Sosiale Medier lagt inn som liste-editor her */}
                            <ListObjectEditor 
                                label="Sosiale Medier (Legg inn f.eks facebook, instagram, linkedin)" 
                                value={formData.social_links} 
                                templateKeys={['platform', 'url']} 
                                onChange={(v) => handleChange('social_links', v)} 
                            />
                        </div>
                    )}

                    {activeTab === 'okonomi' && (
                        <div className="flex flex-col">
                            {/* NYTT FELT FOR MANUELL DATO */}
                            <div className="mb-6">
                                <Input field="membership_updated_at" label="Sist Oppdatert (Dato for Medlemskapspriser)" type="date" />
                            </div>

                            <div className="bg-gray-100 p-6 rounded-2xl mb-8 border border-gray-200">
                                <h3 className="font-black uppercase tracking-widest text-gray-800 mb-6 pb-2 border-b-2 border-gray-200">Medlemskap</h3>
                                <Input field="navn_standard_medlemskap" label="Navn på standard medlemskap" />
                                <Input field="standard_medlemskap" label="Pris standard (kun tall)" type="number" />
                                <Input field="standard_medlemskap_kommentarer" label="Kommentar standard" />
                                <Input field="navn_rimeligste_alternativ" label="Navn på rimeligste" />
                                <Input field="rimeligste_alternativ" label="Pris rimeligste (kun tall)" type="number" />
                                <Input field="medlemskap_url" label="Lenke til medlemskapsside" />
                            </div>
                            
                            <div className="bg-gray-100 p-6 rounded-2xl border border-gray-200">
                                <h3 className="font-black uppercase tracking-widest text-gray-800 mb-6 pb-2 border-b-2 border-gray-200">Veien til Golf (VTG)</h3>
                                <Input field="vtg_pris" label="Pris VTG kurs (kun tall)" type="number" />
                                <Input field="vtg_lenke" label="Lenke til VTG påmelding" />
                            </div>
                            
                            {/* Tilbud (tidligere under Avansert) */}
                            <div className="mt-8 border-t-2 border-gray-200 pt-8">
                                <KeyValueEditor label="Fasiliteter (Proshop, Kafé etc.)" value={formData.amenities} onChange={(v) => handleChange('amenities', v)} />
                                <KeyValueEditor label="Norsk Seniorgolf (NSG)" value={formData.nsg_data} onChange={(v) => handleChange('nsg_data', v)} />
                                <KeyValueEditor label="Golfamore Info" value={formData.golfamore_data} onChange={(v) => handleChange('golfamore_data', v)} />

                                <ListObjectEditor 
                                    label="Greenfee Priser" 
                                    value={formData.greenfee} 
                                    templateKeys={['banenavn', 'priskategori', 'pris_voksne', 'pris_junior']} 
                                    onChange={(v) => handleChange('greenfee', v)} 
                                />
                                
                                <ListObjectEditor 
                                    label="Golfpakker" 
                                    value={formData.golfpakker} 
                                    templateKeys={['navn', 'pris', 'beskrivelse']} 
                                    onChange={(v) => handleChange('golfpakker', v)} 
                                />
                            </div>
                        </div>
                    )}

                    {/* BANER & SCOREKORT MED NY GRAFISK BYGGER */}
                    {activeTab === 'baner' && (
                        <div className="flex flex-col gap-8">
                            <div className="bg-[#f1f7ed] p-6 rounded-2xl border-2 border-[#7ca982] mb-4">
                                <h3 className="font-black text-[#11280f] text-lg uppercase tracking-widest mb-2">Baner og Scorekort</h3>
                                <p className="text-sm text-gray-800 font-medium">Bruk det interaktive skjemaet under for å redigere lengder, par og utslag.</p>
                            </div>
                            
                            {formData.courses?.map((course: any, cIdx: number) => (
                                <div key={course.id || cIdx} className="bg-gray-100 p-8 rounded-[2rem] border-2 border-gray-200 shadow-sm mb-8">
                                    <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4 border-b-2 border-gray-200 pb-4">
                                        <h4 className="text-2xl font-black text-black">{course.name}</h4>
                                        <span className={`px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest ${course.is_main_course ? 'bg-[#8bc34a] text-white shadow-md' : 'bg-gray-300 text-gray-700'}`}>
                                            {course.is_main_course ? 'Hovedbane' : 'Sekundærbane'}
                                        </span>
                                    </div>
                                    
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
                                        <div className="flex flex-col gap-2 mb-6">
                                            <label className="text-xs font-black uppercase tracking-widest text-gray-600">Banenavn</label>
                                            <input className="p-4 rounded-2xl border-2 border-gray-300 focus:border-[#8bc34a] outline-none font-bold text-black bg-white text-base shadow-sm" value={course.name || ""} onChange={e => {
                                                const newCourses = [...formData.courses];
                                                newCourses[cIdx] = {...course, name: e.target.value};
                                                handleChange('courses', newCourses);
                                            }} />
                                        </div>
                                        <div className="flex flex-col gap-2 mb-6">
                                            <label className="text-xs font-black uppercase tracking-widest text-gray-600">Status</label>
                                            <select className="p-4 rounded-2xl border-2 border-gray-300 focus:border-[#8bc34a] outline-none font-bold text-black bg-white text-base shadow-sm" value={course.status || "ukjent"} onChange={e => {
                                                const newCourses = [...formData.courses];
                                                newCourses[cIdx] = {...course, status: e.target.value};
                                                handleChange('courses', newCourses);
                                            }}>
                                                <option value="aapen">🟢 Åpen</option>
                                                <option value="aapen_med_vintergreener">🟡 Vintergreener</option>
                                                <option value="aapner_snart">🟡 Åpner Snart</option>
                                                <option value="stengt">🔴 Stengt</option>
                                                <option value="nedlagt">⚫ Nedlagt</option>
                                                <option value="ukjent">⚪ Ukjent</option>
                                            </select>
                                        </div>
                                        <div className="flex flex-col gap-2 mb-6">
                                            <label className="text-xs font-black uppercase tracking-widest text-gray-600">Total Par (Bane)</label>
                                            <input type="number" className="p-4 rounded-2xl border-2 border-gray-300 focus:border-[#8bc34a] outline-none font-bold text-black bg-white text-base shadow-sm" value={course.par || ""} onChange={e => {
                                                const newCourses = [...formData.courses];
                                                newCourses[cIdx] = {...course, par: Number(e.target.value)};
                                                handleChange('courses', newCourses);
                                            }} />
                                        </div>
                                        <div className="flex flex-col gap-2 mb-6">
                                            <label className="text-xs font-black uppercase tracking-widest text-gray-600">Utløpsdato Slope</label>
                                            <input type="date" className="p-4 rounded-2xl border-2 border-gray-300 focus:border-[#8bc34a] outline-none font-bold text-black bg-white text-base shadow-sm" value={course.slope_valid_until ? course.slope_valid_until.split('T')[0] : ""} onChange={e => {
                                                const newCourses = [...formData.courses];
                                                newCourses[cIdx] = {...course, slope_valid_until: e.target.value};
                                                handleChange('courses', newCourses);
                                            }} />
                                        </div>
                                    </div>
                                    
                                    {/* DET NYE SCOREKORTET INKLUDERES HER */}
                                    <ScorecardBuilder 
                                        course={course} 
                                        onChange={(updatedCourse) => {
                                            const newCourses = [...formData.courses];
                                            newCourses[cIdx] = updatedCourse;
                                            handleChange('courses', newCourses);
                                        }} 
                                    />
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}