import React from 'react';
import { Paperclip } from 'lucide-react';
import type { ResearchDensityMode, ResearchNote } from '../../../types/research';
import { ConfidenceBadge, EvidenceBadge, FreshnessBadge, NoteTypeBadge, TagChip } from './Badges';
import { NOTE_TYPE_ACCENTS } from './researchMeta';

interface NoteCardProps {
  note: ResearchNote;
  density: ResearchDensityMode;
  isSelected?: boolean;
  onSelect?: () => void;
  actions?: React.ReactNode;
}

const densityClasses: Record<ResearchDensityMode, string> = {
  compact: 'gap-2 p-2.5 sm:p-3',
  comfortable: 'gap-2.5 p-3 sm:gap-3 sm:p-4',
  detailed: 'gap-3 p-4 sm:gap-4 sm:p-5',
};

export const NoteCard: React.FC<NoteCardProps> = ({
  note,
  density,
  isSelected = false,
  onSelect,
  actions,
}) => {
  return (
    <button
      type="button"
      onClick={onSelect}
      className={`flex w-full flex-col rounded-2xl border bg-term-elevated text-left transition-all hover:border-term-border-focus hover:bg-term-surface ${densityClasses[density]} ${
        isSelected ? 'border-info shadow-[0_0_0_1px_rgba(88,166,255,0.25)]' : 'border-term-border'
      }`}
      style={{
        boxShadow: isSelected
          ? `inset 0 0 0 1px ${NOTE_TYPE_ACCENTS[note.noteType]}55`
          : undefined,
      }}
    >
      <div className="flex flex-wrap items-start justify-between gap-2">
        <div className="flex flex-wrap gap-2">
          <NoteTypeBadge noteType={note.noteType} />
          <EvidenceBadge status={note.evidenceStatus} />
        </div>
        <div className="flex flex-wrap gap-2">
          {note.fileIds.length > 0 ? (
            <span className="inline-flex items-center gap-1 rounded-full border border-term-border bg-term-surface px-2 py-1 text-[10px] uppercase tracking-[0.14em] text-term-text-tertiary">
              <Paperclip className="h-3 w-3" />
              {note.fileIds.length}
            </span>
          ) : null}
          <ConfidenceBadge confidence={note.confidence} />
          <FreshnessBadge timestamp={note.updatedAt} />
        </div>
      </div>

      <div>
        <h3 className="text-sm font-semibold text-term-text">
          {note.title || note.cleanedText.split('\n')[0] || 'Untitled note'}
        </h3>
        <p className="mt-2 line-clamp-4 text-sm leading-6 text-term-text-muted">
          {note.aiAnnotation || note.cleanedText}
        </p>
      </div>

      {(note.tags.length > 0 || note.catalysts.length > 0 || note.risks.length > 0) && (
        <div className="flex flex-wrap gap-2">
          {note.tags.slice(0, 3).map((tag) => (
            <TagChip key={tag} label={tag} />
          ))}
          {note.catalysts.slice(0, 1).map((item) => (
            <TagChip key={item} label={`Catalyst: ${item}`} />
          ))}
          {note.risks.slice(0, 1).map((item) => (
            <TagChip key={item} label={`Risk: ${item}`} />
          ))}
        </div>
      )}

      {actions ? <div className="mt-auto flex flex-wrap gap-2">{actions}</div> : null}
    </button>
  );
};
