import { UserOut } from "@/types/user";
import { Card, CardContent } from "@/components/ui/card";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Building2, Phone, AtSign, CheckCircle, XCircle } from "lucide-react";

interface Props {
  user: UserOut;
  onApprove?: (id: string) => void;
  onReject?: (id: string) => void;
  isActing?: boolean;
}

const STATUS_DOT: Record<string, string> = {
  pending: "bg-gold-accent",
  approved: "bg-emerald-500",
  rejected: "bg-destructive",
};

export function UserCard({ user, onApprove, onReject, isActing }: Props) {
  const initials = user.full_name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);

  return (
    <Card className="border-border/40 bg-surface-elevated">
      <CardContent className="p-4 flex gap-4 items-start">
        <Avatar className="h-10 w-10 shrink-0 border border-border/40">
          <AvatarFallback className="bg-rose-accent/10 text-rose-accent text-sm font-semibold">
            {initials}
          </AvatarFallback>
        </Avatar>

        <div className="flex-1 min-w-0 space-y-1">
          <div className="flex items-center gap-2">
            <p className="font-semibold text-foreground">{user.full_name}</p>
            <span className={`h-2 w-2 rounded-full shrink-0 ${STATUS_DOT[user.status] ?? "bg-dim"}`} />
          </div>
          <p className="text-sm text-muted-foreground">{user.email}</p>
          {user.organization_name && (
            <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
              <Building2 size={12} className="text-dim" />
              {user.organization_name}
            </p>
          )}
          {user.phone && (
            <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
              <Phone size={12} className="text-dim" />
              {user.phone}
            </p>
          )}
          {user.instagram_handle && (
            <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
              <AtSign size={12} className="text-dim" />
              {user.instagram_handle}
            </p>
          )}
        </div>

        {user.status === "pending" && onApprove && onReject && (
          <div className="flex gap-2 shrink-0">
            <Button
              size="sm"
              className="bg-emerald-600 hover:bg-emerald-500 text-white"
              disabled={isActing}
              onClick={() => onApprove(user.id)}
            >
              <CheckCircle size={14} />
              Approve
            </Button>
            <Button size="sm" variant="destructive" disabled={isActing} onClick={() => onReject(user.id)}>
              <XCircle size={14} />
              Reject
            </Button>
          </div>
        )}

        {user.status !== "pending" && (
          <span className="text-xs text-dim capitalize shrink-0">{user.status}</span>
        )}
      </CardContent>
    </Card>
  );
}