"use client";

import { Globe, MapPin } from "lucide-react";

interface CountryData {
  name: string;
  count: number;
  percentage: number;
}

interface GeographyMapProps {
  data: CountryData[];
  onCountryClick?: (country: string) => void;
}

export default function GeographyMap({
  data,
  onCountryClick,
}: GeographyMapProps) {
  const sortedData = [...data].sort((a, b) => b.count - a.count);
  const maxCount = sortedData[0]?.count || 1;

  if (data.length === 0) {
    return (
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-12">
        <div className="text-center">
          <Globe className="w-16 h-16 text-gray-300 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">
            No geographic data
          </h3>
          <p className="text-gray-600">User location data will appear here</p>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <div className="flex items-center gap-3 mb-6">
        <div className="p-2 bg-blue-100 rounded-lg">
          <Globe className="w-5 h-5 text-blue-600" />
        </div>
        <div>
          <h3 className="text-lg font-semibold text-brand-ink">
            Geographic Distribution
          </h3>
          <p className="text-sm text-gray-600">Users by country</p>
        </div>
      </div>

      <div className="space-y-3">
        {sortedData.map((country) => {
          const barWidth = (country.count / maxCount) * 100;

          return (
            <div
              key={country.name}
              onClick={() => onCountryClick?.(country.name)}
              className={`group ${onCountryClick ? "cursor-pointer" : ""}`}
            >
              <div className="flex items-center justify-between mb-1">
                <div className="flex items-center gap-2">
                  <MapPin className="w-4 h-4 text-gray-400" />
                  <span className="text-sm font-medium text-gray-900 group-hover:text-brand-green transition">
                    {country.name}
                  </span>
                </div>
                <div className="flex items-center gap-3">
                  <span className="text-sm text-gray-600">
                    {country.percentage.toFixed(1)}%
                  </span>
                  <span className="text-sm font-bold text-brand-ink min-w-[3rem] text-right">
                    {country.count}
                  </span>
                </div>
              </div>
              <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-brand-green to-green-600 rounded-full transition-all duration-500 group-hover:from-green-600 group-hover:to-brand-green"
                  style={{ width: `${barWidth}%` }}
                />
              </div>
            </div>
          );
        })}
      </div>

      {/* Summary Stats */}
      <div className="mt-6 pt-6 border-t border-gray-200">
        <div className="grid grid-cols-3 gap-4 text-center">
          <div>
            <p className="text-2xl font-bold text-brand-ink">
              {sortedData.length}
            </p>
            <p className="text-xs text-gray-600 mt-1">Countries</p>
          </div>
          <div>
            <p className="text-2xl font-bold text-brand-ink">
              {sortedData.reduce((sum, c) => sum + c.count, 0)}
            </p>
            <p className="text-xs text-gray-600 mt-1">Total Users</p>
          </div>
          <div>
            <p className="text-2xl font-bold text-brand-ink">
              {sortedData[0]?.name || "-"}
            </p>
            <p className="text-xs text-gray-600 mt-1">Top Country</p>
          </div>
        </div>
      </div>
    </div>
  );
}