"use client";

import { AdminNote } from "./types";

interface NotesTabProps {
  adminNotes: AdminNote[];
  newNote: string;
  noteCategory: AdminNote["category"];
  submitting: boolean;
  onNewNoteChange: (value: string) => void;
  onNoteCategoryChange: (value: AdminNote["category"]) => void;
  onAddNote: () => void;
}

export function NotesTab({
  adminNotes,
  newNote,
  noteCategory,
  submitting,
  onNewNoteChange,
  onNoteCategoryChange,
  onAddNote,
}: NotesTabProps) {
  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-semibold text-brand-ink mb-4">
          Add New Note
        </h3>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Category
            </label>
            <select
              value={noteCategory}
              onChange={(e) =>
                onNoteCategoryChange(e.target.value as AdminNote["category"])
              }
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-green"
            >
              <option value="general">General</option>
              <option value="support">Support</option>
              <option value="billing">Billing</option>
              <option value="security">Security</option>
              <option value="compliance">Compliance</option>
              <option value="technical">Technical</option>
              <option value="sales">Sales</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Note
            </label>
            <textarea
              value={newNote}
              onChange={(e) => onNewNoteChange(e.target.value)}
              rows={4}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-green"
              placeholder="Enter your note here..."
            />
          </div>
          <button
            onClick={onAddNote}
            disabled={!newNote.trim() || submitting}
            className="px-4 py-2 bg-brand-green text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {submitting ? "Adding..." : "Add Note"}
          </button>
        </div>
      </div>

      <div>
        <h3 className="text-lg font-semibold text-brand-ink mb-4">
          Previous Notes
        </h3>
        <div className="space-y-3">
          {adminNotes.length === 0 ? (
            <div className="text-center py-8 text-gray-500">
              No notes available
            </div>
          ) : (
            adminNotes.map((note) => (
              <div key={note.id} className="p-4 bg-gray-50 rounded-lg">
                <div className="flex items-start justify-between mb-2">
                  <span className="inline-flex px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded">
                    {note.category}
                  </span>
                  <span className="text-xs text-gray-500">
                    {new Date(note.createdAt).toLocaleString()}
                  </span>
                </div>
                <p className="text-sm text-gray-900">{note.content}</p>
                <p className="text-xs text-gray-500 mt-2">
                  By {note.createdBy}
                </p>
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  );
}