"use client";

import { useState, useEffect } from "react";
import { useMutation } from "convex/react";
import { api } from "@/convex/_generated/api";
import { Id } from "@/convex/_generated/dataModel";

interface RoomSettingsModalProps {
  room: {
    _id: Id<"rooms">;
    name: string;
    backgroundConfig?: {
      type: "image" | "gradient" | "solid";
      imageUrl?: string;
      gradientStart?: string;
      gradientEnd?: string;
      solidColor?: string;
    };
  } | null;
  isOpen: boolean;
  onClose: () => void;
}

export function RoomSettingsModal({ room, isOpen, onClose }: RoomSettingsModalProps) {
  const [roomName, setRoomName] = useState("");
  const [backgroundType, setBackgroundType] = useState<"solid" | "gradient" | "image">("solid");
  const [solidColor, setSolidColor] = useState("#1f2937");
  const [gradientStart, setGradientStart] = useState("#1f2937");
  const [gradientEnd, setGradientEnd] = useState("#3b82f6");
  const [imageUrl, setImageUrl] = useState("");

  const updateRoom = useMutation(api.rooms.update);

  // Initialize form values when room changes
  useEffect(() => {
    if (room) {
      setRoomName(room.name);
      if (room.backgroundConfig) {
        const bg = room.backgroundConfig;
        setBackgroundType(bg.type);
        if (bg.type === "solid" && bg.solidColor) {
          setSolidColor(bg.solidColor);
        } else if (bg.type === "gradient" && bg.gradientStart && bg.gradientEnd) {
          setGradientStart(bg.gradientStart);
          setGradientEnd(bg.gradientEnd);
        } else if (bg.type === "image" && bg.imageUrl) {
          setImageUrl(bg.imageUrl);
        }
      }
    }
  }, [room]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!room) return;

    const backgroundConfig = {
      type: backgroundType,
      ...(backgroundType === "solid" && { solidColor }),
      ...(backgroundType === "gradient" && { gradientStart, gradientEnd }),
      ...(backgroundType === "image" && { imageUrl }),
    };

    await updateRoom({
      roomId: room._id,
      name: roomName.trim() || room.name, // Use trimmed name or fallback to original
      backgroundConfig,
    });

    onClose();
  };

  if (!isOpen || !room) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
        <h2 className="text-xl font-bold mb-4">Room Settings</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2">Room Name</label>
            <input
              type="text"
              value={roomName}
              onChange={(e) => setRoomName(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Enter room name"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Background</label>
            <div className="space-y-3">
              <div className="flex gap-2">
                <button
                  type="button"
                  onClick={() => setBackgroundType("solid")}
                  className={`px-3 py-1 rounded text-sm ${
                    backgroundType === "solid"
                      ? "bg-blue-600 text-white"
                      : "bg-gray-200 dark:bg-gray-700"
                  }`}
                >
                  Solid
                </button>
                <button
                  type="button"
                  onClick={() => setBackgroundType("gradient")}
                  className={`px-3 py-1 rounded text-sm ${
                    backgroundType === "gradient"
                      ? "bg-blue-600 text-white"
                      : "bg-gray-200 dark:bg-gray-700"
                  }`}
                >
                  Gradient
                </button>
                <button
                  type="button"
                  onClick={() => setBackgroundType("image")}
                  className={`px-3 py-1 rounded text-sm ${
                    backgroundType === "image"
                      ? "bg-blue-600 text-white"
                      : "bg-gray-200 dark:bg-gray-700"
                  }`}
                >
                  Image
                </button>
              </div>

              {backgroundType === "solid" && (
                <div>
                  <label className="block text-xs mb-1">Color</label>
                  <input
                    type="color"
                    value={solidColor}
                    onChange={(e) => setSolidColor(e.target.value)}
                    className="w-full h-10 rounded border border-gray-300 dark:border-gray-600"
                  />
                </div>
              )}

              {backgroundType === "gradient" && (
                <div className="space-y-2">
                  <div>
                    <label className="block text-xs mb-1">Start Color</label>
                    <input
                      type="color"
                      value={gradientStart}
                      onChange={(e) => setGradientStart(e.target.value)}
                      className="w-full h-10 rounded border border-gray-300 dark:border-gray-600"
                    />
                  </div>
                  <div>
                    <label className="block text-xs mb-1">End Color</label>
                    <input
                      type="color"
                      value={gradientEnd}
                      onChange={(e) => setGradientEnd(e.target.value)}
                      className="w-full h-10 rounded border border-gray-300 dark:border-gray-600"
                    />
                  </div>
                </div>
              )}

              {backgroundType === "image" && (
                <div>
                  <label className="block text-xs mb-1">Image URL</label>
                  <input
                    type="url"
                    value={imageUrl}
                    onChange={(e) => setImageUrl(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="https://example.com/image.jpg"
                  />
                </div>
              )}

              {/* Preview */}
              <div className="mt-3">
                <label className="block text-xs mb-1">Preview</label>
                <div
                  className="w-full h-24 rounded border border-gray-300 dark:border-gray-600"
                  style={{
                    background:
                      backgroundType === "solid"
                        ? solidColor
                        : backgroundType === "gradient"
                        ? `linear-gradient(135deg, ${gradientStart}, ${gradientEnd})`
                        : imageUrl
                        ? `url(${imageUrl}) center/cover`
                        : "#1f2937",
                  }}
                />
              </div>
            </div>
          </div>

          <div className="flex gap-3 justify-end pt-4">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded font-medium"
            >
              Save Changes
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}