"use client";

import { MapPin, Copy, Check } from "lucide-react";
import { LoginHistoryEntry } from "./types";

interface HistoryTabProps {
  loginHistory: LoginHistoryEntry[];
  copiedText: string | null;
  onCopyToClipboard: (text: string) => void;
}

export function HistoryTab({
  loginHistory,
  copiedText,
  onCopyToClipboard,
}: HistoryTabProps) {
  const formatDuration = (minutes: number | null) => {
    if (minutes === null) return "-";
    if (minutes < 60) return `${minutes}m`;
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    if (hours < 24) return `${hours}h ${mins}m`;
    const days = Math.floor(hours / 24);
    const remainingHours = hours % 24;
    return `${days}d ${remainingHours}h`;
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-brand-ink">
          Session Activity
        </h3>
        <div className="flex items-center gap-4 text-sm">
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
            <span className="text-gray-600">Active</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 bg-gray-400 rounded-full" />
            <span className="text-gray-600">Ended</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 bg-red-500 rounded-full" />
            <span className="text-gray-600">Failed</span>
          </div>
        </div>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                Status
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                Login
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                Logout
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                Duration
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                Location
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                IP / Provider
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {loginHistory.map((entry) => {
              const isActive = entry.success && !entry.logoutAt;
              const isFailed = !entry.success;
              const sessionDuration =
                entry.logoutAt && entry.timestamp
                  ? Math.round(
                      (new Date(entry.logoutAt).getTime() -
                        new Date(entry.timestamp).getTime()) /
                        (1000 * 60),
                    )
                  : null;

              return (
                <tr key={entry.id} className={isFailed ? "bg-red-50" : ""}>
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-2">
                      <span
                        className={`w-2.5 h-2.5 rounded-full ${
                          isFailed
                            ? "bg-red-500"
                            : isActive
                              ? "bg-green-500 animate-pulse"
                              : "bg-gray-400"
                        }`}
                      />
                      <span
                        className={`text-xs font-medium px-2 py-0.5 rounded ${
                          isFailed
                            ? "bg-red-100 text-red-700"
                            : isActive
                              ? "bg-green-100 text-green-700"
                              : "bg-gray-100 text-gray-600"
                        }`}
                      >
                        {isFailed ? "Failed" : isActive ? "Active" : "Ended"}
                      </span>
                    </div>
                  </td>
                  <td className="px-4 py-3">
                    <div className="text-sm">
                      <div className="font-medium text-gray-900">
                        {new Date(entry.timestamp).toLocaleDateString()}
                      </div>
                      <div className="text-gray-500">
                        {new Date(entry.timestamp).toLocaleTimeString()}
                      </div>
                    </div>
                  </td>
                  <td className="px-4 py-3">
                    {entry.logoutAt ? (
                      <div className="text-sm">
                        <div className="font-medium text-gray-900">
                          {new Date(entry.logoutAt).toLocaleDateString()}
                        </div>
                        <div className="text-gray-500">
                          {new Date(entry.logoutAt).toLocaleTimeString()}
                        </div>
                      </div>
                    ) : (
                      <span className="text-sm text-gray-400">
                        {isFailed ? "-" : "Still active"}
                      </span>
                    )}
                  </td>
                  <td className="px-4 py-3 text-sm">
                    {isFailed ? (
                      <span className="text-red-600">-</span>
                    ) : isActive ? (
                      <span className="text-green-600 font-medium">
                        Ongoing
                      </span>
                    ) : (
                      <span className="text-gray-600">
                        {formatDuration(sessionDuration)}
                      </span>
                    )}
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-1">
                      <MapPin className="w-3 h-3 text-gray-400" />
                      <span className="text-sm">
                        {entry.city && entry.country
                          ? `${entry.city}, ${entry.country}`
                          : entry.country || "-"}
                      </span>
                    </div>
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex flex-col gap-1">
                      <div className="flex items-center gap-2">
                        <code className="text-xs text-gray-600">
                          {entry.ipAddress}
                        </code>
                        <button
                          onClick={() => onCopyToClipboard(entry.ipAddress)}
                        >
                          {copiedText === entry.ipAddress ? (
                            <Check className="w-3 h-3 text-green-600" />
                          ) : (
                            <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600" />
                          )}
                        </button>
                      </div>
                      <span
                        className={`text-xs px-1.5 py-0.5 rounded w-fit ${
                          entry.provider === "google"
                            ? "bg-blue-100 text-blue-700"
                            : "bg-gray-100 text-gray-600"
                        }`}
                      >
                        {entry.provider === "google" ? "Google" : "Email/OTP"}
                      </span>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {loginHistory.length === 0 && (
        <div className="text-center py-8 text-gray-500">
          No login history available
        </div>
      )}
    </div>
  );
}