"use client";

import type { MediaKind, PortfolioAssetKind, PortfolioSectionType } from "@prisma/client";
import { ArrowDown, ArrowUp, CalendarDays, FolderTree, Link2, Plus, Text, Trash2, UserRound } from "lucide-react";
import { useEffect, useMemo, useRef, useState } from "react";

import { MediaFieldPicker, type MediaFieldState } from "@/components/root/media-field-picker";
import { AppCard } from "@/components/ui/app-card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { moveArrayItem } from "@/lib/array";
import type { MediaOption } from "@/lib/media";
import type { PortfolioCategoryView, PortfolioProjectView } from "@/lib/portfolio";
import { cn } from "@/lib/utils";

type PanelKey = "basic" | "localized" | "sections" | "assets";

type SectionFormValue = {
  id?: string;
  type: PortfolioSectionType;
  titleAr: string;
  titleEn: string;
  titleDe: string;
  bodyAr: string;
  bodyEn: string;
  bodyDe: string;
  imagePath: string;
  media: MediaFieldState;
  linkUrl: string;
  sortOrder: number;
};

type AssetFormValue = {
  id?: string;
  kind: PortfolioAssetKind;
  filePath: string;
  fileFieldName: string;
  media: MediaFieldState;
  altAr: string;
  altEn: string;
  altDe: string;
  sortOrder: number;
};

type ProjectFormState = {
  categoryId: string;
  slug: string;
  clientName: string;
  projectYear: string;
  previewUrl: string;
  sortOrder: string;
  isFeatured: boolean;
  isPublished: boolean;
  titleAr: string;
  titleEn: string;
  titleDe: string;
  serviceLabelAr: string;
  serviceLabelEn: string;
  serviceLabelDe: string;
  summaryAr: string;
  summaryEn: string;
  summaryDe: string;
};

type PortfolioProjectFormProps = {
  action: (formData: FormData) => void | Promise<void>;
  categories: PortfolioCategoryView[];
  mediaOptions: MediaOption[];
  project?: PortfolioProjectView | null;
  formId: string;
  redirectPath: string;
};

const localeFieldConfig = [
  { key: "ar" as const, suffix: "Ar" as const, label: "Arabic" },
  { key: "en" as const, suffix: "En" as const, label: "English" },
  { key: "de" as const, suffix: "De" as const, label: "German" },
] as const;

const sectionTypeOptions: PortfolioSectionType[] = [
  "RICH_TEXT",
  "GALLERY",
  "STATS",
  "DELIVERABLES",
  "LINK",
];

const assetKindOptions: PortfolioAssetKind[] = ["IMAGE", "DOCUMENT"];

function getSectionTypeLabel(type: PortfolioSectionType) {
  switch (type) {
    case "RICH_TEXT":
      return "Rich Text";
    case "GALLERY":
      return "Single Image";
    case "STATS":
      return "Stats";
    case "DELIVERABLES":
      return "Deliverables";
    case "LINK":
      return "Link";
    default:
      return type;
  }
}

function createMediaFieldState(params: {
  kind: MediaKind;
  assetId?: string | null;
  url?: string | null;
  label?: string | null;
}): MediaFieldState {
  return {
    mode: params.assetId ? "library" : params.url ? "external" : "upload",
    assetId: params.assetId ?? "",
    url: params.url ?? "",
    label: params.label ?? "",
    kind: params.kind,
  };
}

function createInitialProjectState(
  project: PortfolioProjectView | null | undefined,
  categories: PortfolioCategoryView[],
): ProjectFormState {
  return {
    categoryId: project?.category.id ?? categories[0]?.id ?? "",
    slug: project?.slug ?? "",
    clientName: project?.clientName ?? "",
    projectYear: String(project?.projectYear ?? new Date().getFullYear()),
    previewUrl: project?.previewUrl ?? "",
    sortOrder: String(project?.sortOrder ?? 0),
    isFeatured: project?.isFeatured ?? false,
    isPublished: project?.isPublished ?? false,
    titleAr: project?.title.ar ?? "",
    titleEn: project?.title.en ?? "",
    titleDe: project?.title.de ?? "",
    serviceLabelAr: project?.serviceLabel.ar ?? "",
    serviceLabelEn: project?.serviceLabel.en ?? "",
    serviceLabelDe: project?.serviceLabel.de ?? "",
    summaryAr: project?.summary.ar ?? "",
    summaryEn: project?.summary.en ?? "",
    summaryDe: project?.summary.de ?? "",
  };
}

function createEmptySection(index: number): SectionFormValue {
  return {
    type: "RICH_TEXT",
    titleAr: "",
    titleEn: "",
    titleDe: "",
    bodyAr: "",
    bodyEn: "",
    bodyDe: "",
    imagePath: "",
    media: createMediaFieldState({ kind: "IMAGE" }),
    linkUrl: "",
    sortOrder: index,
  };
}

function createEmptyAsset(index: number): AssetFormValue {
  return {
    kind: "IMAGE",
    filePath: "",
    fileFieldName: `asset-upload-${index}`,
    media: createMediaFieldState({ kind: "IMAGE" }),
    altAr: "",
    altEn: "",
    altDe: "",
    sortOrder: index,
  };
}

function getAssetKindLabel(kind: PortfolioAssetKind) {
  return kind === "IMAGE" ? "Image" : "Document";
}

function hasText(value: string) {
  return value.trim().length > 0;
}

function isSectionComplete(section: SectionFormValue) {
  const hasLocalizedTitle =
    hasText(section.titleAr) &&
    hasText(section.titleEn) &&
    hasText(section.titleDe);

  if (!hasLocalizedTitle) {
    return false;
  }

  if (section.type === "GALLERY") {
    return hasText(section.media.assetId) || hasText(section.imagePath);
  }

  if (section.type === "LINK") {
    return hasText(section.linkUrl);
  }

  return (
    hasText(section.bodyAr) &&
    hasText(section.bodyEn) &&
    hasText(section.bodyDe)
  );
}

function isAssetComplete(asset: AssetFormValue) {
  return (
    (hasText(asset.media.assetId) || hasText(asset.media.url)) &&
    hasText(asset.altAr) &&
    hasText(asset.altEn) &&
    hasText(asset.altDe)
  );
}

function PanelButton({
  active,
  title,
  done,
  onClick,
}: {
  active: boolean;
  title: string;
  done: boolean;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "flex w-full items-center justify-between rounded-nested border px-4 py-3 text-left transition-colors",
        active
          ? "border-input bg-accent/40"
          : "border-input bg-background hover:bg-accent/20",
      )}
    >
      <span className="text-sm font-medium text-foreground">{title}</span>
      <Badge variant={done ? "success" : "outline"}>
        {done ? "Ready" : "Open"}
      </Badge>
    </button>
  );
}

function LocaleBlock({
  title,
  renderField,
}: {
  title: string;
  renderField: (locale: (typeof localeFieldConfig)[number]) => React.ReactNode;
}) {
  return (
    <AppCard level={2} padding="sm" className="space-y-3">
      <p className="text-sm font-medium text-foreground">{title}</p>
      <div className="grid gap-4 xl:grid-cols-3">
        {localeFieldConfig.map((locale) => (
          <AppCard key={`${title}-${locale.key}`} padding="sm" className="space-y-2 rounded-nested">
            <p className="text-sm font-medium text-foreground">{locale.label}</p>
            {renderField(locale)}
          </AppCard>
        ))}
      </div>
    </AppCard>
  );
}

export function PortfolioProjectForm({
  action,
  categories,
  mediaOptions,
  project,
  formId,
  redirectPath,
}: PortfolioProjectFormProps) {
  const [activePanel, setActivePanel] = useState<PanelKey>("basic");
  const [projectState, setProjectState] = useState<ProjectFormState>(
    createInitialProjectState(project, categories),
  );
  const [coverMedia, setCoverMedia] = useState<MediaFieldState>(
    createMediaFieldState({
      kind: "IMAGE",
      assetId: project?.coverMediaAssetId,
      url: project?.coverImagePath,
      label: project?.title.de ?? project?.title.en ?? project?.title.ar ?? "",
    }),
  );
  const [sections, setSections] = useState<SectionFormValue[]>(
    project?.sections.length
      ? project.sections.map((section, index) => ({
          id: section.id,
          type: section.type,
          titleAr: section.title.ar,
          titleEn: section.title.en,
          titleDe: section.title.de,
          bodyAr: section.body.ar,
          bodyEn: section.body.en,
          bodyDe: section.body.de,
          imagePath: section.imagePath ?? "",
          media: createMediaFieldState({
            kind: "IMAGE",
            assetId: section.mediaAssetId,
            url: section.imagePath,
            label: section.title.de || section.title.en || section.title.ar,
          }),
          linkUrl: section.linkUrl ?? "",
          sortOrder: index,
        }))
      : [createEmptySection(0)],
  );
  const [assets, setAssets] = useState<AssetFormValue[]>(
    project?.assets.length
      ? project.assets.map((asset, index) => ({
          id: asset.id,
          kind: asset.kind,
          filePath: asset.filePath,
          fileFieldName: `asset-upload-${index}`,
          media: createMediaFieldState({
            kind: asset.kind,
            assetId: asset.mediaAssetId,
            url: asset.filePath,
            label: asset.alt.de || asset.alt.en || asset.alt.ar,
          }),
          altAr: asset.alt.ar,
          altEn: asset.alt.en,
          altDe: asset.alt.de,
          sortOrder: index,
        }))
      : [createEmptyAsset(0)],
  );
  const [selectedSectionIndex, setSelectedSectionIndex] = useState(0);
  const [selectedAssetIndex, setSelectedAssetIndex] = useState(0);
  const sectionsInputRef = useRef<HTMLInputElement | null>(null);
  const assetsInputRef = useRef<HTMLInputElement | null>(null);

  const selectedSection = sections[selectedSectionIndex];
  const selectedAsset = assets[selectedAssetIndex];
  const sectionsPayload = JSON.stringify(
    sections.map((section, index) => ({
      ...section,
      sortOrder: index,
    })),
  );
  const assetsPayload = JSON.stringify(
    assets.map((asset, index) => ({
      ...asset,
      sortOrder: index,
    })),
  );

  useEffect(() => {
    const hiddenInput = sectionsInputRef.current;

    if (!hiddenInput) {
      return;
    }

    hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
    hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
  }, [sectionsPayload]);

  useEffect(() => {
    const hiddenInput = assetsInputRef.current;

    if (!hiddenInput) {
      return;
    }

    hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
    hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
  }, [assetsPayload]);

  useEffect(() => {
    if (selectedSectionIndex > sections.length - 1) {
      setSelectedSectionIndex(Math.max(0, sections.length - 1));
    }
  }, [sections.length, selectedSectionIndex]);

  useEffect(() => {
    if (selectedAssetIndex > assets.length - 1) {
      setSelectedAssetIndex(Math.max(0, assets.length - 1));
    }
  }, [assets.length, selectedAssetIndex]);

  const validation = useMemo(() => {
    const basicDone =
      hasText(projectState.categoryId) &&
      hasText(projectState.slug) &&
      hasText(projectState.clientName) &&
      hasText(projectState.projectYear) &&
      hasText(projectState.sortOrder);

    const localizedDone = localeFieldConfig.every((locale) =>
      hasText(projectState[`title${locale.suffix}`]) &&
      hasText(projectState[`serviceLabel${locale.suffix}`]) &&
      hasText(projectState[`summary${locale.suffix}`]),
    );

    const sectionsDone = sections.length > 0 && sections.every(isSectionComplete);
    const assetsDone = assets.length > 0 && assets.every(isAssetComplete);

    return {
      basicDone,
      localizedDone,
      sectionsDone,
      assetsDone,
      allDone: basicDone && localizedDone && sectionsDone && assetsDone,
    };
  }, [assets, projectState, sections]);

  const setProjectField = <K extends keyof ProjectFormState>(key: K, value: ProjectFormState[K]) => {
    setProjectState((current) => ({
      ...current,
      [key]: value,
    }));
  };

  const updateSection = (index: number, nextValue: SectionFormValue) => {
    setSections((current) =>
      current.map((item, currentIndex) => (currentIndex === index ? nextValue : item)),
    );
  };

  const updateAsset = (index: number, nextValue: AssetFormValue) => {
    setAssets((current) =>
      current.map((item, currentIndex) => (currentIndex === index ? nextValue : item)),
    );
  };

  return (
    <form id={formId} action={action} className="space-y-6">
      <input type="hidden" name="id" value={project?.id ?? ""} />
      <input type="hidden" name="redirectPath" value={redirectPath} />
      <input type="hidden" name="currentCoverImagePath" value={project?.coverImagePath ?? ""} />
      <input ref={sectionsInputRef} type="hidden" name="sections" value={sectionsPayload} />
      <input ref={assetsInputRef} type="hidden" name="assets" value={assetsPayload} />

      <div className="grid gap-6 xl:grid-cols-[280px_minmax(0,1fr)]">
        <AppCard level={2}>
          <CardContent className="space-y-3 p-4">
            <PanelButton active={activePanel === "basic"} title="Basic Info" done={validation.basicDone} onClick={() => setActivePanel("basic")} />
            <PanelButton active={activePanel === "localized"} title="Localized Content" done={validation.localizedDone} onClick={() => setActivePanel("localized")} />
            <PanelButton active={activePanel === "sections"} title="Sections" done={validation.sectionsDone} onClick={() => setActivePanel("sections")} />
            <PanelButton active={activePanel === "assets"} title="Assets" done={validation.assetsDone} onClick={() => setActivePanel("assets")} />
          </CardContent>
        </AppCard>

        <div className="space-y-6">
          <section className={cn(activePanel !== "basic" && "hidden")}>
            <AppCard>
              <CardHeader>
                <CardTitle>Basic Info</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid gap-4 md:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="categoryId">Category</Label>
                    <div className="relative">
                      <FolderTree className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                      <Select name="categoryId" value={projectState.categoryId} onValueChange={(value) => setProjectField("categoryId", value)} required>
                        <SelectTrigger id="categoryId" className="pl-9">
                          <SelectValue placeholder="Category" />
                        </SelectTrigger>
                        <SelectContent>
                          {categories.map((category) => (
                            <SelectItem key={category.id} value={category.id}>
                              {category.name.de} / {category.name.en}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="slug">Slug</Label>
                    <div className="relative">
                      <Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                      <Input id="slug" name="slug" value={projectState.slug} onChange={(event) => setProjectField("slug", event.target.value)} className="pl-9" required />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="clientName">Client</Label>
                    <div className="relative">
                      <UserRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                      <Input id="clientName" name="clientName" value={projectState.clientName} onChange={(event) => setProjectField("clientName", event.target.value)} className="pl-9" required />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="projectYear">Project Year</Label>
                    <div className="relative">
                      <CalendarDays className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                      <Input id="projectYear" name="projectYear" type="number" min="2000" max="2100" value={projectState.projectYear} onChange={(event) => setProjectField("projectYear", event.target.value)} className="pl-9" required />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="previewUrl">Preview URL</Label>
                    <div className="relative">
                      <Link2 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                      <Input id="previewUrl" name="previewUrl" type="url" value={projectState.previewUrl} onChange={(event) => setProjectField("previewUrl", event.target.value)} className="pl-9" />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="sortOrder">Sort Order</Label>
                    <div className="relative">
                      <Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                      <Input id="sortOrder" name="sortOrder" type="number" min="0" value={projectState.sortOrder} onChange={(event) => setProjectField("sortOrder", event.target.value)} className="pl-9" required />
                    </div>
                  </div>
                </div>

                <MediaFieldPicker
                  title="Cover Image"
                  value={coverMedia}
                  onChange={setCoverMedia}
                  options={mediaOptions}
                  inputName="coverMedia"
                  fileFieldName="coverFile"
                  accept="image/*,.svg"
                  allowExternal={false}
                />

                <div className="grid gap-4 md:grid-cols-2">
                  <label className="flex items-center gap-3 rounded-nested border border-input bg-card px-4 py-3 text-sm">
                    <input type="checkbox" name="isFeatured" checked={projectState.isFeatured} onChange={(event) => setProjectField("isFeatured", event.target.checked)} />
                    Featured
                  </label>

                  <label className="flex items-center gap-3 rounded-nested border border-input bg-card px-4 py-3 text-sm">
                    <input type="checkbox" name="isPublished" checked={projectState.isPublished} onChange={(event) => setProjectField("isPublished", event.target.checked)} />
                    Published
                  </label>
                </div>
              </CardContent>
            </AppCard>
          </section>

          <section className={cn(activePanel !== "localized" && "hidden")}>
            <AppCard>
              <CardHeader>
                <CardTitle>Localized Content</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <LocaleBlock
                  title="Project Title"
                  renderField={(locale) => (
                    <Input
                      id={`title${locale.suffix}`}
                      name={`title${locale.suffix}`}
                      value={projectState[`title${locale.suffix}`]}
                      onChange={(event) => setProjectField(`title${locale.suffix}`, event.target.value)}
                    />
                  )}
                />

                <LocaleBlock
                  title="Service Label"
                  renderField={(locale) => (
                    <Input
                      id={`serviceLabel${locale.suffix}`}
                      name={`serviceLabel${locale.suffix}`}
                      value={projectState[`serviceLabel${locale.suffix}`]}
                      onChange={(event) => setProjectField(`serviceLabel${locale.suffix}`, event.target.value)}
                    />
                  )}
                />

                <LocaleBlock
                  title="Summary"
                  renderField={(locale) => (
                    <Textarea
                      id={`summary${locale.suffix}`}
                      name={`summary${locale.suffix}`}
                      rows={5}
                      value={projectState[`summary${locale.suffix}`]}
                      onChange={(event) => setProjectField(`summary${locale.suffix}`, event.target.value)}
                    />
                  )}
                />
              </CardContent>
            </AppCard>
          </section>

          <section className={cn(activePanel !== "sections" && "hidden")}>
            <AppCard>
              <CardHeader className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <CardTitle>Sections</CardTitle>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => {
                    setSections((current) => [...current, createEmptySection(current.length)]);
                    setSelectedSectionIndex(sections.length);
                  }}
                >
                  <Plus className="h-4 w-4" />
                  Add Section
                </Button>
              </CardHeader>
              <CardContent className="grid gap-4 xl:grid-cols-3">
                <div className="space-y-3">
                  {sections.map((section, index) => (
                    <button
                      key={section.id ?? `section-${index}`}
                      type="button"
                      onClick={() => setSelectedSectionIndex(index)}
                      className={cn(
                        "w-full rounded-nested border p-4 text-left transition-colors",
                        selectedSectionIndex === index
                          ? "border-input bg-accent/40"
                          : "border-input bg-background hover:bg-accent/20",
                      )}
                    >
                      <div className="flex items-center justify-between gap-3">
                        <div>
                          <p className="text-sm font-medium text-foreground">
                            {section.titleDe || section.titleEn || section.titleAr || `Section ${index + 1}`}
                          </p>
                          <p className="mt-1 text-xs text-muted-foreground">{getSectionTypeLabel(section.type)}</p>
                        </div>
                        <Badge variant={isSectionComplete(section) ? "success" : "outline"}>
                          {isSectionComplete(section) ? "Ready" : "Open"}
                        </Badge>
                      </div>
                    </button>
                  ))}
                </div>

                <div className="xl:col-span-2">
                  {selectedSection ? (
                    <AppCard level={2}>
                      <CardContent className="space-y-4 p-5">
                        <div className="flex flex-wrap items-center justify-between gap-3">
                          <p className="text-sm font-medium text-foreground">{`Section ${selectedSectionIndex + 1}`}</p>
                          <div className="flex flex-wrap gap-2">
                            <Button type="button" variant="outline" onClick={() => {
                              setSections((current) => moveArrayItem(current, selectedSectionIndex, selectedSectionIndex - 1));
                              setSelectedSectionIndex((current) => Math.max(0, current - 1));
                            }} disabled={selectedSectionIndex === 0}>
                              <ArrowUp className="h-4 w-4" />
                            </Button>
                            <Button type="button" variant="outline" onClick={() => {
                              setSections((current) => moveArrayItem(current, selectedSectionIndex, selectedSectionIndex + 1));
                              setSelectedSectionIndex((current) => Math.min(sections.length - 1, current + 1));
                            }} disabled={selectedSectionIndex === sections.length - 1}>
                              <ArrowDown className="h-4 w-4" />
                            </Button>
                            <Button type="button" variant="ghost" className="text-destructive" onClick={() => {
                              if (sections.length === 1) {
                                return;
                              }
                              setSections((current) => current.filter((_, index) => index !== selectedSectionIndex));
                              setSelectedSectionIndex((current) => Math.max(0, current - 1));
                            }}>
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>

                        <div className="grid gap-4 md:grid-cols-2">
                          <div className="space-y-2">
                            <Label>Type</Label>
                            <Select value={selectedSection.type} onValueChange={(value) => updateSection(selectedSectionIndex, { ...selectedSection, type: value as PortfolioSectionType })}>
                              <SelectTrigger>
                                <SelectValue placeholder="Type" />
                              </SelectTrigger>
                              <SelectContent>
                                {sectionTypeOptions.map((type) => (
                                  <SelectItem key={type} value={type}>{getSectionTypeLabel(type)}</SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>

                          {selectedSection.type === "LINK" ? (
                            <div className="space-y-2">
                              <Label>Link URL</Label>
                              <div className="relative">
                                <Link2 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                                <Input value={selectedSection.linkUrl} onChange={(event) => updateSection(selectedSectionIndex, { ...selectedSection, linkUrl: event.target.value })} className="pl-9" />
                              </div>
                            </div>
                          ) : null}
                        </div>

                        {selectedSection.type === "GALLERY" ? (
                          <MediaFieldPicker
                            title="Single Image"
                            value={selectedSection.media}
                            onChange={(media) => updateSection(selectedSectionIndex, { ...selectedSection, media, imagePath: media.url })}
                            options={mediaOptions}
                            inputName={`section-media-${selectedSectionIndex}`}
                            fileFieldName={`section-image-upload-${selectedSectionIndex}`}
                            accept="image/*,.svg"
                            allowExternal={false}
                          />
                        ) : null}

                        <LocaleBlock
                          title="Section Title"
                          renderField={(locale) => (
                            <Input
                              value={selectedSection[`title${locale.suffix}`]}
                              onChange={(event) => updateSection(selectedSectionIndex, { ...selectedSection, [`title${locale.suffix}`]: event.target.value })}
                            />
                          )}
                        />

                        {selectedSection.type !== "GALLERY" && selectedSection.type !== "LINK" ? (
                          <LocaleBlock
                            title="Section Body"
                            renderField={(locale) => (
                              <Textarea
                                rows={5}
                                value={selectedSection[`body${locale.suffix}`]}
                                onChange={(event) => updateSection(selectedSectionIndex, { ...selectedSection, [`body${locale.suffix}`]: event.target.value })}
                              />
                            )}
                          />
                        ) : null}
                      </CardContent>
                    </AppCard>
                  ) : null}
                </div>
              </CardContent>
            </AppCard>
          </section>

          <section className={cn(activePanel !== "assets" && "hidden")}>
            <AppCard>
              <CardHeader className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <CardTitle>Assets</CardTitle>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => {
                    setAssets((current) => [...current, createEmptyAsset(current.length)]);
                    setSelectedAssetIndex(assets.length);
                  }}
                >
                  <Plus className="h-4 w-4" />
                  Add Asset
                </Button>
              </CardHeader>
              <CardContent className="grid gap-4 xl:grid-cols-3">
                <div className="space-y-3">
                  {assets.map((asset, index) => (
                    <button
                      key={asset.id ?? `asset-${index}`}
                      type="button"
                      onClick={() => setSelectedAssetIndex(index)}
                      className={cn(
                        "w-full rounded-nested border p-4 text-left transition-colors",
                        selectedAssetIndex === index
                          ? "border-input bg-accent/40"
                          : "border-input bg-background hover:bg-accent/20",
                      )}
                    >
                      <div className="flex items-center justify-between gap-3">
                        <div>
                          <p className="text-sm font-medium text-foreground">
                            {asset.altDe || asset.altEn || asset.altAr || `Asset ${index + 1}`}
                          </p>
                          <p className="mt-1 text-xs text-muted-foreground">{getAssetKindLabel(asset.kind)}</p>
                        </div>
                        <Badge variant={isAssetComplete(asset) ? "success" : "outline"}>
                          {isAssetComplete(asset) ? "Ready" : "Open"}
                        </Badge>
                      </div>
                    </button>
                  ))}
                </div>

                <div className="xl:col-span-2">
                  {selectedAsset ? (
                    <AppCard level={2}>
                      <CardContent className="space-y-4 p-5">
                        <div className="flex flex-wrap items-center justify-between gap-3">
                          <p className="text-sm font-medium text-foreground">{`Asset ${selectedAssetIndex + 1}`}</p>
                          <div className="flex flex-wrap gap-2">
                            <Button type="button" variant="outline" onClick={() => {
                              setAssets((current) => moveArrayItem(current, selectedAssetIndex, selectedAssetIndex - 1));
                              setSelectedAssetIndex((current) => Math.max(0, current - 1));
                            }} disabled={selectedAssetIndex === 0}>
                              <ArrowUp className="h-4 w-4" />
                            </Button>
                            <Button type="button" variant="outline" onClick={() => {
                              setAssets((current) => moveArrayItem(current, selectedAssetIndex, selectedAssetIndex + 1));
                              setSelectedAssetIndex((current) => Math.min(assets.length - 1, current + 1));
                            }} disabled={selectedAssetIndex === assets.length - 1}>
                              <ArrowDown className="h-4 w-4" />
                            </Button>
                            <Button type="button" variant="ghost" className="text-destructive" onClick={() => {
                              if (assets.length === 1) {
                                return;
                              }
                              setAssets((current) => current.filter((_, index) => index !== selectedAssetIndex));
                              setSelectedAssetIndex((current) => Math.max(0, current - 1));
                            }}>
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label>Type</Label>
                          <Select value={selectedAsset.kind} onValueChange={(value) => updateAsset(selectedAssetIndex, { ...selectedAsset, kind: value as PortfolioAssetKind, media: { ...selectedAsset.media, kind: value as MediaKind } })}>
                            <SelectTrigger>
                              <SelectValue placeholder="Type" />
                            </SelectTrigger>
                            <SelectContent>
                              {assetKindOptions.map((kind) => (
                                <SelectItem key={kind} value={kind}>{getAssetKindLabel(kind)}</SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

                        <MediaFieldPicker
                          title="Asset"
                          value={selectedAsset.media}
                          onChange={(media) => updateAsset(selectedAssetIndex, { ...selectedAsset, media, filePath: media.url })}
                          options={mediaOptions}
                          inputName={`asset-media-${selectedAssetIndex}`}
                          fileFieldName={selectedAsset.fileFieldName}
                          accept={selectedAsset.kind === "IMAGE" ? "image/*,.svg" : ".pdf,.doc,.docx,.ppt,.pptx"}
                          allowExternal={false}
                        />

                        <LocaleBlock
                          title={selectedAsset.kind === "IMAGE" ? "Alt Text" : "Document Label"}
                          renderField={(locale) => (
                            <Input
                              value={selectedAsset[`alt${locale.suffix}`]}
                              onChange={(event) => updateAsset(selectedAssetIndex, { ...selectedAsset, [`alt${locale.suffix}`]: event.target.value })}
                            />
                          )}
                        />
                      </CardContent>
                    </AppCard>
                  ) : null}
                </div>
              </CardContent>
            </AppCard>
          </section>
        </div>
      </div>
    </form>
  );
}