import { useState } from "react";

import { FormActions } from "@/client/components/ui/form-actions";
import { Input } from "@/client/components/ui/input";

export interface ClientFormValues {
  name: string;
  redirectUris: string[];
  uri: string;
  skipConsent: boolean;
}

interface ClientFormProps {
  mode: "create" | "edit";
  initial?: Partial<ClientFormValues>;
  pending: boolean;
  error?: string | null;
  onDismissError?: () => void;
  onSubmit: (values: ClientFormValues) => Promise<void>;
  onCancel: () => void;
}

const SkipConsentNote = () => (
  <span className="block text-xs text-zinc-500">
    For first-party RPs (anvil, bland) only. Bypasses the per-user grant prompt; tokens are issued straight from{" "}
    <code className="font-mono">/authorize</code>. Leave off for third-party clients.
  </span>
);

export const ClientForm = ({ mode, initial, pending, error, onDismissError, onSubmit, onCancel }: ClientFormProps) => {
  const [name, setName] = useState(initial?.name ?? "");
  const [redirectUrisText, setRedirectUrisText] = useState((initial?.redirectUris ?? []).join("\n"));
  const [uri, setUri] = useState(initial?.uri ?? "");
  const [skipConsent, setSkipConsent] = useState(initial?.skipConsent ?? false);
  const [localError, setLocalError] = useState<string | null>(null);
  const isEdit = mode === "edit";

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (pending) return;
    const redirectUris = redirectUrisText
      .split(/\r?\n/)
      .map((s) => s.trim())
      .filter(Boolean);
    if (!isEdit && redirectUris.length === 0) {
      setLocalError("At least one redirect URI is required.");
      return;
    }
    setLocalError(null);
    await onSubmit({
      name: name.trim(),
      // In edit mode the redirect_uris field is read-only and the worker
      // ignores anything beyond name/skipConsent/uri, so the original list
      // is sent back unchanged for completeness only.
      redirectUris: isEdit ? (initial?.redirectUris ?? []) : redirectUris,
      uri: uri.trim(),
      skipConsent,
    });
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
      <Input label="Client name" value={name} onChange={(e) => setName(e.target.value)} required autoFocus={!isEdit} />
      <div className="flex flex-col gap-1.5">
        <label className="text-sm font-medium text-zinc-200" htmlFor="client-form-redirect-uris">
          Redirect URIs (one per line)
        </label>
        <textarea
          id="client-form-redirect-uris"
          value={redirectUrisText}
          onChange={(e) => setRedirectUrisText(e.target.value)}
          rows={4}
          readOnly={isEdit}
          required={!isEdit}
          placeholder="https://anvil.limic.dev/auth/callback"
          className={`w-full rounded-xl border border-zinc-700/60 bg-zinc-800/80 px-4 py-2.5 font-mono text-xs text-zinc-100 focus:border-accent-500/50 focus:outline-none focus:ring-1 focus:ring-accent-500/30 ${
            isEdit ? "cursor-not-allowed opacity-70" : ""
          }`}
        />
        {isEdit ? (
          <p className="text-xs text-zinc-500">Redirect URIs are immutable. Register a new client to change them.</p>
        ) : null}
      </div>
      <Input
        label="Homepage URL (optional)"
        placeholder="https://anvil.limic.dev"
        helper="Stored as the OIDC client_uri. Surfaces on the consent screen and the connected-apps page."
        value={uri}
        onChange={(e) => setUri(e.target.value)}
        type="url"
      />
      <label className="flex items-start gap-3 rounded-xl border border-zinc-800/60 bg-zinc-900/40 p-3 text-sm text-zinc-200 hover:border-zinc-700/60">
        <input
          type="checkbox"
          checked={skipConsent}
          onChange={(e) => setSkipConsent(e.target.checked)}
          className="mt-0.5 h-4 w-4 shrink-0 rounded border-zinc-600 bg-zinc-800 accent-accent-500"
        />
        <span className="min-w-0">
          <span className="block font-medium text-zinc-100">Skip consent screen</span>
          <SkipConsentNote />
        </span>
      </label>
      <FormActions
        pending={pending}
        error={localError ?? error ?? null}
        onDismissError={() => {
          setLocalError(null);
          onDismissError?.();
        }}
        submitLabel={isEdit ? "Save changes" : "Register client"}
        onCancel={onCancel}
      />
    </form>
  );
};