"use client";

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

export default function LogoSettingsForm({ initialLogo }: { initialLogo: string }) {
  const [logoUrl, setLogoUrl] = useState(initialLogo || "https://img1.wsimg.com/isteam/ip/97a81f60-8088-4634-9a1a-22b77f2b874a/Asset%201.png");
  const [loading, setLoading] = useState(false);

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    const formData = new FormData();
    formData.append("file", file);

    setLoading(true);
    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });
      const data = await res.json();
      if (data.success) {
        setLogoUrl(data.url);
      } else {
        alert("Upload failed: " + data.message);
      }
    } catch (error) {
      console.error(error);
      alert("Error uploading file");
    } finally {
      setLoading(false);
      e.target.value = '';
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    try {
      await updateGenericSettings([{ key: "site_logo", value: logoUrl }]);
      alert("Logo saved successfully!");
    } catch (error) {
      alert("Error saving logo.");
    } 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" }}>Website Logo</label>
        
        <div style={{ padding: "1rem", backgroundColor: "#0f172a", borderRadius: "0.5rem", marginBottom: "1rem", display: "inline-block" }}>
          <img src={logoUrl} alt="Logo Preview" style={{ height: "60px", width: "auto" }} />
        </div>

        <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
          <label style={{ 
            flex: 1, padding: "0.75rem", backgroundColor: "#e2e8f0", 
            border: "1px dashed #94a3b8", borderRadius: "0.375rem", 
            textAlign: "center", cursor: loading ? "not-allowed" : "pointer",
            color: "#475569", fontWeight: "500"
          }}>
            {loading ? "Uploading..." : "Upload New Logo"}
            <input 
              type="file" 
              accept="image/*"
              onChange={handleFileUpload} 
              disabled={loading}
              style={{ display: "none" }} 
            />
          </label>
        </div>
        <input 
          type="text" 
          value={logoUrl} 
          onChange={(e) => setLogoUrl(e.target.value)} 
          style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1", marginTop: "0.5rem" }} 
          placeholder="Or paste an image URL"
        />
      </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 Logo
      </button>
    </form>
  );
}