"use client";

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import {
  normalizeButtonBorderRadiusCustom,
  normalizeButtonBorderRadiusPreset,
  normalizeButtonSizeScale,
} from "@/lib/button-appearance";
import {
  normalizeInputBorderRadiusCustom,
  normalizeInputBorderRadiusPreset,
  normalizeInputSizeScale,
  normalizeInputStylePreset,
} from "@/lib/input-appearance";
import {
  closeLayoutBuilder,
  normalizeAppShellLayoutPreset,
  normalizeButtonStylePreset,
  resetAppShellLayout,
  resetButtonAppearance,
  resetInputAppearance,
  selectLayoutBuilder,
  setAppShellLayoutPreset,
  setButtonBorderRadius,
  setButtonBorderRadiusCustom,
  setButtonSizeScale,
  setInputBorderRadius,
  setInputBorderRadiusCustom,
  setInputSizeScale,
  setInputStylePreset,
  setPreferredButtonStyle,
} from "@/store/slices/layout-builder-slice";
import { useLayoutBuilderShortcut } from "@/components/layout-builder/use-layout-builder-shortcut";
import { AppShellLayoutTab } from "@/components/layout-builder/app-shell-layout-tab";
import { ButtonStylesTab } from "@/components/layout-builder/button-styles-tab";
import { InputStylesTab } from "@/components/layout-builder/input-styles-tab";

export function LayoutBuilderDialog() {
  useLayoutBuilderShortcut();
  const [activeTab, setActiveTab] = useState("layout");

  const dispatch = useAppDispatch();
  const {
    open,
    appShellLayoutPreset,
    preferredButtonStyle,
    buttonBorderRadius,
    buttonBorderRadiusCustom,
    buttonSizeScale,
    inputBorderRadius,
    inputBorderRadiusCustom,
    inputSizeScale,
    inputStylePreset,
  } = useAppSelector(selectLayoutBuilder);

  return (
    <Dialog
      open={open}
      onOpenChange={(nextOpen) => {
        if (!nextOpen) dispatch(closeLayoutBuilder());
      }}
    >
      <DialogContent className="sm:max-w-[720px] max-h-[85vh] overflow-hidden rounded-2xl p-0 gap-0">
        <DialogHeader className="px-6 pt-6 pb-4 border-b border-gray-100/80">
          <DialogTitle className="font-['Lexend'] text-[18px]">
            Layout builder
          </DialogTitle>
          <DialogDescription>
            Customize the app shell, global button theme, and form input styling.
            Press{" "}
            <kbd className="rounded-md border border-border/70 bg-background px-1.5 py-0.5 text-[11px] font-mono text-foreground shadow-sm">
              Ctrl+I
            </kbd>{" "}
            to open or close this panel.
          </DialogDescription>
        </DialogHeader>

        <Tabs
          value={activeTab}
          onValueChange={setActiveTab}
          className="flex min-h-0 flex-1 flex-col"
        >
          <div className="px-6 pt-4">
            <TabsList className="w-full sm:w-auto">
              <TabsTrigger value="layout">App layout</TabsTrigger>
              <TabsTrigger value="buttons">Button theme</TabsTrigger>
              <TabsTrigger value="inputs">Input theme</TabsTrigger>
            </TabsList>
          </div>

          <div className="overflow-y-auto scrollbar-themed px-6 py-4 max-h-[min(60vh,520px)]">
            <TabsContent value="layout" className="mt-0">
              <AppShellLayoutTab
                layoutPreset={normalizeAppShellLayoutPreset(
                  appShellLayoutPreset,
                )}
                onPresetChange={(preset) =>
                  dispatch(setAppShellLayoutPreset(preset))
                }
                onReset={() => dispatch(resetAppShellLayout())}
              />
            </TabsContent>

            <TabsContent value="buttons" className="mt-0">
              <ButtonStylesTab
                selectedStyle={normalizeButtonStylePreset(
                  preferredButtonStyle,
                )}
                onSelectStyle={(style) =>
                  dispatch(setPreferredButtonStyle(style))
                }
                borderRadius={normalizeButtonBorderRadiusPreset(
                  buttonBorderRadius,
                )}
                borderRadiusCustom={normalizeButtonBorderRadiusCustom(
                  buttonBorderRadiusCustom,
                )}
                onSelectBorderRadius={(radius) =>
                  dispatch(setButtonBorderRadius(radius))
                }
                onBorderRadiusCustomChange={(px) =>
                  dispatch(setButtonBorderRadiusCustom(px))
                }
                sizeScale={normalizeButtonSizeScale(buttonSizeScale)}
                onSelectSizeScale={(scale) =>
                  dispatch(setButtonSizeScale(scale))
                }
                onReset={() => dispatch(resetButtonAppearance())}
              />
            </TabsContent>

            <TabsContent value="inputs" className="mt-0">
              <InputStylesTab
                borderRadius={normalizeInputBorderRadiusPreset(inputBorderRadius)}
                borderRadiusCustom={normalizeInputBorderRadiusCustom(
                  inputBorderRadiusCustom,
                )}
                onSelectBorderRadius={(radius) =>
                  dispatch(setInputBorderRadius(radius))
                }
                onBorderRadiusCustomChange={(px) =>
                  dispatch(setInputBorderRadiusCustom(px))
                }
                sizeScale={normalizeInputSizeScale(inputSizeScale)}
                onSelectSizeScale={(scale) =>
                  dispatch(setInputSizeScale(scale))
                }
                stylePreset={normalizeInputStylePreset(inputStylePreset)}
                onSelectStylePreset={(style) =>
                  dispatch(setInputStylePreset(style))
                }
                onReset={() => dispatch(resetInputAppearance())}
              />
            </TabsContent>
          </div>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
}