// components/members/MemberCard.tsx (Update the interface)
import React from "react"
import { Calendar, Trash2 } from "lucide-react"
import Image from "next/image"
import { format } from "date-fns"
import { RoleBadge } from "./role-badge"
import { Member } from "@/lib/types"

interface MemberCardProps {
  member: Member
  currentUserId: string
  canModify: boolean
  canRemove: boolean
  isLastAdmin: boolean
  updatingMember: string | null
  onUpdateRole: (memberId: string, newRole: "admin" | "member" | "owner") => void
  onRemove: (memberId: string, memberUsername: string) => void
}

export const MemberCard: React.FC<MemberCardProps> = ({
  member,
  currentUserId,
  canModify,
  canRemove,
  isLastAdmin,
  updatingMember,
  onUpdateRole,
  onRemove,
}) => {
  // Handle both Date and string types
  const addedAtDate =
    typeof member.added_at === "string" ? new Date(member.added_at) : member.added_at

  return (
    <div className="group p-4 sm:p-5 border-b border-border last:border-b-0 hover:bg-accent/30 transition-all duration-200">
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-4 flex-1 min-w-0">
          <div className="relative flex-shrink-0">
            <Image
              src={member.avatarUrl}
              alt={member.username}
              width={56}
              height={56}
              className="rounded-full ring-2 ring-border group-hover:ring-primary/50 transition-all shadow-sm"
            />
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap mb-1">
              <span className="font-semibold text-base text-foreground truncate">
                {member.username}
              </span>
              {member.user_id === currentUserId && (
                <span className="inline-flex items-center text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full font-medium border border-primary/20">
                  You
                </span>
              )}
            </div>
            <div className="text-sm text-muted-foreground mb-1">@{member.username}</div>
            <div className="flex items-center gap-3 text-xs text-muted-foreground">
              <span className="flex items-center gap-1">
                <Calendar size={12} />
                Added {format(addedAtDate, "MMM d, yyyy")}
              </span>
            </div>
          </div>
        </div>

        <div className="flex items-center gap-2 flex-shrink-0">
          {canModify ? (
            <div className="flex items-center gap-2">
              <select
                value={member.role}
                onChange={e =>
                  onUpdateRole(member.id, e.target.value as "admin" | "member" | "owner")
                }
                disabled={updatingMember === member.id}
                className="px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed bg-background transition-all"
              >
                <option value="member">Member</option>
                <option value="admin">Admin</option>
              </select>
            </div>
          ) : (
            <RoleBadge role={member.role} />
          )}

          {canRemove && !isLastAdmin && (
            <button
              onClick={() => onRemove(member.id, member.username)}
              disabled={updatingMember === member.id}
              className="p-2 text-destructive hover:bg-destructive/10 rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed border border-transparent hover:border-destructive/20"
              title="Remove member"
              aria-label={`Remove ${member.username}`}
            >
              {updatingMember === member.id ? (
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-destructive"></div>
              ) : (
                <Trash2 size={16} />
              )}
            </button>
          )}
        </div>
      </div>
    </div>
  )
}
