"use client";

import { formatCount } from "@/lib/utils/analytics-format";
import type { QuestionAnalytics } from "@/types/analytics";
import { NpsChart } from "./NpsChart";
import { ChoiceBarsChart } from "./ChoiceBarsChart";
import { WordCloud } from "./WordCloud";
import { RatingChart } from "./RatingChart";

interface QuestionResultCardProps {
  question: QuestionAnalytics;
  index: number;
}

const TYPE_LABELS: Record<string, string> = {
  multiple_choice: "Multiple Choice",
  checkbox: "Checkboxes",
  dropdown: "Dropdown",
  nps: "NPS",
  rating: "Rating",
  open_text: "Open Text",
  matrix: "Matrix",
  file_upload: "File Upload",
  date_time: "Date/Time",
};

function questionMeta(q: QuestionAnalytics): string {
  if (q.kind === "open_text" && q.words.length > 0) {
    return `${formatCount(q.responseCount)} responses · ${q.words.length} keywords`;
  }
  if (q.kind === "nps") {
    return `${formatCount(q.responseCount)} responses · NPS ${q.npsScore}`;
  }
  if (q.kind === "rating") {
    return `${formatCount(q.responseCount)} responses · avg ${q.average}`;
  }
  if (q.kind === "choice" && q.allowMultiple) {
    return `${formatCount(q.responseCount)} responses · % of people who picked each`;
  }
  return `${formatCount(q.responseCount)} responses`;
}

export function QuestionResultCard({ question, index }: QuestionResultCardProps) {
  const typeLabel =
    question.kind === "choice"
      ? question.questionType === "dropdown" && question.allowMultiple
        ? "Dropdown · Multi-select"
        : question.questionType === "checkbox"
          ? "Checkboxes · Multi-select"
          : (TYPE_LABELS[question.questionType] ?? TYPE_LABELS.multiple_choice)
      : question.kind === "open_text"
        ? TYPE_LABELS.open_text
        : question.kind === "nps"
          ? TYPE_LABELS.nps
          : question.kind === "rating"
            ? TYPE_LABELS.rating
            : "Other";

  return (
    <div className="rounded-xl border border-border bg-card p-4 shadow sm:p-5">
      <div className="mb-5 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <span className="mb-1 inline-block rounded-full bg-primary/10 px-2 py-0.5 text-[10.5px] font-bold uppercase tracking-wide text-primary">
            {typeLabel}
          </span>
          <h4 className="text-sm font-bold leading-snug text-navy sm:text-[15px]">
            Q{index + 1} — {question.title}
          </h4>
        </div>
        <span className="shrink-0 text-xs font-semibold text-muted">
          {questionMeta(question)}
        </span>
      </div>

      {question.kind === "nps" && (
        <NpsChart
          distribution={question.distribution}
          npsScore={question.npsScore}
        />
      )}
      {question.kind === "rating" && (
        <RatingChart
          distribution={question.distribution}
          average={question.average}
        />
      )}
      {question.kind === "choice" && (
        <ChoiceBarsChart
          choices={question.choices}
          selectionLabel={
            question.allowMultiple ? "people chose this" : "answers"
          }
        />
      )}
      {question.kind === "open_text" && (
        <div className="space-y-5">
          <WordCloud words={question.words} />
          {question.samples.length > 0 && (
            <div>
              <div className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted">
                Recent answers
              </div>
              <ul className="space-y-2">
                {question.samples.map((sample, i) => (
                  <li
                    key={`${i}-${sample.slice(0, 24)}`}
                    className="rounded-lg border border-border bg-bg px-3 py-2.5 text-[13px] leading-relaxed text-navy"
                  >
                    “{sample}”
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      )}
      {question.kind === "other" && (
        <p className="text-sm text-muted">
          {formatCount(question.responseCount)} raw responses collected.
        </p>
      )}
    </div>
  );
}