import { Database } from "@ui/types/database.types";
import { useState } from "react";
import { ClickOutside } from "./ClickOutside";
import { ImageColorPicker } from "./ImageColorPicker";
import { StatusPicker } from "./StatusPicker";

type Tablo = Database["public"]["Tables"]["tablos"]["Row"];
type StatusType = "todo" | "in_progress" | "done";

interface CreateTabloModalProps {
  onClose: () => void;
  onCreate: (tabloData: Pick<Tablo, "name" | "color" | "image" | "status">) => void;
}

export const CreateTabloModal = ({ onClose, onCreate }: CreateTabloModalProps) => {
  const [newTabloName, setNewTabloName] = useState("");
  const [creationMode, setCreationMode] = useState<"image" | "color">("color");
  const [selectedImage, setSelectedImage] = useState(
    "https://images.unsplash.com/photo-1553877522-43269d4ea984?w=400&h=250&fit=crop&crop=center"
  );
  const [selectedColor, setSelectedColor] = useState("bg-blue-500");
  const [selectedStatus, setSelectedStatus] = useState<StatusType>("todo");

  const resetForm = () => {
    setNewTabloName("");
    setCreationMode("color");
    setSelectedImage(
      "https://images.unsplash.com/photo-1553877522-43269d4ea984?w=400&h=250&fit=crop&crop=center"
    );
    setSelectedColor("bg-blue-500");
    setSelectedStatus("todo");
  };

  const handleClose = () => {
    resetForm();
    onClose();
  };

  const handleCreate = () => {
    if (newTabloName.trim()) {
      const tabloData = {
        name: newTabloName.trim(),
        status: selectedStatus,
        ...(creationMode === "image"
          ? { image: selectedImage, color: null }
          : { image: null, color: selectedColor }),
      };
      onCreate(tabloData);
      resetForm();
    }
  };

  return (
    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50">
      <ClickOutside onClickOutside={handleClose}>
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-4xl min-w-96 mx-4">
          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
            Créer un nouveau tablo
          </h2>

          <div className="space-y-4">
            {/* Name Input */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Nom du tablo
              </label>
              <input
                type="text"
                value={newTabloName}
                onChange={(e) => setNewTabloName(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                placeholder="Entrez le nom du tablo"
                autoFocus
              />
            </div>

            <StatusPicker selectedStatus={selectedStatus} setSelectedStatus={setSelectedStatus} />

            <ImageColorPicker
              creationMode={creationMode}
              setCreationMode={setCreationMode}
              selectedColor={selectedColor}
              setSelectedColor={setSelectedColor}
            />
          </div>

          {/* Modal Actions */}
          <div className="flex justify-end space-x-3 mt-6">
            <button
              type="button"
              className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md"
              onClick={handleClose}
            >
              Annuler
            </button>
            <button
              type="button"
              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
              onClick={handleCreate}
              disabled={!newTabloName.trim() || creationMode === "image"}
            >
              Créer
            </button>
          </div>
        </div>
      </ClickOutside>
    </div>
  );
};