"use client";

import Button from "@/components/common/button";
import { userData } from "@/constants/constant";
import React, { useState } from "react";



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

  return (
    <div className="my-15 min-h-screen h-full text-slate-200  font-sans">
      {/* Top Breadcrumb & Header */}
     <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
        <div>
          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
            <span className="text-teal-400">APPLE ONE — HQ TOWER</span>
            <span className="text-slate-600">•</span>
            <span className="text-slate-400">CONFIGURE</span>
            <span className="text-slate-600">•</span>
            <span className="text-slate-400">USER LOCATION</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            User location
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl 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>
  );
}