KAFM-Project/components/dashboard/intelligence/aiHelpDesk.tsx

import {
  Clock,
  ShieldCheck,
  Bot,
  Settings,
  ReceiptIndianRupee,
} 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 StatCard from "@/components/common/dashStatCard";
import { Card } from "@/components/common/cardWrapper";
import { CardHeader } from "@/components/common/cardHeader";
import { aiHelpdeskTabs, HANDLES_DATA, LIVE_ACTIVITIES } from "@/constants/constant";

// Sample mock data for Agent Activity

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

  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-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
            <span className="text-teal-400">Apple One — HQ Tower</span>
            <span>•</span>
            <span className="text-slate-500">INTELLIGENCE</span>
            <span>•</span>
            <span className="text-slate-500">AI HELPDESK</span>
          </div>

          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            AI Helpdesk & automation
          </h1>

          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
            A 24/7 agent that triages service requests, resolves routine issues, verifies vendor invoices against work orders, and enforces SLAs — with every action auditable.
          </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">
            <Settings className="w-4 h-4 text-slate-300" />
            <span>Agent settings</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">
            <Bot className="w-4 h-4 stroke-[3]" />
            <span>Ask AI</span>
          </Button>
        </div>
      </div>

      {/* Navigation Tabs (Not changed) */}
      <NavigationTabs
        tabs={aiHelpdeskTabs}
        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">
        {/* Auto-resolved */}
        <StatCard
          variant="icon"
          title="Auto-resolved"
          value="68%"
          icon={Bot}
          badgeText="routine requests"
          badgeClassName="text-emerald-400 font-mono"
          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
        />

        {/* Median first response */}
        <StatCard
          variant="icon"
          title="Median first response"
          value="41 s"
          icon={Clock}
          badgeText="24/7 coverage"
          badgeClassName="text-emerald-400 font-mono"
          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
        />

        {/* Invoices auto-verified */}
        <StatCard
          variant="icon"
          title="Invoices auto-verified"
          value="₹4.2 L"
          icon={ReceiptIndianRupee}
          badgeText="this month"
          badgeClassName="text-slate-400 font-mono"
          iconContainerClassName="bg-sky-950/40 border-sky-800/30 text-sky-400"
        />

        {/* Breaches prevented */}
        <StatCard
          variant="icon"
          title="Breaches prevented"
          value="12"
          icon={ShieldCheck}
          badgeText="SLA enforcement • 30 d"
          badgeClassName="text-emerald-400 font-mono"
          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
        />
      </div>

      {/* --- AGENT ACTIVITY & DEFLECTION / HANDLES SECTION --- */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-8">
        
        {/* Left Column: Agent activity · live (8 Cols) */}
        <Card className="lg:col-span-7  justify-start">
          <CardHeader
            title="Agent activity · live"
            subtitle="auto · routed · escalated"
          />

          <div className="mt-4 divide-y divide-[#132235]/60">
            {LIVE_ACTIVITIES.map((act, index) => (
              <div key={index} className="py-3.5 first:pt-1 last:pb-1 flex items-start justify-between gap-4">
                <div className="flex items-start gap-3 min-w-0">
                  <span className="text-[11px] font-mono text-slate-500 whitespace-nowrap mt-0.5">
                    {act.time}
                  </span>
                  <div className="min-w-0">
                    <h4 className="text-xs font-bold text-white truncate">
                      {act.title}
                    </h4>
                    <p className="text-[11px] text-slate-400 mt-0.5 leading-snug">
                      {act.detail}
                    </p>
                  </div>
                </div>

                <div className="flex flex-col items-end gap-1 shrink-0">
                  <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold border ${act.statusColor}`}>
                    <span className={`w-1.5 h-1.5 rounded-full ${act.dotColor}`} />
                    {act.status}
                  </span>
                  <span className="text-[10px] font-mono text-slate-500">
                    {act.conf}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* Right Column: Deflection & What the agent handles (5 Cols) */}
        <div className="lg:col-span-5 flex flex-col gap-6">
          
          {/* Top Card: Deflection · last 7 days */}
          <Card className=" border-[#132235] p-5 rounded-xl">
            <CardHeader title="Deflection · last 7 days" />

            <div className="mt-5 space-y-3.5">
              {/* Item 1 */}
              <div className="flex items-center justify-between text-xs">
                <span className="text-slate-400 w-28">Auto-resolved</span>
                <div className="flex-1 mx-3 h-2 rounded-full bg-[#101e30]">
                  <div className="h-2 rounded-full bg-teal-400" style={{ width: "68%" }} />
                </div>
                <span className="font-bold text-white w-8 text-right">68%</span>
              </div>

              {/* Item 2 */}
              <div className="flex items-center justify-between text-xs">
                <span className="text-slate-400 w-28">Routed to team</span>
                <div className="flex-1 mx-3 h-2 rounded-full bg-[#101e30]">
                  <div className="h-2 rounded-full bg-blue-500" style={{ width: "24%" }} />
                </div>
                <span className="font-bold text-white w-8 text-right">24%</span>
              </div>

              {/* Item 3 */}
              <div className="flex items-center justify-between text-xs">
                <span className="text-slate-400 w-28">Escalated to human</span>
                <div className="flex-1 mx-3 h-2 rounded-full bg-[#101e30]">
                  <div className="h-2 rounded-full bg-rose-400" style={{ width: "8%" }} />
                </div>
                <span className="font-bold text-white w-8 text-right">8%</span>
              </div>
            </div>

            <p className="text-[11px] text-slate-400 mt-5 pt-3 border-t border-[#132235]/60 leading-relaxed">
              80% less manual data entry — requests are captured, classified and logged by the agent.
            </p>
          </Card>

          {/* Bottom Card: What the agent handles */}
          <Card className=" border-[#132235] p-5 rounded-xl flex-1 justify-between">
            <CardHeader title="What the agent handles" />

            <div className="mt-4 space-y-4">
              {HANDLES_DATA.map((item, idx) => (
                <div key={idx} className="flex items-center justify-between">
                  <div>
                    <h5 className="text-xs font-bold text-white">
                      {item.title}
                    </h5>
                    <p className="text-[11px] text-slate-400">
                      {item.subtitle}
                    </p>
                  </div>
                  <span className="inline-flex items-center gap-1 bg-emerald-950/60 border border-emerald-800/40 text-emerald-400 text-[9px] font-bold px-2 py-0.5 rounded-full">
                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
                    ACTIVE
                  </span>
                </div>
              ))}
            </div>
          </Card>

        </div>
      </div>

     
    </div>
  );
}