import { useMemo } from 'react';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Users, X, Link2 } from 'lucide-react';
import { useCrews } from '@/hooks/useCrews';
import { useTranslation } from '@/contexts/language';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { SKATE_CREW_KIND } from '@/lib/types';
import { cn } from '@/lib/utils';

interface CrewLinkFieldProps {
  /** Selected crew coordinate `35006:pubkey:d`, or undefined. */
  value?: string;
  onChange: (coord: string | undefined) => void;
  accentText?: string;
  accentBg?: string;
}

/**
 * Lets a Lab-profile owner link ONE of their own crews. Cross-links a collective
 * Lab profile (studio) to its crew so each surfaces the other.
 */
export function CrewLinkField({ value, onChange, accentText = 'text-teal-400', accentBg = 'bg-teal-500' }: CrewLinkFieldProps) {
  const { t } = useTranslation();
  const { user } = useCurrentUser();
  const { data: allCrews } = useCrews(200);

  // Only offer the crews this user founded — you can only vouch a link from a crew you control.
  const myCrews = useMemo(
    () => (allCrews ?? []).filter((c) => c.pubkey === user?.pubkey),
    [allCrews, user?.pubkey]
  );

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

  return (
    <div className="space-y-3 rounded-lg border border-gray-700 bg-gray-900/60 p-4">
      <div>
        <Label className={cn('flex items-center gap-2', accentText)}>
          <Link2 className="h-4 w-4" /> {t('socialUi.linkField.title')}
        </Label>
        <p className="mt-1 text-xs text-gray-500">
          {t('socialUi.linkField.description')}{' '}
          <span className="font-bold text-green-400">{t('common.verified')}</span> {t('socialUi.linkField.descriptionRest')}
        </p>
      </div>

      {myCrews.length === 0 ? (
        <p className="text-xs text-gray-500 italic">
          {t('socialUi.linkField.none')}
        </p>
      ) : (
        <div className="flex flex-wrap gap-2">
          {myCrews.map((crew) => {
            const coord = coordFor(crew.pubkey, crew.identifier);
            const selected = value === coord;
            return (
              <button
                key={coord}
                type="button"
                onClick={() => onChange(selected ? undefined : coord)}
                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',
                  selected
                    ? `${accentBg} border-transparent text-white`
                    : 'border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700'
                )}
              >
                <Users className="h-3.5 w-3.5" />
                {crew.name}
                {selected && <X className="h-3 w-3 opacity-80" />}
              </button>
            );
          })}
        </div>
      )}

      {value && !myCrews.some((c) => coordFor(c.pubkey, c.identifier) === value) && (
        <Badge variant="outline" className="gap-1 text-[10px] text-gray-400">
          <Users className="h-3 w-3" /> {t('socialUi.linkField.linkedCrew', { id: value.split(':')[2] })}
        </Badge>
      )}
    </div>
  );
}