import type { QuestionType, QuestionOptionsConfig } from "@/types";
import { cn } from "@/lib/utils/cn";
import { StarRatingScale } from "@/components/features/surveys/StarRatingScale";
import { isMultiSelectDropdown } from "@/lib/utils/dropdown-select";

interface QuestionPreviewBodyProps {
  type: QuestionType;
  optionsConfig: QuestionOptionsConfig | null;
}

export function QuestionPreviewBody({
  type,
  optionsConfig,
}: QuestionPreviewBodyProps) {
  const choices = optionsConfig?.choices ?? [];
  const min = optionsConfig?.minRating ?? 1;
  const max = optionsConfig?.maxRating ?? (type === "nps" ? 10 : 5);

  if (
    type === "multiple_choice" ||
    type === "checkbox" ||
    type === "dropdown"
  ) {
    if (choices.length === 0) {
      return (
        <div className="mt-1 rounded-md border border-dashed border-border px-2.5 py-2 text-xs text-muted">
          Add options in the settings panel →
        </div>
      );
    }
    if (type === "dropdown") {
      if (isMultiSelectDropdown(type, optionsConfig)) {
        const previewPicks = choices.slice(0, 2);
        return (
          <div className="mt-1">
            <div className="flex items-center justify-between rounded-md border border-border px-2.5 py-2 text-xs text-muted">
              <span>
                {previewPicks.length > 0
                  ? `${previewPicks.join(", ")}${choices.length > 2 ? "…" : ""}`
                  : "Select one or more…"}
              </span>
              <span aria-hidden>▾</span>
            </div>
            <p className="mt-1.5 text-[11px] text-muted">
              Multi-select — respondents can pick several options
            </p>
          </div>
        );
      }
      return (
        <div className="mt-1 flex items-center justify-between rounded-md border border-border px-2.5 py-2 text-xs text-muted">
          <span>{choices[0] ?? "Select an option…"}</span>
          <span aria-hidden>▾</span>
        </div>
      );
    }
    return (
      <div className="mt-1 flex flex-col gap-2">
        {choices.map((opt) => (
          <div
            key={opt}
            className="flex items-center gap-2 rounded-md border border-border px-2.5 py-2 text-xs text-muted"
          >
            <span
              className={cn(
                "inline-block h-3 w-3 shrink-0 border border-current",
                type === "checkbox" ? "rounded-[3px]" : "rounded-full"
              )}
              aria-hidden
            />
            {opt}
          </div>
        ))}
      </div>
    );
  }

  if (type === "rating") {
    return <StarRatingScale min={min} max={max} preview />;
  }

  if (type === "nps") {
    return (
      <div className="mt-1 flex flex-wrap gap-1">
        {Array.from({ length: 11 }, (_, i) => (
          <div
            key={i}
            className="flex w-[30px] items-center justify-center rounded-md border border-border px-0 py-2 text-xs"
          >
            {i}
          </div>
        ))}
      </div>
    );
  }

  if (type === "open_text") {
    return (
      <div className="mt-1 rounded-md border border-border px-2.5 py-2 text-xs italic text-muted">
        {optionsConfig?.placeholder ?? "Respondent types a free-text answer…"}
      </div>
    );
  }

  if (type === "matrix") {
    const rows = optionsConfig?.rows ?? [];
    const columns = optionsConfig?.columns ?? [];
    if (rows.length === 0 || columns.length === 0) {
      return (
        <div className="mt-1 rounded-md border border-dashed border-border px-2.5 py-2 text-xs text-muted">
          Add rows and columns in the settings panel →
        </div>
      );
    }
    return (
      <div className="mt-1 space-y-1.5">
        {rows.map((row) => (
          <div
            key={row}
            className="flex items-center justify-between gap-2 rounded-md border border-border px-2.5 py-1.5 text-xs text-muted"
          >
            <span className="truncate font-medium text-text">{row}</span>
            <span className="shrink-0 text-[10.5px]">
              {columns.length} option{columns.length === 1 ? "" : "s"}
            </span>
          </div>
        ))}
      </div>
    );
  }

  if (type === "file_upload") {
    return (
      <div className="mt-1 flex items-center justify-center rounded-md border border-dashed border-border px-2.5 py-4 text-xs text-muted">
        ⬆ Drag file or click to upload
      </div>
    );
  }

  if (type === "date_time") {
    return (
      <div className="mt-1 rounded-md border border-border px-2.5 py-2 text-xs text-muted">
        📅 Date picker field
      </div>
    );
  }

  return null;
}

export function QuestionCardShell({
  children,
  selected,
  onClick,
  className,
}: {
  children: React.ReactNode;
  selected?: boolean;
  onClick?: () => void;
  className?: string;
}) {
  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onClick}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") onClick?.();
      }}
      className={cn(
        "relative mb-3.5 cursor-pointer rounded-xl border-[1.5px] bg-white p-[18px] shadow transition-shadow",
        selected
          ? "border-primary shadow-[0_0_0_3px_rgba(30,91,176,0.12)]"
          : "border-border hover:border-primary/40",
        className
      )}
    >
      {children}
    </div>
  );
}