import { useMemo } from 'react';
import { Label } from '@/components/ui/label';
import { Link2, X, GraduationCap } from 'lucide-react';
import { useLabProfiles } from '@/hooks/useLabProfiles';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useTranslation } from '@/contexts/language';
import { cn } from '@/lib/utils';

interface LabLinkFieldProps {
  /** Selected Lab profile coordinates (`kind:pubkey:d`). */
  value: string[];
  onChange: (coords: string[]) => void;
  maxLinks?: number;
}

/**
 * Lets a crew owner link their own Lab profiles (studio/coach/builder listings)
 * so a crew and its service listings cross-reference each other.
 */
export function LabLinkField({ value, onChange, maxLinks = 8 }: LabLinkFieldProps) {
  const { user } = useCurrentUser();
  const { t } = useTranslation();
  const { data: allProfiles } = useLabProfiles(200);

  const typeLabel = (type: string) => {
    const known = ['coach', 'filmer', 'editor', 'photographer', 'builder', 'artist', 'graffiti', 'tattoo', 'trainer', 'musician', 'judge', 'barber', 'organizer', 'transport'];
    return known.includes(type) ? t(`labUi.labLink.${type}`) : t('labUi.labLink.lab');
  };

  // Only your own Lab profiles — a crew can only vouch a link to listings it controls.
  const myProfiles = useMemo(
    () => (allProfiles ?? []).filter((p) => p.pubkey === user?.pubkey),
    [allProfiles, user?.pubkey]
  );

  const coordFor = (kind: number, pubkey: string, identifier: string) => `${kind}:${pubkey}:${identifier}`;

  const toggle = (coord: string) => {
    if (value.includes(coord)) {
      onChange(value.filter((c) => c !== coord));
    } else if (value.length < maxLinks) {
      onChange([...value, coord]);
    }
  };

  return (
    <div className="space-y-3 rounded-lg border border-gray-700 bg-gray-900/60 p-4">
      <div>
        <Label className="flex items-center gap-2 text-teal-400">
          <Link2 className="h-4 w-4" /> {t('labUi.labLink.linkedProfiles')}
        </Label>
        <p className="mt-1 text-xs text-gray-500">
          {t('labUi.labLink.desc')}{' '}
          <span className="font-bold text-green-400">{t('common.verified')}</span>{' '}
          {t('labUi.labLink.descEnd')}
        </p>
      </div>

      {myProfiles.length === 0 ? (
        <p className="text-xs text-gray-500 italic">
          {t('labUi.labLink.empty')}
        </p>
      ) : (
        <div className="flex flex-wrap gap-2">
          {myProfiles.map((p) => {
            const coord = coordFor(p.event.kind, p.pubkey, p.identifier);
            const selected = value.includes(coord);
            return (
              <button
                key={coord}
                type="button"
                onClick={() => toggle(coord)}
                disabled={!selected && value.length >= maxLinks}
                className={cn(
                  'inline-flex items-center gap-1.5 rounded-xl border px-3 py-2 text-xs font-bold transition-all active:scale-95 disabled:opacity-40',
                  selected
                    ? 'bg-teal-500 border-transparent text-white'
                    : 'border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700'
                )}
              >
                <GraduationCap className="h-3.5 w-3.5" />
                <span className="truncate max-w-[10rem]">{p.title}</span>
                <span className="opacity-60">· {typeLabel(p.profileType)}</span>
                {selected && <X className="h-3 w-3 opacity-80" />}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}