"use client";

import { useState, useEffect } from "react";
import { X } from "lucide-react";
import type { AppHost } from "@/lib/types";

interface HostModalProps {
  open: boolean;
  onClose: () => void;
  onSave: (data: { name: string; address: string; description?: string }) => void;
  editHost?: AppHost | null;
}

export function HostModal({ open, onClose, onSave, editHost }: HostModalProps) {
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const [description, setDescription] = useState("");

  useEffect(() => {
    if (open) {
      if (editHost) {
        setName(editHost.name);
        setAddress(editHost.address);
        setDescription(editHost.description ?? "");
      } else {
        setName("");
        setAddress("");
        setDescription("");
      }
    }
  }, [open, editHost]);

  if (!open) return null;

  const handleSave = () => {
    if (!name.trim() || !address.trim()) return;
    onSave({
      name: name.trim(),
      address: address.trim(),
      description: description.trim() || undefined,
    });
  };

  const inputClass =
    "w-full rounded-lg border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100";
  const labelClass = "mb-1 block text-xs font-medium text-zinc-500";

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl dark:bg-zinc-900">
        {/* Header */}
        <div className="mb-4 flex items-center justify-between">
          <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
            {editHost ? "Edit Host" : "Add Host"}
          </h3>
          <button
            onClick={onClose}
            className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
          >
            <X size={20} />
          </button>
        </div>

        <div className="space-y-4">
          {/* Name */}
          <div>
            <label className={labelClass}>Name *</label>
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              className={inputClass}
              placeholder="My Server"
            />
          </div>

          {/* Address */}
          <div>
            <label className={labelClass}>Address *</label>
            <input
              value={address}
              onChange={(e) => setAddress(e.target.value)}
              className={inputClass}
              placeholder="192.168.1.100"
            />
          </div>

          {/* Description */}
          <div>
            <label className={labelClass}>Description</label>
            <input
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              className={inputClass}
              placeholder="Optional description"
            />
          </div>
        </div>

        {/* Footer */}
        <div className="mt-4 flex justify-end gap-2">
          <button
            onClick={onClose}
            className="rounded-lg px-4 py-2 text-sm text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800"
          >
            Cancel
          </button>
          <button
            onClick={handleSave}
            disabled={!name.trim() || !address.trim()}
            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
          >
            {editHost ? "Save Changes" : "Add Host"}
          </button>
        </div>
      </div>
    </div>
  );
}
