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

const strategyLabel = {
  best_fit: 'Recommended fit', front_feature: 'Front feature', side_feature: 'Side feature',
  full_wrap: 'Full wrap', panel_fit: 'Panel fit', symmetrical_fit: 'Symmetrical fit',
  minimal_distortion: 'Keep shape', maximum_coverage: 'Fill cover'
};

export default function CoverVariantCard({ variant, design, cover, onSwitchCover, onReset }) {
  return (
    <article className="panel fade-in flex flex-col overflow-hidden p-0">
      <div className="relative aspect-[4/3] overflow-hidden viewport-grid">
        {cover?.previewImageUrl
          ? <ContentImage src={cover.previewImageUrl} alt={cover?.name} fittingType="fill" className="h-full w-full opacity-90" />
          : <div className="grid h-full place-items-center text-slate-500"><Box size={26} className="text-cyan-400/40" /></div>}
        {variant.previewImageUrl && (
          <img src={variant.previewImageUrl} alt={variant.name} className="pointer-events-none absolute left-1/2 top-1/2 h-1/2 w-1/2 -translate-x-1/2 -translate-y-1/2 object-contain opacity-90" />
        )}
        <span className="absolute left-2 top-2 sim-badge">Fitted version</span>
      </div>
      <div className="flex flex-1 flex-col p-4">
        <h3 className="font-heading text-base font-semibold text-white">{variant.name}</h3>
        <p className="mt-0.5 text-xs text-slate-400">
          {design?.name || 'Universal design'} <span className="text-slate-600">→</span> {cover?.name || 'Cover'}
        </p>
        <div className="mt-1 text-[10px] text-slate-500">
          {cover ? `${cover.limbType || '—'} · ${cover.side || '—'}` : 'Cover missing'} · Based on version {variant.universalDesignVersion ?? 1}
        </div>

        <div className="mt-3 flex flex-wrap items-center gap-1.5">
          <StatusBadge status={variant.status} />
          {variant.adaptationStatus && <StatusBadge status={variant.adaptationStatus === 'preview_ready' ? 'completed' : variant.adaptationStatus === 'failed' ? 'failed' : 'processing'} />}
        </div>

        <div className="mt-3 grid grid-cols-2 gap-2 text-[11px]">
          <div className="readout"><span className="readout-label">Strategy</span><span className="readout-value">{strategyLabel[variant.adaptationStrategy] || variant.adaptationStrategy || '—'}</span></div>
          <div className="readout"><span className="readout-label">Branding</span><span className="readout-value">{variant.brandingStatus || 'unverified'}</span></div>
        </div>

        {variant.summary && <p className="mt-3 rounded-lg border border-cyan-400/20 bg-cyan-400/[0.06] p-2 text-[11px] leading-4 text-cyan-100">{variant.summary}</p>}

        <div className="mt-auto flex flex-wrap gap-2 pt-4">
          {variant.projectId
            ? <Link to={`/studio?project=${variant.projectId}`} className="btn-primary flex-1 text-sm">Open <ArrowRight size={14} /></Link>
            : <Link to={`/fit-design?design=${variant.universalDesignId}&cover=${variant.coverModelId}`} className="btn-primary flex-1 text-sm">Open fit <ArrowRight size={14} /></Link>}
          <button onClick={() => onSwitchCover?.(variant)} className="tool-button"><RefreshCw size={13} /> Try another cover</button>
          {onReset && <button onClick={() => onReset(variant)} className="tool-button"><Sparkles size={13} /> Reset</button>}
        </div>
      </div>
    </article>
  );
}