"use client";

import React, { useState } from "react";

// Mock user location data matching the screenshot
const userData = [
  {
    name: "Dhananjay T.",
    email: "dhananjay@kafm.io",
    mobile: "7489477369",
    latitude: "18.5450",
    longitude: "73.7935",
    site: "Apple One",
    // Relative coordinates for the map visual dots (X%, Y%)
    x: "19%",
    y: "38%",
  },
  {
    name: "ME Local",
    email: "me.local@kafm.io",
    mobile: "9876543210",
    latitude: "18.5469",
    longitude: "73.7945",
    site: "Apple One",
    x: "44%",
    y: "43%",
  },
  {
    name: "TECH Local",
    email: "tech.local@kafm.io",
    mobile: "9123456780",
    latitude: "18.5441",
    longitude: "73.7951",
    site: "Apple One",
    x: "69%",
    y: "48%",
  },
];

export default function UserLocationPortal() {
  const [viewMode, setViewMode] = useState<"map" | "table">("table");
  const [mapType, setMapType] = useState<"MAP" | "SATELLITE">("MAP");

  return (
    <div className="my-15 text-slate-200 font-sans">
      {/* Top Breadcrumb & Header */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div>
          {/* Breadcrumb */}
          <div className="text-xs uppercase tracking-wider text-slate-400 mb-2 font-medium">
            <span className="hover:text-slate-200 cursor-pointer">
              APPLE ONE — HQ TOWER
            </span>{" "}
            • <span className="hover:text-slate-200 cursor-pointer">CONFIGURE</span>{" "}
            • <span className="text-slate-300">USER LOCATION</span>
          </div>
          
          {/* Main Title */}
          <h1 className="text-3xl font-bold text-white mb-2">User location</h1>
          <p className="text-slate-400 text-sm max-w-2xl leading-relaxed">
            Live position of active technicians, captured from the mobile app. Map
            and table views.
          </p>
        </div>

        {/* View Switcher Buttons */}
        <div className="flex bg-[#0F172A] p-1 rounded-lg border border-slate-800 self-start md:self-auto">
          <button
            onClick={() => setViewMode("map")}
            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
              viewMode === "map"
                ? "bg-slate-800 text-white shadow-sm"
                : "text-slate-400 hover:text-slate-200"
            }`}
          >
            Map view
          </button>
          <button
            onClick={() => setViewMode("table")}
            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
              viewMode === "table"
                ? "bg-[#2DD4BF] text-[#070D19] font-semibold shadow-sm"
                : "text-slate-400 hover:text-slate-200"
            }`}
          >
            Table view
          </button>
        </div>
      </div>

      {/* Main Container */}
      <div className="border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
        {/* Header Bar inside card */}
        <div className="flex items-center justify-between px-6 py-2.5 border-b border-slate-800/60">
          <span className="text-sm font-semibold text-slate-200">
            Active users • Apple One
          </span>
          <span className="text-xs font-mono tracking-widest text-slate-400">
            GPS • live
          </span>
        </div>

        {/* Live Grid Map Visual Area (Height Reduced to h-36) */}
        <div className="relative h-36 bg-[#080E21] border-b border-slate-800/60">
          {/* Dark Grid Background Effect */}
          <div
            className="absolute inset-0 opacity-20"
            style={{
              backgroundImage: `
                linear-gradient(to right, #334155 1px, transparent 1px),
                linear-gradient(to bottom, #334155 1px, transparent 1px)
              `,
              backgroundSize: "40px 20px",
            }}
          />

          {/* User Map Markers */}
          {userData.map((user, index) => (
            <div
              key={index}
              className="absolute group transform -translate-x-1/2 -translate-y-1/2 cursor-pointer"
              style={{ left: user.x, top: user.y }}
            >
              {/* Pulsing Outer Glow Effect */}
              <div className="absolute -inset-1 bg-[#2DD4BF]/30 rounded-full blur-sm animate-pulse" />
              
              {/* Dot Center */}
              <div className="relative h-3.5 w-3.5 bg-[#2DD4BF] rounded-full border-2 border-[#080E21] shadow-[0_0_12px_#2DD4BF]" />

              {/* Tooltip on Hover */}
              <div className="opacity-0 group-hover:opacity-100 transition-opacity bg-slate-900 border border-slate-700 text-xs text-slate-200 rounded px-2.5 py-1.5 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 whitespace-nowrap z-20 pointer-events-none shadow-lg">
                <p className="font-semibold">{user.name}</p>
                <p className="text-[10px] text-slate-400">
                  {user.latitude}, {user.longitude}
                </p>
              </div>
            </div>
          ))}

          {/* Map Type Toggle (Bottom Right of Map Area) */}
          <div className="absolute bottom-2 right-4 flex items-center space-x-2 text-[10px] font-mono tracking-wider text-slate-500">
            <button
              onClick={() => setMapType("MAP")}
              className={`hover:text-slate-300 transition-colors ${
                mapType === "MAP" ? "text-slate-300 font-bold" : ""
              }`}
            >
              MAP
            </button>
            <span>•</span>
            <button
              onClick={() => setMapType("SATELLITE")}
              className={`hover:text-slate-300 transition-colors ${
                mapType === "SATELLITE" ? "text-slate-300 font-bold" : ""
              }`}
            >
              SATELLITE
            </button>
          </div>
        </div>

        {/* User Data Table */}
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm text-slate-300">
            <thead>
              <tr className="text-[11px] font-semibold tracking-wider text-slate-400 uppercase border-b border-slate-800/80 bg-[#0A1128]/40">
                <th scope="col" className="py-2 px-6">
                  Name
                </th>
                <th scope="col" className="py-2 px-6">
                  Email
                </th>
                <th scope="col" className="py-2 px-6">
                  Mobile
                </th>
                <th scope="col" className="py-2 px-6">
                  Latitude
                </th>
                <th scope="col" className="py-2 px-6">
                  Longitude
                </th>
                <th scope="col" className="py-2 px-6">
                  Site
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-800/50 font-mono text-xs">
              {userData.map((user, idx) => (
                <tr
                  key={idx}
                  className="hover:bg-slate-800/30 transition-colors duration-150"
                >
                  <td className="py-2.5 px-6 font-sans font-semibold text-slate-100">
                    {user.name}
                  </td>
                  <td className="py-2.5 px-6 text-slate-300">{user.email}</td>
                  <td className="py-2.5 px-6 text-slate-300">{user.mobile}</td>
                  <td className="py-2.5 px-6 text-slate-300">{user.latitude}</td>
                  <td className="py-2.5 px-6 text-slate-300">{user.longitude}</td>
                  <td className="py-2.5 px-6 font-sans text-slate-200">
                    {user.site}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}