'use client'

import React from 'react'
import type { ProjectInfo } from '@/lib/sdk/types'

export function formatTimeAgo(dateStr: string): string {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  if (isNaN(date.getTime())) return ''
  const now = Date.now()
  const diff = now - date.getTime()
  const seconds = Math.floor(diff / 1000)
  if (seconds < 60) return 'Gerade eben'
  const minutes = Math.floor(seconds / 60)
  if (minutes < 60) return `vor ${minutes} Min`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `vor ${hours} Std`
  const days = Math.floor(hours / 24)
  return `vor ${days} Tag${days > 1 ? 'en' : ''}`
}

interface ProjectCardProps {
  project: ProjectInfo
  onClick: () => void
  onDelete?: () => void
  onRestore?: () => void
}

export function ProjectCard({
  project,
  onClick,
  onDelete,
  onRestore,
}: ProjectCardProps) {
  const timeAgo = formatTimeAgo(project.updatedAt)
  const isArchived = project.status === 'archived'

  return (
    <div className={`relative bg-white rounded-xl border-2 transition-all ${
      isArchived
        ? 'border-gray-200 opacity-75'
        : 'border-gray-200 hover:border-purple-300 hover:shadow-lg'
    }`}>
      {/* Action buttons */}
      <div className="absolute top-3 right-3 flex items-center gap-1 z-10">
        {isArchived && onRestore && (
          <button
            onClick={e => {
              e.stopPropagation()
              onRestore()
            }}
            className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
            title="Wiederherstellen"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
          </button>
        )}
        {onDelete && (
          <button
            onClick={e => {
              e.stopPropagation()
              onDelete()
            }}
            className="p-1.5 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
            title="Entfernen"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        )}
      </div>

      {/* Card content */}
      <button
        onClick={onClick}
        className="block w-full text-left p-6"
      >
        <div className="flex items-start justify-between mb-3 pr-16">
          <h3 className={`font-semibold text-lg truncate pr-2 ${isArchived ? 'text-gray-500' : 'text-gray-900'}`}>
            {project.name}
          </h3>
          <span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${
            isArchived
              ? 'bg-gray-100 text-gray-500'
              : 'bg-green-100 text-green-700'
          }`}>
            {isArchived ? 'Archiviert' : 'Aktiv'}
          </span>
        </div>

        {project.description && (
          <p className="text-sm text-gray-500 mb-3 line-clamp-2">{project.description}</p>
        )}

        <div className="flex items-center gap-4 text-sm text-gray-500">
          <span className="font-mono">V{String(project.projectVersion).padStart(3, '0')}</span>
          <span className="text-gray-300">|</span>
          <div className="flex items-center gap-2 flex-1">
            <div className="flex-1 h-1.5 bg-gray-100 rounded-full overflow-hidden">
              <div
                className={`h-full rounded-full transition-all ${
                  project.completionPercentage === 100 ? 'bg-green-500' : isArchived ? 'bg-gray-400' : 'bg-purple-600'
                }`}
                style={{ width: `${project.completionPercentage}%` }}
              />
            </div>
            <span className="font-medium text-gray-600">{project.completionPercentage}%</span>
          </div>
          {timeAgo && (
            <>
              <span className="text-gray-300">|</span>
              <span>{timeAgo}</span>
            </>
          )}
        </div>

        <div className="mt-2 text-xs text-gray-400">
          {project.customerType === 'new' ? 'Neukunde' : 'Bestandskunde'}
        </div>
      </button>
    </div>
  )
}