qrcode-generator/src/components/qr-forms/social-form.tsx

"use client";

import { Icon } from "@/components/icons";
import type { QrFormProps } from "@/components/qr-forms/types";
import { Button, Field, Select, TextArea, TextInput } from "@/components/ui";
import { SOCIAL_NETWORKS, getSocialNetwork } from "@/lib/qr/social-networks";
import { MAX_PROFILES } from "@/lib/qr/types/social";

type Profile = { network: string; url: string };

function readProfiles(value: unknown): Profile[] {
  if (!Array.isArray(value)) return [{ network: "instagram", url: "" }];
  const entries = value.map((entry) => {
    const record = (entry ?? {}) as Record<string, unknown>;
    return {
      network: typeof record.network === "string" ? record.network : "website",
      url: typeof record.url === "string" ? record.url : "",
    };
  });
  return entries.length > 0 ? entries : [{ network: "instagram", url: "" }];
}

export function SocialForm({ value, onChange, error, disabled }: QrFormProps) {
  const title = typeof value.title === "string" ? value.title : "";
  const description =
    typeof value.description === "string" ? value.description : "";
  const profiles = readProfiles(value.profiles);

  const belegt = new Set(profiles.map((profile) => profile.network));
  const naechstesFreies =
    SOCIAL_NETWORKS.find((network) => !belegt.has(network.id))?.id ?? "website";

  const setProfiles = (next: Profile[]) =>
    onChange({ ...value, profiles: next });

  const updateProfile = (index: number, patch: Partial<Profile>) =>
    setProfiles(
      profiles.map((profile, i) => (i === index ? { ...profile, ...patch } : profile)),
    );

  return (
    <div className="space-y-5">
      <Field
        label="Überschrift der Seite"
        htmlFor="social-title"
        hint="Meist der Name, unter dem man euch kennt."
      >
        <TextInput
          id="social-title"
          value={title}
          disabled={disabled}
          maxLength={80}
          placeholder="Bäckerei Sonnenschein"
          onChange={(event) => onChange({ ...value, title: event.target.value })}
        />
      </Field>

      <Field
        label="Kurzer Text (optional)"
        htmlFor="social-description"
        hint="Eine Zeile darunter, z. B. „Folge uns für Neues aus der Backstube“."
      >
        <TextArea
          id="social-description"
          rows={2}
          value={description}
          disabled={disabled}
          maxLength={300}
          onChange={(event) =>
            onChange({ ...value, description: event.target.value })
          }
        />
      </Field>

      <div>
        <div className="mb-2 flex items-baseline justify-between gap-3">
          <span className="text-sm font-medium text-slate-700">Profile</span>
          <span className="text-xs text-slate-500">
            {profiles.length} von {MAX_PROFILES}
          </span>
        </div>

        <ul className="space-y-3">
          {profiles.map((profile, index) => {
            const network = getSocialNetwork(profile.network);
            return (
              <li
                key={index}
                className="rounded-xl border border-slate-200 bg-slate-50/70 p-3"
              >
                <div className="flex items-start gap-2">
                  <div className="min-w-0 flex-1 space-y-2">
                    <Select
                      aria-label={`Netzwerk von Profil ${index + 1}`}
                      value={profile.network}
                      disabled={disabled}
                      onChange={(event) =>
                        updateProfile(index, { network: event.target.value })
                      }
                    >
                      {SOCIAL_NETWORKS.map((entry) => (
                        <option
                          key={entry.id}
                          value={entry.id}
                          // Doppelte Netzwerke lehnt die Prüfung ohnehin ab —
                          // besser, sie stehen gar nicht erst zur Wahl.
                          disabled={
                            entry.id !== profile.network && belegt.has(entry.id)
                          }
                        >
                          {entry.label}
                        </option>
                      ))}
                    </Select>
                    <TextInput
                      aria-label={`Profil ${index + 1}`}
                      inputMode="url"
                      spellCheck={false}
                      value={profile.url}
                      disabled={disabled}
                      maxLength={2048}
                      placeholder={network?.placeholder ?? "https://example.com"}
                      onChange={(event) =>
                        updateProfile(index, { url: event.target.value })
                      }
                    />
                  </div>

                  <button
                    type="button"
                    disabled={disabled || profiles.length === 1}
                    onClick={() =>
                      setProfiles(profiles.filter((_, i) => i !== index))
                    }
                    aria-label={`Profil ${index + 1} entfernen`}
                    className="mt-1 rounded-md p-1.5 text-slate-500 transition-colors hover:bg-surface hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                  >
                    <Icon name="trash" className="size-4" />
                  </button>
                </div>
              </li>
            );
          })}
        </ul>

        {profiles.length < MAX_PROFILES &&
        profiles.length < SOCIAL_NETWORKS.length ? (
          <Button
            type="button"
            variant="secondary"
            size="sm"
            disabled={disabled}
            onClick={() =>
              setProfiles([...profiles, { network: naechstesFreies, url: "" }])
            }
            className="mt-3"
          >
            Profil hinzufügen
          </Button>
        ) : null}

        {error ? (
          <p role="alert" className="mt-2 text-sm text-red-600">
            {error}
          </p>
        ) : null}
      </div>
    </div>
  );
}