"use client";

import { Check, Layers, LayoutList, RectangleHorizontal } from "lucide-react";
import { Modal } from "@/components/ui/Modal";
import { Button } from "@/components/ui/Button";
import { Toggle } from "@/components/ui/Toggle";
import {
  breaksEveryN,
  defaultGroupedBreaks,
  splitQuestionsByPageBreaks,
  type SurveyDisplayConfig,
  type SurveyLayoutMode,
} from "@/lib/utils/survey-display";
import { cn } from "@/lib/utils/cn";
import type { BuilderQuestion } from "@/types/builder";

const LAYOUTS: {
  id: SurveyLayoutMode;
  title: string;
  hint: string;
  icon: typeof LayoutList;
}[] = [
  {
    id: "one_per_page",
    title: "One question per page",
    hint: "Classic Next / Back. Best for long or timed surveys.",
    icon: LayoutList,
  },
  {
    id: "single_page",
    title: "All on one page",
    hint: "Every question on one screen. Skip logic still hides questions.",
    icon: RectangleHorizontal,
  },
  {
    id: "grouped",
    title: "Custom pages",
    hint: "You decide how many questions sit on each page.",
    icon: Layers,
  },
];

interface SurveyLayoutPanelProps {
  open: boolean;
  onClose: () => void;
  questions: BuilderQuestion[];
  displayConfig: SurveyDisplayConfig;
  onSave: (next: SurveyDisplayConfig) => void;
  saving?: boolean;
}

export function SurveyLayoutPanel({
  open,
  onClose,
  questions,
  displayConfig,
  onSave,
  saving,
}: SurveyLayoutPanelProps) {
  const ordered = [...questions].sort((a, b) => a.position - b.position);
  const ids = ordered.map((q) => q.id);
  const breakSet = new Set(displayConfig.pageBreakAfterIds);
  const pages =
    displayConfig.layout === "grouped"
      ? splitQuestionsByPageBreaks(ordered, displayConfig.pageBreakAfterIds)
      : [ordered];

  function selectLayout(layout: SurveyLayoutMode) {
    if (layout === displayConfig.layout) return;
    if (layout === "grouped") {
      const existing = displayConfig.pageBreakAfterIds.filter((id) =>
        ids.includes(id)
      );
      onSave({
        layout,
        pageBreakAfterIds:
          existing.length > 0 ? existing : defaultGroupedBreaks(ids),
      });
      return;
    }
    onSave({ layout, pageBreakAfterIds: displayConfig.pageBreakAfterIds });
  }

  function setBreakAfter(questionId: string, enabled: boolean) {
    const next = enabled
      ? displayConfig.pageBreakAfterIds.includes(questionId)
        ? displayConfig.pageBreakAfterIds
        : [...displayConfig.pageBreakAfterIds, questionId]
      : displayConfig.pageBreakAfterIds.filter((id) => id !== questionId);
    onSave({ layout: "grouped", pageBreakAfterIds: next });
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="How should people take this survey?"
      description="This only changes the filling experience. Skip logic still works in every layout."
      maxWidthClassName="max-w-[640px]"
    >
      <div className="grid gap-2 sm:grid-cols-3">
        {LAYOUTS.map((opt) => {
          const selected = displayConfig.layout === opt.id;
          const Icon = opt.icon;
          return (
            <button
              key={opt.id}
              type="button"
              onClick={() => selectLayout(opt.id)}
              className={cn(
                "rounded-[12px] border-[1.5px] p-3.5 text-left transition-colors",
                selected
                  ? "border-primary bg-[#EFF6FF]"
                  : "border-border hover:border-accent hover:bg-[#F8FBFF]"
              )}
            >
              <div className="mb-2.5 flex items-center justify-between">
                <Icon
                  className={cn(
                    "h-5 w-5",
                    selected ? "text-primary" : "text-muted"
                  )}
                />
                {selected && (
                  <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white">
                    <Check className="h-3 w-3" strokeWidth={3} />
                  </span>
                )}
              </div>
              <div className="text-[13px] font-bold leading-snug">{opt.title}</div>
              <p className="mt-1 text-[11.5px] leading-relaxed text-muted">
                {opt.hint}
              </p>
            </button>
          );
        })}
      </div>

      {displayConfig.layout === "grouped" && (
        <div className="mt-5">
          <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
            <p className="text-[13px] font-bold">Page planner</p>
            <div className="flex flex-wrap gap-1.5">
              {[2, 3, 4].map((n) => (
                <Button
                  key={n}
                  type="button"
                  variant="outline"
                  size="sm"
                  disabled={ordered.length === 0}
                  onClick={() =>
                    onSave({
                      layout: "grouped",
                      pageBreakAfterIds: breaksEveryN(ids, n),
                    })
                  }
                >
                  {n} per page
                </Button>
              ))}
              <Button
                type="button"
                variant="outline"
                size="sm"
                disabled={ordered.length === 0}
                onClick={() =>
                  onSave({ layout: "grouped", pageBreakAfterIds: [] })
                }
              >
                One page
              </Button>
            </div>
          </div>

          {ordered.length === 0 ? (
            <p className="rounded-[10px] border border-dashed border-border bg-[#F8FAFC] px-4 py-6 text-center text-[13px] text-muted">
              Add questions first, then split them into pages here.
            </p>
          ) : (
            <div className="space-y-3">
              {pages.map((page, pageIdx) => (
                <div
                  key={page[0]?.id ?? pageIdx}
                  className="overflow-hidden rounded-[12px] border border-border"
                >
                  <div className="bg-[#F8FAFC] px-3 py-2 text-[11px] font-bold uppercase tracking-wide text-muted">
                    Page {pageIdx + 1}
                    <span className="ml-1.5 font-medium normal-case tracking-normal">
                      · {page.length} question{page.length === 1 ? "" : "s"}
                    </span>
                  </div>
                  <ul className="divide-y divide-border">
                    {page.map((q) => {
                      const globalIndex = ordered.findIndex((x) => x.id === q.id);
                      const isLastQuestion = globalIndex === ordered.length - 1;
                      return (
                        <li
                          key={q.id}
                          className="flex items-center justify-between gap-3 px-3 py-2.5"
                        >
                          <div className="min-w-0">
                            <div className="font-mono text-[10.5px] font-bold text-muted">
                              Q{globalIndex + 1}
                            </div>
                            <div className="truncate text-[13px] font-semibold">
                              {q.title || "Untitled question"}
                            </div>
                          </div>
                          {!isLastQuestion && (
                            <label className="flex shrink-0 items-center gap-2 text-[11.5px] font-semibold text-muted">
                              New page after
                              <Toggle
                                checked={breakSet.has(q.id)}
                                onChange={(on) => setBreakAfter(q.id, on)}
                              />
                            </label>
                          )}
                        </li>
                      );
                    })}
                  </ul>
                </div>
              ))}
            </div>
          )}

          <p className="mt-3 text-[12px] leading-relaxed text-muted">
            Turn on “New page after this” wherever you want a Next button.
            Hidden questions from skip logic are skipped automatically.
          </p>
        </div>
      )}

      {displayConfig.layout === "single_page" && (
        <p className="mt-4 rounded-[10px] bg-[#F8FAFC] px-3 py-2.5 text-[12.5px] leading-relaxed text-muted">
          Respondents see every question at once and submit at the bottom.
          If skip logic jumps ahead, the skipped questions disappear on the
          same page.
        </p>
      )}

      <div className="mt-5 flex justify-end">
        <Button type="button" onClick={onClose} loading={saving}>
          Done
        </Button>
      </div>
    </Modal>
  );
}