"use client";

import { useState } from "react";
import type { CustomPoi, CustomPoiUpdate } from "@/types/customPoi";

interface Props {
  poi: CustomPoi;
  onSubmit: (data: CustomPoiUpdate) => void;
  onCancel: () => void;
  isLoading?: boolean;
}

const CATEGORY_OPTIONS = [
  "school",
  "kindergarten",
  "pharmacy",
  "hospital",
  "clinic",
  "shop_mall",
  "shop_supermarket",
  "shop_small",
  "park",
  "tram_stop",
  "bus_stop",
  "metro_stop",
  "cafe",
  "restaurant",
  "bank",
  "atm",
  "post_office",
  "library",
  "sports_centre",
  "gym",
  "cinema",
  "theatre",
  "hotel",
  "fuel",
  "parking",
  "Другое",
] as const;

export function CustomPoiEditModal({
  poi,
  onSubmit,
  onCancel,
  isLoading = false,
}: Props) {
  const [name, setName] = useState(poi.name);
  const [category, setCategory] = useState<string>(poi.category ?? "Другое");
  const [weight, setWeight] = useState(poi.weight);
  const [notes, setNotes] = useState(poi.notes ?? "");

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    onSubmit({
      name: name.trim() || poi.name,
      category: category === "Другое" ? null : category,
      weight,
      notes: notes.trim() || null,
    });
  }

  const weightColor =
    weight > 0 ? "#16a34a" : weight < 0 ? "#dc2626" : "#6b7280";

  return (
    <div
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(0,0,0,0.35)",
        zIndex: 9999,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
      onClick={(e) => {
        if (e.target === e.currentTarget) onCancel();
      }}
    >
      <div
        style={{
          background: "#fff",
          borderRadius: 14,
          padding: "24px 28px",
          width: 380,
          maxWidth: "calc(100vw - 40px)",
          boxShadow: "0 20px 40px rgba(0,0,0,0.18)",
        }}
        onClick={(e) => e.stopPropagation()}
      >
        <h3
          style={{
            margin: "0 0 18px",
            fontSize: 17,
            fontWeight: 700,
            color: "#111827",
          }}
        >
          Изменить точку
        </h3>

        <form
          onSubmit={handleSubmit}
          style={{ display: "flex", flexDirection: "column", gap: 14 }}
        >
          <div>
            <label
              style={{
                display: "block",
                fontSize: 12,
                fontWeight: 600,
                color: "#374151",
                marginBottom: 4,
              }}
            >
              Название
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              style={{
                width: "100%",
                padding: "8px 10px",
                fontSize: 13,
                border: "1px solid #d1d5db",
                borderRadius: 7,
                boxSizing: "border-box",
              }}
              autoFocus
            />
          </div>

          <div>
            <label
              style={{
                display: "block",
                fontSize: 12,
                fontWeight: 600,
                color: "#374151",
                marginBottom: 4,
              }}
            >
              Категория
            </label>
            <select
              value={category}
              onChange={(e) => setCategory(e.target.value)}
              style={{
                width: "100%",
                padding: "8px 10px",
                fontSize: 13,
                border: "1px solid #d1d5db",
                borderRadius: 7,
                background: "#fff",
                boxSizing: "border-box",
              }}
            >
              {CATEGORY_OPTIONS.map((opt) => (
                <option key={opt} value={opt}>
                  {opt}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label
              style={{
                display: "block",
                fontSize: 12,
                fontWeight: 600,
                color: "#374151",
                marginBottom: 4,
              }}
            >
              Вес{" "}
              <span style={{ fontWeight: 700, color: weightColor }}>
                {weight > 0 ? `+${weight}` : weight}
              </span>
            </label>
            <input
              type="range"
              min={-5}
              max={5}
              step={1}
              value={weight}
              onChange={(e) => setWeight(Number(e.target.value))}
              style={{ width: "100%" }}
            />
          </div>

          <div>
            <label
              style={{
                display: "block",
                fontSize: 12,
                fontWeight: 600,
                color: "#374151",
                marginBottom: 4,
              }}
            >
              Заметки
            </label>
            <textarea
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              rows={2}
              style={{
                width: "100%",
                padding: "8px 10px",
                fontSize: 13,
                border: "1px solid #d1d5db",
                borderRadius: 7,
                resize: "vertical",
                boxSizing: "border-box",
              }}
            />
          </div>

          <div
            style={{
              display: "flex",
              gap: 10,
              justifyContent: "flex-end",
              marginTop: 4,
            }}
          >
            <button
              type="button"
              onClick={onCancel}
              style={{
                padding: "8px 18px",
                fontSize: 13,
                borderRadius: 7,
                border: "1px solid #d1d5db",
                background: "#f9fafb",
                cursor: "pointer",
                color: "#374151",
              }}
              disabled={isLoading}
            >
              Отмена
            </button>
            <button
              type="submit"
              style={{
                padding: "8px 20px",
                fontSize: 13,
                borderRadius: 7,
                border: "none",
                background: isLoading ? "#93c5fd" : "#1d4ed8",
                color: "#fff",
                cursor: isLoading ? "not-allowed" : "pointer",
                fontWeight: 600,
              }}
              disabled={isLoading}
            >
              {isLoading ? "Сохранение…" : "Сохранить"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}