"use client";

import { useTranslations } from "next-intl";
import type { ImportBlockData } from "../../types";
import { isImportMethod } from "../../lib/type-guards";

interface Props {
  data: ImportBlockData;
  onUpdate: (data: ImportBlockData) => void;
}

const METHODS: ImportBlockData["method"][] = ["question", "situation", "review", "other"];

export function ImportBlock({ data, onUpdate }: Props) {
  const t = useTranslations("lessonPreparation");

  return (
    <div className="space-y-3">
      <div className="text-xs text-on-surface-variant">
        {t("import.hint")}
      </div>
      <div>
        <label className="text-xs font-medium block mb-1">
          {t("import.methodLabel")}
        </label>
        <select
          value={data.method}
          onChange={(e) => {
            const value = e.target.value;
            if (isImportMethod(value)) {
              onUpdate({ ...data, method: value });
            }
          }}
          className="w-full text-sm border border-outline-variant rounded px-2 py-1 bg-surface"
        >
          {METHODS.map((m) => (
            <option key={m} value={m}>
              {t(`import.method.${m}`)}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label className="text-xs font-medium block mb-1">
          {t("import.promptLabel")}
        </label>
        <textarea
          value={data.prompt}
          onChange={(e) => onUpdate({ ...data, prompt: e.target.value })}
          className="w-full text-sm border border-outline-variant rounded px-2 py-1 resize-y min-h-[60px]"
          placeholder={t("import.promptPlaceholder")}
        />
      </div>
      <div>
        <label className="text-xs font-medium block mb-1">
          {t("import.durationLabel")}
        </label>
        <input
          type="number"
          min={1}
          max={30}
          value={data.durationMin}
          onChange={(e) =>
            onUpdate({ ...data, durationMin: Number(e.target.value) || 0 })
          }
          className="w-20 text-sm border border-outline-variant rounded px-2 py-1 bg-surface"
        />
        <span className="text-xs text-on-surface-variant ml-2">
          {t("import.durationUnit")}
        </span>
      </div>
    </div>
  );
}
