"use client";

import { Field, TextInput } from "@/components/ui";
import type { QrFormProps } from "@/components/qr-forms/types";

export function WebsiteForm({ value, onChange, error, disabled }: QrFormProps) {
  const url = typeof value.url === "string" ? value.url : "";
  // Häufigster Eingabefehler: die Adresse wird ohne Schema getippt.
  const missingScheme = url.trim().length > 0 && !/^[a-z][a-z0-9+.-]*:/i.test(url);

  return (
    <div>
      <Field
        label="Website-Adresse"
        htmlFor="website-url"
        error={error}
        hint="Die vollständige Adresse inklusive https://"
      >
        <TextInput
          id="website-url"
          type="text"
          inputMode="url"
          autoComplete="url"
          spellCheck={false}
          placeholder="https://example.com"
          value={url}
          invalid={Boolean(error)}
          disabled={disabled}
          onChange={(event) => onChange({ ...value, url: event.target.value })}
        />
      </Field>

      {missingScheme ? (
        <button
          type="button"
          onClick={() =>
            onChange({ ...value, url: `https://${url.trim().replace(/^\/+/, "")}` })
          }
          className="mt-2 rounded-lg border border-slate-300 bg-surface px-2.5 py-1 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50"
        >
          https:// voranstellen
        </button>
      ) : null}
    </div>
  );
}