"use client";
import { 
  Smile, 
  ShieldCheck, 
  Database, 
  Leaf,
  Plus, 
} from "lucide-react";
      
import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
import StatCard from "../../utils/dashStatCard";
import Button from "@/utils/button";
import InfoBanner from "@/utils/infoBanner";

// Import your custom Card components
import { Card } from "@/utils/cardWrapper"; 
import { CardHeader } from "@/utils/cardHeader"; 

export default function EngagementPage() {
  return (
    <div className=" text-[#93a3b8] font-sans antialiased ">
    
      <main className="mt-20">
        
        {/* Page Header Section */}
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mt-4">
          <div>
            <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-teal-500">
              <span>Apple One — HQ Tower</span>
              <span className="text-gray-600">·</span>
              <span className="text-gray-400">Intelligence</span>
              <span className="text-gray-600">·</span>
              <span className="text-gray-400">Engagement</span>
            </div>
            <h1 className="text-2xl font-bold text-white tracking-tight mt-1">Employee engagement</h1>
            <p className="mt-2 text-sm text-gray-400 max-w-2xl leading-relaxed">
              Pulse satisfaction surveys, complaint tickets and a suggestion system — boosting morale, transparency and retention.
            </p>
          </div>

          {/* Action Buttons */}
          <div className="flex items-center gap-3">
            <Button
             className="flex items-center gap-2 rounded-xl border border-[#142538] bg-[#091624] px-4 py-2.5 text-xs font-bold text-white hover:bg-[#11233a] transition">
              <Smile size={15} className="text-slate-400" />
              Pulse survey
            </Button>
            <Button
             className="flex items-center gap-1.5 rounded-xl bg-[#3de0c4] hover:bg-[#32cbb0] px-4 py-2.5 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
              <Plus size={15} strokeWidth={2.5} />
              New ticket
            </Button>
          </div>
        </div>

        {/* --- STAT CARD GRID --- */}
        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <StatCard 
            variant="icon" title="Engagement score" value="82%" icon={Smile} 
            badgeText="+4 vs Q1" badgeClassName="text-emerald-400" 
            iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
          />
          
          <StatCard 
            variant="icon" title="Asset availability" value="50%" icon={ShieldCheck} 
            badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case" 
            iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
          />

          <StatCard 
            variant="icon" title="Energy cost / mo" value="₹11.8 L" icon={Database} 
            badgeText="↓ vs avg" badgeClassName="text-emerald-400 font-sans normal-case font-bold" 
            iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500" 
          />
          
          <StatCard 
            variant="icon" title="ESG rating" value="B+" icon={Leaf} 
            badgeText="improving" badgeClassName="text-emerald-400 lowercase font-sans font-medium" 
            iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
          />
        </div>

        {/* --- TWO COLUMNS (DRIVERS & TICKETS LISTS) --- */}
        <div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">
          
          {/* Left Column: Satisfaction Drivers */}
          <div className="lg:col-span-7">
            <Card className="p-4">
              <CardHeader title="Satisfaction drivers" subtitle="latest pulse" />

              <div className="mt-6 space-y-5">
                {SATISFACTION_DRIVERS.map((driver) => (
                  <div key={driver.label} className="space-y-2">
                    <div className="flex items-center justify-between text-xs font-medium">
                      <span className="text-slate-300">{driver.label}</span>
                      <span className="font-bold text-white">{driver.score}</span>
                    </div>
                    
                    {/* Track line background */}
                    <div className="h-2 w-full rounded-full bg-[#101c2a]">
                      {/* Filled bar width */}
                      <div 
                        className={`h-2 rounded-full ${driver.color} transition-all duration-500`}
                        style={{ width: `${driver.score}%` }}
                      />
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </div>

          {/* Right Column: Tickets & Suggestions */}
          <div className="lg:col-span-5">
            <Card className="p-6 h-full">
              <CardHeader title="Tickets & suggestions" />

              <div className="mt-2 divide-y divide-[#142538]/30">
                {TICKETS_DATA.map((ticket, index) => (
                  <div key={index} className="flex items-center justify-between py-4 first:pt-2 last:pb-2">
                    <div className="min-w-0">
                      <h4 className="font-bold text-xs text-white truncate pr-2">{ticket.title}</h4>
                      <span className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider block mt-0.5">
                        {ticket.type}
                      </span>
                    </div>

                    {/* Status Indicator Badges */}
                    <div>
                      {ticket.status === "OPEN" ? (
                        <span className="inline-flex items-center gap-1.5 rounded-full bg-[#3b2a1a] border border-amber-500/25 px-2.5 py-0.5 text-[9px] font-bold text-amber-500">
                          <span className="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
                          OPEN
                        </span>
                      ) : (
                        <span className="inline-flex items-center gap-1.5 rounded-full bg-[#152332] border border-[#1e344e]/50 px-2.5 py-0.5 text-[9px] font-bold text-slate-400">
                          <span className="h-1.5 w-1.5 rounded-full bg-slate-500"></span>
                          CLOSED
                        </span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </div>

        </div>

      </main>

      <div className="mb-10 mt-10">
        <InfoBanner 
          boldText="Closing the loop:" 
          normalText="complaints become tracked FM tickets, suggestions are triaged and voted on, and declining pulse trends flag retention risk early." 
        />
      </div>
      
    </div>
  );
}