"use client";
import { 
  BarChart2, 
  Globe
} from "lucide-react";
      
import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
import Button from "@/components/common/button";
import InfoBanner from "@/components/common/infoBanner";

// Import your custom Card components
import { Card } from "@/components/common/cardWrapper"; 
import { CardHeader } from "@/components/common/cardHeader"; 
import Table from "@/components/common/dataTable";
import { connectedheaders, connectedrows } from "@/constants/tabledata";

// Custom Stat Card Data matching the UI image exactly
const STAT_CARDS_DATA = [
  {
    title: "SLA ADHERENCE",
    value: "90%",
    subtext: "target 90% · automated tracking",
    progress: 90,
    color: "bg-[#00c985]", // Vibrant emerald green
    valueColor: "text-[#00c985]",
  },
  {
    title: "AVG WO RESOLUTION",
    value: "22.4 h",
    subtext: "target < 24 h · portfolio median",
    progress: 93,
    color: "bg-[#2dd4bf]", // Mint / Teal
    valueColor: "text-white",
  },
  {
    title: "MANUAL DATA ENTRY",
    value: "-80%",
    subtext: "agent-captured requests & readings",
    progress: 80,
    color: "bg-[#2dd4bf]", // Mint / Teal
    valueColor: "text-[#2dd4bf]",
  },
  {
    title: "REPORTING EFFORT",
    value: "-75%",
    subtext: "metrics ready for review — no compiling",
    progress: 75,
    color: "bg-[#2dd4bf]", // Mint / Teal
    valueColor: "text-[#2dd4bf]",
  },
];

// Data for Risk Radar
const RISK_RADAR_ITEMS = [
  {
    title: "Coastal One · vendor gap",
    desc: "HVAC vendor completion rate fell to 61% — 8 PPMs at risk of slipping this month. Backup vendor suggested.",
    tag: "Escalates in ~6 days",
    tagColor: "text-rose-400",
    dotColor: "bg-rose-500",
    action: "Assign backup",
  },
  {
    title: "Lakeside · SLA drift",
    desc: "P2 response times trending +18% over 3 weeks; correlated with night-shift staffing.",
    tag: "Breach risk · next week",
    tagColor: "text-amber-400",
    dotColor: "bg-amber-400",
    action: "Adjust roster",
  },
  {
    title: "Monsoon readiness",
    desc: "4 of 11 waterproofing checks pending across portfolio with rains forecast in 10 days.",
    tag: "Window closing",
    tagColor: "text-amber-400",
    dotColor: "bg-amber-400",
    action: "Schedule now",
  },
  {
    title: "Spares shortfall",
    desc: "AHU belt stock below reorder level at 2 sites; next PPM cycle consumes remaining stock.",
    tag: "3 weeks of stock left",
    tagColor: "text-sky-400",
    dotColor: "bg-sky-400",
    action: "Raise PO",
  },
];

// Data for Vendor Performance
const VENDOR_PERFORMANCE = [
  { name: "CoolServ HVAC", score: 94, barColor: "bg-emerald-400" },
  { name: "Apex Elevators", score: 91, barColor: "bg-emerald-400" },
  { name: "SecureWatch", score: 86, barColor: "bg-emerald-400" },
  { name: "AquaPure", score: 82, barColor: "bg-amber-400" },
  { name: "GreenScape", score: 61, barColor: "bg-rose-400" },
];

// Data for Live Context Feed
const LIVE_FEED = [
  { time: "now", text: "Vendor CoolServ acknowledged P1 · Chiller-02 — tenant portal updated" },
  { time: "4 min", text: "Energy spike at Lakeside auto-linked to AHU-07 alert" },
  { time: "11 min", text: "Coastal One WO-1221 completed · SLA met · invoice draft created" },
  { time: "26 min", text: "Tenant satisfaction pulse: 4.4 ★ this week (+0.2)" },
];

export default function ConnectedOpsPortal() {
  return (
    <div className="text-[#8e9bae] font-sans my-15">
        
        {/* Page Header Section */}
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-2 text-[11px] font-medium tracking-wider text-[#3de0c4]">
              <span>APPLE ONE — HQ TOWER</span>
              <span className="text-[#3a495e]">•</span>
              <span className="text-[#596980]">INTELLIGENCE</span>
              <span className="text-[#3a495e]">•</span>
              <span className="text-[#596980]">CONNECTED OPS</span>
            </div>
            <h1 className="text-3xl font-bold text-white tracking-tight mt-1.5">Connected operations</h1>
            <p className="mt-2 text-sm text-[#7e8c9f] max-w-2xl leading-relaxed">
              Every team, vendor and system on the same live context — portfolio-wide work orders, costs, SLAs and vendor performance in one place, with risks flagged before they escalate.
            </p>
          </div>

          {/* Action Buttons */}
          <div className="flex items-center gap-3">
            <Button
              className="flex items-center gap-2 rounded-lg border border-[#1b2a3d] bg-[#0c1626] px-4 py-2 text-xs font-semibold text-white hover:bg-[#132238] transition">
              <BarChart2 size={14} className="text-[#3de0c4]" />
              Review pack
            </Button>
            <Button
              className="flex items-center gap-1.5 rounded-lg bg-[#3de0c4] hover:bg-[#34ceb3] px-4 py-2 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
              <Globe size={14} strokeWidth={2.5} />
              Share live board
            </Button>
          </div>
        </div>

        {/* --- STAT CARD GRID (REPLACED WITH UI MATCHING CARDS) --- */}
        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {STAT_CARDS_DATA.map((card, idx) => (
            <div
              key={idx}
              className="bg-[#0b1726] border border-[#16273b] rounded-xl p-5 flex flex-col justify-between h-[155px]"
            >
              <div>
                <p className="text-[10px] font-bold tracking-wider text-[#63758e] uppercase">
                  {card.title}
                </p>
                <h2 className={`text-3xl font-bold mt-1.5 tracking-tight ${card.valueColor}`}>
                  {card.value}
                </h2>
              </div>

              <div>
                <p className="text-[11px] text-[#63758e] mb-3">
                  {card.subtext}
                </p>
                {/* Progress Bar */}
                <div className="w-full bg-[#132338] h-[3px] rounded-full overflow-hidden">
                  <div
                    className={`h-full rounded-full ${card.color}`}
                    style={{ width: `${card.progress}%` }}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* --- TABLE SECTION --- */}
        <div className="mt-6">
          <Card>
            <CardHeader title="Portfolio pulse" subtitle="live · all sites · one context" />
            <div className="mt-4">
              <Table headers={connectedheaders} rows={connectedrows} />
            </div>
          </Card>
        </div>

        {/* --- BELOW TABLE SECTION (RISK RADAR, VENDOR PERFORMANCE & LIVE FEED) --- */}
        <div className="mt-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
          {/* Left Column: Risk Radar (7 Cols) */}
          <div className="lg:col-span-7">
            <Card >
              <CardHeader title="Risk radar · before it escalates" subtitle="predictive · ops data" />
              <div className="mt-5 divide-y divide-[#132235]/60">
                {RISK_RADAR_ITEMS.map((item, index) => (
                  <div key={index} className="py-3.5 first:pt-0 last:pb-0 flex items-start justify-between gap-4">
                    <div className="flex items-start gap-3">
                      <span className={`w-2 h-2 rounded-full mt-1.5 shrink-0 ${item.dotColor}`} />
                      <div>
                        <h4 className="text-xs font-bold text-white tracking-wide">
                          {item.title}
                        </h4>
                        <p className="text-[11px] text-[#7e8c9f] mt-1 leading-relaxed max-w-lg">
                          {item.desc}
                        </p>
                        <p className={`text-[10px] font-mono mt-1.5 ${item.tagColor}`}>
                          ⏱ {item.tag}
                        </p>
                      </div>
                    </div>
                    <Button className="shrink-0 bg-[#0c1827] hover:bg-[#142337] border border-[#182a40] text-slate-200 text-[11px] px-3 py-1 rounded-md transition font-medium">
                      {item.action}
                    </Button>
                  </div>
                ))}
              </div>
            </Card>
          </div>

          {/* Right Column: Vendor Performance & Live Context Feed (5 Cols) */}
          <div className="lg:col-span-5 flex flex-col gap-6">
            {/* Top Right: Vendor Performance */}
            <Card >
              <CardHeader title="Vendor performance" subtitle="completion × SLA × rating" />
              <div className="mt-5 space-y-3.5">
                {VENDOR_PERFORMANCE.map((vendor, idx) => (
                  <div key={idx} className="flex items-center justify-between text-xs gap-3">
                    <span className="text-[#8e9bae] w-28 truncate font-medium">{vendor.name}</span>
                    <div className="flex-1 h-2 rounded-full bg-[#101e30] overflow-hidden">
                      <div className={`h-2 rounded-full ${vendor.barColor}`} style={{ width: `${vendor.score}%` }} />
                    </div>
                    <span className="font-mono font-bold text-white w-6 text-right">{vendor.score}</span>
                  </div>
                ))}
              </div>
              <p className="text-[11px] text-[#596980] mt-5 pt-3 border-t border-[#132235]/60">
                GreenScape flagged — also holds the disputed invoice in AI Helpdesk.
              </p>
            </Card>

            {/* Bottom Right: Live Context Feed */}
            <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl flex-1">
              <CardHeader title="Live context feed" />
              <div className="mt-5 divide-y divide-[#132235]/60">
                {LIVE_FEED.map((feed, idx) => (
                  <div key={idx} className="py-3 first:pt-0 last:pb-0 flex items-start gap-4">
                    <span className="text-[10px] font-mono text-[#596980] w-10 shrink-0 pt-0.5">
                      {feed.time}
                    </span>
                    <p className="text-xs text-slate-200 font-medium leading-snug">
                      {feed.text}
                    </p>
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </div>

      {/* --- INFO BANNER --- */}
      <div className="mt-8 relative">
        <InfoBanner 
          boldText="How it works:" 
          normalText="connected ops unifies maintenance logs, invoice verification, and operational KPIs across sites to eliminate manual reporting and surface SLA risks early." 
        />
      </div>
      
    </div>
  );
}