"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { Tag } from "lucide-react";
import type { BlackboardBlockData } from "../../types";
import { isBlackboardLayout } from "../../lib/type-guards";
import { KnowledgePointPicker } from "../knowledge-point-picker";
import { LessonPlanErrorBoundary } from "../lesson-plan-error-boundary";

interface Props {
  data: BlackboardBlockData;
  textbookId?: string;
  chapterId?: string;
  onUpdate: (data: BlackboardBlockData) => void;
}

const LAYOUTS: BlackboardBlockData["layout"][] = ["structure", "mindmap", "text"];

export function BlackboardBlock({ data, textbookId, chapterId, onUpdate }: Props) {
  const t = useTranslations("lessonPreparation");
  const [showKpPicker, setShowKpPicker] = useState(false);

  return (
    <div className="space-y-3">
      <div className="text-xs text-on-surface-variant">
        {t("blackboard.hint")}
      </div>
      <div>
        <label className="text-xs font-medium block mb-1">
          {t("blackboard.layoutLabel")}
        </label>
        <select
          value={data.layout}
          onChange={(e) => {
            const value = e.target.value;
            if (isBlackboardLayout(value)) {
              onUpdate({ ...data, layout: value });
            }
          }}
          className="w-full text-sm border border-outline-variant rounded px-2 py-1 bg-surface"
        >
          {LAYOUTS.map((l) => (
            <option key={l} value={l}>
              {t(`blackboard.layout.${l}`)}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label className="text-xs font-medium block mb-1">
          {t("blackboard.contentLabel")}
        </label>
        <textarea
          value={data.content}
          onChange={(e) => onUpdate({ ...data, content: e.target.value })}
          className="w-full text-sm border border-outline-variant rounded px-2 py-1 resize-y min-h-[120px] font-mono"
          placeholder={t("blackboard.contentPlaceholder")}
        />
      </div>
      <div className="flex items-center gap-2 flex-wrap">
        {data.knowledgePointIds.length > 0 && (
          <span className="text-xs text-on-surface-variant">
            {t("knowledgePoint.linked", { count: data.knowledgePointIds.length })}
          </span>
        )}
        <button
          onClick={() => setShowKpPicker(true)}
          className="text-xs text-primary hover:underline inline-flex items-center gap-1"
        >
          <Tag className="w-3 h-3" />
          {t("knowledgePoint.annotate")}
        </button>
      </div>
      {showKpPicker && (
        <LessonPlanErrorBoundary>
          <KnowledgePointPicker
            textbookId={textbookId}
            chapterId={chapterId}
            selectedIds={data.knowledgePointIds}
            onChange={(ids) => onUpdate({ ...data, knowledgePointIds: ids })}
            onClose={() => setShowKpPicker(false)}
          />
        </LessonPlanErrorBoundary>
      )}
    </div>
  );
}
