import { useCallback, useEffect, useRef, useState } from 'react';
import { KeyRound, Loader2, ShieldAlert } from 'lucide-react';
import { useClient } from 'hooks/useClient';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { readableError } from './errors';

/**
 * Entering a DNS provider's API credential.
 *
 * ── The fields are NPM's, not ours ──
 *
 * `GET /nginx/certificates/dns-providers` returns a `credentials` TEMPLATE per provider, carrying that
 * provider's own field names — one token for Cloudflare, a key and a secret for others. So the form is
 * GENERATED rather than written per provider, and it stays right for providers nobody here has heard of.
 *
 * When the template cannot be fetched — no NPM connection yet, or a provider it does not support — the
 * fallback is a single box in `key = value` form, which is the shape certbot wants anyway. Worse to use
 * and not wrong, which is the correct direction for a fallback.
 *
 * ── Narrow versus broad, and why it is not read versus write ──
 *
 * Both can issue certificates, because a DNS-01 challenge WRITES a TXT record — there is no read-only
 * credential that works, and offering one would produce a setup that looks configured and fails at the
 * first renewal, sixty days later. What differs is what else the key can do if it leaks.
 */

type NpmProvider = { id: string; name: string; credentials: string };

/**
 * Pull field names out of certbot's ini template.
 *
 * `dns_cloudflare_api_token = <token>` → `dns_cloudflare_api_token`. Anything that is not a `key = value`
 * line is skipped rather than guessed at.
 */
const fieldsFromTemplate = (template: string): string[] =>
  template
    .split('\n')
    .map((line) => line.split('=')[0]?.trim())
    .filter((key): key is string => !!key && /^[a-z0-9_]+$/i.test(key));

/** `dns_cloudflare_api_token` → `Api token`. The prefix is noise once the provider is named above. */
const labelFor = (field: string, provider: string): string => {
  const stripped = field.replace(new RegExp(`^dns_${provider}_`, 'i'), '').replace(/^dns_/, '');
  const words = stripped.replace(/_/g, ' ').trim();
  return words.charAt(0).toUpperCase() + words.slice(1);
};

type Props = {
  provider: string;
  hasExisting: boolean;
  onClose: () => void;
  onSaved: () => void;
};

export const CredentialDialog = ({ provider, hasExisting, onClose, onSaved }: Props) => {
  const client = useClient();
  const clientRef = useRef(client);
  clientRef.current = client;

  const [fields, setFields] = useState<string[] | null>(null);
  const [values, setValues] = useState<Record<string, string>>({});
  const [raw, setRaw] = useState('');
  const [scope, setScope] = useState<'narrow' | 'broad'>('narrow');
  const [label, setLabel] = useState('');
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [forbidden, setForbidden] = useState(false);

  const loadTemplate = useCallback(async () => {
    try {
      const list = await clientRef.current.get<NpmProvider[]>(
        '/proxy-manager/npm/nginx/certificates/dns-providers',
      );
      const match = list.find((entry) => entry.id.toLowerCase() === provider.toLowerCase());
      setFields(match ? fieldsFromTemplate(match.credentials) : []);
    } catch {
      // No connection, or NPM does not know this provider. The free-form box covers both.
      setFields([]);
    }
  }, [provider]);

  useEffect(() => {
    void loadTemplate();
  }, [loadTemplate]);

  const save = async () => {
    setSaving(true);
    setError(null);
    try {
      const entered =
        fields && fields.length > 0
          ? values
          : Object.fromEntries(
              raw
                .split('\n')
                .map((line) => {
                  const index = line.indexOf('=');
                  return index === -1 ? null : [line.slice(0, index).trim(), line.slice(index + 1).trim()];
                })
                .filter((pair): pair is [string, string] => !!pair && !!pair[0] && !!pair[1]),
            );

      await clientRef.current.put(`/proxy-manager/_config/dns-providers/${encodeURIComponent(provider)}`, {
        fields: entered,
        scope,
        label: label.trim() || undefined,
      });
      onSaved();
    } catch (caught) {
      if ((caught as { status?: number })?.status === 403) setForbidden(true);
      else setError(readableError(caught, 'Could not save that.'));
    } finally {
      setSaving(false);
    }
  };

  const generated = fields && fields.length > 0;
  const filled = generated ? fields.some((f) => values[f]?.trim()) : raw.trim().length > 0;

  return (
    <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
      <div
        className="flex max-h-full w-full max-w-md flex-col gap-3 overflow-auto rounded-lg border bg-background p-4"
        onClick={(ev) => ev.stopPropagation()}
      >
        <div className="flex items-center gap-2">
          <KeyRound className="size-4 text-muted-foreground" />
          <span className="text-sm font-medium">
            {hasExisting ? 'Replace' : 'Add'} the {provider} API key
          </span>
        </div>

        {forbidden ? (
          <>
            <p className="flex items-center gap-2 text-sm text-muted-foreground">
              <ShieldAlert className="size-4" /> Only the server owner can store a DNS credential.
            </p>
            <p className="text-[11px] leading-relaxed text-muted-foreground">
              It can rewrite every record for a domain, which is more than the proxy login already kept here.
            </p>
          </>
        ) : (
          <>
            {fields === null ? (
              <p className="text-xs text-muted-foreground">Looking up what {provider} needs…</p>
            ) : generated ? (
              fields.map((field) => (
                <label key={field} className="flex flex-col gap-1">
                  <span className="text-xs font-medium">{labelFor(field, provider)}</span>
                  <Input
                    value={values[field] ?? ''}
                    onChange={(ev) => setValues((prev) => ({ ...prev, [field]: ev.target.value }))}
                    placeholder={hasExisting ? 'unchanged' : field}
                    type="password"
                    autoComplete="off"
                    spellCheck={false}
                  />
                </label>
              ))
            ) : (
              <label className="flex flex-col gap-1">
                <span className="text-xs font-medium">Credential</span>
                <textarea
                  value={raw}
                  onChange={(ev) => setRaw(ev.target.value)}
                  rows={4}
                  spellCheck={false}
                  placeholder={`dns_${provider}_api_key = …`}
                  className="rounded-md border bg-transparent p-2 font-mono text-xs"
                />
                <span className="text-[11px] leading-relaxed text-muted-foreground">
                  One `name = value` per line. Officer could not fetch this provider's field names from Nginx Proxy
                  Manager, so they are yours to supply — its own documentation lists them.
                </span>
              </label>
            )}

            <fieldset className="flex flex-col gap-1.5 rounded-lg border p-2.5">
              <legend className="px-1 text-xs font-medium">What this key can do</legend>
              {(
                [
                  {
                    value: 'narrow' as const,
                    title: 'Certificates only',
                    hint: 'Scoped by the provider to DNS edits, ideally on just these zones. Enough to prove ownership and get a certificate. Not every provider can scope a key — some only issue account-wide ones.',
                  },
                  {
                    value: 'broad' as const,
                    title: 'Full DNS access',
                    hint: 'Also lets an agent create and change records for you when asked. Everything the narrow key does, plus everything else that key can reach if it leaks.',
                  },
                ]
              ).map((option) => (
                <label key={option.value} className="flex cursor-pointer items-start gap-2">
                  <input
                    type="radio"
                    name="scope"
                    className="mt-1"
                    checked={scope === option.value}
                    onChange={() => setScope(option.value)}
                  />
                  <span className="min-w-0">
                    <span className="block text-xs">{option.title}</span>
                    <span className="block text-[11px] leading-relaxed text-muted-foreground">{option.hint}</span>
                  </span>
                </label>
              ))}
              {/* The correction that stops somebody creating a read-only key and finding out in sixty days. */}
              <p className="px-1 text-[11px] leading-relaxed text-muted-foreground">
                There is no read-only option, and that is not an omission: proving you own a domain means writing a
                record into it, so any key that can get a certificate can write.
              </p>
            </fieldset>

            <label className="flex flex-col gap-1">
              <span className="text-xs font-medium">Label (optional)</span>
              <Input
                value={label}
                onChange={(ev) => setLabel(ev.target.value)}
                placeholder="which key this is, for when you rotate it"
                autoComplete="off"
              />
            </label>

            {error && <p className="text-xs text-destructive">{error}</p>}

            <p className="text-[11px] leading-relaxed text-muted-foreground">
              Stored encrypted under this plugin's own key and never returned by the API — not to a member, not to
              you. To change it, enter a new one.
            </p>
          </>
        )}

        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" size="sm" onClick={onClose}>
            {forbidden ? 'Close' : 'Cancel'}
          </Button>
          {!forbidden && (
            <Button type="button" size="sm" onClick={() => void save()} disabled={!filled || saving}>
              {saving ? <Loader2 className="size-3.5 animate-spin" /> : null} Save
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};