import { CheckCircle2, AlertTriangle, XCircle } from 'lucide-react';
import StatusPill from '@/components/workshop/StatusPill';

export default function DesignValidation({ design, project }) {
  const checks = [
    ['SHiRE logo present', true, 'The required SHiRE logo is always rendered on the cover.'],
    ['SHiRE logo readable', true, 'Logo uses a clear system-font texture.'],
    ['SHiRE logo not mirrored', true, 'Back-face culling and outward orientation prevent mirroring.'],
    ['Custom text length acceptable', !design || !design.custom_text_enabled || (design.custom_text || '').length <= 24, design && design.custom_text_enabled && (design.custom_text || '').length > 24 ? 'Text is long — visual quality may reduce.' : 'Text within recommended length.'],
    ['Custom text placement valid', !design || !design.custom_text_enabled || !!design.text_placement, 'Text placement zone is set.'],
    ['Design avoids sensitive zones', !(project && project.sensitive_area_summary && design && design.custom_text_enabled), project && project.sensitive_area_summary && design && design.custom_text_enabled ? 'Verify text does not overlap sensitive zones.' : 'No sensitive-zone conflict detected.'],
    ['Design avoids keep-out zones', true, 'Conceptual design only — no geometry carved into keep-out areas.'],
    ['Design colour values present', !!(design && design.main_colour && design.accent_colour), design && design.main_colour && design.accent_colour ? 'Main and accent colours set.' : 'Set main and accent colours.'],
    ['Design revision saved', !!design, design ? 'A design revision is saved for this project.' : 'No design revision saved yet.'],
  ];

  return (
    <section className="panel p-5">
      <h2 className="section-title">Design Validation</h2>
      <ul className="space-y-2">
        {checks.map(([label, pass, note]) => (
          <li key={label} className="flex items-start gap-2 text-sm">
            {pass ? <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" /> : <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />}
            <div>
              <span className="text-slate-200">{label}</span>
              <span className="ml-2 text-xs text-slate-500">{note}</span>
            </div>
          </li>
        ))}
      </ul>
      {design && design.validation_status === 'Blocked' && (
        <div className="mt-3 flex items-center gap-2 rounded-lg bg-red-400/10 p-3 text-sm text-red-200"><XCircle className="h-4 w-4" />This design is blocked — resolve issues before approving for quote.</div>
      )}
    </section>
  );
}