import { Alert } from "@/components/ui/Alert";

export function formErrorMessages(
  errors: Partial<Record<string, string>>,
  general?: string | null,
): string[] {
  const messages = Object.values(errors).filter((message): message is string => Boolean(message));
  if (general && !messages.includes(general)) messages.push(general);
  return messages;
}

export function apiFieldErrors(
  err: unknown,
  mapping: Record<string, string> = {},
): { fields: Record<string, string>; general: string | null } {
  const payload =
    err && typeof err === "object" && "payload" in err
      ? (err.payload as { errors?: Record<string, string[]>; message?: string } | undefined)
      : undefined;
  const raw = payload?.errors ?? {};
  const fields: Record<string, string> = {};
  const used = new Set<string>();

  for (const [apiKey, fieldKey] of Object.entries(mapping)) {
    const message = raw[apiKey]?.[0];
    if (message) {
      fields[fieldKey] = message;
      used.add(apiKey);
    }
  }

  for (const [apiKey, messages] of Object.entries(raw)) {
    if (used.has(apiKey) || !messages[0]) continue;
    const fieldKey = mapping[apiKey] ?? apiKey;
    if (!fields[fieldKey]) fields[fieldKey] = messages[0];
  }

  const leftover = Object.entries(raw)
    .filter(([key]) => !used.has(key) && !mapping[key])
    .flatMap(([, messages]) => messages);

  const message =
    err && typeof err === "object" && "message" in err && typeof err.message === "string"
      ? err.message
      : "خطا در ذخیره";

  return {
    fields,
    general: leftover[0] ?? (Object.keys(fields).length === 0 ? message : null),
  };
}

export function FormErrorSummary({
  errors = {},
  general,
}: {
  errors?: Partial<Record<string, string>>;
  general?: string | null;
}) {
  const messages = formErrorMessages(errors, general);
  if (messages.length === 0) return null;

  return (
    <Alert tone="error">
      <p className="font-semibold">لطفاً موارد زیر را بررسی کنید:</p>
      <ul className="mt-2 list-inside list-disc space-y-1">
        {messages.map((message) => (
          <li key={message}>{message}</li>
        ))}
      </ul>
    </Alert>
  );
}