import { useState } from 'react';
import { 
 
  Plus, 
 
  Search,
  ChevronDown,
  
} from "lucide-react";
import Button from "@/components/common/button";

import Table from '@/components/common/dataTable';

import { siteHeaders, siteRows } from "@/constants/adminTableDatat";


export default function SitePortal() {
  const [searchQuery, setSearchQuery] = useState('');

  return (
    <div className="my-15 text-slate-100 font-sans">
      {/* --- HEADER SECTION --- */}
      <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-gray-400">PLATFORM</span>
            <span className="text-gray-600">•</span>
            <span className="text-gray-400">SITES</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-1">
            Sites
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
            Physical locations under each tenant. Define geofences with map coordinates and a working radius. Operations site pickers read from here.
          </p>
        </div>

        {/* --- HEADER BUTTON --- */}
        <div className="flex items-center gap-3 self-start md:mt-2">
          <Button className="bg-emerald-400 hover:bg-emerald-300 text-slate-950 font-semibold text-xs px-4 py-2.5 rounded-lg flex items-center gap-1.5 transition-colors shadow-lg shadow-emerald-500/10">
            <Plus className="w-4 h-4 text-slate-950 stroke-[3]" />
            <span>Add site</span>
          </Button>
        </div>
      </div>

      {/* --- TABLE CONTAINER WITH UPPER BAR --- */}
      <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-4 space-y-4">
        {/* Table Upper UI (Search Bar & Filter Dropdown) */}
        <div className="flex flex-col sm:flex-row items-center gap-3">
          {/* Search Bar Input */}
          <div className="relative flex-1 w-full">
            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search sites..."
              className="w-full pl-10 pr-4 py-2 bg-slate-950/80 border border-slate-800 rounded-lg text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-slate-700 transition"
            />
          </div>

          {/* All Tenants Filter Select Dropdown */}
          <div className="relative w-full sm:w-44">
            <select className="w-full appearance-none bg-slate-950/80 border border-slate-800 rounded-lg px-3.5 py-2 pr-8 text-sm text-slate-300 font-medium focus:outline-none focus:border-slate-700 cursor-pointer">
              <option value="all">All tenants</option>
              <option value="apple-one">Apple One</option>
              <option value="novotel">Novotel Pune</option>
              <option value="srm">SRM Campus</option>
              <option value="local1">Local 1</option>
            </select>
            <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
          </div>
        </div>

        {/* --- TABLE --- */}
        <Table headers={siteHeaders} rows={siteRows} />

        {/* Footer Record Count */}
        <div className="text-xs text-slate-500 font-mono pt-1">
          {siteRows.length} records
        </div>
      </div>

     
    </div>
  );
}