import { useCallback, useState } from "react";
import { parse } from "tldts";

import { CardStack, CardStackContent, CardStackEntryField } from "../components/card-stack";
import { Input } from "../components/input";
import { normalizeNamespaceInput, slugifyNamespace } from "./namespace";
export { normalizeNamespaceInput, slugifyNamespace } from "./namespace";

/**
 * Derives a display-name candidate from a URL by extracting its apex domain
 * label (e.g. `https://api.shopify.com/graphql` → `"Shopify"`) and
 * title-casing it. Returns `null` if the URL has no parseable domain.
 */
export function displayNameFromUrl(url: string): string | null {
  const trimmed = url.trim();
  if (!trimmed) return null;
  const parsed = parse(trimmed);
  const label = parsed.domainWithoutSuffix;
  if (!label) return null;
  return label.charAt(0).toUpperCase() + label.slice(1);
}

export function domainLabelFromUrl(url: string): string | null {
  const trimmed = url.trim();
  if (!trimmed) return null;
  return parse(trimmed).domainWithoutSuffix ?? null;
}

export function pascalCaseDomainLabel(label: string): string | null {
  const words = label
    .split(/[^a-z0-9]+/i)
    .map((word) => word.trim())
    .filter(Boolean);
  if (words.length === 0) return null;
  return words
    .map((word) => {
      const normalized = word.toLowerCase();
      return normalized.charAt(0).toUpperCase() + normalized.slice(1);
    })
    .join("");
}

export function integrationDisplayNameFromUrl(url: string, sourceKind: string): string | null {
  const label = domainLabelFromUrl(url);
  const displayLabel = label ? pascalCaseDomainLabel(label) : null;
  return displayLabel ? `${displayLabel} ${sourceKind}` : null;
}

// ---------------------------------------------------------------------------
// Hook — owns the name + namespace state with namespace auto-derivation
// ---------------------------------------------------------------------------

export interface IntegrationIdentity {
  /** Display name — the user's override if they've typed one, otherwise the fallback. */
  readonly name: string;
  /** Namespace — the user's override if they've typed one, otherwise slugified from `name`. */
  readonly namespace: string;
  readonly setName: (name: string) => void;
  readonly setNamespace: (namespace: string) => void;
  /** Clears any user overrides so both fields return to deriving from the fallback. */
  readonly reset: () => void;
}

export interface UseIntegrationIdentityOptions {
  /**
   * Fallback display name — used when the user hasn't typed one. Pass a
   * value computed from the caller's reactive state (probe result, URL
   * apex domain, template default, etc.) and it'll flow through to `name`
   * automatically.
   */
  readonly fallbackName?: string;
  /** Fallback namespace — defaults to `slugifyNamespace(fallbackName ?? "")`. */
  readonly fallbackNamespace?: string;
}

/**
 * Manages a display name and a derived namespace. Both fields are pure
 * derived state: the user's `setName` / `setNamespace` call stores an
 * override, otherwise the hook returns the caller-supplied fallback
 * (passed fresh on every render). Call `reset()` to drop overrides.
 */
export function useIntegrationIdentity(
  options?: UseIntegrationIdentityOptions,
): IntegrationIdentity {
  const [nameOverride, setNameOverride] = useState<string | null>(null);
  const [namespaceOverride, setNamespaceOverride] = useState<string | null>(null);

  const fallbackName = options?.fallbackName ?? "";
  const name = nameOverride ?? fallbackName;
  const fallbackNamespace = options?.fallbackNamespace ?? slugifyNamespace(name);
  const namespace = namespaceOverride ?? fallbackNamespace;

  const setName = useCallback((next: string) => {
    setNameOverride(next);
  }, []);

  const setNamespace = useCallback((next: string) => {
    setNamespaceOverride(normalizeNamespaceInput(next));
  }, []);

  const reset = useCallback(() => {
    setNameOverride(null);
    setNamespaceOverride(null);
  }, []);

  return { name, namespace, setName, setNamespace, reset };
}

// ---------------------------------------------------------------------------
// UI — two fields, wrapped in a shared CardStack
// ---------------------------------------------------------------------------

export interface IntegrationIdentityFieldsProps {
  readonly identity: IntegrationIdentity;
  readonly namePlaceholder?: string;
  readonly namespacePlaceholder?: string;
  readonly nameLabel?: string;
  readonly namespaceHint?: string;
  /**
   * When true, the namespace field is rendered disabled — useful on Edit
   * forms, where the namespace is the source's identity and changing it
   * would require a delete + recreate flow.
   */
  readonly namespaceReadOnly?: boolean;
}

export function IntegrationIdentityFields({
  identity,
  namePlaceholder = "e.g. Sentry API",
  namespacePlaceholder = "sentry_api",
  nameLabel = "Display Name",
  namespaceHint,
  namespaceReadOnly = false,
}: IntegrationIdentityFieldsProps) {
  const effectiveNamespaceHint =
    namespaceHint ??
    (namespaceReadOnly
      ? "The namespace is part of the source's identity and cannot be changed."
      : undefined);

  return (
    <CardStack>
      <CardStackContent className="border-t-0">
        <IntegrationIdentityFieldRows
          identity={identity}
          namePlaceholder={namePlaceholder}
          namespacePlaceholder={namespacePlaceholder}
          nameLabel={nameLabel}
          namespaceHint={effectiveNamespaceHint}
          namespaceReadOnly={namespaceReadOnly}
        />
      </CardStackContent>
    </CardStack>
  );
}

export function IntegrationIdentityFieldRows({
  identity,
  namePlaceholder = "e.g. Sentry API",
  namespacePlaceholder = "sentry_api",
  nameLabel = "Display Name",
  namespaceHint,
  namespaceReadOnly = false,
}: IntegrationIdentityFieldsProps) {
  const effectiveNamespaceHint =
    namespaceHint ??
    (namespaceReadOnly
      ? "The namespace is part of the source's identity and cannot be changed."
      : undefined);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2">
      <CardStackEntryField label={nameLabel}>
        <Input
          value={identity.name}
          onChange={(e) => identity.setName((e.target as HTMLInputElement).value)}
          placeholder={namePlaceholder}
          className="text-sm"
        />
      </CardStackEntryField>
      <CardStackEntryField label="Namespace" hint={effectiveNamespaceHint}>
        <Input
          value={identity.namespace}
          onChange={(e) => identity.setNamespace((e.target as HTMLInputElement).value)}
          placeholder={namespacePlaceholder}
          className="font-mono text-sm"
          disabled={namespaceReadOnly}
        />
      </CardStackEntryField>
    </div>
  );
}