"use client";

import { AppearanceSubnavCard } from "@/components/dashboard/appearance/appearance-subnav-card";
import {
  type DashboardMenuDraft,
  type DashboardMenuLibraryGroup,
  type DashboardMenuLinkItem,
} from "@/components/dashboard/appearance/appearance-types";
import { SettingsPageLayout } from "@/components/dashboard/settings/settings-page-layout";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
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 { cn } from "@/lib/utils";
import {
  ArrowDown,
  ArrowUp,
  ChevronDown,
  GripVertical,
  Plus,
  Save,
  Trash2,
} from "lucide-react";
import { useLocale, useTranslations } from "next-intl";

interface MenuUpsertFormViewProps {
  mode: "create" | "edit";
  values: DashboardMenuDraft;
  libraryGroups: DashboardMenuLibraryGroup[];
  expandedLinkId: string | null;
  onChangeField: (key: keyof DashboardMenuDraft, value: string) => void;
  onToggleLinkExpand: (linkId: string) => void;
  onChangeLink: (
    linkId: string,
    key: keyof DashboardMenuLinkItem,
    value: string | boolean
  ) => void;
  onDeleteLink: (linkId: string) => void;
  onMoveLink: (linkId: string, direction: "up" | "down") => void;
  onAddLibraryGroup: (groupId: string) => void;
  onSubmit: () => void;
}

export function MenuUpsertFormView({
  mode,
  values,
  libraryGroups,
  expandedLinkId,
  onChangeField,
  onToggleLinkExpand,
  onChangeLink,
  onDeleteLink,
  onMoveLink,
  onAddLibraryGroup,
  onSubmit,
}: MenuUpsertFormViewProps) {
  const t = useTranslations("dashboard.appearance");
  const locale = useLocale();
  const isRtl = locale === "ar";
  const saveLabel = mode === "edit" ? t("actions.saveEdit") : t("actions.save");

  return (
    <SettingsPageLayout sideContent={<AppearanceSubnavCard activeId="menu" />}>
      <section className="space-y-6">
        <div className="flex items-center justify-start">
          <Button type="button" className="h-12 rounded-xl px-6" onClick={onSubmit}>
            <span>{saveLabel}</span>
            <Save className="size-4" />
          </Button>
        </div>

        <section className="rounded-2xl border border-border bg-card p-6">
          <div className="grid gap-4 md:grid-cols-3">
            <div className="space-y-2">
              <Label className="text-sm font-medium">
                {t("menu.form.fields.name")}
                <span className="px-1 text-destructive">*</span>
              </Label>
              <Input
                className="h-12 rounded-xl"
                value={values.name}
                placeholder={t("menu.form.placeholders.name")}
                onChange={(event) => onChangeField("name", event.target.value)}
              />
            </div>

            <div className="space-y-2">
              <Label className="text-sm font-medium">
                {t("menu.form.fields.site")}
                <span className="px-1 text-destructive">*</span>
              </Label>
              <Select
                value={values.site}
                onValueChange={(value) => onChangeField("site", value)}
              >
                <SelectTrigger className="h-12 rounded-xl">
                  <SelectValue placeholder={t("menu.form.placeholders.site")} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="maal">{t("filters.sites.maal")}</SelectItem>
                  <SelectItem value="maal-capital">
                    {t("filters.sites.maalCapital")}
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label className="text-sm font-medium">
                {t("menu.form.fields.language")}
                <span className="px-1 text-destructive">*</span>
              </Label>
              <Select
                value={values.language}
                onValueChange={(value) => onChangeField("language", value)}
              >
                <SelectTrigger className="h-12 rounded-xl">
                  <SelectValue placeholder={t("menu.form.placeholders.language")} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="ar">{t("filters.languages.ar")}</SelectItem>
                  <SelectItem value="en">{t("filters.languages.en")}</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="mt-4 space-y-2">
            <Label className="text-sm font-medium">{t("menu.form.fields.description")}</Label>
            <Textarea
              className="min-h-[96px] rounded-xl"
              value={values.description}
              placeholder={t("menu.form.placeholders.description")}
              onChange={(event) => onChangeField("description", event.target.value)}
            />
            <p className="text-xs text-muted-foreground">
              {t("menu.form.characters", { count: 325 })}
            </p>
          </div>
        </section>

        <section className="space-y-4">
          <h2 className="text-2xl font-bold text-foreground">{t("menu.customize.title")}</h2>

          <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_316px]">
            <section className="rounded-2xl border border-border bg-card">
              <div className="border-b border-border p-4">
                <h3 className="text-base font-bold text-foreground">
                  {t("menu.customize.itemsTitle")}
                </h3>
                <p className="mt-2 text-sm text-muted-foreground">{t("menu.customize.helper")}</p>
              </div>

              <div className="space-y-3 p-4">
                {!values.links.length ? (
                  <div className="rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
                    {t("menu.customize.empty")}
                  </div>
                ) : null}

                {values.links.map((link) => {
                  const isExpanded = link.id === expandedLinkId;

                  return (
                    <div key={link.id} className="flex items-start gap-2">
                      <Button
                        type="button"
                        variant="outline"
                        size="icon"
                        className="h-9 w-9 rounded-lg border-destructive/30 text-destructive hover:bg-destructive/10"
                        onClick={() => onDeleteLink(link.id)}
                      >
                        <span className="sr-only">{t("actions.delete")}</span>
                        <Trash2 className="size-4" />
                      </Button>

                      <div className="min-w-0 flex-1 rounded-xl border border-border">
                        <button
                          type="button"
                          className="flex w-full items-center justify-between gap-2 p-3 "
                          onClick={() => onToggleLinkExpand(link.id)}
                        >
                          <div className="flex items-center gap-2">
                            <GripVertical className="size-4 text-muted-foreground" />
                            <p className="text-sm font-medium text-foreground">
                              {link.title || t("menu.customize.emptyItem")}
                            </p>
                          </div>
                          <ChevronDown
                            className={cn(
                              "size-4 text-muted-foreground transition-transform",
                              isExpanded && "rotate-180"
                            )}
                          />
                        </button>

                        {isExpanded ? (
                          <div className="space-y-4 border-t border-border p-4">
                            <div className="space-y-2">
                              <Label>{t("menu.form.fields.linkTitle")}</Label>
                              <Input
                                className="h-11 rounded-xl"
                                value={link.title}
                                onChange={(event) =>
                                  onChangeLink(link.id, "title", event.target.value)
                                }
                              />
                            </div>

                            <div className="space-y-2">
                              <Label>URL</Label>
                              <Input
                                className="h-11 rounded-xl"
                                value={link.url}
                                onChange={(event) =>
                                  onChangeLink(link.id, "url", event.target.value)
                                }
                              />
                            </div>

                            <div className="grid gap-4 md:grid-cols-2">
                              <div className="space-y-2">
                                <Label>{t("menu.form.fields.type")}</Label>
                                <Select
                                  value={link.type}
                                  onValueChange={(value) => onChangeLink(link.id, "type", value)}
                                >
                                  <SelectTrigger className="h-11 rounded-xl">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="internal">
                                      {t("menu.form.types.internal")}
                                    </SelectItem>
                                    <SelectItem value="external">
                                      {t("menu.form.types.external")}
                                    </SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>

                              <label className="flex items-center justify-between rounded-xl border border-border px-3 py-2 text-sm">
                                <span>{t("menu.form.fields.openInNewTab")}</span>
                                <Checkbox
                                  checked={link.openInNewTab}
                                  onCheckedChange={(checked) =>
                                    onChangeLink(link.id, "openInNewTab", checked === true)
                                  }
                                />
                              </label>
                            </div>

                            <div className="flex gap-2">
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                className="h-9 rounded-lg px-3"
                                onClick={() => onMoveLink(link.id, "up")}
                              >
                                <ArrowUp className="size-4" />
                                {t("menu.form.actions.moveUp")}
                              </Button>
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                className="h-9 rounded-lg px-3"
                                onClick={() => onMoveLink(link.id, "down")}
                              >
                                <ArrowDown className="size-4" />
                                {t("menu.form.actions.moveDown")}
                              </Button>
                            </div>
                          </div>
                        ) : null}
                      </div>
                    </div>
                  );
                })}
              </div>
            </section>

            <section className="rounded-2xl border border-border bg-card">
              <div className="border-b border-border p-4">
                <h3 className="text-base font-bold text-foreground">
                  {t("menu.customize.addToMenu")}
                </h3>
              </div>

              <div className="space-y-3 p-4">
                {libraryGroups.map((group) => (
                  <Button
                    key={group.id}
                    type="button"
                    variant="outline"
                    className="h-12 w-full justify-between rounded-xl px-4"
                    onClick={() => onAddLibraryGroup(group.id)}
                  >
                    <Plus className="size-4" />
                    <span>{isRtl ? group.label.ar : group.label.en}</span>
                  </Button>
                ))}
              </div>
            </section>
          </div>
        </section>
      </section>
    </SettingsPageLayout>
  );
}