"use client";

import { useState, useCallback } from "react";
import { updateHuddleNotes } from "@/lib/api";
import { StickyNote, Save } from "lucide-react";

interface HuddleNotesProps {
  huddleId: string;
  initialNotes?: string;
}

export function HuddleNotes({ huddleId, initialNotes }: HuddleNotesProps) {
  const [notes, setNotes] = useState(initialNotes || "");
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const handleSave = useCallback(async () => {
    setSaving(true);
    setSaved(false);
    try {
      await updateHuddleNotes(huddleId, notes);
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    } catch (err) {
      console.error("Failed to save notes:", err);
    } finally {
      setSaving(false);
    }
  }, [huddleId, notes]);

  return (
    <div className="flex flex-col h-full border-t border-gray-200">
      <div className="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-gray-50">
        <div className="flex items-center gap-2">
          <StickyNote size={16} className="text-gray-500" />
          <h3 className="text-sm font-semibold text-gray-700">Huddle notes</h3>
        </div>
        <button
          onClick={handleSave}
          disabled={saving}
          className="flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium text-slack-purple hover:bg-slack-purple/10 disabled:opacity-40 transition-colors"
        >
          <Save size={12} />
          <span>{saved ? "Saved!" : saving ? "Saving..." : "Save"}</span>
        </button>
      </div>
      <textarea
        value={notes}
        onChange={(e) => setNotes(e.target.value)}
        placeholder="Take notes during the huddle..."
        className="flex-1 resize-none px-4 py-3 text-sm text-gray-800 focus:outline-none min-h-[120px]"
      />
    </div>
  );
}