import { useState, useEffect } from "react";

export default function ApiKeyField({
  label,
  value,
  onChange,
  onTest,
  provider,
  helpUrl,
  helpText,
  placeholder = "",
  type = "password",
}) {
  const [testing, setTesting] = useState(false);
  const [message, setMessage] = useState({ type: null, text: "" });

  const handleTest = async () => {
    if (!onTest) return;
    setTesting(true);
    setMessage({ type: null, text: "" });
    try {
      const result = await onTest(provider, value);
      setMessage({ type: result.success ? "success" : "error", text: result.message || (result.success ? "Key valid." : "Key invalid.") });
    } catch (e) {
      setMessage({ type: "error", text: e?.message || "Test failed." });
    } finally {
      setTesting(false);
    }
  };

  // Auto-hide success message after 3 seconds, error messages after 5 seconds
  useEffect(() => {
    if (message.type === "success") {
      const timer = setTimeout(() => {
        setMessage({ type: null, text: "" });
      }, 3000);
      return () => clearTimeout(timer);
    }
    if (message.type === "error") {
      const timer = setTimeout(() => {
        setMessage({ type: null, text: "" });
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [message]);

  const fieldId = `ai-image-key-${provider || label}`.toLowerCase().replace(/[^a-z0-9-]+/g, "-");

  return (
    <div>
      <label htmlFor={fieldId} className="block text-sm font-semibold text-gray-700 mb-2">{label}</label>
      <div className="flex flex-wrap items-center gap-2">
        <input
          id={fieldId}
          type={type}
          value={value}
          onChange={(e) => onChange?.(e.target.value)}
          placeholder={placeholder}
          className="flex-1 min-w-[200px] rounded-md border border-gray-200 px-4 py-2.5 text-sm transition-all outline-none focus:border-indigo-500 focus:ring-0"
        />
        {onTest && (
          <button
            type="button"
            onClick={handleTest}
            disabled={testing || !value || !value.trim()}
            className="inline-flex items-center px-4 py-2.5 border border-gray-300 rounded-md text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
          >
            {testing ? "Testing…" : "Test Key"}
          </button>
        )}
      </div>
      {helpText && (
        <p className="mt-2 text-xs text-gray-500 leading-relaxed">
          {helpUrl ? (
            <a href={helpUrl} target="_blank" rel="noopener noreferrer" className="text-gray-800 hover:text-gray-900 font-medium transition-colors">
              {helpText}
            </a>
          ) : (
            helpText
          )}
        </p>
      )}
      {message.text && (
        <p className={`mt-2 text-sm font-medium ${message.type === "success" ? "text-green-600" : "text-red-600"}`}>
          {message.text}
        </p>
      )}
    </div>
  );
}