'use client'

import { Portfolio, statusColors, statusLabels } from './PortfolioTypes'

export function PortfolioCard({ portfolio, onSelect, onDelete }: {
  portfolio: Portfolio
  onSelect: (p: Portfolio) => void
  onDelete: (id: string) => void
}) {
  const totalItems = portfolio.total_assessments + portfolio.total_roadmaps + portfolio.total_workshops

  return (
    <div
      className="bg-white rounded-xl border-2 border-gray-200 p-6 hover:border-purple-300 transition-colors cursor-pointer"
      onClick={() => onSelect(portfolio)}
    >
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1 min-w-0">
          <h4 className="font-semibold text-gray-900 truncate">{portfolio.name}</h4>
          {portfolio.department && <span className="text-xs text-gray-500">{portfolio.department}</span>}
        </div>
        <span className={`px-2 py-1 text-xs rounded-full ml-2 ${statusColors[portfolio.status] || 'bg-gray-100 text-gray-700'}`}>
          {statusLabels[portfolio.status] || portfolio.status}
        </span>
      </div>

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

      <div className="grid grid-cols-3 gap-2 mb-4">
        <div className="bg-gray-50 rounded-lg p-2 text-center">
          <div className="text-lg font-bold text-purple-600">{portfolio.compliance_score}%</div>
          <div className="text-xs text-gray-500">Compliance</div>
        </div>
        <div className="bg-gray-50 rounded-lg p-2 text-center">
          <div className="text-lg font-bold text-gray-900">{portfolio.avg_risk_score.toFixed(1)}</div>
          <div className="text-xs text-gray-500">Risiko</div>
        </div>
        <div className="bg-gray-50 rounded-lg p-2 text-center">
          <div className="text-lg font-bold text-gray-900">{totalItems}</div>
          <div className="text-xs text-gray-500">Items</div>
        </div>
      </div>

      {portfolio.high_risk_count > 0 && (
        <div className="flex items-center gap-1 text-xs text-red-600 mb-3">
          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
          </svg>
          {portfolio.high_risk_count} Hoch-Risiko
        </div>
      )}

      <div className="flex justify-between items-center">
        <span className="text-xs text-gray-400">{portfolio.owner || 'Kein Owner'}</span>
        <button
          onClick={(e) => { e.stopPropagation(); onDelete(portfolio.id) }}
          className="text-xs text-red-500 hover:text-red-700 hover:bg-red-50 px-2 py-1 rounded"
        >
          Loeschen
        </button>
      </div>
    </div>
  )
}
