"use client";

import { useTranslations } from "next-intl";
import { Plus, Trash2 } from "lucide-react";
import type { SummaryBlockData } from "../../types";
import { Button } from "@/shared/components/ui/button";

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

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

  function updatePoint(index: number, value: string) {
    const next = data.summaryPoints.map((p, i) => (i === index ? value : p));
    onUpdate({ ...data, summaryPoints: next });
  }

  function addPoint() {
    onUpdate({
      ...data,
      summaryPoints: [...data.summaryPoints, ""],
    });
  }

  function removePoint(index: number) {
    onUpdate({
      ...data,
      summaryPoints: data.summaryPoints.filter((_, i) => i !== index),
    });
  }

  return (
    <div className="space-y-2">
      <div className="text-xs text-on-surface-variant">
        {t("summary.hint")}
      </div>
      {data.summaryPoints.map((point, idx) => (
        <div key={`summary-${idx}`} className="flex items-start gap-2">
          <span className="text-xs text-on-surface-variant mt-1">{idx + 1}.</span>
          <input
            type="text"
            value={point}
            onChange={(e) => updatePoint(idx, e.target.value)}
            className="flex-1 text-sm border border-outline-variant rounded px-2 py-1"
            placeholder={t("summary.pointPlaceholder")}
          />
          <Button
            variant="ghost"
            size="sm"
            className="!p-1 text-error"
            onClick={() => removePoint(idx)}
            aria-label={t("action.delete")}
          >
            <Trash2 className="w-3 h-3" />
          </Button>
        </div>
      ))}
      <Button variant="outline" size="sm" onClick={addPoint}>
        <Plus className="w-3 h-3 mr-1" />
        {t("summary.addPoint")}
      </Button>
      <div>
        <label className="text-xs font-medium block mb-1 mt-2">
          {t("summary.homeworkPreviewLabel")}
        </label>
        <textarea
          value={data.homeworkPreview}
          onChange={(e) => onUpdate({ ...data, homeworkPreview: e.target.value })}
          className="w-full text-sm border border-outline-variant rounded px-2 py-1 resize-y min-h-[40px]"
          placeholder={t("summary.homeworkPreviewPlaceholder")}
        />
      </div>
    </div>
  );
}