/**
 * StaffNotesEditor Component
 * Rich text editor for internal staff notes
 */

"use client";

import { useState } from "react";
import { Save, AlertCircle } from "lucide-react";

interface StaffNotesEditorProps {
  initialValue: string;
  onSave: (notes: string) => Promise<void>;
  placeholder?: string;
  label?: string;
  rows?: number;
  maxLength?: number;
}

export default function StaffNotesEditor({
  initialValue,
  onSave,
  placeholder = "Add internal notes for team collaboration...",
  label = "Staff Notes (Internal)",
  rows = 4,
  maxLength = 2000,
}: StaffNotesEditorProps) {
  const [value, setValue] = useState(initialValue);
  const [isSaving, setIsSaving] = useState(false);
  const [isDirty, setIsDirty] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setValue(e.target.value);
    setIsDirty(e.target.value !== initialValue);
    setError(null);
  };

  const handleSave = async () => {
    if (!isDirty || isSaving) return;

    setIsSaving(true);
    setError(null);

    try {
      await onSave(value);
      setIsDirty(false);
    } catch (err: any) {
      setError(err.message || "Failed to save notes");
    } finally {
      setIsSaving(false);
    }
  };

  const remainingChars = maxLength - value.length;
  const isNearLimit = remainingChars < 100;

  return (
    <div className="space-y-2">
      <label className="block text-sm font-semibold text-gray-700">
        {label}
        <span className="ml-2 text-xs font-normal text-gray-500">
          (Not visible to applicant)
        </span>
      </label>

      <textarea
        value={value}
        onChange={handleChange}
        placeholder={placeholder}
        rows={rows}
        maxLength={maxLength}
        className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green resize-none"
      />

      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          {error && (
            <div className="flex items-center gap-2 text-sm text-red-600">
              <AlertCircle className="w-4 h-4" />
              <span>{error}</span>
            </div>
          )}
          {isDirty && !error && (
            <span className="text-sm text-amber-600">Unsaved changes</span>
          )}
        </div>

        <div className="flex items-center gap-4">
          <span
            className={`text-xs ${
              isNearLimit ? "text-amber-600 font-semibold" : "text-gray-500"
            }`}
          >
            {remainingChars} characters remaining
          </span>

          <button
            onClick={handleSave}
            disabled={!isDirty || isSaving}
            className="inline-flex items-center gap-2 px-4 py-2 bg-brand-green text-white font-semibold rounded-lg hover:bg-green-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Save className="w-4 h-4" />
            {isSaving ? "Saving..." : "Save Notes"}
          </button>
        </div>
      </div>
    </div>
  );
}