import { useState } from 'react';
import { 
  Bot, 
  Activity, 
  Check, 
  Clock, 
  Plus,
  Sparkles
} from "lucide-react";
import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";
import InfoBanner from '@/components/common/infoBanner';
import Table from '@/components/common/dataTable';
import { auditheaders, auditrows } from '@/constants/tabledata';

export default function WorkFlowAutomationPortal() {
  return (
    <div className="relative my-15 text-slate-100 font-sans">
      {/* --- HEADER SECTION --- */}
      <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-[12px] font-bold tracking-widest uppercase font-mono">
            <span className="text-teal-400">APPLE ONE — HQ TOWER</span>
            <span className="text-slate-600">•</span>
            <span className="text-slate-400">CONFIGURE</span>
            <span className="text-slate-600">•</span>
            <span className="text-slate-400">AUTOMATION</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            Workflow automation
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
            Build if-this-then-that rules for approvals, dispatch and escalation without code — the same engine competitors gate behind IT change requests.
          </p>
        </div>

        {/* --- HEADER BUTTONS --- */}
        <div className="flex items-center gap-3 self-start md:mt-10">
          <Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-4 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
            <Activity className="w-4 h-4 text-teal-400" />
            <span>Run log</span>
          </Button>

          <Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
            <Plus className="w-4 h-4 stroke-[3]" />
            <span>New automation</span>
          </Button>
        </div>
      </div>

      {/* --- STAT CARDS --- */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {/* Card 1: Active automations */}
        <StatCard
          variant="icon"
          title="Active automations"
          value="4/5"
          icon={Bot}
          badgeText="live"
          badgeClassName="text-teal-400 lowercase font-mono"
          iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
        />

        {/* Card 2: Runs this month */}
        <StatCard
          variant="icon"
          title="Runs this month"
          value="48"
          icon={Activity}
          badgeText="triggered"
          badgeClassName="text-teal-400 lowercase font-mono"
          iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
        />

        {/* Card 3: Tasks auto-handled */}
        <StatCard
          variant="icon"
          title="Tasks auto-handled"
          value="80%"
          icon={Check}
          badgeText="no touch"
          badgeClassName="text-teal-400 lowercase font-mono"
          iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
        />

        {/* Card 4: Time saved */}
        <StatCard
          variant="icon"
          title="Time saved"
          value="~34h"
          icon={Clock}
          badgeText="est. / month"
          badgeClassName="text-slate-400 lowercase font-mono"
          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
        />
      </div>

      {/* --- RULE BUILDER HEADER SECTION --- */}
      <div className="border border-slate-800/80 rounded-xl p-5 mb-4 shadow-xl">
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-sm font-semibold text-white tracking-wide">
            Rule builder
          </h2>
          <span className="text-xs font-mono text-slate-500 tracking-wider">
            trigger → condition → action
          </span>
        </div>

        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <div className="flex items-center gap-6">
            {/* WHEN Step */}
            <div className="flex flex-col gap-1.5">
              <span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
                WHEN
              </span>
              <Button className="px-3.5 py-1.5 rounded-lg border border-[#2DD4BF]/40 text-[#2DD4BF] text-xs font-mono font-medium transition-colors">
                Trigger event
              </Button>
            </div>

            {/* IF Step */}
            <div className="flex flex-col gap-1.5">
              <span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
                IF
              </span>
              <Button className="px-3.5 py-1.5 rounded-lg border border-slate-700 text-slate-300 text-xs font-mono font-medium transition-colors">
                Condition
              </Button>
            </div>

            {/* THEN Step */}
            <div className="flex flex-col gap-1.5">
              <span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
                THEN
              </span>
              <Button className="px-3.5 py-1.5 rounded-lg border border-[#2DD4BF]/30 text-[#2DD4BF] text-xs font-mono font-medium transition-colors">
                Action
              </Button>
            </div>
          </div>

          {/* Add Step Button */}
          <button className="bg-[#2DD4BF] hover:bg-teal-300 text-[#070D19] font-bold text-xs px-4 py-2.5 rounded-lg flex items-center gap-1.5 transition-colors self-end sm:self-center shadow-sm">
            <Plus className="w-4 h-4 stroke-[3]" />
            <span>Add step</span>
          </button>
        </div>
      </div>

      {/* --- AUTOMATION RULE CARDS LIST --- */}
      <div className="space-y-3">
        {/* Rule 1 */}
        <div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
          <div className="flex items-center gap-4 flex-1 min-w-0">
            <div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
              <span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
            </div>
            <div className="space-y-2 min-w-0 flex-1">
              <h3 className="text-sm font-semibold text-white truncate">
                Auto-dispatch critical breakdowns
              </h3>
              <div className="flex flex-wrap items-center gap-2 text-xs font-mono">
                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
                  WHEN Request raised
                </span>
                <span className="text-slate-600 font-sans">→</span>
                <span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
                  IF Criticality = Critical
                </span>
                <span className="text-slate-600 font-sans">→</span>
                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
                  THEN Assign to on-call M&E + notify supervisor
                </span>
              </div>
            </div>
          </div>
          <div className="flex items-center justify-end md:self-center gap-1 pl-4">
            <div className="text-right font-mono">
              <p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
              <p className="text-[11px] text-slate-500">12 runs</p>
            </div>
          </div>
        </div>

        {/* Rule 2 */}
        <div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
          <div className="flex items-center gap-4 flex-1 min-w-0">
            <div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
              <span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
            </div>
            <div className="space-y-2 min-w-0 flex-1">
              <h3 className="text-sm font-semibold text-white truncate">
                SLA breach escalation
              </h3>
              <div className="flex flex-wrap items-center gap-2 text-xs font-mono">
                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
                  WHEN SLA timer &gt; 90%
                </span>
                <span className="text-slate-600 font-sans">→</span>
                <span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
                  IF Status ≠ Completed
                </span>
                <span className="text-slate-600 font-sans">→</span>
                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
                  THEN Escalate to L2 + email FM lead
                </span>
              </div>
            </div>
          </div>
          <div className="flex items-center justify-end md:self-center gap-1 pl-4">
            <div className="text-right font-mono">
              <p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
              <p className="text-[11px] text-slate-500">5 runs</p>
            </div>
          </div>
        </div>

        {/* Rule 3 */}
        <div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
          <div className="flex items-center gap-4 flex-1 min-w-0">
            <div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
              <span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
            </div>
            <div className="space-y-2 min-w-0 flex-1">
              <h3 className="text-sm font-semibold text-white truncate">
                PPM from health alert
              </h3>
              <div className="flex flex-wrap items-center gap-2 text-xs font-mono">
                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
                  WHEN Asset health &lt; 58
                </span>
                <span className="text-slate-600 font-sans">→</span>
                <span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
                  IF No open PM
                </span>
                <span className="text-slate-600 font-sans">→</span>
                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
                  THEN Raise condition-based PM work order
                </span>
              </div>
            </div>
          </div>
          <div className="flex items-center justify-end md:self-center gap-1 pl-4">
            <div className="text-right font-mono">
              <p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
              <p className="text-[11px] text-slate-500">8 runs</p>
            </div>
          </div>
        </div>

        {/* Rule 4 */}
        <div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
          <div className="flex items-center gap-4 flex-1 min-w-0">
            <div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-slate-700">
              <span className="inline-block h-5 w-5 transform translate-x-0 rounded-full bg-[#070D19] shadow" />
            </div>
            <div className="space-y-2 min-w-0 flex-1">
              <h3 className="text-sm font-semibold text-white truncate">
                Low-stock reorder
              </h3>
              <div className="flex flex-wrap items-center gap-2 text-xs font-mono">
                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
                  WHEN Stock ≤ minimum
                </span>
                <span className="text-slate-600 font-sans">→</span>
                <span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
                  IF Item is consumable
                </span>
                <span className="text-slate-600 font-sans">→</span>
                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
                  THEN Draft purchase request to store
                </span>
              </div>
            </div>
          </div>
          <div className="flex items-center justify-end md:self-center gap-1 pl-4">
            <div className="text-right font-mono">
              <p className="text-xs font-semibold text-slate-400">Paused</p>
              <p className="text-[11px] text-slate-500">0 runs</p>
            </div>
          </div>
        </div>

        {/* Rule 5 */}
        <div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
          <div className="flex items-center gap-4 flex-1 min-w-0">
            <div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
              <span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
            </div>
            <div className="space-y-2 min-w-0 flex-1">
              <h3 className="text-sm font-semibold text-white truncate">
                Visitor pre-approval
              </h3>
              <div className="flex flex-wrap items-center gap-2 text-xs font-mono">
                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
                  WHEN Visitor invited
                </span>
                <span className="text-slate-600 font-sans">→</span>
                <span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
                  IF Host confirmed
                </span>
                <span className="text-slate-600 font-sans">→</span>
                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
                  THEN Issue QR pass + notify security
                </span>
              </div>
            </div>
          </div>
          <div className="flex items-center justify-end md:self-center gap-1 pl-4">
            <div className="text-right font-mono">
              <p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
              <p className="text-[11px] text-slate-500">23 runs</p>
            </div>
          </div>
        </div>
      </div>
<div className="mt-5">
      <InfoBanner 
        boldText='No IT in the loop: ' 
        normalText='operations staff compose these rules directly. Every automation is versioned and reversible — pause any rule with the toggle and the workflow reverts to manual instantly.' 
      />
</div>
    
    </div>
  );
}