"use client";

import type { DashboardAppearanceCodeType } from "@/components/dashboard/appearance/appearance-types";
import { AppearanceSubnavCard } from "@/components/dashboard/appearance/appearance-subnav-card";
import { SettingsPageLayout } from "@/components/dashboard/settings/settings-page-layout";
import { SettingsSuccessDialog } from "@/components/dashboard/settings/settings-success-dialog";
import { Button } from "@/components/ui/button";
import { useDashboardCodeSnippet } from "@/hooks/use-dashboard-appearance-data";
import { GripHorizontal, Save } from "lucide-react";
import { useTranslations } from "next-intl";
import { useEffect, useMemo, useState } from "react";

interface AppearanceCodeInputProps {
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
  placeholder?: string;
}

export function AppearanceCodeInput({
  value,
  onChange,
  disabled = false,
  placeholder,
}: AppearanceCodeInputProps) {
  const lineNumbers = useMemo(
    () => Array.from({ length: Math.max(1, value.split("\n").length) }, (_, index) => index + 1),
    [value],
  );

  return (
    <div className="overflow-hidden rounded-xl border border-border">
      <div className="flex min-h-[220px]">
        <div className="w-11 shrink-0 border-e border-border bg-muted/40 p-2 text-center font-mono text-xs leading-5 text-muted-foreground">
          {lineNumbers.map((lineNumber) => (
            <div key={lineNumber}>{lineNumber}</div>
          ))}
        </div>
        <textarea
          value={value}
          onChange={(event) => onChange(event.target.value)}
          disabled={disabled}
          spellCheck={false}
          className="min-h-[220px] w-full resize-y border-0 bg-transparent p-3 font-mono text-sm leading-5 text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50"
          placeholder={placeholder}
        />
      </div>
      <div className="flex items-center justify-center border-t border-border bg-muted/40 py-1.5">
        <GripHorizontal className="size-4 text-muted-foreground" />
      </div>
    </div>
  );
}

interface AppearanceCodeEditorProps {
  section: DashboardAppearanceCodeType;
}

export function AppearanceCodeEditor({ section }: AppearanceCodeEditorProps) {
  const t = useTranslations("dashboard.appearance");
  const { title, code, updateCode } = useDashboardCodeSnippet(section);

  const [value, setValue] = useState(code);
  const [isSuccessOpen, setIsSuccessOpen] = useState(false);

  useEffect(() => {
    setValue(code);
  }, [code]);

  const handleSave = () => {
    updateCode(value);
    setIsSuccessOpen(true);
  };

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

          <section className="rounded-2xl border border-border bg-card">
            <div className="border-b border-border p-4">
              <h2 className="text-base font-bold text-foreground">{title}</h2>
            </div>

            <div className="p-4">
              <AppearanceCodeInput
                value={value}
                onChange={setValue}
                placeholder={t("codeEditor.placeholder")}
              />
            </div>
          </section>
        </section>
      </SettingsPageLayout>

      <SettingsSuccessDialog
        open={isSuccessOpen}
        onOpenChange={setIsSuccessOpen}
        title={t("codeEditor.dialogs.saved.title")}
        description={t("codeEditor.dialogs.saved.description", { section: title })}
        closeLabel={t("actions.close")}
      />
    </>
  );
}