import { Link } from 'react-router-dom';
import { Box, ArrowRight } from 'lucide-react';
import StatusBadge from '@/components/app/StatusBadge';
import { Image as ContentImage } from '@/components/ui/image';

const inputLabel = { image_apply: 'Image Apply', sketch_3d: 'Sketch to 3D', promptforge: 'PromptForge' };
const bandColor = {
  pass: 'bg-emerald-400', validated: 'bg-emerald-400', ready_for_export: 'bg-emerald-400',
  warning: 'bg-amber-400', fail: 'bg-red-500', failed: 'bg-red-500',
  simulation_only: 'bg-cyan-400', not_checked: 'bg-slate-600', draft: 'bg-slate-600',
  artwork: 'bg-cyan-400', studio: 'bg-cyan-400', validation: 'bg-amber-400', processing: 'bg-violet-400'
};

export default function ProjectCard({ project, cover, jobsCount = 0, to }) {
  const href = to || `/studio?project=${project.id}`;
  const band = bandColor[project.validationStatus] || bandColor[project.status] || 'bg-slate-600';
  return (
    <Link to={href} className="group relative block overflow-hidden rounded-2xl border border-white/[0.06] transition hover:-translate-y-0.5 hover:border-cyan-400/40">
      <span className={`absolute inset-x-0 top-0 h-[3px] ${band}`} />
      <div className="flex gap-0">
        {/* Cover preview */}
        <div className="relative grid w-28 shrink-0 place-items-center overflow-hidden bg-[radial-gradient(circle_at_50%_30%,#16242d,#0a0e13_70%)] sm:w-36">
          {cover?.previewImageUrl
            ? <ContentImage src={cover.previewImageUrl} alt={cover.name} fittingType="fill" className="h-full w-full opacity-90" />
            : <Box size={42} className="text-cyan-400/30" />}
          <span className="absolute left-2 top-2 rounded border border-white/10 bg-black/50 px-1.5 py-0.5 text-[9px] uppercase tracking-wider text-slate-400">{(project.inputMethod || '—').replace('_', ' ')}</span>
        </div>
        {/* Metadata */}
        <div className="flex-1 bg-[linear-gradient(135deg,#131922,#0f141b)] p-4">
          <div className="flex items-start justify-between gap-2">
            <div className="min-w-0">
              <h3 className="truncate font-heading text-sm font-semibold text-white">{project.name}</h3>
              <p className="mt-0.5 text-xs text-slate-500">{cover ? `v${cover.version} · ${cover.limbType} ${cover.side}` : 'cover —'}</p>
            </div>
            <ArrowRight size={15} className="mt-1 shrink-0 text-slate-600 transition group-hover:translate-x-0.5 group-hover:text-cyan-300" />
          </div>
          <div className="mt-3 flex flex-wrap items-center gap-2 text-[11px] text-slate-400">
            <span className="rounded border border-white/10 bg-white/[0.03] px-1.5 py-0.5 capitalize">{(project.status || 'draft').replaceAll('_', ' ')}</span>
            <StatusBadge status={project.validationStatus} />
            {jobsCount > 0 && <span className="mono rounded border border-white/10 bg-white/[0.03] px-1.5 py-0.5">{jobsCount} jobs</span>}
          </div>
          <p className="mono mt-2 text-[10px] text-slate-600">Modified {new Date(project.updated_date).toLocaleDateString()}</p>
        </div>
      </div>
    </Link>
  );
}