"use client";
import { 
  BarChart2, 
  Globe
} from "lucide-react";
      

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";
import { LIVE_FEED, RISK_RADAR_ITEMS, STAT_CARDS_DATA, VENDOR_PERFORMANCE } from "@/constants/constant";




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-[12px] font-medium tracking-wider text-[#3de0c4]">
              <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">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]  font-medium 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>
  );
}