"use client";

import { useState } from "react";
import { updateHeroSettings } from "@/app/actions/settings";

export default function HeroSettingsForm({ initialImages, initialSpeed }: { initialImages: string[], initialSpeed: number }) {
  const [images, setImages] = useState<string[]>(initialImages);
  const [speed, setSpeed] = useState<number>(initialSpeed);
  const [newImage, setNewImage] = useState("");
  const [loading, setLoading] = useState(false);

  const addImage = () => {
    if (newImage && !images.includes(newImage)) {
      setImages([...images, newImage]);
      setNewImage("");
    }
  };

  const removeImage = (index: number) => {
    setImages(images.filter((_, i) => i !== index));
  };

  const moveUp = (index: number) => {
    if (index > 0) {
      const newArr = [...images];
      [newArr[index - 1], newArr[index]] = [newArr[index], newArr[index - 1]];
      setImages(newArr);
    }
  };

  const moveDown = (index: number) => {
    if (index < images.length - 1) {
      const newArr = [...images];
      [newArr[index + 1], newArr[index]] = [newArr[index], newArr[index + 1]];
      setImages(newArr);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    try {
      await updateHeroSettings(images, speed);
      alert("Hero settings saved successfully!");
    } catch (error) {
      alert("Error saving settings.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
      <div>
        <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>Hero Images Order & Paths</label>
        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem", marginBottom: "1rem" }}>
          {images.map((img, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem", border: "1px solid #e2e8f0", borderRadius: "0.25rem" }}>
              <div style={{ width: "50px", height: "30px", backgroundImage: `url(${img})`, backgroundSize: "cover", backgroundPosition: "center" }} />
              <input type="text" value={img} readOnly style={{ flex: 1, padding: "0.5rem", border: "none", backgroundColor: "transparent" }} />
              <button type="button" onClick={() => moveUp(i)} disabled={i === 0} style={{ padding: "0.25rem 0.5rem", cursor: "pointer" }}>↑</button>
              <button type="button" onClick={() => moveDown(i)} disabled={i === images.length - 1} style={{ padding: "0.25rem 0.5rem", cursor: "pointer" }}>↓</button>
              <button type="button" onClick={() => removeImage(i)} style={{ padding: "0.25rem 0.5rem", cursor: "pointer", color: "red" }}>X</button>
            </div>
          ))}
        </div>
        
        <div style={{ display: "flex", gap: "0.5rem" }}>
          <input 
            type="text" 
            value={newImage} 
            onChange={(e) => setNewImage(e.target.value)} 
            placeholder="e.g. /images/gallery/hero_1.jpg" 
            style={{ flex: 1, padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" }}
          />
          <button type="button" onClick={addImage} style={{ padding: "0.75rem 1rem", backgroundColor: "#e2e8f0", border: "1px solid #cbd5e1", borderRadius: "0.375rem", cursor: "pointer" }}>Add</button>
        </div>
      </div>

      <div>
        <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>Slider Speed (milliseconds)</label>
        <input 
          type="number" 
          value={speed} 
          onChange={(e) => setSpeed(Number(e.target.value))} 
          required
          min="1000"
          step="500"
          style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" }} 
        />
        <p style={{ fontSize: "0.75rem", color: "#94a3b8", marginTop: "0.5rem" }}>Default is 5000 (5 seconds). Lower is faster.</p>
      </div>

      <button type="submit" disabled={loading} className="btn btn-primary" style={{ padding: "0.75rem 1.5rem", alignSelf: "flex-start", backgroundColor: "#1e293b", color: "white", border: "none", borderRadius: "0.375rem", cursor: "pointer" }}>
        {loading ? "Saving..." : "Save Hero Settings"}
      </button>
    </form>
  );
}