SkateSpots/src/components/EntityTypeField.tsx

import { useState } from 'react';
import { nip19 } from 'nostr-tools';
import { User, Users, X, Plus, ShieldCheck } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useAuthor } from '@/hooks/useAuthor';
import { genUserName } from '@/lib/genUserName';
import type { EntityType } from '@/lib/types';
import { cn } from '@/lib/utils';

interface EntityTypeFieldProps {
  entityType: EntityType;
  onEntityTypeChange: (t: EntityType) => void;
  /** Member pubkeys (hex). */
  members: string[];
  onMembersChange: (members: string[]) => void;
  /** Accent color class set for the current category (e.g. red/blue/indigo). */
  accentBg?: string;
  accentText?: string;
}

function MemberRow({ pubkey, onRemove }: { pubkey: string; onRemove: () => void }) {
  const author = useAuthor(pubkey);
  const metadata = author.data?.metadata;
  const name = metadata?.name ?? genUserName(pubkey);
  const npub = nip19.npubEncode(pubkey);

  return (
    <div className="flex items-center gap-3 rounded-lg border border-gray-700 bg-gray-800/60 p-2">
      <Avatar className="h-8 w-8">
        <AvatarImage src={metadata?.picture} alt={name} />
        <AvatarFallback className="text-xs">{name.slice(0, 2).toUpperCase()}</AvatarFallback>
      </Avatar>
      <div className="min-w-0 flex-1">
        <p className="truncate text-sm font-medium">{name}</p>
        <p className="truncate text-xs text-gray-500">{npub.slice(0, 16)}…</p>
      </div>
      <Button
        type="button"
        variant="ghost"
        size="icon"
        className="h-7 w-7 shrink-0 text-gray-400 hover:text-red-400"
        onClick={onRemove}
        aria-label="Remove member"
      >
        <X className="h-4 w-4" />
      </Button>
    </div>
  );
}

/**
 * Individual / Collective toggle plus, for collectives, a member npub picker.
 * Members are stored as hex pubkeys. Membership only becomes "confirmed" once
 * each member publishes a NIP-32 attestation with their own key (handled on
 * the detail page).
 */
export function EntityTypeField({
  entityType,
  onEntityTypeChange,
  members,
  onMembersChange,
  accentBg = 'bg-indigo-600',
  accentText = 'text-indigo-400',
}: EntityTypeFieldProps) {
  const [input, setInput] = useState('');
  const [error, setError] = useState<string | null>(null);

  const addMember = () => {
    const raw = input.trim();
    if (!raw) return;
    let hex: string | null = null;
    try {
      if (raw.startsWith('npub1') || raw.startsWith('nostr:npub1')) {
        const decoded = nip19.decode(raw.replace(/^nostr:/, ''));
        if (decoded.type === 'npub') hex = decoded.data;
      } else if (raw.startsWith('nprofile1')) {
        const decoded = nip19.decode(raw);
        if (decoded.type === 'nprofile') hex = decoded.data.pubkey;
      } else if (/^[0-9a-f]{64}$/i.test(raw)) {
        hex = raw.toLowerCase();
      }
    } catch {
      hex = null;
    }

    if (!hex) {
      setError('Enter a valid npub, nprofile, or 64-char hex pubkey.');
      return;
    }
    if (members.includes(hex)) {
      setError('That member is already added.');
      return;
    }
    onMembersChange([...members, hex]);
    setInput('');
    setError(null);
  };

  return (
    <div className="space-y-4 rounded-lg border border-gray-700 bg-gray-900/60 p-4">
      <div className="space-y-2">
        <Label className="text-base font-bold">Who is this profile for?</Label>
        <div className="grid grid-cols-2 gap-2">
          <button
            type="button"
            onClick={() => onEntityTypeChange('individual')}
            className={cn(
              'flex flex-col items-center gap-1 rounded-xl border p-4 transition-all active:scale-95',
              entityType === 'individual'
                ? `${accentBg} border-transparent text-white`
                : 'border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700'
            )}
          >
            <User className="h-6 w-6" />
            <span className="text-sm font-bold">Individual</span>
            <span className="text-[11px] opacity-80">A single person</span>
          </button>
          <button
            type="button"
            onClick={() => onEntityTypeChange('collective')}
            className={cn(
              'flex flex-col items-center gap-1 rounded-xl border p-4 transition-all active:scale-95',
              entityType === 'collective'
                ? `${accentBg} border-transparent text-white`
                : 'border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700'
            )}
          >
            <Users className="h-6 w-6" />
            <span className="text-sm font-bold">Collective</span>
            <span className="text-[11px] opacity-80">Crew, studio or company</span>
          </button>
        </div>
      </div>

      {entityType === 'collective' && (
        <div className="space-y-3">
          <div>
            <Label className={cn('flex items-center gap-2', accentText)}>
              <Users className="h-4 w-4" /> Members
            </Label>
            <p className="mt-1 text-xs text-gray-500">
              Add the Nostr accounts of your crew. Each member confirms their own
              spot with their key — until then they show as “pending”.
            </p>
          </div>

          <div className="flex gap-2">
            <Input
              placeholder="npub1… / nprofile1… / hex pubkey"
              value={input}
              onChange={(e) => {
                setInput(e.target.value);
                setError(null);
              }}
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  e.preventDefault();
                  addMember();
                }
              }}
              spellCheck={false}
              autoCapitalize="none"
              className="bg-gray-800 border-gray-700 font-mono text-sm"
            />
            <Button type="button" onClick={addMember} className={cn('shrink-0 gap-1', accentBg)}>
              <Plus className="h-4 w-4" /> Add
            </Button>
          </div>

          {error && <p className="text-xs text-red-400">{error}</p>}

          {members.length > 0 && (
            <div className="space-y-2">
              {members.map((pk) => (
                <MemberRow key={pk} pubkey={pk} onRemove={() => onMembersChange(members.filter((m) => m !== pk))} />
              ))}
            </div>
          )}

          <p className="flex items-start gap-1.5 rounded-lg border border-gray-700 bg-black/40 p-2 text-xs text-gray-400">
            <ShieldCheck className={cn('mt-0.5 h-3.5 w-3.5 shrink-0', accentText)} />
            <span>
              Membership is verified per member — nobody can be added to your crew
              without confirming from their own account.
            </span>
          </p>
        </div>
      )}
    </div>
  );
}