vkv/resources/js/components/admin/news/AdminNewsForm.tsx

import { useEffect, useMemo, useState } from "react";
import { Button, Input, Switch, Textarea } from "@heroui/react";
import { useTranslation } from "react-i18next";
import { type NewsItem, type NewsPayload, type FormMode, type NewsTranslation } from "./adminNewsTypes";

const resolveLocale = (field: NewsTranslation | null | undefined, lang: string) => {
  if (!field) return "";
  if (typeof field === "string") return field;
  return field[lang] ?? field["en"] ?? Object.values(field)[0] ?? "";
};

const formatForDateTimeLocal = (value: string | null | undefined) => {
  if (!value) return "";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "";

  const pad = (num: number) => num.toString().padStart(2, "0");

  const year = date.getFullYear();
  const month = pad(date.getMonth() + 1);
  const day = pad(date.getDate());
  const hours = pad(date.getHours());
  const minutes = pad(date.getMinutes());

  return `${year}-${month}-${day}T${hours}:${minutes}`;
};

type AdminNewsFormProps = {
  mode: Exclude<FormMode, "none">;
  editing: NewsItem | null;
  onSubmit: (payload: NewsPayload) => Promise<void> | void;
  onCancel: () => void;
  submitting: boolean;
  serverError: string | null;
};

export default function AdminNewsForm({
  mode,
  editing,
  onSubmit,
  onCancel,
  submitting,
  serverError,
}: AdminNewsFormProps) {
  const { t } = useTranslation("common");
  const [titleCs, setTitleCs] = useState("");
  const [titleEn, setTitleEn] = useState("");
  const [contentCs, setContentCs] = useState("");
  const [contentEn, setContentEn] = useState("");
  const [excerptCs, setExcerptCs] = useState("");
  const [excerptEn, setExcerptEn] = useState("");
  const [publishedAt, setPublishedAt] = useState("");
  const [isPublished, setIsPublished] = useState(false);
  const [localError, setLocalError] = useState<string | null>(null);

  useEffect(() => {
    if (mode === "edit" && editing) {
      setTitleCs(resolveLocale(editing.title, "cs"));
      setTitleEn(resolveLocale(editing.title, "en"));
      setExcerptCs(resolveLocale(editing.excerpt, "cs"));
      setExcerptEn(resolveLocale(editing.excerpt, "en"));
      setContentCs(resolveLocale(editing.content, "cs"));
      setContentEn(resolveLocale(editing.content, "en"));
      setPublishedAt(formatForDateTimeLocal(editing.published_at));
      setIsPublished(!!editing.is_published);
      setLocalError(null);
      return;
    }

    setTitleCs("");
    setTitleEn("");
    setContentCs("");
    setContentEn("");
    setExcerptCs("");
    setExcerptEn("");
    setPublishedAt("");
    setIsPublished(false);
    setLocalError(null);
  }, [mode, editing]);

  const submitLabel = useMemo(() => {
    if (mode === "edit") return t("admin_news_form_save") ?? "Uložit změny";
    return t("admin_news_form_create") ?? "Vytvořit novinku";
  }, [mode, t]);

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setLocalError(null);

    const titlePayload: Record<string, string> = {};
    if (titleCs.trim()) titlePayload.cs = titleCs.trim();
    if (titleEn.trim()) titlePayload.en = titleEn.trim();
    if (Object.keys(titlePayload).length === 0) {
      setLocalError(t("admin_news_title_required") ?? "Vyplň nadpis alespoň v jednom jazyce.");
      return;
    }

    const contentPayload: Record<string, string> = {};
    if (contentCs.trim()) contentPayload.cs = contentCs.trim();
    if (contentEn.trim()) contentPayload.en = contentEn.trim();
    if (Object.keys(contentPayload).length === 0) {
      setLocalError(t("admin_news_content_required") ?? "Vyplň obsah alespoň v jednom jazyce.");
      return;
    }

    const excerptPayload: Record<string, string> = {};
    if (excerptCs.trim()) excerptPayload.cs = excerptCs.trim();
    if (excerptEn.trim()) excerptPayload.en = excerptEn.trim();

    const payload: NewsPayload = {
      title: titlePayload,
      content: contentPayload,
      is_published: isPublished,
    };

    if (Object.keys(excerptPayload).length > 0) payload.excerpt = excerptPayload;
    if (publishedAt.trim()) payload.published_at = publishedAt.trim();

    await onSubmit(payload);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="grid gap-3 md:grid-cols-2">
        <Input
          label={t("admin_news_form_title_cs") ?? "Nadpis (cs)"}
          value={titleCs}
          onChange={(e) => setTitleCs(e.target.value)}
        />
        <Input
          label={t("admin_news_form_title_en") ?? "Title (en)"}
          value={titleEn}
          onChange={(e) => setTitleEn(e.target.value)}
        />
      </div>
      <div className="grid gap-3 md:grid-cols-2">
        <Textarea
          label={t("admin_news_form_excerpt_cs") ?? "Perex (cs)"}
          value={excerptCs}
          onChange={(e) => setExcerptCs(e.target.value)}
          minRows={2}
        />
        <Textarea
          label={t("admin_news_form_excerpt_en") ?? "Excerpt (en)"}
          value={excerptEn}
          onChange={(e) => setExcerptEn(e.target.value)}
          minRows={2}
        />
      </div>
      <div className="grid gap-3 md:grid-cols-2">
        <Textarea
          label={t("admin_news_form_content_cs") ?? "Obsah (cs)"}
          value={contentCs}
          onChange={(e) => setContentCs(e.target.value)}
          minRows={4}
        />
        <Textarea
          label={t("admin_news_form_content_en") ?? "Content (en)"}
          value={contentEn}
          onChange={(e) => setContentEn(e.target.value)}
          minRows={4}
        />
      </div>
      <div className="grid gap-3 md:grid-cols-2 items-center">
        <Input
          type="datetime-local"
          label={t("admin_news_form_published_from") ?? "Publikováno od"}
          value={publishedAt}
          onChange={(e) => setPublishedAt(e.target.value)}
        />
        <div className="flex items-center gap-2">
          <Switch isSelected={isPublished} onValueChange={setIsPublished}>
            {t("admin_news_form_publish") ?? "Publikovat"}
          </Switch>
        </div>
      </div>

      {(localError || serverError) && (
        <div className="text-sm text-red-600">{localError ?? serverError}</div>
      )}

      <div className="flex gap-3">
        <Button type="submit" color="primary" isLoading={submitting}>
          {submitLabel}
        </Button>
        <Button type="button" variant="light" onPress={onCancel}>
          {t("admin_form_close") ?? "Zavřít formulář"}
        </Button>
      </div>
    </form>
  );
}