kipclip-appview / frontend / components / Save.tsx

import { useEffect, useState } from "react";
import type {
  CheckDuplicatesResponse,
  EnrichedBookmark,
  EnrichedTag,
} from "../../shared/types.ts";
import { DuplicateWarning } from "./DuplicateWarning.tsx";
import { TagInput } from "./TagInput.tsx";
import { Button } from "./Button.tsx";

export function Save() {
  const [session, setSession] = useState<
    { did: string; handle: string } | null
  >(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [url, setUrl] = useState("");
  const [tags, setTags] = useState<string[]>([]);
  const [availableTags, setAvailableTags] = useState<EnrichedTag[]>([]);
  const [duplicates, setDuplicates] = useState<EnrichedBookmark[] | null>(null);

  useEffect(() => {
    // Get URL from query params
    const params = new URLSearchParams(globalThis.location.search);
    const urlParam = params.get("url");
    if (urlParam) {
      setUrl(urlParam);
    }

    // Check session
    checkSession();
  }, []);

  async function checkSession() {
    try {
      const response = await fetch("/api/auth/session", {
        credentials: "include",
      });
      if (response.ok) {
        const data = await response.json();
        setSession({
          did: data.did,
          handle: data.handle,
        });

        // Fetch available tags for autocomplete (non-fatal)
        try {
          const tagsRes = await fetch("/api/tags", {
            credentials: "include",
          });
          if (tagsRes.ok) {
            const tagsData = await tagsRes.json();
            setAvailableTags(tagsData.tags || []);
          }
        } catch {
          // Autocomplete won't work, but that's fine
        }
      } else {
        // Session check failed - log for debugging
        console.warn("Session check failed:", {
          status: response.status,
          statusText: response.statusText,
        });

        // Try to get error details
        try {
          const errorData = await response.json();
          console.warn("Session error details:", errorData);
        } catch {
          // Ignore JSON parse errors
        }
      }
    } catch (error) {
      console.error("Failed to check session:", error);
    } finally {
      setLoading(false);
    }
  }

  async function checkDuplicates(
    urlToCheck: string,
  ): Promise<EnrichedBookmark[]> {
    try {
      const response = await fetch("/api/bookmarks/check-duplicates", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ url: urlToCheck }),
      });
      if (response.ok) {
        const data: CheckDuplicatesResponse = await response.json();
        return data.duplicates;
      }
    } catch {
      // Duplicate check is advisory — never block saving
    }
    return [];
  }

  async function saveBookmark() {
    setSaving(true);
    setError(null);

    try {
      const response = await fetch("/api/bookmarks", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ url: url.trim(), tags }),
      });

      // If session expired, redirect to login with current page
      if (response.status === 401) {
        try {
          const errorData = await response.json();
          console.warn("Authentication error during save:", errorData);
        } catch {
          // Ignore JSON parse errors
        }

        const loginUrl = `/login?redirect=${
          encodeURIComponent(
            globalThis.location.pathname + globalThis.location.search,
          )
        }`;
        globalThis.location.href = loginUrl;
        return;
      }

      if (!response.ok) {
        const data = await response.json();
        console.error("Failed to save bookmark:", data);
        throw new Error(data.message || data.error || "Failed to add bookmark");
      }

      setSaved(true);
    } catch (err: any) {
      setError(err.message);
      setSaving(false);
    }
  }

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    if (!url.trim()) return;

    setSaving(true);
    setError(null);

    const matches = await checkDuplicates(url.trim());
    if (matches.length > 0) {
      setDuplicates(matches);
      setSaving(false);
      return;
    }

    await saveBookmark();
  }

  function handleCancelDuplicate() {
    setDuplicates(null);
  }

  async function handleSaveAnyway() {
    await saveBookmark();
  }

  function handleClose() {
    globalThis.close();
  }

  if (loading) {
    return (
      <div
        className="flex items-center justify-center min-h-screen"
        style={{
          background: "linear-gradient(135deg, var(--cream) 0%, #e8f4f5 100%)",
        }}
      >
        <div className="spinner"></div>
      </div>
    );
  }

  if (!session) {
    const loginUrl = `/?redirect=${
      encodeURIComponent(
        globalThis.location.pathname + globalThis.location.search,
      )
    }`;
    return (
      <div
        className="flex items-center justify-center min-h-screen p-4"
        style={{
          background: "linear-gradient(135deg, var(--cream) 0%, #e8f4f5 100%)",
        }}
      >
        <div className="bg-white rounded-lg max-w-md w-full p-8 shadow-lg text-center">
          <div className="mb-6">
            <img
              src="https://res.cloudinary.com/dru3aznlk/image/upload/v1760692589/kip-vignette_h2jwct.png"
              alt="Kip logo"
              className="w-16 h-16 mx-auto mb-4"
            />
            <h1 className="text-2xl font-bold text-gray-800 mb-2">
              Sign in required
            </h1>
            <p className="text-gray-600">
              Sign in to save bookmarks to kipclip
            </p>
          </div>

          <Button href={loginUrl} variant="primary" fullWidth>
            Sign in
          </Button>
        </div>
      </div>
    );
  }

  if (saved) {
    return (
      <div
        className="flex items-center justify-center min-h-screen p-4"
        style={{
          background: "linear-gradient(135deg, var(--cream) 0%, #e8f4f5 100%)",
        }}
      >
        <div className="bg-white rounded-lg max-w-md w-full p-8 shadow-lg text-center">
          <div className="mb-6">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg
                className="w-8 h-8 text-green-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M5 13l4 4L19 7"
                />
              </svg>
            </div>
            <h2 className="text-2xl font-bold text-gray-800 mb-2">
              Bookmark Saved!
            </h2>
            <p className="text-gray-600 mb-6">
              Your bookmark has been saved to kipclip
            </p>
          </div>

          <div className="space-y-3">
            <Button
              type="button"
              variant="secondary"
              onClick={handleClose}
              fullWidth
            >
              Close Window
            </Button>
            <Button href="/" variant="primary" fullWidth>
              View All Bookmarks
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div
      className="flex items-center justify-center min-h-screen p-4"
      style={{
        background: "linear-gradient(135deg, var(--cream) 0%, #e8f4f5 100%)",
      }}
    >
      <div className="bg-white rounded-lg max-w-md w-full p-6 shadow-lg">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-2">
            <img
              src="https://res.cloudinary.com/dru3aznlk/image/upload/v1760692589/kip-vignette_h2jwct.png"
              alt="Kip logo"
              className="w-8 h-8"
            />
            <h2 className="text-xl font-bold text-gray-800">Save Bookmark</h2>
          </div>
          <button
            type="button"
            onClick={handleClose}
            className="text-gray-400 hover:text-gray-600 text-2xl"
            disabled={saving}
          >
            ×
          </button>
        </div>

        <div className="mb-4 text-sm text-gray-600">
          Signed in as <span className="font-medium">@{session.handle}</span>
        </div>

        {duplicates
          ? (
            <DuplicateWarning
              duplicates={duplicates}
              onCancel={handleCancelDuplicate}
              onContinue={handleSaveAnyway}
              loading={saving}
            />
          )
          : (
            <form onSubmit={handleSave} className="space-y-4">
              <div>
                <label
                  htmlFor="url"
                  className="block text-sm font-medium text-gray-700 mb-2"
                >
                  URL
                </label>
                <input
                  type="url"
                  id="url"
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  placeholder="https://example.com"
                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition"
                  disabled={saving}
                  autoFocus
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Tags (optional)
                </label>
                <TagInput
                  tags={tags}
                  onTagsChange={setTags}
                  availableTags={availableTags}
                  disabled={saving}
                  compact
                />
              </div>

              {error && (
                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
                  {error}
                </div>
              )}

              <Button
                type="submit"
                variant="primary"
                loading={saving}
                disabled={!url.trim()}
                fullWidth
              >
                {saving ? "Saving..." : "Save Bookmark"}
              </Button>
            </form>
          )}

        <p className="text-xs text-gray-500 mt-4 text-center">
          The page title and description will be automatically fetched
        </p>
      </div>
    </div>
  );
}