"use client";

import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import { saveWeeklySummaryAction, type SummaryState } from "../actions";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className="btn-primary" disabled={pending}>
      {pending ? "Đang lưu…" : "Chốt tổng kết tuần"}
    </button>
  );
}

export function WeeklySummaryForm({
  weekStart,
  objective,
  summary,
  nextWeekObjective,
  weekLabel,
}: {
  weekStart: string;
  objective: string | null;
  summary: string | null;
  nextWeekObjective: string | null;
  weekLabel: string;
}) {
  const [state, formAction] = useActionState<SummaryState, FormData>(saveWeeklySummaryAction, {});

  return (
    <form action={formAction} className="card flex flex-col gap-4 p-4">
      <input type="hidden" name="weekStart" value={weekStart} />

      <div>
        <label htmlFor="objective" className="label-caps mb-1.5 block">
          Mục tiêu tuần này
        </label>
        <input
          id="objective"
          name="objective"
          defaultValue={objective ?? ""}
          className="input"
          placeholder="Phủ tuyến trọng điểm, đẩy SP trọng tâm…"
        />
      </div>

      <div>
        <label htmlFor="summary" className="label-caps mb-1.5 block">
          Nhận định tổng kết tuần
        </label>
        <textarea
          id="summary"
          name="summary"
          rows={4}
          defaultValue={summary ?? ""}
          className="input"
          placeholder="Điều gì làm được, điều gì chưa, nguyên nhân và hướng khắc phục…"
        />
        <p className="mt-1 text-[11px] text-ink-400">
          Chỉ ghi phần nhận định. Các con số trong bản tổng kết đều tự tính từ lộ trình và báo cáo ngày
          đã ghi, không có ô nào nhập tay.
        </p>
      </div>

      <div>
        <label htmlFor="nextWeekObjective" className="label-caps mb-1.5 block">
          Mục tiêu tuần tới
        </label>
        <textarea
          id="nextWeekObjective"
          name="nextWeekObjective"
          rows={2}
          defaultValue={nextWeekObjective ?? ""}
          className="input"
          placeholder="Các điểm cần quay lại, chỉ tiêu đặt ra cho tuần sau…"
        />
      </div>

      {state.error && (
        <p role="alert" className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">
          {state.error}
        </p>
      )}
      {state.ok && (
        <p className="rounded-lg bg-ink-100 px-3 py-2 text-sm text-brand-600">
          Đã chốt tổng kết tuần {weekLabel}. Quản lý xem được ngay trong mục Công việc.
        </p>
      )}

      <div>
        <Submit />
      </div>
    </form>
  );
}