"use client";

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

export default function SocialSettingsForm({ initialFacebook, initialInstagram }: { initialFacebook: string, initialInstagram: string }) {
  const [facebook, setFacebook] = useState(initialFacebook || "");
  const [instagram, setInstagram] = useState(initialInstagram || "");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    try {
      await updateGenericSettings([
        { key: "facebook_link", value: facebook },
        { key: "instagram_link", value: instagram }
      ]);
      alert("Social links saved successfully!");
    } catch (error) {
      alert("Error saving social links.");
    } 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" }}>Facebook Page URL</label>
        <input 
          type="url" 
          value={facebook} 
          onChange={(e) => setFacebook(e.target.value)} 
          placeholder="https://facebook.com/..."
          style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" }} 
        />
      </div>

      <div>
        <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>Instagram Profile URL</label>
        <input 
          type="url" 
          value={instagram} 
          onChange={(e) => setInstagram(e.target.value)} 
          placeholder="https://instagram.com/..."
          style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" }} 
        />
      </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" }}>
        Save Social Links
      </button>
    </form>
  );
}