KAFM-Project/components/dashboard/serviceEngineer.tsx

import Button from "@/utils/button";
import StatCard from "@/utils/dashStatCard";
import InfoBanner from "@/utils/infoBanner";
import { 
  FileText, 
  Wrench, 
  Target, 
  Calendar,   
  Brain,
  Check,
} from "lucide-react";

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

export default function ServiceEngineerPortal() {
  return (
    <div className="my-15 text-slate-100 ">
      
      {/* --- HEADER SECTION --- */}
      <div className=" flex flex-col
       md:flex-row md:items-start md:justify-between gap-4 mb-4">
        <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>Portal</span>
            <span>•</span>
            <span>Service Engineer</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            Service engineer portal
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
            Field cockpit — real-time asset metrics, actionable alerts, the PM schedule for today and verified task completion.
          </p>
        </div>

        {/* Action Buttons */}
        <div className="flex items-center gap-3 self-start md:mt-15">
          <Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm">
            <FileText size={14} className="text-slate-400" />
            Scan Qr
          </Button>
          <Button className="flex items-center gap-2 px-4 py-2 bg-[#14b8a6]/10 hover:bg-[#14b8a6]/20 border border-[#14b8a6]/30 rounded-xl text-xs font-bold text-[#2dd4bf] transition-colors duration-200 shadow-sm">
            <Wrench size={14} />
            My Jobs
          </Button>
        </div>
      </div>

      {/* --- ROW 1: STATS GRID --- */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <StatCard 
          variant="icon" 
          title="My Assigned Jobs" 
          value="6" 
          icon={Target} 
          badgeText="active" 
          badgeClassName="text-slate-500 lowercase font-mono"
          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
        />
        
        <StatCard 
          variant="icon" 
          title="Predictive Alerts" 
          value="2" 
          icon={Brain} 
          badgeText="action" 
          badgeClassName="text-red-400/90 lowercase font-mono"
          iconContainerClassName="bg-[#2a171c] border-red-500/10 text-red-400"
        />
      
        <StatCard 
          variant="icon" 
          title="PM due today" 
          value="3" 
          icon={Calendar} 
          badgeText="scheduled" 
          badgeClassName="text-slate-500 lowercase font-mono"
          iconContainerClassName="bg-[#272115] border-amber-500/10 text-amber-400"
        />
         
        <StatCard 
          variant="icon" 
          title="Verifies this WK" 
          value="12" 
          icon={Check} 
          badgeText="closed" 
          badgeClassName="text-emerald-400 lowercase font-mono"
          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-emerald-400"
        />
      </div>

      {/* --- ROW 2: SPLIT GRID (METRICS & TIMELINE) --- */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4 items-stretch">
        
        {/* Left Section (8 Columns): Real-time Asset Metrics */}
        <div className="lg:col-span-8">
          <Card className="p-5 ">
            <CardHeader title="Real-time asset metrics" subtitle="IoT / BMS" />

            <div className="overflow-x-auto mt-4">
              <table className=" text-left text-xs">
                <thead>
                  <tr className="border-b border-[#142538] text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">
                    <th className="pb-3">Asset · Parameter</th>
                    <th className="pb-3">Reading</th>
                    <th className="pb-3">State</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[#142538]/50">
                  <tr className="hover:bg-[#0d1f33]/30">
                    <td className="py-3.5 font-semibold text-slate-200">Chiller-02 · supply temp</td>
                    <td className="py-3.5 font-mono text-slate-300">6.8 °C</td>
                    <td className="py-3.5">
                      <span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
                        <span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
                      </span>
                    </td>
                  </tr>
                  <tr className="hover:bg-[#0d1f33]/30">
                    <td className="py-3.5 font-semibold text-slate-200">AHU-07 · vibration</td>
                    <td className="py-3.5 font-mono text-slate-300">4.1 mm/s</td>
                    <td className="py-3.5">
                      <span className="inline-flex items-center gap-2 text-amber-500 font-semibold">
                        <span className="h-1.5 w-1.5 rounded-full bg-amber-500"></span> Watch
                      </span>
                    </td>
                  </tr>
                  <tr className="hover:bg-[#0d1f33]/30">
                    <td className="py-3.5 font-semibold text-slate-200">DG-01 · fuel level</td>
                    <td className="py-3.5 font-mono text-slate-300">62%</td>
                    <td className="py-3.5">
                      <span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
                        <span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
                      </span>
                    </td>
                  </tr>
                  <tr className="hover:bg-[#0d1f33]/30">
                    <td className="py-3.5 font-semibold text-slate-200">Pump-03 · pressure</td>
                    <td className="py-3.5 font-mono text-slate-300">3.2 bar</td>
                    <td className="py-3.5">
                      <span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
                        <span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </Card>
        </div>

        {/* Right Section (4 Columns): Today's Schedule Timeline */}
        <div className="lg:col-span-4">
          <Card className="p-5 h-full">
            <CardHeader title="Today’s schedule" subtitle="runtime + condition based" />

            {/* Timeline Node Flow */}
            <div className="relative pl-6 space-y-8 mt-6 before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-[1px] before:bg-[#142538]">
              
              {/* Timeline Task 1 */}
              <div className="relative">
                <span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
                <div>
                  <h4 className="text-xs font-bold text-slate-200">Cooling tower cleaning</h4>
                  <p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">09:00 · PPM</p>
                </div>
              </div>

              {/* Timeline Task 2 */}
              <div className="relative">
                <span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
                <div>
                  <h4 className="text-xs font-bold text-slate-200">AHU filter check</h4>
                  <p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">11:30 · PPM</p>
                </div>
              </div>

              {/* Timeline Task 3 */}
              <div className="relative">
                <span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
                <div>
                  <h4 className="text-xs font-bold text-slate-200">Lift quarterly service</h4>
                  <p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">14:00 · AMC</p>
                </div>
              </div>

            </div>
          </Card>
        </div>

      </div>

      {/* --- ROW 3: FULL WIDTH ACTIONABLE ALERTS --- */}
      <div className="mb-6">
        <Card className="p-5">
          <CardHeader title="Actionable alerts" />
          
          <div className="divide-y divide-[#142538]/60 mt-4">
            {/* Alert 1 */}
            <div className="flex items-center justify-between py-3.5">
              <div className="flex items-start gap-3">
                <span className="h-2 w-2 rounded-full bg-red-400 mt-1.5 shrink-0" />
                <div>
                  <h4 className="text-xs font-bold text-slate-200">Chiller-02 bearing wear</h4>
                  <p className="text-[11px] text-slate-400 mt-0.5">Raise condition-based PM</p>
                </div>
              </div>
              <button className="px-3.5 py-1 bg-[#11233a] hover:bg-[#1b3454] border border-[#1b3454] rounded-lg text-[11px] font-bold text-slate-200 transition-colors">
                Act
              </button>
            </div>

            {/* Alert 2 */}
            <div className="flex items-center justify-between py-3.5">
              <div className="flex items-start gap-3">
                <span className="h-2 w-2 rounded-full bg-amber-400 mt-1.5 shrink-0" />
                <div>
                  <h4 className="text-xs font-bold text-slate-200">AHU-07 belt vibration</h4>
                  <p className="text-[11px] text-slate-400 mt-0.5">Inspect within 10 days</p>
                </div>
              </div>
              <button className="px-3.5 py-1 bg-[#11233a] hover:bg-[#1b3454] border border-[#1b3454] rounded-lg text-[11px] font-bold text-slate-200 transition-colors">
                Act
              </button>
            </div>
          </div>
        </Card>
      </div>

      {/* --- BOTTOM INFO BANNER --- */}
      <div className="mb-20">
        <InfoBanner 
          boldText="Engineer view:" 
          normalText="real-time asset metrics, actionable alerts from fault detection, runtime- and condition-based preventive maintenance, and verified task completion from the field." 
        />
      </div>

    </div>
  );
}