import { Link } from 'react-router-dom';
import { Image as ContentImage } from '@/components/ui/image';
import { Sparkles, Layers, Box, Copy, Archive, Pencil, ArrowRight, Wand2, PenTool, Image as ImageIcon, Combine, GitCompare } from 'lucide-react';

const sourceLabel = { promptforge: 'PromptForge', drawing: 'Drawing', image: 'Image', combined: 'Combined' };
const sourceIcon = { promptforge: Wand2, drawing: PenTool, image: ImageIcon, combined: Combine };
const effectLabel = { colour_texture: 'Colour', raised_emboss: 'Raised', engraving: 'Engraved', stencil: 'Cut-out', sculpted_relief: 'Sculpted', mixed: 'Mixed' };

export default function UniversalDesignCard({ design, variantCount = 0, pieceCount = 0, onDuplicate, onArchive }) {
  const SrcIcon = sourceIcon[design.sourceType] || Sparkles;
  const created = design.created_date ? new Date(design.created_date).toLocaleDateString() : '—';
  const modified = design.updated_date ? new Date(design.updated_date).toLocaleDateString() : created;

  return (
    <article className="panel fade-in flex flex-col overflow-hidden p-0">
      <div className="relative aspect-[4/3] overflow-hidden viewport-grid">
        {design.masterPreviewImageUrl
          ? <ContentImage src={design.masterPreviewImageUrl} alt={design.name} fittingType="fill" className="h-full w-full" />
          : <div className="grid h-full place-items-center text-slate-500"><Sparkles size={28} className="text-cyan-400/40" /></div>}
        <span className="absolute left-2 top-2 inline-flex items-center gap-1 rounded-md border border-white/15 bg-black/50 px-2 py-0.5 text-[10px] text-slate-200 backdrop-blur"><SrcIcon size={11} /> {sourceLabel[design.sourceType] || 'Design'}</span>
        {design.archived && <span className="absolute right-2 top-2 rounded border border-slate-500/40 bg-slate-700/50 px-2 py-0.5 text-[10px] text-slate-300">Archived</span>}
      </div>

      <div className="flex flex-1 flex-col p-4">
        <div className="flex items-start justify-between gap-2">
          <h3 className="font-heading text-base font-semibold text-white">{design.name}</h3>
          {design.character && <span className="chip">{design.character}</span>}
        </div>
        <p className="mt-1 line-clamp-2 text-xs leading-5 text-slate-400">{design.description || 'Reusable universal design — not tied to one cover.'}</p>

        <div className="mt-3 grid grid-cols-2 gap-2 text-[11px]">
          <div className="readout"><span className="readout-label">Effect</span><span className="readout-value">{effectLabel[design.intendedApplicationMode] || '—'}</span></div>
          <div className="readout"><span className="readout-label">Pieces</span><span className="readout-value"><Layers size={11} className="mr-1 inline" />{pieceCount}</span></div>
          <div className="readout"><span className="readout-label">Variants</span><span className="readout-value"><Box size={11} className="mr-1 inline" />{variantCount}</span></div>
          <div className="readout"><span className="readout-label">Modified</span><span className="readout-value">{modified}</span></div>
        </div>

        <div className="mt-3 flex flex-wrap gap-1.5">
          {(design.styleTags || []).slice(0, 4).map(t => <span key={t} className="chip">{t}</span>)}
        </div>

        <div className="mt-4 grid grid-cols-2 gap-2">
          <Link to={`/fit-design?design=${design.id}`} className="btn-primary col-span-2 text-sm">Fit to a cover <ArrowRight size={15} /></Link>
          <Link to={`/create-design?edit=${design.id}`} className="tool-button justify-center"><Pencil size={13} /> Edit</Link>
          <Link to={`/cover-variants?design=${design.id}`} className="tool-button justify-center"><Layers size={13} /> Variants</Link>
          <Link to={`/compare?design=${design.id}`} className="tool-button col-span-2 justify-center"><GitCompare size={13} /> Compare fits</Link>
          <button onClick={() => onDuplicate?.(design)} className="tool-button justify-center"><Copy size={13} /> Duplicate</button>
          <button onClick={() => onArchive?.(design)} className="tool-button justify-center"><Archive size={13} /> Archive</button>
        </div>
        <p className="mt-2 text-[10px] text-slate-600">Created {created}</p>
      </div>
    </article>
  );
}