import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import StatusPill from '@/components/workshop/StatusPill';
import { ossiguardService } from '@/services/ossiguardService';

export default function OssiguardAssignPicker({ customer, onAssign, onReuse, onCancel }) {
  const [all, setAll] = useState(null);
  const [customerProfiles, setCustomerProfiles] = useState([]);

  useEffect(() => {
    ossiguardService.list().then(setAll);
    if (customer?.uuid) ossiguardService.forCustomer(customer.uuid).then(setCustomerProfiles);
  }, [customer?.uuid]);

  const available = all ? all.filter((p) => p.approval_status !== 'Superseded') : [];
  const approved = available.filter((p) => p.approval_status === 'Approved Connector Revision');

  return (
    <div className="panel p-5">
      <h2 className="section-title">Assign Ossiguard Connector</h2>
      <div className="mb-4 rounded-lg border border-violet-400/30 bg-violet-400/5 p-3 text-xs text-violet-200">
        Ossiguard attaches only to approved external prosthetic components or cosmetic mounting brackets. It must never auto-attach to implants, abutments, stoma, skin, or safety-release mechanisms.
      </div>

      {customerProfiles.length > 0 && (
        <div className="mb-5">
          <h3 className="mb-2 text-sm font-semibold text-emerald-300">Approved fits for this customer</h3>
          <div className="space-y-2">
            {customerProfiles.filter((p) => p.approval_status === 'Approved Connector Revision').map((p) => (
              <div key={p.uuid} className="flex items-center justify-between rounded-lg border border-emerald-400/30 bg-emerald-400/5 px-3 py-2">
                <div className="text-sm"><span className="font-medium text-emerald-200">{p.profile_name}</span><span className="ml-2 text-xs text-slate-500">rev{p.connector_revision}</span></div>
                <div className="flex gap-2">
                  <button onClick={() => onAssign(p)} className="btn-secondary !py-1 text-xs">Assign</button>
                  <button onClick={() => onReuse(p.uuid)} className="btn-secondary !py-1 text-xs">Reuse as new</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      <h3 className="mb-2 text-sm font-semibold text-slate-300">All approved profiles</h3>
      {!all ? <p className="text-sm text-slate-500">Loading…</p> : approved.length === 0 ? (
        <p className="text-sm text-slate-500">No approved Ossiguard profiles yet. <Link className="text-violet-300" to="/ossiguard">Create one in the library</Link>.</p>
      ) : (
        <div className="space-y-2">
          {approved.map((p) => (
            <div key={p.uuid} className="flex items-center justify-between rounded-lg border border-white/10 px-3 py-2">
              <div className="text-sm"><span className="font-medium text-slate-200">{p.profile_name}</span><span className="ml-2 text-xs text-slate-500">{p.version} · rev{p.connector_revision}</span></div>
              <div className="flex items-center gap-2">
                <StatusPill tone="green">{p.approval_status}</StatusPill>
                <button onClick={() => onAssign(p)} className="btn-secondary !py-1 text-xs">Assign</button>
              </div>
            </div>
          ))}
        </div>
      )}

      <div className="mt-4 flex gap-2">
        <Link className="btn-secondary" to="/ossiguard">Open Ossiguard Library</Link>
        <button onClick={onCancel} className="btn-secondary">Cancel</button>
      </div>
    </div>
  );
}