'use client';

import { useState } from 'react';
import { clsx } from 'clsx';
import type { Memory } from '@/lib/types';

function formatRelativeTime(dateStr: string): string {
  const now = Date.now();
  const then = new Date(dateStr).getTime();
  const diffMs = now - then;
  const diffMin = Math.floor(diffMs / 60000);
  if (diffMin < 1) return 'just now';
  if (diffMin < 60) return `${diffMin}m ago`;
  const diffHr = Math.floor(diffMin / 60);
  if (diffHr < 24) return `${diffHr}h ago`;
  const diffDays = Math.floor(diffHr / 24);
  if (diffDays === 1) return 'yesterday';
  if (diffDays < 30) return `${diffDays}d ago`;
  return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

function sourceLabel(source: string): string {
  switch (source) {
    case 'conversation':
      return 'Learned';
    case 'observation':
      return 'Observed';
    case 'task':
      return 'Recalled';
    case 'upload':
      return 'Uploaded';
    default:
      return source.charAt(0).toUpperCase() + source.slice(1);
  }
}

interface MemoryCardProps {
  memory: Memory;
  onSelect: (memory: Memory) => void;
  selected?: boolean;
}

export function MemoryCard({ memory, onSelect, selected }: MemoryCardProps) {
  const [hovered, setHovered] = useState(false);

  return (
    <div
      className={clsx(
        'relative rounded-lg border border-border p-4 cursor-pointer transition-all duration-150',
        'border-l-2',
        selected
          ? 'bg-surface-elevated border-l-memory'
          : hovered
            ? 'bg-surface-elevated border-l-memory shadow-md'
            : 'bg-surface border-l-memory'
      )}
      role="button"
      tabIndex={0}
      onClick={() => onSelect(memory)}
      onKeyDown={(e) => { if (e.key === 'Enter') onSelect(memory); }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {/* Header: title + source */}
      <div className="flex items-center gap-2 mb-1.5">
        <h3 className="flex-1 text-sm font-semibold text-text-primary truncate">
          {memory.title}
        </h3>
        <span className="text-[11px] text-text-muted shrink-0">
          {sourceLabel(memory.source)}
        </span>
      </div>

      {/* Content preview */}
      <p className="text-sm text-text-secondary leading-relaxed mb-3 line-clamp-2">
        {memory.content}
      </p>

      {/* Importance bar */}
      <div className="flex items-center gap-2 mb-3">
        <span className="text-[11px] text-text-muted">Importance</span>
        <div className="flex-1 h-1 rounded-full bg-border overflow-hidden max-w-[80px]">
          <div
            className="h-full rounded-full bg-memory transition-all"
            style={{ width: `${memory.importance * 100}%` }}
          />
        </div>
      </div>

      {/* Tags + timestamp */}
      <div className="flex items-center justify-between gap-2">
        <div className="flex items-center gap-1.5 flex-wrap min-w-0">
          {memory.tags.slice(0, 4).map((tag) => (
            <span
              key={tag}
              className="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] bg-surface-elevated border border-border text-text-secondary"
            >
              {tag}
            </span>
          ))}
        </div>
        <span className="text-xs text-text-muted flex-shrink-0">
          {formatRelativeTime(memory.createdAt)}
        </span>
      </div>
    </div>
  );
}