import { useEffect, useState } from 'react';

import { getOperatorRemarkInfo, saveOperatorRemarkInfo } from '../../api';

interface NoteModalProps {
  noteText: string;
  onNoteChange: (v: string) => void;
  onClose: () => void;
}

export const NoteModal = ({ noteText, onNoteChange, onClose }: NoteModalProps) => {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<string | null>(null);

  const operatorId = typeof window !== 'undefined' ? localStorage.getItem('operatorId') || '' : '';
  const operatorName = typeof window !== 'undefined' ? localStorage.getItem('operatorName') || '未知' : '未知';

  // 初始化拉取备注
  useEffect(() => {
    if (!operatorId) return;
    setLoading(true);
    setMessage(null);
    getOperatorRemarkInfo({ operator_id: operatorId })
      .then((res) => {
        if (res.Status === 200 && res.Data?.remark_content) {
          onNoteChange(res.Data.remark_content);
        } else if (res.Message) {
          setMessage(res.Message);
        }
      })
      .catch((err) => {
        console.error('获取备注失败', err);
        setMessage('获取备注失败，请稍后重试');
      })
      .finally(() => setLoading(false));
  }, [operatorId, onNoteChange]);

  const handleSave = async () => {
    if (!operatorId || !operatorName) {
      setMessage('缺少操作员信息，无法保存');
      return;
    }
    if (!noteText.trim()) {
      setMessage('备注内容不能为空');
      return;
    }
    setSaving(true);
    setMessage(null);
    try {
      const res = await saveOperatorRemarkInfo({
        operator_id: operatorId,
        operator_name: operatorName,
        remark_content: noteText.trim(),
      });
      if (res.Status === 200) {
        setMessage('保存成功');
      } else {
        setMessage(res.Message || '保存失败');
      }
    } catch (err) {
      console.error('保存备注失败', err);
      setMessage('保存失败，请稍后重试');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
      <div className='w-[560px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
        <div className='px-4 py-3 border-b flex items-center justify-between'>
          <div className='font-semibold'>备注窗</div>
          <button className='text-xs text-gray-500' onClick={onClose} disabled={saving || loading}>
            关闭
          </button>
        </div>
        <div className='px-4 py-4 bg-gray-50/60'>
          <div className='space-y-3 text-xs text-gray-700'>
            <div>体检客户服务备注（仅内部可见）</div>
            <textarea
              className='w-full rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[96px]'
              placeholder='例如：客户有既往疾病史、沟通偏好、特殊关怀需求等，可在此记录。'
              value={noteText}
              onChange={(e) => onNoteChange(e.target.value)}
              disabled={loading || saving}
            />
            {message && <div className='text-[11px] text-amber-600'>{message}</div>}
            <div className='flex items-center justify-end gap-2'>
              <button
                className='px-4 py-1.5 rounded-2xl border text-xs disabled:opacity-50'
                onClick={handleSave}
                disabled={saving || loading}
              >
                {saving ? '保存中...' : '保存'}
              </button>
            </div>
            {/* <div className='text-right text-[11px] text-gray-500'>
              备注内容会同步至客户详情页，供前台和导检护士查看。
            </div> */}
          </div>
        </div>
      </div>
    </div>
  );
};