'use client';

import { clsx } from 'clsx';
import { Zap, FileText, Clock } from 'lucide-react';
import type { Skill } 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' });
}

interface SkillCardProps {
  skill: Skill;
  isSelected?: boolean;
  isFirst?: boolean;
  onClick: (skill: Skill) => void;
}

export function SkillCard({ skill, isSelected, isFirst, onClick }: SkillCardProps) {
  const fileCount = skill.files.length + 1; // +1 for SKILL.md

  return (
    <div
      className={clsx(
        'relative rounded-xl border p-5 cursor-pointer transition-all duration-200',
        'bg-[#1c2026]',
        isFirst && 'col-span-2',
        isSelected
          ? 'border-l-[3px] border-l-[#67df70] border-t-white/10 border-r-white/10 border-b-white/10'
          : 'border-white/5 hover:border-[#67df70]/30',
      )}
      onClick={() => onClick(skill)}
    >
      {/* Top: icon + name + category */}
      <div className="flex items-start gap-3 mb-3">
        <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-[#67df70]/10 shrink-0">
          <Zap size={16} className="text-[#67df70]" />
        </div>
        <div className="flex-1 min-w-0">
          <h3 className="text-sm font-bold text-white truncate">{skill.name}</h3>
          <p className="text-xs text-gray-400 leading-relaxed mt-1 line-clamp-2">
            {skill.description}
          </p>
        </div>
      </div>

      {/* Category badge */}
      <div className="mb-3">
        <span className="inline-block text-[10px] font-mono uppercase tracking-wider text-[#58a6ff] bg-[#58a6ff]/10 px-2 py-0.5 rounded">
          {skill.category}
        </span>
      </div>

      {/* Bottom row: file count + last modified */}
      <div className="flex items-center justify-between text-xs text-gray-500">
        <span className="flex items-center gap-1.5">
          <FileText size={12} />
          {fileCount} file{fileCount !== 1 ? 's' : ''}
        </span>
        <span className="flex items-center gap-1.5">
          <Clock size={12} />
          {formatRelativeTime(skill.lastModified)}
        </span>
      </div>
    </div>
  );
}