"use client";

import { useState } from "react";
import { createFacility, updateFacility, deleteFacility } from "@/app/actions/facility";

type Facility = {
  id: string;
  title: string;
  imageUrl: string;
  linkUrl: string | null;
};

export default function FacilityManager({ initialFacilities }: { initialFacilities: Facility[] }) {
  const [facilities, setFacilities] = useState<Facility[]>(initialFacilities);
  const [isEditing, setIsEditing] = useState<string | null>(null);
  const [formData, setFormData] = useState({ title: "", imageUrl: "", linkUrl: "" });
  const [loading, setLoading] = useState(false);
  const [uploadingImage, setUploadingImage] = useState(false);

  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files || e.target.files.length === 0) return;
    const file = e.target.files[0];
    
    setUploadingImage(true);
    const formData = new FormData();
    formData.append("file", file);

    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });
      const data = await res.json();
      if (data.path) {
        setFormData((prev) => ({ ...prev, imageUrl: data.path }));
      }
    } catch (err) {
      alert("Error uploading image");
    } finally {
      setUploadingImage(false);
    }
  };

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    try {
      if (isEditing) {
        await updateFacility(isEditing, formData);
      } else {
        await createFacility(formData);
      }
      
      const res = await fetch("/api/facilities"); // Alternatively, we just reload the page for simplicity
      window.location.reload();
    } catch (error) {
      alert("Error saving facility");
    } finally {
      setLoading(false);
    }
  };

  const handleEdit = (facility: Facility) => {
    setIsEditing(facility.id);
    setFormData({
      title: facility.title,
      imageUrl: facility.imageUrl,
      linkUrl: facility.linkUrl || ""
    });
  };

  const handleDelete = async (id: string) => {
    if (confirm("Are you sure you want to delete this facility?")) {
      setLoading(true);
      try {
        await deleteFacility(id);
        window.location.reload();
      } catch (error) {
        alert("Error deleting facility");
      } finally {
        setLoading(false);
      }
    }
  };

  const resetForm = () => {
    setIsEditing(null);
    setFormData({ title: "", imageUrl: "", linkUrl: "" });
  };

  return (
    <div style={{ display: "flex", gap: "2rem", alignItems: "flex-start" }}>
      {/* Form */}
      <div style={{ flex: 1, backgroundColor: "white", padding: "2rem", borderRadius: "0.5rem", boxShadow: "0 1px 3px rgba(0,0,0,0.1)" }}>
        <h2 style={{ fontSize: "1.25rem", marginBottom: "1.5rem", color: "#334155" }}>
          {isEditing ? "Edit Facility" : "Add New Facility"}
        </h2>
        
        <form onSubmit={handleSave} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
          <div>
            <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>Title</label>
            <input 
              required 
              type="text" 
              value={formData.title} 
              onChange={(e) => setFormData({ ...formData, title: e.target.value })} 
              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" }}>Facility Image</label>
            {formData.imageUrl && (
              <img src={formData.imageUrl} alt="Preview" style={{ width: "100%", height: "200px", objectFit: "cover", marginBottom: "1rem", borderRadius: "0.375rem" }} />
            )}
            <input 
              type="file" 
              accept="image/*"
              onChange={handleImageUpload} 
              style={{ width: "100%", padding: "0.5rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1", backgroundColor: "#f8fafc" }} 
            />
            {uploadingImage && <span style={{ fontSize: "0.875rem", color: "#64748b", marginTop: "0.5rem", display: "block" }}>Uploading...</span>}
          </div>

          <div>
            <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>"Learn More" Link (Optional)</label>
            <input 
              type="text" 
              value={formData.linkUrl} 
              onChange={(e) => setFormData({ ...formData, linkUrl: e.target.value })}
              placeholder="e.g., /rooms or https://..."
              style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" }} 
            />
          </div>

          <div style={{ display: "flex", gap: "1rem", marginTop: "1rem" }}>
            <button type="submit" disabled={loading || uploadingImage} className="btn btn-primary" style={{ padding: "0.75rem 1.5rem" }}>
              {loading ? "Saving..." : "Save Facility"}
            </button>
            {isEditing && (
              <button type="button" onClick={resetForm} className="btn btn-secondary" style={{ padding: "0.75rem 1.5rem" }}>
                Cancel
              </button>
            )}
          </div>
        </form>
      </div>

      {/* List */}
      <div style={{ flex: 2, display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gap: "1.5rem" }}>
        {facilities.map(facility => (
          <div key={facility.id} style={{ backgroundColor: "white", borderRadius: "0.5rem", overflow: "hidden", boxShadow: "0 1px 3px rgba(0,0,0,0.1)" }}>
            <img src={facility.imageUrl} alt={facility.title} style={{ width: "100%", height: "150px", objectFit: "cover" }} />
            <div style={{ padding: "1rem" }}>
              <h3 style={{ fontSize: "1.125rem", fontWeight: "600", marginBottom: "0.5rem" }}>{facility.title}</h3>
              {facility.linkUrl && <p style={{ fontSize: "0.75rem", color: "#3b82f6", marginBottom: "1rem" }}>Links to: {facility.linkUrl}</p>}
              
              <div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
                <button onClick={() => handleEdit(facility)} style={{ flex: 1, padding: "0.5rem", backgroundColor: "#f1f5f9", border: "none", borderRadius: "0.25rem", cursor: "pointer" }}>
                  Edit
                </button>
                <button onClick={() => handleDelete(facility.id)} style={{ flex: 1, padding: "0.5rem", backgroundColor: "#fee2e2", color: "#ef4444", border: "none", borderRadius: "0.25rem", cursor: "pointer" }}>
                  Delete
                </button>
              </div>
            </div>
          </div>
        ))}
        {facilities.length === 0 && (
          <div style={{ gridColumn: "1 / -1", padding: "3rem", textAlign: "center", backgroundColor: "white", borderRadius: "0.5rem" }}>
            <p style={{ color: "#64748b" }}>No facilities added yet. Add your first facility to the left.</p>
          </div>
        )}
      </div>
    </div>
  );
}