"use client";

import { AlertTriangle, Clock, User, Zap, MapPin } from "lucide-react";

interface SuspiciousActivity {
  type:
    | "multiple_failures"
    | "new_location"
    | "unusual_time"
    | "rapid_attempts";
  userId: string;
  userEmail: string;
  userName: string | null;
  details: string;
  count: number;
  lastOccurrence: string;
}

interface SuspiciousActivityCardProps {
  activity: SuspiciousActivity;
  expanded?: boolean;
}

export default function SuspiciousActivityCard({
  activity,
  expanded = false,
}: SuspiciousActivityCardProps) {
  const typeConfig = {
    multiple_failures: {
      icon: AlertTriangle,
      label: "Multiple Failed Logins",
      color: "text-red-600 bg-red-100",
    },
    new_location: {
      icon: MapPin,
      label: "New Location Detected",
      color: "text-orange-600 bg-orange-100",
    },
    unusual_time: {
      icon: Clock,
      label: "Unusual Login Time",
      color: "text-yellow-600 bg-yellow-100",
    },
    rapid_attempts: {
      icon: Zap,
      label: "Rapid Login Attempts",
      color: "text-red-600 bg-red-100",
    },
  };

  const config = typeConfig[activity.type];
  const Icon = config.icon;

  if (!expanded) {
    return (
      <div className="flex items-center gap-3 bg-white rounded-lg p-3 border border-red-100">
        <div className={`p-2 rounded-lg ${config.color}`}>
          <Icon className="w-4 h-4" />
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-gray-900 truncate">
            {activity.userName || activity.userEmail}
          </p>
          <p className="text-xs text-gray-500 truncate">{activity.details}</p>
        </div>
        <div className="text-right shrink-0">
          <p className="text-xs font-medium text-red-600">{activity.count}x</p>
          <p className="text-xs text-gray-400">
            {new Date(activity.lastOccurrence).toLocaleTimeString([], {
              hour: "2-digit",
              minute: "2-digit",
            })}
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md transition">
      <div className="flex items-start gap-4">
        <div className={`p-3 rounded-xl ${config.color}`}>
          <Icon className="w-5 h-5" />
        </div>
        <div className="flex-1">
          <div className="flex items-start justify-between">
            <div>
              <span
                className={`inline-block text-xs font-semibold px-2 py-0.5 rounded ${config.color} mb-2`}
              >
                {config.label}
              </span>
              <h4 className="font-semibold text-brand-ink">
                {activity.userName || "Unknown User"}
              </h4>
              <p className="text-sm text-gray-500">{activity.userEmail}</p>
            </div>
            <div className="text-right">
              <p className="text-2xl font-bold text-red-600">
                {activity.count}
              </p>
              <p className="text-xs text-gray-500">occurrences</p>
            </div>
          </div>
          <div className="mt-4 p-3 bg-gray-50 rounded-lg">
            <p className="text-sm text-gray-700">{activity.details}</p>
          </div>
          <div className="mt-3 flex items-center gap-2 text-xs text-gray-500">
            <Clock className="w-3.5 h-3.5" />
            Last occurrence:{" "}
            {new Date(activity.lastOccurrence).toLocaleString()}
          </div>
        </div>
      </div>
    </div>
  );
}