"use client";

import { useState } from "react";
import { addRoom, editRoom, deleteRoom } from "@/app/actions/rooms";

export default function RoomManager({ initialRooms }: { initialRooms: any[] }) {
  const [editingRoom, setEditingRoom] = useState<any>(null);
  
  // Form State
  const [title, setTitle] = useState("");
  const [type, setType] = useState("");
  const [price, setPrice] = useState("");
  const [description, setDescription] = useState("");
  
  // Image Array State
  const [images, setImages] = useState<string[]>([]);
  const [newImage, setNewImage] = useState("");

  const [loading, setLoading] = useState(false);

  const startEdit = (room: any) => {
    setEditingRoom(room);
    setTitle(room.title);
    setType(room.type);
    setPrice(room.price.toString());
    setDescription(room.description);
    
    let parsed = [];
    try {
      parsed = room.imageUrl && room.imageUrl.startsWith("[") ? JSON.parse(room.imageUrl) : [room.imageUrl].filter(Boolean);
    } catch(e) {
      parsed = [room.imageUrl].filter(Boolean);
    }
    setImages(parsed);
  };

  const cancelEdit = () => {
    setEditingRoom(null);
    setTitle("");
    setType("");
    setPrice("");
    setDescription("");
    setImages([]);
    setNewImage("");
  };

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

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

  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) {
        setImages([...images, data.url]);
      } else {
        alert("Upload failed: " + data.message);
      }
    } catch (error) {
      console.error(error);
      alert("Error uploading file");
    } finally {
      setLoading(false);
      // Reset input
      e.target.value = '';
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    
    const formData = new FormData();
    formData.append("title", title);
    formData.append("type", type);
    formData.append("price", price);
    formData.append("description", description);
    formData.append("imageUrl", JSON.stringify(images));

    try {
      if (editingRoom) {
        await editRoom(editingRoom.id, formData);
        alert("Room updated successfully!");
      } else {
        await addRoom(formData);
        alert("Room added successfully!");
      }
      cancelEdit();
    } catch (e) {
      alert("An error occurred");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="grid grid-cols-2" style={{ gap: "2rem" }}>
      <section style={{ backgroundColor: "white", padding: "2rem", borderRadius: "0.5rem", boxShadow: "0 1px 3px rgba(0,0,0,0.1)", alignSelf: "start" }}>
        <h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", color: "#334155" }}>
          {editingRoom ? "Edit Room" : "Add New Room"}
        </h2>
        
        <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
          <div>
            <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>Room Title</label>
            <input type="text" value={title} onChange={e => setTitle(e.target.value)} required style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" }} />
          </div>
          <div className="grid grid-cols-2" style={{ gap: "1rem" }}>
            <div>
              <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>Type</label>
              <input type="text" value={type} onChange={e => setType(e.target.value)} required placeholder="e.g. Suite" 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" }}>Price per night ($)</label>
              <input type="number" value={price} onChange={e => setPrice(e.target.value)} required style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" }} />
            </div>
          </div>
          <div>
            <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>Description</label>
            <textarea value={description} onChange={e => setDescription(e.target.value)} rows={3} required style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" }}></textarea>
          </div>
          
          <div>
            <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>Room Images</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: "40px", height: "40px", backgroundImage: `url('${img}')`, backgroundSize: "cover", borderRadius: "4px" }} />
                  <span style={{ flex: 1, fontSize: "0.875rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{img}</span>
                  <button type="button" onClick={() => handleRemoveImage(i)} style={{ color: "red", cursor: "pointer", border: "none", background: "none" }}>X</button>
                </div>
              ))}
            </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..." : "Click to Upload Image"}
                <input 
                  type="file" 
                  accept="image/*"
                  onChange={handleFileUpload} 
                  disabled={loading}
                  style={{ display: "none" }} 
                />
              </label>
            </div>
          </div>

          <div style={{ display: "flex", gap: "1rem" }}>
            <button type="submit" disabled={loading} className="btn btn-primary" style={{ padding: "0.75rem 1.5rem", backgroundColor: "#1e293b", color: "white", border: "none", borderRadius: "0.375rem", cursor: "pointer", flex: 1 }}>
              {loading ? "Saving..." : (editingRoom ? "Update Room" : "Add Room")}
            </button>
            {editingRoom && (
              <button type="button" onClick={cancelEdit} style={{ padding: "0.75rem 1.5rem", backgroundColor: "#ef4444", color: "white", border: "none", borderRadius: "0.375rem", cursor: "pointer" }}>
                Cancel
              </button>
            )}
          </div>
        </form>
      </section>

      <section style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
        <h2 style={{ fontSize: "1.5rem", color: "#334155" }}>Existing Rooms</h2>
        {initialRooms.map((room) => (
          <div key={room.id} style={{ backgroundColor: "white", padding: "1.5rem", borderRadius: "0.5rem", boxShadow: "0 1px 3px rgba(0,0,0,0.1)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div>
              <strong style={{ fontSize: "1.125rem", display: "block" }}>{room.title}</strong>
              <span style={{ fontSize: "0.875rem", color: "#64748b" }}>{room.type} • ${room.price}/night</span>
            </div>
            <div style={{ display: "flex", gap: "0.5rem" }}>
              <button onClick={() => startEdit(room)} style={{ padding: "0.5rem 1rem", backgroundColor: "#3b82f6", color: "white", border: "none", borderRadius: "0.25rem", cursor: "pointer", fontSize: "0.875rem" }}>
                Edit
              </button>
              <form action={async () => { await deleteRoom(room.id); }}>
                <button type="submit" style={{ padding: "0.5rem 1rem", backgroundColor: "#ef4444", color: "white", border: "none", borderRadius: "0.25rem", cursor: "pointer", fontSize: "0.875rem" }}>
                  Delete
                </button>
              </form>
            </div>
          </div>
        ))}
      </section>
    </div>
  );
}