"use client";

import { useState } from 'react';

// Tilpass interface til de dataene du allerede har i frontend
interface Facility {
  id: number;
  scrape_method?: string;
  scrape_status_url?: string;
  scrape_status_selector?: string;
}

export default function ScrapeMethodSelect({ facility }: { facility: Facility }) {
  // Setter standardverdi til 'css_selector' hvis den er tom i databasen
  const [method, setMethod] = useState(facility.scrape_method || 'css_selector');
  const [isLoading, setIsLoading] = useState(false);
  const [statusColor, setStatusColor] = useState('bg-transparent'); // For å gi visuell feedback

  const handleMethodChange = async (newMethod: string) => {
    setMethod(newMethod);
    setIsLoading(true);
    setStatusColor('bg-yellow-200'); // Lyser gult mens den lagrer

    try {
      // Husk å endre URL-en hvis API-et ditt ligger på et annet domene
      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/facilities/${facility.id}/scrape-settings`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          // Hvis du bruker JWT i headers i stedet for cookies, legg det til her:
          // 'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({
          scrape_method: newMethod,
          scrape_status_url: facility.scrape_status_url, // Beholder eksisterende
          scrape_status_selector: facility.scrape_status_selector // Beholder eksisterende
        })
      });

      if (!response.ok) {
        throw new Error('Feil ved lagring');
      }

      // Suksess! Lyser grønt et kort sekund
      setStatusColor('bg-green-300');
      setTimeout(() => setStatusColor('bg-transparent'), 2000);

    } catch (error) {
      console.error(error);
      setStatusColor('bg-red-300'); // Lyser rødt ved feil
      alert("Kunne ikke oppdatere skrapemetode.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <select 
      value={method} 
      onChange={(e) => handleMethodChange(e.target.value)} 
      disabled={isLoading}
      className={`border rounded p-1 text-sm transition-colors duration-300 ${statusColor} ${isLoading ? 'opacity-50' : ''}`}
    >
      <option value="css_selector">Standard (CSS)</option>
      <option value="llm_parse">✨ Gemini AI (LLM)</option>
      <option value="iframe_golfbox">Golfbox iframe</option>
      <option value="click_then_css">Auto-klikk + CSS</option>
      <option value="">Ingen (Avslått)</option>
    </select>
  );
}