import { useState } from 'react';
import { router } from '@inertiajs/react';
import { postJson } from '@/lib/api';
import { SectionCard } from './shared';

type Props = {
  saveUrl: string;
  schoolYearId: number | null;
  term: number | null;
  initialComment: string | null;
  /** پس از ذخیره موفق، فقط همین کلیدهای props صفحه رفرش می‌شوند (سازگار با ساختار هر صفحه). */
  reloadOnly: string[];
};

/** فرم ثبت/ویرایش نظر معلم برای کارنامه — در پرونده معلم و پنل مدرسه استفاده می‌شود. */
export function TeacherCommentEditor({ saveUrl, schoolYearId, term, initialComment, reloadOnly }: Props) {
  const [value, setValue] = useState(initialComment ?? '');
  const [busy, setBusy] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function save() {
    setBusy(true);
    setError(null);
    setSaved(false);
    try {
      await postJson(saveUrl, {
        comment: value,
        school_year_id: schoolYearId,
        term,
      });
      setSaved(true);
      router.reload({ only: reloadOnly, onSuccess: () => setSaved(false) });
    } catch {
      setError('ذخیره نظر با خطا مواجه شد. دوباره تلاش کنید.');
    } finally {
      setBusy(false);
    }
  }

  return (
    <SectionCard title="ثبت نظر کارنامه" icon="bi-pencil-square" className="rc-comment-editor">
      <textarea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder={`نظر خود درباره‌ی عملکرد این دانش‌آموز را برای این ${term ? 'نوبت' : 'کارنامه سالانه'} بنویسید...`}
        maxLength={2000}
        dir="rtl"
      />
      <div className="rc-comment-editor-footer">
        {saved && <span className="rc-comment-editor-saved"><i className="bi bi-check-circle-fill" /> ذخیره شد</span>}
        {error && <span className="rc-comment-editor-error">{error}</span>}
        <button type="button" className="btn btn-primary btn-sm" onClick={save} disabled={busy}>
          <i className="bi bi-save" /> {busy ? 'در حال ذخیره…' : 'ذخیره نظر'}
        </button>
      </div>
    </SectionCard>
  );
}