"use client";

import { useState } from "react";

export default function ReverseProxyPage() {
  const [serverIp, setServerIp] = useState("");
  const [domain, setDomain] = useState("");
  const [port, setPort] = useState("");
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");
  const [isError, setIsError] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    setLoading(true);
    setMessage("");
    setIsError(false);

    const payload = {
      server_ip: serverIp,
      domain,
      port,
    };

    try {
      const res = await fetch(
        "https://manage.api.metatronnest.com/proxy/nginx-app",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }
      );

      const data = await res.json();

      if (!res.ok) {
        throw new Error(data?.message || "API Error");
      }

      setMessage("✅ Reverse Proxy created successfully");
      setServerIp("");
      setDomain("");
      setPort("");
    } catch (err: any) {
      setIsError(true);
      setMessage(err.message || "❌ Failed to create reverse proxy");
    } finally {
      setLoading(false);
    }
  };

  const inputStyle: React.CSSProperties = {
    width: "100%",
    padding: 10,
    marginTop: 6,
    border: "1px solid #d1d5db",
    borderRadius: 6,
    fontSize: 14,
    outline: "none",
  };

  return (
    <div
      style={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "#f3f4f6",
        fontFamily: "Arial, sans-serif",
      }}
    >
      {/* CARD */}
      <div
        style={{
          width: 420,
          background: "#ffffff",
          padding: 24,
          borderRadius: 8,
          boxShadow: "0 10px 25px rgba(0,0,0,0.1)",
        }}
      >
        <h2 style={{ textAlign: "center", marginBottom: 20 }}>
          Reverse Proxy
        </h2>

        <form onSubmit={handleSubmit} style={{ display: "grid", gap: 16 }}>
          {/* Server IP */}
          <div>
            <label>Server IP</label>
            <select
              value={serverIp}
              onChange={(e) => setServerIp(e.target.value)}
              required
              style={{
                ...inputStyle,
                paddingRight: 36, // ✅ space for dropdown arrow
              }}
            >
              <option value="">Select server IP</option>
              <option value="82.25.95.117">82.25.95.117</option>
              <option value="147.93.40.215">147.93.40.215</option>
            </select>
          </div>

          {/* Domain */}
          <div>
            <label>Domain</label>
            <input
              value={domain}
              onChange={(e) => setDomain(e.target.value)}
              placeholder="git.metatroncube.in"
              required
              style={inputStyle}
            />
          </div>

          {/* Port */}
          <div>
            <label>Port</label>
            <input
              value={port}
              onChange={(e) => setPort(e.target.value)}
              placeholder="3000"
              required
              style={inputStyle}
            />
          </div>

          {/* Submit Button */}
          <button
            type="submit"
            disabled={loading}
            style={{
              padding: 12,
              marginTop: 10,
              backgroundColor: loading ? "#93c5fd" : "#2563eb",
              color: "#ffffff",
              border: "none",
              borderRadius: 6,
              cursor: loading ? "not-allowed" : "pointer",
              fontWeight: 600,
            }}
          >
            {loading ? "Submitting..." : "Submit"}
          </button>
        </form>

        {/* Message */}
        {message && (
          <div
            style={{
              marginTop: 16,
              padding: 10,
              textAlign: "center",
              borderRadius: 4,
              border: "1px solid",
              borderColor: isError ? "#f87171" : "#4ade80",
              backgroundColor: isError ? "#fef2f2" : "#f0fdf4",
              color: isError ? "#b91c1c" : "#166534",
            }}
          >
            {message}
          </div>
        )}

        {/* Placeholder + Focus styling */}
        <style jsx>{`
          input::placeholder {
            color: #9ca3af;
            font-weight: 500;
          }

          input:focus,
          select:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
          }
        `}</style>
      </div>
    </div>
  );
}