edbridge-scholars/src/components/lessons/ClauseBreakdownWidget.tsx

import { useState } from "react";
import { MousePointerClick } from "lucide-react";

export type SegmentType =
  | "ic"
  | "dc"
  | "modifier"
  | "conjunction"
  | "punct"
  | "subject"
  | "verb";

export interface Segment {
  text: string;
  type: SegmentType;
  label?: string;
}

export interface ClauseExample {
  title: string;
  segments: Segment[];
}

interface ClauseBreakdownWidgetProps {
  examples: ClauseExample[];
  accentColor?: string;
}

const TYPE_STYLES: Record<
  SegmentType,
  { bg: string; text: string; border: string; ring: string }
> = {
  ic: {
    bg: "bg-blue-100",
    text: "text-blue-800",
    border: "border-blue-300",
    ring: "#93c5fd",
  },
  dc: {
    bg: "bg-green-100",
    text: "text-green-800",
    border: "border-green-300",
    ring: "#86efac",
  },
  modifier: {
    bg: "bg-orange-100",
    text: "text-orange-800",
    border: "border-orange-300",
    ring: "#fdba74",
  },
  conjunction: {
    bg: "bg-purple-100",
    text: "text-purple-800",
    border: "border-purple-300",
    ring: "#c4b5fd",
  },
  subject: {
    bg: "bg-sky-100",
    text: "text-sky-800",
    border: "border-sky-300",
    ring: "#7dd3fc",
  },
  verb: {
    bg: "bg-rose-100",
    text: "text-rose-800",
    border: "border-rose-300",
    ring: "#fda4af",
  },
  punct: {
    bg: "bg-gray-100",
    text: "text-gray-600",
    border: "border-gray-300",
    ring: "#d1d5db",
  },
};

const TYPE_LABELS: Record<SegmentType, string> = {
  ic: "Independent Clause",
  dc: "Dependent Clause",
  modifier: "Modifier",
  conjunction: "Conjunction",
  subject: "Subject",
  verb: "Verb / Predicate",
  punct: "Punctuation",
};

// Pre-resolved tab accent classes (avoids Tailwind purge issues with dynamic strings)
const TAB_ACTIVE: Record<string, string> = {
  purple: "border-b-2 border-purple-600 text-purple-700 bg-white",
  teal: "border-b-2 border-teal-600 text-teal-700 bg-white",
  fuchsia: "border-b-2 border-fuchsia-600 text-fuchsia-700 bg-white",
  amber: "border-b-2 border-amber-600 text-amber-700 bg-white",
};

export default function ClauseBreakdownWidget({
  examples,
  accentColor = "purple",
}: ClauseBreakdownWidgetProps) {
  const [activeTab, setActiveTab] = useState(0);
  const [selected, setSelected] = useState<number | null>(null);

  const example = examples[activeTab];
  const switchTab = (i: number) => {
    setActiveTab(i);
    setSelected(null);
  };

  const selectedSeg = selected !== null ? example.segments[selected] : null;
  const tabActive = TAB_ACTIVE[accentColor] ?? TAB_ACTIVE.purple;

  // Unique labeled segment types for the legend
  const legendTypes = Array.from(
    new Set(example.segments.filter((s) => s.label).map((s) => s.type)),
  );

  return (
    <div className="rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm">
      {/* Tab strip */}
      {examples.length > 1 && (
        <div className="flex border-b border-gray-200 bg-gray-50 overflow-x-auto">
          {examples.map((ex, i) => (
            <button
              key={i}
              onClick={() => switchTab(i)}
              className={`px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors ${
                i === activeTab
                  ? tabActive
                  : "text-gray-500 hover:text-gray-700"
              }`}
            >
              {ex.title}
            </button>
          ))}
        </div>
      )}
      {examples.length === 1 && (
        <div className="px-5 pt-4 pb-1">
          <p className="text-xs font-semibold uppercase tracking-wider text-gray-400">
            {example.title}
          </p>
        </div>
      )}

      {/* Instruction */}
      <div className="px-5 pt-3 pb-1 flex items-center gap-1.5">
        <MousePointerClick className="w-3.5 h-3.5 text-gray-400 shrink-0" />
        <p className="text-xs text-gray-400 italic">
          Click any colored part to see its grammatical role
        </p>
      </div>

      {/* Sentence display */}
      <div className="px-5 pt-2 pb-3">
        <div className="text-base leading-10 bg-gray-50 rounded-xl border border-gray-200 px-5 py-4 select-none">
          {example.segments.map((seg, i) => {
            if (!seg.label) {
              // Punctuation / unlabeled — plain unstyled text, not clickable
              return (
                <span key={i} className="text-gray-700">
                  {seg.text}
                </span>
              );
            }
            const style = TYPE_STYLES[seg.type];
            const isSelected = selected === i;
            return (
              <span
                key={i}
                onClick={() => setSelected(isSelected ? null : i)}
                className={`inline cursor-pointer rounded px-1 py-0.5 mx-0.5 transition-all ${style.bg} ${style.text} ${
                  isSelected
                    ? `border-2 ${style.border} font-semibold`
                    : `border ${style.border} hover:opacity-80`
                }`}
                style={
                  isSelected
                    ? {
                        outline: `2.5px solid ${style.ring}`,
                        outlineOffset: "1px",
                      }
                    : {}
                }
              >
                {seg.text}
              </span>
            );
          })}
        </div>

        {/* Selection indicator */}
        {selectedSeg ? (
          <div
            className={`mt-3 rounded-xl border-2 px-4 py-3 flex items-start gap-3 ${TYPE_STYLES[selectedSeg.type].bg} ${TYPE_STYLES[selectedSeg.type].border}`}
          >
            <div
              className="w-2.5 h-2.5 rounded-full mt-1.5 shrink-0"
              style={{ backgroundColor: TYPE_STYLES[selectedSeg.type].ring }}
            />
            <div className="flex-1 min-w-0">
              <p
                className={`text-xs font-bold uppercase tracking-wider mb-0.5 ${TYPE_STYLES[selectedSeg.type].text}`}
              >
                {selectedSeg.label ?? TYPE_LABELS[selectedSeg.type]}
              </p>
              <p
                className={`text-sm font-semibold leading-snug ${TYPE_STYLES[selectedSeg.type].text}`}
              >
                "{selectedSeg.text.trim()}"
              </p>
            </div>
          </div>
        ) : (
          <p className="mt-2 text-xs text-gray-400 italic px-1">
            No element selected — click a colored span above.
          </p>
        )}
      </div>

      {/* Legend */}
      <div className="px-5 py-3 border-t border-gray-100 bg-gray-50 flex flex-wrap gap-2">
        {legendTypes.map((type) => {
          const style = TYPE_STYLES[type];
          return (
            <span
              key={type}
              className={`inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full border ${style.bg} ${style.text} ${style.border}`}
            >
              <span
                className="w-2 h-2 rounded-full"
                style={{ backgroundColor: TYPE_STYLES[type].ring }}
              />
              {TYPE_LABELS[type]}
            </span>
          );
        })}
      </div>
    </div>
  );
}