import {
  Activity,
  Monitor,
  Clock,
  ShieldCheck,
  Pencil,
  Trash2,
  Sparkles,
  Plus
} from "lucide-react";

import InfoBanner from "@/components/common/infoBanner";
import Button from "@/components/common/button";
import NavigationTabs from "@/components/common/tabs";

import { useState } from "react";
import {  zoneUtilizationData } from "@/constants/constant";
import StatCard from "@/components/common/dashStatCard";
import { Card } from '@/components/common/cardWrapper';
import { CardHeader } from '@/components/common/cardHeader';
import { workspaceTabs } from '@/constants/tabConstant';

export default function WorkSpacePortal() {
  const [activeTab, setActiveTab] = useState<string>("Desk Booking");

  
  const deskGrid = Array.from({ length: 48 }).map((_, index) => {
    if (index === 42) return "reserved"; // 1 Reserved desk
    if (index >= 36) return "free";       // Free desks on the bottom row
    return "occupied";                    // Occupied desks
  });

  return (
    <div className="my-15 text-slate-100 font-sans">
      {/* --- HEADER SECTION WITH BUTTONS --- */}
      <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 text-slate-500 uppercase font-mono">
            <span className="text-teal-400">Apple One — HQ Tower</span>
            <span className="text-gray-600">•</span>
            <span className="text-gray-400">WORKPLACE</span>
            <span className="text-gray-600">•</span>
            <span className="text-gray-400">WORKSPACE</span>
          </div>

          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            Workspace management
          </h1>

          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
            Desk booking, live floor plans and shift timetable — unified, all reading the Block → Floor → Zone master.
          </p>
        </div>

        {/* --- ACTION BUTTONS --- */}
        <div className="flex items-center gap-2.5 self-start mt-10">
          <Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-3.5 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
            <Sparkles className="w-4 h-4 text-slate-300" />
            <span>Policies</span>
          </Button>

          <Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-3.5 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
            <Plus className="w-4 h-4 text-slate-300" />
            <span>Add zone</span>
          </Button>

          <Button className="bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-1.5 transition-colors">
            <Plus className="w-4 h-4 stroke-[3]" />
            <span>Book desk</span>
          </Button>
        </div>
      </div>

      {/* Navigation Tabs */}
      <NavigationTabs
        tabs={workspaceTabs}
        activeTab={activeTab}
        onTabChange={setActiveTab}
        className="mb-6"
      />

      {/* --- STAT CARDS --- */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {/* Total desks */}
        <StatCard
          variant="icon"
          title="Total desks"
          value="162"
          icon={Monitor}
          badgeText="4 zones"
          badgeClassName="text-slate-400 lowercase font-mono"
          iconContainerClassName="bg-blue-950/40 border-blue-800/30 text-blue-400"
        />

        {/* Available */}
        <StatCard
          variant="icon"
          title="Available"
          value="39"
          icon={ShieldCheck}
          badgeText="free now"
          badgeClassName="text-emerald-400 lowercase font-mono"
          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
        />

        {/* Occupied */}
        <StatCard
          variant="icon"
          title="Occupied"
          value="123"
          icon={Clock}
          badgeText="checked in"
          badgeClassName="text-rose-400 lowercase font-mono"
          iconContainerClassName="bg-rose-950/40 border-rose-900/30 text-rose-400"
        />

        {/* Utilization */}
        <StatCard
          variant="icon"
          title="Utilization"
          value="76%"
          icon={Activity}
          badgeText="today"
          badgeClassName="text-slate-400 lowercase font-mono"
          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
        />
      </div>

      {/* --- OCCUPANCY & ZONE UTILIZATION SECTION --- */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        {/* Live Occupancy Grid (Left 2 Columns) */}
        <Card className="lg:col-span-2 justify-start">
          <CardHeader 
            title="Live occupancy · North Wing L8" 
            subtitle="39 / 48 occupied" 
          />
          
          {/* Desk Layout Grid */}
          <div className="grid grid-cols-6 sm:grid-cols-12 gap-2 my-4">
            {deskGrid.map((type, i) => (
              <div
                key={i}
                className={`h-10 rounded-lg border transition-all ${
                  type === "occupied"
                    ? "bg-[#181828]/50 border-rose-500/30"
                    : type === "free"
                    ? "bg-teal-950/30 border-teal-500/50"
                    : "bg-slate-900/60 border-amber-500/50"
                }`}
              />
            ))}
          </div>

          {/* Map Legend */}
          <div className="flex items-center gap-6 mt-2 pt-2 text-xs text-slate-400">
            <div className="flex items-center gap-2">
              <span className="w-3 h-3 rounded border border-teal-500/50 bg-teal-950/30" />
              <span>Free</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="w-3 h-3 rounded border border-amber-500/50 bg-slate-900/60" />
              <span>Reserved</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="w-3 h-3 rounded border border-rose-500/30 bg-[#181828]/50" />
              <span>Occupied</span>
            </div>
          </div>
        </Card>

        {/* Zone Utilization Bars (Right 1 Column) */}
        <Card className="justify-start">
          <CardHeader title="Zone utilization" />

          <div className="space-y-5 mt-3">
            {zoneUtilizationData.map((zone, idx) => {
              const percentage = Math.round((zone.current / zone.max) * 100);
              return (
                <div key={idx} className="flex items-center justify-between gap-3">
                  <span className="text-xs font-medium text-slate-300 w-32 truncate">
                    {zone.name}
                  </span>

                  {/* Progress Bar Container */}
                  <div className="flex-1 bg-[#12233a] h-2 rounded-full overflow-hidden">
                    <div
                      className={`h-full ${zone.barColor} transition-all duration-300`}
                      style={{ width: `${percentage}%` }}
                    />
                  </div>

                  {/* Value & Actions */}
                  <div className="flex items-center gap-2 font-mono text-xs text-slate-200">
                    <span className="font-bold">{zone.current}/{zone.max}</span>
                    <Button className="bg-[#12233a] hover:bg-[#1a3252] border border-[#1d3554] text-slate-400 hover:text-slate-200 p-1 rounded transition-colors">
                      <Pencil className="w-3 h-3" />
                    </Button>
                    <Button className="bg-[#12233a] hover:bg-[#1a3252] border border-[#1d3554] text-slate-400 hover:text-rose-400 p-1 rounded transition-colors">
                      <Trash2 className="w-3 h-3" />
                    </Button>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>

      {/* Info Banner */}
      <div className="my-8">
        <InfoBanner
          boldText="Policy:"
          normalText="hot desks auto-release after a 15-min no-show; fixed desks are role-assigned; collaboration zones are first-come via QR check-in."
        />
      </div>
    </div>
  );
}