import { Link } from 'react-router-dom';
import FieldList from '@/components/workshop/FieldList';
import StatusPill from '@/components/workshop/StatusPill';

export default function OssiguardInspector({ profile, project, onEdit, onAssign, onRemove, onValidate, busy }) {
  if (!profile) {
    return (
      <div className="panel p-5">
        <h2 className="section-title">Ossiguard Connector</h2>
        <p className="text-sm text-slate-500">No Ossiguard connector assigned to this project.</p>
        {onAssign && (
          <button disabled={busy} onClick={onAssign} className="btn-secondary mt-3">Assign Ossiguard</button>
        )}
      </div>
    );
  }

  const rows = [
    ['Profile name', profile.profile_name],
    ['Version', profile.version],
    ['Revision', `rev${profile.connector_revision}`],
    ['Approval status', <StatusPill tone={profile.approval_status === 'Approved Connector Revision' ? 'green' : profile.approval_status === 'Superseded' ? 'slate' : 'amber'}>{profile.approval_status}</StatusPill>],
    ['Geometry status', profile.geometry_status],
    ['Compatible component', profile.attaches_to_component_label || 'Not set'],
    ['Retention method', profile.retention_method],
    ['Cover-side interface', profile.cover_side_interface],
    ['Insertion direction', profile.insertion_direction],
    ['Removal direction', profile.removal_direction],
    ['Attachment points', profile.attachment_point_count],
    ['Overall dimensions', [profile.overall_width_mm, profile.overall_depth_mm, profile.overall_height_mm].filter(Boolean).length === 3 ? `${profile.overall_width_mm} × ${profile.overall_depth_mm} × ${profile.overall_height_mm} mm` : 'Dimensions not recorded'],
    ['Required clearance', profile.required_installation_clearance_mm ? `${profile.required_installation_clearance_mm} mm` : null],
    ['Emergency-release clearance', profile.emergency_release_clearance_mm ? `${profile.emergency_release_clearance_mm} mm` : null],
    ['Hardware', profile.fastener_type ? `${profile.fastener_type}${profile.fastener_size ? ` ${profile.fastener_size}` : ''}` : null],
    ['Main material', profile.main_connector_material],
    ['STEP file', profile.step_file_url ? 'Attached' : null],
    ['STL file', profile.stl_file_url ? 'Attached' : null],
    ['Photograph', profile.photograph_url ? 'Attached' : null],
    ['Designed by', profile.designed_by],
    ['Date created', profile.date_created],
    ['Date approved', profile.date_approved],
    ['Revision notes', profile.revision_notes],
  ];

  return (
    <div className="panel p-5">
      <div className="mb-4 flex items-center justify-between">
        <h2 className="section-title mb-0">Ossiguard Connector</h2>
        <Link to={`/ossiguard/${profile.uuid}`} className="text-xs text-violet-300 hover:text-violet-200">Open profile →</Link>
      </div>

      <div className="mb-4 rounded-lg border border-violet-400/20 bg-violet-400/5 p-3 text-xs text-violet-200">
        Non-load-bearing, cosmetic only. Must never support body weight or alter prosthetic alignment.
      </div>

      <FieldList columns={1} rows={rows} />

      <div className="mt-5 flex flex-wrap gap-2">
        {onEdit && <button disabled={busy} onClick={onEdit} className="btn-secondary">Edit Ossiguard</button>}
        {onValidate && <button disabled={busy} onClick={onValidate} className="btn-secondary">Validate Placement</button>}
        {onAssign && <button disabled={busy} onClick={onAssign} className="btn-secondary">Change Profile</button>}
        {onRemove && <button disabled={busy} onClick={onRemove} className="btn-secondary">Remove from Project</button>}
      </div>
    </div>
  );
}