import { useMemo, useState } from "react";
import { ChevronDownIcon, PlusIcon, TriangleAlert, XIcon } from "lucide-react";

import { cn } from "@executor-js/react/lib/utils";
import { Badge } from "@executor-js/react/components/badge";
import { Button } from "@executor-js/react/components/button";
import { Checkbox } from "@executor-js/react/components/checkbox";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@executor-js/react/components/collapsible";
import { FieldLabel } from "@executor-js/react/components/field";
import { Input } from "@executor-js/react/components/input";
import { IntegrationFavicon } from "@executor-js/react/components/integration-favicon";

import {
  googleOAuthConsentScopesForPreset,
  googleOpenApiPresets,
  type GoogleOpenApiOAuthAudience,
  type GoogleOpenApiPreset,
} from "../sdk/presets";
import { googleOAuthConsentBatches } from "../sdk/oauth-batches";
import { isGoogleDiscoveryUrl } from "../sdk/discovery";

// ---------------------------------------------------------------------------
// GoogleProductPicker - the "customize your Google connection" surface.
//
// A checkable card grid over `googleOpenApiPresets`, grouped/annotated by
// `oauthAudience`. The user picks which Google APIs to add as separate
// integrations. A "View scopes" panel previews the selected OAuth scopes, and a
// custom-URL escape hatch lets advanced users paste any Google Discovery document
// the preset list doesn't cover.
// ---------------------------------------------------------------------------

// Audience groups, ordered from least- to most-privileged. The warning tiers
// (`workspace-admin`, `unsupported-user`) carry a caution chip so the user sees
// the consent risk before selecting.
const AUDIENCE_ORDER: readonly GoogleOpenApiOAuthAudience[] = [
  "standard-user",
  "advanced-user",
  "workspace-admin",
  "unsupported-user",
];

const AUDIENCE_LABEL: Readonly<Record<GoogleOpenApiOAuthAudience, string>> = {
  "standard-user": "Core Google services",
  "advanced-user": "Advanced services",
  "workspace-admin": "Workspace admin",
  "unsupported-user": "Limited user consent",
};

const AUDIENCE_DESCRIPTION: Readonly<Record<GoogleOpenApiOAuthAudience, string>> = {
  "standard-user": "Connect with a normal Google account - one consent screen.",
  "advanced-user": "Broader scopes that may need an unverified-app warning to be accepted.",
  "workspace-admin": "Requires a Google Workspace admin account; not available on personal Gmail.",
  "unsupported-user": "Google does not grant these scopes through standard user OAuth consent.",
};

const audienceNeedsWarning = (audience: GoogleOpenApiOAuthAudience): boolean =>
  audience === "workspace-admin" || audience === "unsupported-user";

type GoogleProductPickerProps = {
  readonly selectedPresetIds: ReadonlySet<string>;
  readonly onToggle: (presetId: string, checked: boolean) => void;
  readonly customUrls: readonly string[];
  readonly onAddCustomUrl: (url: string) => void;
  readonly onRemoveCustomUrl: (url: string) => void;
};

const AudienceWarningChip = ({ audience }: { audience: GoogleOpenApiOAuthAudience }) =>
  audience === "workspace-admin" ? (
    <Badge variant="outline" className="shrink-0 border-border text-muted-foreground">
      <TriangleAlert className="size-3" />
      Admin only
    </Badge>
  ) : audience === "unsupported-user" ? (
    <Badge variant="outline" className="shrink-0 border-destructive/40 text-destructive">
      <TriangleAlert className="size-3" />
      Limited consent
    </Badge>
  ) : null;

// A Google API row - borderless and single-line, leaning on hover/selected
// fills instead of per-item card chrome (lightest separation that still reads).
// Name + truncated summary share one baseline for a dense, scannable two-column
// list; the audience warning chip trails on the right.
const ProductRow = ({
  preset,
  checked,
  onToggle,
}: {
  readonly preset: GoogleOpenApiPreset;
  readonly checked: boolean;
  readonly onToggle: (checked: boolean) => void;
}) => (
  <FieldLabel
    className={cn(
      // `w-full` overrides FieldLabel's base `w-fit` (which would size the row to
      // its content and overflow the column); `min-w-0` then lets the cell shrink
      // to its track so the name/summary truncates instead of spilling over.
      "flex w-full min-w-0 cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 transition-colors",
      checked ? "bg-primary/5" : "hover:bg-muted/40",
    )}
  >
    <Checkbox
      data-testid={`preset-checkbox-${preset.id}`}
      checked={checked}
      onCheckedChange={(next) => onToggle(next === true)}
    />
    <div className="shrink-0">
      <IntegrationFavicon icon={preset.icon} url={preset.url} size={16} />
    </div>
    {/* One truncating line - the name + summary clip to the cell with an
        ellipsis instead of overflowing into the neighbouring column. */}
    <div className="min-w-0 flex-1 truncate text-sm">
      <span className="font-medium text-foreground">{preset.name}</span>{" "}
      <span className="text-[11px] text-muted-foreground">{preset.summary}</span>
    </div>
    <AudienceWarningChip audience={preset.oauthAudience} />
  </FieldLabel>
);

const CustomUrlEscapeHatch = ({
  customUrls,
  onAddCustomUrl,
  onRemoveCustomUrl,
}: {
  readonly customUrls: readonly string[];
  readonly onAddCustomUrl: (url: string) => void;
  readonly onRemoveCustomUrl: (url: string) => void;
}) => {
  const [draft, setDraft] = useState("");
  const trimmed = draft.trim();
  const isValid = isGoogleDiscoveryUrl(trimmed);
  const isDuplicate = customUrls.includes(trimmed);

  const commit = () => {
    if (!isValid || isDuplicate) return;
    onAddCustomUrl(trimmed);
    setDraft("");
  };

  return (
    <div className="space-y-2">
      <FieldLabel className="text-[11px] font-medium text-muted-foreground">
        Add a custom Google Discovery URL
      </FieldLabel>
      <div className="flex items-center gap-2">
        <Input
          value={draft}
          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setDraft(event.target.value)}
          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
            if (event.key === "Enter") {
              event.preventDefault();
              commit();
            }
          }}
          placeholder="https://www.googleapis.com/discovery/v1/apis/<service>/<version>/rest"
          className="font-mono text-[11px]"
        />
        <Button
          type="button"
          variant="outline"
          size="sm"
          disabled={!isValid || isDuplicate}
          onClick={commit}
        >
          <PlusIcon className="size-3.5" />
          Add
        </Button>
      </div>
      {trimmed.length > 0 && !isValid ? (
        <p className="text-[11px] text-destructive">
          Enter a Google Discovery document URL (a *.googleapis.com discovery/$discovery endpoint).
        </p>
      ) : null}
      {customUrls.length > 0 ? (
        <ul className="space-y-1">
          {customUrls.map((url: string) => (
            <li
              key={url}
              className="flex items-center justify-between gap-2 rounded-md border border-border bg-muted/20 px-2.5 py-1.5"
            >
              <span className="truncate font-mono text-[11px] text-foreground">{url}</span>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-6 shrink-0"
                onClick={() => onRemoveCustomUrl(url)}
                aria-label={`Remove ${url}`}
              >
                <XIcon className="size-3.5" />
              </Button>
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  );
};

export function GoogleProductPicker({
  selectedPresetIds,
  onToggle,
  customUrls,
  onAddCustomUrl,
  onRemoveCustomUrl,
}: GoogleProductPickerProps) {
  const [scopesOpen, setScopesOpen] = useState(false);

  const groups = useMemo(
    () =>
      AUDIENCE_ORDER.flatMap((audience: GoogleOpenApiOAuthAudience) => {
        const presets = googleOpenApiPresets.filter(
          (preset: GoogleOpenApiPreset) => preset.oauthAudience === audience,
        );
        return presets.length > 0 ? [{ audience, presets }] : [];
      }),
    [],
  );

  // The "View scopes" preview groups the selected presets' representative
  // consent scopes so the user can review the requested OAuth surface before
  // adding separate integrations.
  const consentBatches = useMemo(
    () =>
      googleOAuthConsentBatches(
        googleOpenApiPresets
          .filter((preset: GoogleOpenApiPreset) => selectedPresetIds.has(preset.id))
          .map((preset: GoogleOpenApiPreset) => ({
            id: preset.id,
            name: preset.name,
            oauthAudience: preset.oauthAudience,
            scopes: googleOAuthConsentScopesForPreset(preset.id),
          })),
      ),
    [selectedPresetIds],
  );

  const selectedCount = selectedPresetIds.size + customUrls.length;

  return (
    <section className="space-y-4">
      <div className="space-y-1">
        <FieldLabel>Customize your Google connection</FieldLabel>
        <p className="text-[11px] text-muted-foreground">
          Pick Google APIs to add. Each selected product becomes its own integration.
        </p>
      </div>

      {groups.map(
        ({
          audience,
          presets,
        }: {
          readonly audience: GoogleOpenApiOAuthAudience;
          readonly presets: readonly GoogleOpenApiPreset[];
        }) => (
          <div key={audience} className="space-y-2">
            <div className="flex items-center gap-2">
              <span className="text-[11px] font-semibold tracking-wide text-foreground uppercase">
                {AUDIENCE_LABEL[audience]}
              </span>
              {audienceNeedsWarning(audience) ? <AudienceWarningChip audience={audience} /> : null}
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="ml-auto h-auto px-1.5 py-0.5 text-[11px] font-normal text-muted-foreground hover:bg-transparent hover:text-foreground"
                onClick={() => {
                  const allSelected = presets.every((preset: GoogleOpenApiPreset) =>
                    selectedPresetIds.has(preset.id),
                  );
                  presets.forEach((preset: GoogleOpenApiPreset) =>
                    onToggle(preset.id, !allSelected),
                  );
                }}
              >
                {presets.every((preset: GoogleOpenApiPreset) => selectedPresetIds.has(preset.id))
                  ? "Clear"
                  : "Select all"}
              </Button>
            </div>
            <p className="text-[11px] text-muted-foreground">{AUDIENCE_DESCRIPTION[audience]}</p>
            <div className="grid grid-cols-1 gap-x-4 gap-y-0.5 sm:grid-cols-2">
              {presets.map((preset: GoogleOpenApiPreset) => (
                <ProductRow
                  key={preset.id}
                  preset={preset}
                  checked={selectedPresetIds.has(preset.id)}
                  onToggle={(checked: boolean) => onToggle(preset.id, checked)}
                />
              ))}
            </div>
          </div>
        ),
      )}

      <CustomUrlEscapeHatch
        customUrls={customUrls}
        onAddCustomUrl={onAddCustomUrl}
        onRemoveCustomUrl={onRemoveCustomUrl}
      />

      <div className="space-y-1.5 rounded-lg border border-border bg-muted/10 px-3 py-2.5">
        <div className="flex items-center gap-2">
          <span className="text-[11px] font-semibold tracking-wide text-foreground uppercase">
            Authentication
          </span>
          <Badge variant="secondary">OAuth</Badge>
        </div>
        <p className="text-[11px] text-muted-foreground">
          Each selected Google product gets its own OAuth setup. Connect accounts from each
          integration page after adding.
        </p>
      </div>

      <Collapsible open={scopesOpen} onOpenChange={setScopesOpen}>
        <CollapsibleTrigger asChild>
          <Button type="button" variant="outline" size="sm" disabled={consentBatches.length === 0}>
            <ChevronDownIcon
              className={cn("size-3.5 transition-transform", scopesOpen ? "rotate-180" : "")}
            />
            View scopes
            {selectedCount > 0 ? (
              <Badge variant="secondary" className="ml-1">
                {selectedCount}
              </Badge>
            ) : null}
          </Button>
        </CollapsibleTrigger>
        <CollapsibleContent className="pt-3">
          {consentBatches.length === 0 ? (
            <p className="text-[11px] text-muted-foreground">
              Select at least one Google API to preview the OAuth consent.
            </p>
          ) : (
            <div className="space-y-3">
              {consentBatches.map((batch) => (
                <div key={batch.id} className="space-y-1.5">
                  <span className="text-[11px] font-semibold text-foreground">{batch.label}</span>
                  <ul className="space-y-1">
                    {batch.apiScopes.map((scope: string) => (
                      <li
                        key={scope}
                        className="rounded-md border border-border bg-muted/20 px-2.5 py-1 font-mono text-[11px] break-all text-muted-foreground"
                      >
                        {scope}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          )}
        </CollapsibleContent>
      </Collapsible>
    </section>
  );
}

export default GoogleProductPicker;