import { AccountCard } from '@/components/AccountCard'
import type { EngagementAccount } from '@/types'

interface AccountListProps {
  accounts: EngagementAccount[]
  selectedDids: Set<string>
  onToggle: (did: string) => void
  onSelectAll: () => void
  onDeselectAll: () => void
}

const RELATIONSHIP_ORDER = { mutual: 0, following: 1, follower: 2, none: 3 } as const

export function AccountList({
  accounts,
  selectedDids,
  onToggle,
  onSelectAll,
  onDeselectAll,
}: AccountListProps) {
  const sorted = [...accounts].sort((a, b) => {
    const ra = RELATIONSHIP_ORDER[a.relationship]
    const rb = RELATIONSHIP_ORDER[b.relationship]
    if (ra !== rb) return ra - rb
    return a.profile.handle.localeCompare(b.profile.handle)
  })

  const selectedCount = accounts.filter((a) => selectedDids.has(a.profile.did)).length

  return (
    <div className="bg-card border border-border rounded-xl flex flex-col" style={{ boxShadow: 'var(--fo-shadow-card)' }}>
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
        <div className="flex items-center gap-2">
          <span className="font-mono text-xs uppercase tracking-wide text-[var(--fo-text3)]">
            Who to block
          </span>
          <span className="font-mono text-xs bg-secondary text-[var(--fo-text2)] px-2 py-0.5 rounded-full border border-border">
            {selectedCount.toLocaleString()} / {accounts.length.toLocaleString()}
          </span>
        </div>
        <div className="flex gap-3">
          <button
            onClick={onSelectAll}
            className="text-xs font-medium text-[var(--fo-text2)] hover:text-foreground transition-colors"
          >
            Select all
          </button>
          <span className="text-border text-xs">·</span>
          <button
            onClick={onDeselectAll}
            className="text-xs font-medium text-[var(--fo-text2)] hover:text-foreground transition-colors"
          >
            Deselect mutuals
          </button>
        </div>
      </div>

      {/* Account list — scrollable */}
      <div className="overflow-y-auto max-h-[480px] flex flex-col p-2">
        {sorted.length === 0 ? (
          <p className="text-sm text-[var(--fo-text2)] text-center py-8">
            No engagers found for the selected criteria.
          </p>
        ) : (
          sorted.map((account) => (
            <AccountCard
              key={account.profile.did}
              account={account}
              selected={selectedDids.has(account.profile.did)}
              onToggle={() => onToggle(account.profile.did)}
            />
          ))
        )}
      </div>
    </div>
  )
}