"use client";

import { PanelLeft, RotateCcw } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
  APP_SHELL_LAYOUT_PRESETS,
  type AppShellLayoutPreset,
} from "@/store/slices/layout-builder-slice";

function AppShellLayoutPreview({ preset }: { preset: AppShellLayoutPreset }) {
  const sidebar = "rounded-sm bg-accent/30";
  const sidebarCompact = "rounded-sm bg-accent/20 w-3";
  const header = "rounded-sm bg-accent/15";
  const content = "rounded-sm bg-accent/10 flex-1";

  const showHeader =
    preset === "sidebar-header" || preset === "compact-header";
  const notificationsInHeader =
    preset === "sidebar-header" || preset === "compact-header";
  const compact =
    preset === "compact-header" || preset === "compact-only";

  return (
    <div className="flex h-16 gap-1 p-2 pointer-events-none">
      <div
        className={cn(
          compact ? sidebarCompact : sidebar,
          "h-full shrink-0",
          !compact && "w-5",
        )}
      />
      <div className="flex min-w-0 flex-1 flex-col gap-1">
        {showHeader ? (
          <div
            className={cn(
              header,
              "flex h-3.5 w-full items-center justify-end px-1",
            )}
          >
            {notificationsInHeader ? (
              <span className="relative flex size-2 rounded-sm bg-accent/40">
                <span className="absolute -top-0.5 -right-0.5 size-1 rounded-full bg-accent" />
              </span>
            ) : null}
          </div>
        ) : null}
        <div className={cn(content, "min-h-8 w-full")} />
      </div>
    </div>
  );
}

type AppShellLayoutTabProps = {
  layoutPreset: AppShellLayoutPreset;
  onPresetChange: (preset: AppShellLayoutPreset) => void;
  onReset: () => void;
};

export function AppShellLayoutTab({
  layoutPreset,
  onPresetChange,
  onReset,
}: AppShellLayoutTabProps) {
  return (
    <div className="flex flex-col gap-5">
      <div className="space-y-3">
        <div className="flex items-center justify-between gap-3">
          <div>
            <p className="text-[13px] font-semibold text-gray-900 font-['Lexend']">
              App layout
            </p>
            <p className="text-[11px] text-gray-400 mt-0.5">
              Choose how the sidebar and header appear across the whole app.
            </p>
          </div>
          <Button
            type="button"
            variant="ghostMuted"
            size="sm"
            className="gap-1.5"
            disableTheme
            onClick={onReset}
          >
            <RotateCcw className="size-3.5" />
            Reset
          </Button>
        </div>

        <RadioGroup
          value={layoutPreset}
          onValueChange={(value) =>
            onPresetChange(value as AppShellLayoutPreset)
          }
          className="grid grid-cols-1 sm:grid-cols-2 gap-3"
        >
          {APP_SHELL_LAYOUT_PRESETS.map((preset) => {
            const selected = layoutPreset === preset.id;
            const optionId = `app-layout-${preset.id}`;

            return (
              <div key={preset.id} className="relative">
                <RadioGroupItem
                  value={preset.id}
                  id={optionId}
                  className="peer sr-only"
                />
                <label
                  htmlFor={optionId}
                  className={cn(
                    "flex cursor-pointer flex-col rounded-xl border p-3 text-left transition-all",
                    "hover:border-accent/40 hover:bg-white/70",
                    "peer-focus-visible:ring-2 peer-focus-visible:ring-accent/40 peer-focus-visible:ring-offset-2",
                    selected
                      ? "border-accent bg-accent/10 shadow-sm ring-2 ring-accent/30"
                      : "border-border/70 bg-white/50",
                  )}
                >
                  <AppShellLayoutPreview preset={preset.id} />
                  <p className="mt-2 text-[12px] font-semibold text-gray-900">
                    {preset.label}
                  </p>
                  <p className="text-[10px] text-gray-400 mt-0.5 leading-snug">
                    {preset.description}
                  </p>
                </label>
              </div>
            );
          })}
        </RadioGroup>
      </div>

      <div className="rounded-xl border border-white/60 bg-white/40 p-4">
        <div className="flex items-center gap-2 mb-2">
          <PanelLeft className="size-4 text-[#6C63FF]" />
          <p className="text-[12px] font-semibold text-gray-900">
            Applies everywhere
          </p>
        </div>
        <p className="text-[11px] text-gray-500 leading-relaxed">
          This layout is used on every authenticated page with the sidebar.
          Use{" "}
          <kbd className="rounded-md border border-border/70 bg-background px-1 py-0.5 text-[10px] font-mono text-foreground shadow-sm">
            Ctrl+B
          </kbd>{" "}
          to toggle the sidebar after choosing a preset.
        </p>
      </div>
    </div>
  );
}