import * as React from 'react';
import { MessageSquare, Check } from 'lucide-react';
import { cn } from '../../lib/utils';
import { formatRelativeTime } from '../../utils';

/** One critique note in a review thread (used per content section or overall). */
export interface ReviewNote {
  id: string;
  body: string;
  author?: string;
  /** When the note was recorded — rendered as a relative time if present. */
  at?: string | Date;
  resolved?: boolean;
  /** Optional section/anchor the note is about. */
  section?: string;
}

export interface ReviewNotesProps {
  /** The notes to render. */
  notes: ReviewNote[];
  /** Provide to show a composer. Called with the new note body. */
  onAdd?: (body: string) => void;
  /** Provide to show a Resolve action on unresolved notes. */
  onResolve?: (id: string) => void;
  emptyMessage?: string;
  title?: string;
  /** Hide the composer + resolve actions (view-only). */
  readOnly?: boolean;
  className?: string;
}

/**
 * A lightweight note/critique thread (768w.16.10.4) — the section-level or overall
 * companion to ReviewScorecard. Purely presentational + bring-your-own-data: it
 * lists notes (author, relative time, resolved styling), exposes a Resolve action
 * and a composer when the callbacks are provided, and never fetches or persists.
 */
export function ReviewNotes({
  notes,
  onAdd,
  onResolve,
  emptyMessage = 'No notes yet.',
  title = 'Notes',
  readOnly,
  className,
}: ReviewNotesProps) {
  const [draft, setDraft] = React.useState('');
  const canCompose = !readOnly && !!onAdd;

  const submit = () => {
    const body = draft.trim();
    if (!body) return;
    onAdd?.(body);
    setDraft('');
  };

  return (
    <div className={cn('rounded-xl border bg-card text-card-foreground shadow p-5 space-y-4', className)}>
      <div className="flex items-center gap-2 min-w-0">
        <MessageSquare className="w-4 h-4 text-gray-400 flex-shrink-0" aria-hidden="true" />
        <h3 className="text-sm font-semibold text-gray-900 truncate">{title}</h3>
        {notes.length > 0 && <span className="text-xs text-gray-400">{notes.length}</span>}
      </div>

      {notes.length === 0 ? (
        <p className="text-sm text-gray-500 py-2 text-center">{emptyMessage}</p>
      ) : (
        <ul className="space-y-2">
          {notes.map((note) => (
            <li
              key={note.id}
              className={cn('rounded-lg border p-3 text-sm space-y-1', note.resolved && 'opacity-60')}
            >
              <div className="flex items-center justify-between gap-3">
                <div className="flex items-center gap-2 min-w-0 text-xs text-gray-500 flex-wrap">
                  {note.author && <span className="font-medium text-gray-700">{note.author}</span>}
                  {note.section && (
                    <span className="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-600">{note.section}</span>
                  )}
                  {note.at && <span>{formatRelativeTime(note.at)}</span>}
                </div>
                {note.resolved ? (
                  <span className="inline-flex items-center gap-1 text-xs font-medium text-emerald-600 flex-shrink-0">
                    <Check className="w-3.5 h-3.5" aria-hidden="true" />
                    Resolved
                  </span>
                ) : (
                  onResolve &&
                  !readOnly && (
                    <button
                      type="button"
                      onClick={() => onResolve(note.id)}
                      className="text-xs font-medium text-gray-500 hover:text-gray-900 flex-shrink-0"
                    >
                      Resolve
                    </button>
                  )
                )}
              </div>
              <p className={cn('text-gray-900 break-words', note.resolved && 'line-through text-gray-500')}>
                {note.body}
              </p>
            </li>
          ))}
        </ul>
      )}

      {canCompose && (
        <div className="space-y-2 border-t pt-3">
          <textarea
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            rows={2}
            placeholder="Add a note…"
            aria-label="Add a note"
            className="w-full rounded-md border px-2 py-1 text-sm"
          />
          <button
            type="button"
            disabled={draft.trim().length === 0}
            onClick={submit}
            className="rounded-md bg-gray-900 px-2.5 py-1 text-xs font-medium text-white disabled:opacity-40"
          >
            Add note
          </button>
        </div>
      )}
    </div>
  );
}