import { useContext } from 'react'
import { format } from 'date-fns'
import { useNavigate } from 'react-router-dom'
import { AppContext } from '../App'
import StatusBadge from './StatusBadge'
import BrandBadge from './BrandBadge'

export default function ProjectCard({ project }) {
  const navigate = useNavigate()
  const { getBrandName } = useContext(AppContext)
  const brandLabel = getBrandName(project.brand_id) || project.brand

  const completedTasks = project.tasks?.filter(t => t.status === 'done').length || 0
  const totalTasks = project.tasks?.length || 0
  const progress = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0

  const ownerName = typeof project.owner === 'object' ? project.owner?.name : project.owner

  const thumbnailUrl = project.thumbnail_url || project.thumbnailUrl

  return (
    <div
      onClick={() => navigate(`/projects/${project._id}`)}
      className="bg-white rounded-xl border border-border card-hover cursor-pointer overflow-hidden"
    >
      {thumbnailUrl ? (
        <div className="w-full h-32 overflow-hidden">
          <img src={thumbnailUrl} alt="" className="w-full h-full object-cover" />
        </div>
      ) : null}
      <div className="p-5">
      <div className="flex items-start justify-between gap-3 mb-3">
        <h4 className="text-base font-semibold text-text-primary line-clamp-1">{project.name}</h4>
        <StatusBadge status={project.status} size="xs" />
      </div>

      {brandLabel && (
        <div className="mb-3">
          <BrandBadge brand={brandLabel} />
        </div>
      )}

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

      {/* Progress bar */}
      <div className="mb-3">
        <div className="flex items-center justify-between text-xs mb-1">
          <span className="text-text-tertiary">Progress</span>
          <span className="font-medium text-text-secondary">{progress}%</span>
        </div>
        <div className="h-1.5 bg-surface-tertiary rounded-full overflow-hidden">
          <div
            className="h-full bg-brand-primary rounded-full transition-all duration-500"
            style={{ width: `${progress}%` }}
          />
        </div>
        <p className="text-[10px] text-text-tertiary mt-1">{completedTasks}/{totalTasks} tasks</p>
      </div>

      {/* Footer */}
      <div className="flex items-center justify-between pt-3 border-t border-border-light">
        {ownerName && (
          <div className="flex items-center gap-1.5">
            <div className="w-5 h-5 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[10px] font-semibold">
              {ownerName.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()}
            </div>
            <span className="text-xs text-text-tertiary">{ownerName}</span>
          </div>
        )}
        {project.dueDate && (
          <span className="text-xs text-text-tertiary">
            Due {format(new Date(project.dueDate), 'MMM d')}
          </span>
        )}
      </div>
      </div>{/* end p-5 wrapper */}
    </div>
  )
}
