"use client";

import { useCallback, useEffect, useState } from "react";
import {
  IconBrandAzure,
  IconDeviceFloppy,
  IconExternalLink,
  IconInfoCircle,
  IconPlugConnected,
  IconTrash,
} from "@tabler/icons-react";
import { Alert, AlertDescription } from "@kandev/ui/alert";
import { Button } from "@kandev/ui/button";
import { Card, CardContent } from "@kandev/ui/card";
import { Input } from "@kandev/ui/input";
import { Label } from "@kandev/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
import { Separator } from "@kandev/ui/separator";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@kandev/ui/tooltip";
import {
  IntegrationAuthStatusBanner,
  type IntegrationAuthHealth,
} from "@/components/integrations/auth-status-banner";
import { WorkspaceScopedSection } from "@/components/integrations/workspace-scoped-section";
import { SettingsSection } from "@/components/settings/settings-section";
import { useToast } from "@/components/toast-provider";
import { INTEGRATION_STATUS_REFRESH_MS } from "@/hooks/domains/integrations/use-integration-availability";
import { useAzureDevOpsProjects } from "@/hooks/domains/azure-devops/use-azure-devops-projects";
import {
  deleteAzureDevOpsConfig,
  getAzureDevOpsConfig,
  setAzureDevOpsConfig,
  testAzureDevOpsConnection,
} from "@/lib/api/domains/azure-devops-api";
import type {
  AzureDevOpsConfig,
  SetAzureDevOpsConfigRequest,
  TestAzureDevOpsConnectionResult,
} from "@/lib/types/azure-devops";

type FormState = {
  organizationUrl: string;
  defaultProjectId: string;
  defaultProjectName: string;
  pat: string;
};

const EMPTY_FORM: FormState = {
  organizationUrl: "",
  defaultProjectId: "",
  defaultProjectName: "",
  pat: "",
};

function configToForm(config: AzureDevOpsConfig | null): FormState {
  if (!config) return EMPTY_FORM;
  return {
    organizationUrl: config.organizationUrl,
    defaultProjectId: config.defaultProjectId ?? "",
    defaultProjectName: config.defaultProjectName ?? "",
    pat: "",
  };
}

function configToHealth(config: AzureDevOpsConfig | null): IntegrationAuthHealth | null {
  if (!config?.hasSecret) return null;
  return {
    ok: config.lastOk,
    error: config.lastError ?? "",
    checkedAt: config.lastCheckedAt ? new Date(config.lastCheckedAt) : null,
  };
}

function normalizedOrganization(value: string): string {
  return value.trim().replace(/\/+$/, "");
}

function azureDevOpsPATURL(value: string): string | null {
  let organizationURL: URL;
  try {
    organizationURL = new URL(value.trim());
  } catch {
    return null;
  }

  const organization = organizationURL.pathname.split("/").filter(Boolean);
  if (
    organizationURL.protocol !== "https:" ||
    organizationURL.hostname.toLowerCase() !== "dev.azure.com" ||
    organizationURL.port ||
    organizationURL.username ||
    organizationURL.password ||
    organizationURL.search ||
    organizationURL.hash ||
    organization.length !== 1 ||
    !/^[a-z0-9-]+$/i.test(organization[0])
  ) {
    return null;
  }

  return `https://dev.azure.com/${organization[0]}/_usersSettings/tokens`;
}

function savedPATMatches(config: AzureDevOpsConfig | null, form: FormState): boolean {
  return (
    !!config?.hasSecret &&
    normalizedOrganization(config.organizationUrl) === normalizedOrganization(form.organizationUrl)
  );
}

function requestFromForm(
  form: FormState,
  savedConfig: AzureDevOpsConfig | null,
): SetAzureDevOpsConfigRequest {
  const organizationMatches =
    normalizedOrganization(form.organizationUrl) ===
    normalizedOrganization(savedConfig?.organizationUrl ?? "");
  return {
    organizationUrl: normalizedOrganization(form.organizationUrl),
    defaultProjectId: organizationMatches ? form.defaultProjectId : undefined,
    defaultProjectName: organizationMatches ? form.defaultProjectName : undefined,
    authMethod: "pat",
    pat: form.pat || undefined,
  };
}

function useConfigRefresh(
  workspaceId: string,
  setConfig: (config: AzureDevOpsConfig | null) => void,
) {
  useEffect(() => {
    const interval = setInterval(() => {
      getAzureDevOpsConfig(workspaceId)
        .then(setConfig)
        .catch(() => undefined);
    }, INTEGRATION_STATUS_REFRESH_MS);
    return () => clearInterval(interval);
  }, [setConfig, workspaceId]);
}

function useAzureDevOpsSettings(workspaceId: string) {
  const { toast } = useToast();
  const [config, setConfig] = useState<AzureDevOpsConfig | null>(null);
  const [form, setForm] = useState<FormState>(EMPTY_FORM);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState<TestAzureDevOpsConnectionResult | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const next = await getAzureDevOpsConfig(workspaceId, { cache: "no-store" });
      setConfig(next);
      setForm(configToForm(next));
    } catch (err) {
      toast({
        description: `Failed to load Azure DevOps config: ${String(err)}`,
        variant: "error",
      });
    } finally {
      setLoading(false);
    }
  }, [toast, workspaceId]);

  useEffect(() => void load(), [load]);
  useConfigRefresh(workspaceId, setConfig);

  const update = useCallback(
    <K extends keyof FormState>(key: K, value: FormState[K]) =>
      setForm((current) => ({
        ...current,
        [key]: value,
        ...(key === "organizationUrl" &&
        normalizedOrganization(String(value)) !== normalizedOrganization(current.organizationUrl)
          ? { defaultProjectId: "", defaultProjectName: "" }
          : {}),
      })),
    [],
  );

  const test = useCallback(async () => {
    setTesting(true);
    setTestResult(null);
    try {
      setTestResult(await testAzureDevOpsConnection(workspaceId, requestFromForm(form, config)));
    } catch (err) {
      setTestResult({ ok: false, error: String(err) });
    } finally {
      setTesting(false);
    }
  }, [config, form, workspaceId]);

  const save = useCallback(async () => {
    setSaving(true);
    try {
      const next = await setAzureDevOpsConfig(workspaceId, requestFromForm(form, config));
      setConfig(next);
      setForm(configToForm(next));
      setTestResult(null);
      toast({ description: "Azure DevOps configuration saved", variant: "success" });
    } catch (err) {
      toast({ description: `Save failed: ${String(err)}`, variant: "error" });
    } finally {
      setSaving(false);
    }
  }, [config, form, toast, workspaceId]);

  const remove = useCallback(async () => {
    if (!confirm("Remove Azure DevOps configuration?")) return;
    try {
      await deleteAzureDevOpsConfig(workspaceId);
      setConfig(null);
      setForm(EMPTY_FORM);
      setTestResult(null);
      toast({ description: "Azure DevOps configuration removed", variant: "success" });
    } catch (err) {
      toast({ description: `Remove failed: ${String(err)}`, variant: "error" });
    }
  }, [toast, workspaceId]);

  return {
    config,
    form,
    loading,
    saving,
    testing,
    testResult,
    health: configToHealth(config),
    update,
    test,
    save,
    remove,
  };
}

function TestResult({ result }: { result: TestAzureDevOpsConnectionResult | null }) {
  if (!result) return null;
  return (
    <Alert variant={result.ok ? "default" : "destructive"} data-testid="azure-devops-test-result">
      <AlertDescription>
        {result.ok
          ? `Connected${result.displayName ? ` as ${result.displayName}` : ""}`
          : result.error || "Connection failed"}
      </AlertDescription>
    </Alert>
  );
}

type SettingsState = ReturnType<typeof useAzureDevOpsSettings>;
type ProjectsState = ReturnType<typeof useAzureDevOpsProjects>;

function PATSetupHelp({ organizationUrl }: { organizationUrl: string }) {
  const patURL = azureDevOpsPATURL(organizationUrl);
  const [open, setOpen] = useState(false);

  return (
    <TooltipProvider disableHoverableContent={false}>
      <Tooltip open={open} onOpenChange={setOpen}>
        <TooltipTrigger asChild>
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            className="size-11 shrink-0 cursor-help text-muted-foreground sm:size-7"
            aria-label="How to create a personal access token"
            onClick={() => setOpen((current) => !current)}
          >
            <IconInfoCircle className="size-4" />
          </Button>
        </TooltipTrigger>
        <TooltipContent
          id="azure-devops-pat-help"
          side="top"
          align="end"
          className="pointer-events-auto max-w-sm space-y-2 p-3 text-left text-xs leading-relaxed"
          data-testid="azure-devops-pat-help"
        >
          <p className="font-medium text-foreground">Create a read-only personal access token</p>
          <ol className="list-decimal space-y-1 pl-4 text-muted-foreground">
            <li>Open token settings and select New Token.</li>
            <li>Choose this organization, a short expiration, and Custom defined scopes.</li>
            <li>
              Under <span className="font-medium text-foreground">Work Items</span>, check Read.
              Under <span className="font-medium text-foreground">Code</span>, check Read. Leave all
              other scopes unchecked.
            </li>
            <li>Create the token, copy it, and paste it into this field.</li>
          </ol>
          {patURL ? (
            <a
              href={patURL}
              target="_blank"
              rel="noreferrer"
              className="inline-flex cursor-pointer items-center gap-1 font-medium text-foreground underline underline-offset-4"
            >
              <IconExternalLink className="size-3.5" />
              Create personal access token
            </a>
          ) : (
            <p className="text-muted-foreground">
              Enter a valid organization URL to open its token settings.
            </p>
          )}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

function ConnectionFields({
  state,
  projects,
  canReusePAT,
  projectSelectionEnabled,
}: {
  state: SettingsState;
  projects: ProjectsState;
  canReusePAT: boolean;
  projectSelectionEnabled: boolean;
}) {
  const projectPlaceholder = projects.loading ? "Loading projects..." : "Optional";
  return (
    <>
      <div className="grid gap-4 sm:grid-cols-2">
        <div className="space-y-1.5 sm:col-span-2">
          <Label htmlFor="azure-devops-organization">Organization URL</Label>
          <Input
            id="azure-devops-organization"
            value={state.form.organizationUrl}
            onChange={(event) => state.update("organizationUrl", event.target.value)}
            placeholder="https://dev.azure.com/organization"
            disabled={state.loading}
            autoComplete="url"
            data-testid="azure-devops-organization"
          />
        </div>
        <div className="space-y-1.5">
          <div className="sm:flex sm:min-h-7 sm:items-center">
            <Label htmlFor="azure-devops-project">Default project</Label>
          </div>
          <Select
            value={state.form.defaultProjectId || undefined}
            onValueChange={(projectId) => {
              const project = projects.data.find((item) => item.id === projectId);
              state.update("defaultProjectId", projectId);
              state.update("defaultProjectName", project?.name ?? "");
            }}
            disabled={
              state.loading ||
              projects.loading ||
              projects.data.length === 0 ||
              !projectSelectionEnabled
            }
          >
            <SelectTrigger id="azure-devops-project" className="w-full">
              <SelectValue placeholder={projectPlaceholder} />
            </SelectTrigger>
            <SelectContent>
              {projects.data.map((project) => (
                <SelectItem key={project.id} value={project.id}>
                  {project.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-1.5">
          <div className="flex items-center gap-1 sm:min-h-7">
            <Label htmlFor="azure-devops-pat">Personal Access Token</Label>
            <PATSetupHelp organizationUrl={state.form.organizationUrl} />
          </div>
          <Input
            id="azure-devops-pat"
            type="password"
            value={state.form.pat}
            onChange={(event) => state.update("pat", event.target.value)}
            placeholder={canReusePAT ? "Saved credential" : "Paste PAT"}
            disabled={state.loading}
            autoComplete="new-password"
            aria-describedby="azure-devops-pat-help"
            data-testid="azure-devops-pat"
          />
        </div>
      </div>
      {projects.error && (
        <p className="text-sm text-destructive" role="alert">
          {projects.error}
        </p>
      )}
    </>
  );
}

function saveButtonLabel(state: SettingsState): string {
  if (state.saving) return "Saving...";
  return state.config ? "Update" : "Save";
}

function ConnectionActions({ state, disabled }: { state: SettingsState; disabled: boolean }) {
  return (
    <div className="flex flex-col-reverse gap-2 sm:flex-row sm:flex-wrap sm:items-center">
      <Button
        type="button"
        variant="outline"
        onClick={() => void state.test()}
        disabled={disabled || state.testing}
        className="w-full cursor-pointer sm:w-auto"
        data-testid="azure-devops-test-button"
      >
        <IconPlugConnected className="h-4 w-4" />
        {state.testing ? "Testing..." : "Test connection"}
      </Button>
      <Button
        type="button"
        onClick={() => void state.save()}
        disabled={disabled || state.saving}
        className="w-full cursor-pointer sm:w-auto"
        data-testid="azure-devops-save-button"
      >
        <IconDeviceFloppy className="h-4 w-4" />
        {saveButtonLabel(state)}
      </Button>
      {state.config && (
        <Button
          type="button"
          variant="destructive"
          onClick={() => void state.remove()}
          className="w-full cursor-pointer sm:ml-auto sm:w-auto"
          data-testid="azure-devops-delete-button"
        >
          <IconTrash className="h-4 w-4" />
          Remove
        </Button>
      )}
    </div>
  );
}

export function AzureDevOpsConnectionSection({ workspaceId }: { workspaceId: string }) {
  const state = useAzureDevOpsSettings(workspaceId);
  const projects = useAzureDevOpsProjects(workspaceId, !!state.config?.hasSecret);
  const canReusePAT = savedPATMatches(state.config, state.form);
  const projectSelectionEnabled =
    !!state.config?.hasSecret &&
    normalizedOrganization(state.config.organizationUrl) ===
      normalizedOrganization(state.form.organizationUrl);
  const missingPAT = !canReusePAT && !state.form.pat;
  const disabled = state.loading || !state.form.organizationUrl || missingPAT;

  return (
    <SettingsSection
      icon={<IconBrandAzure className="h-5 w-5" />}
      title="Azure DevOps integration"
      description="Azure DevOps Services organization, project, and read-only PAT for this workspace."
    >
      <Card>
        <CardContent className="space-y-4 pt-6">
          <IntegrationAuthStatusBanner health={state.health} />
          <ConnectionFields
            state={state}
            projects={projects}
            canReusePAT={canReusePAT}
            projectSelectionEnabled={projectSelectionEnabled}
          />
          <TestResult result={state.testResult} />
          <Separator />
          <ConnectionActions state={state} disabled={disabled} />
        </CardContent>
      </Card>
    </SettingsSection>
  );
}

export function AzureDevOpsIntegrationPage({ workspaceId }: { workspaceId?: string } = {}) {
  return (
    <WorkspaceScopedSection workspaceId={workspaceId}>
      {(selectedWorkspaceId) => (
        <AzureDevOpsConnectionSection key={selectedWorkspaceId} workspaceId={selectedWorkspaceId} />
      )}
    </WorkspaceScopedSection>
  );
}