import { useState } from "react";
import { 
  Shield, 
  Users, 
  AlertTriangle, 
  ShieldCheck, 
  BarChart3,
  Sparkles,
  ChevronDown
} 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 { StatusBadge } from "@/components/common/statusBadge";

export const trustedDeviceHeaders = [
  "USER",
  "DEVICE",
  "IP",
  "LAST SEEN",
  "EXPIRES",
  "STATUS",
  "ACTIONS",
];

export const trustedDeviceRows = [
  [
    <span className="font-semibold text-white">Dhananjay T.</span>,
    "Chrome 126 · Windows 11",
    <span className="font-mono">103.212.14.8</span>,
    <span className="font-mono">Today, 08:12</span>,
    <span className="font-mono">Jul 30, 2026</span>,
    <StatusBadge
      text="TRUSTED"
      color="bg-emerald-500/15 text-emerald-400"
    />,
    <Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
      Revoke
    </Button>,
  ],

  [
    <span className="font-semibold text-white">Kavya Raghunathan</span>,
    "Safari 18 · macOS",
    <span className="font-mono">49.37.201.55</span>,
    <span className="font-mono">Yesterday, 17:40</span>,
    <span className="font-mono">Jul 21, 2026</span>,
    <StatusBadge
      text="TRUSTED"
      color="bg-emerald-500/15 text-emerald-400"
    />,
    <Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
      Revoke
    </Button>,
  ],

  [
    <span className="font-semibold text-white">Rahul Iyer</span>,
    "KAFM Mobile · Android 15",
    <span className="font-mono">152.58.33.104</span>,
    <span className="font-mono">Today, 06:58</span>,
    <span className="font-mono">Jul 12, 2026</span>,
    <StatusBadge
      text="TRUSTED"
      color="bg-emerald-500/15 text-emerald-400"
    />,
    <Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
      Revoke
    </Button>,
  ],

  [
    <span className="font-semibold text-white">Meera Pillai</span>,
    "Edge 126 · Windows 10",
    <span className="font-mono">103.212.14.31</span>,
    <span className="font-mono">Jun 18, 2026</span>,
    <span className="font-mono text-slate-400">Expired</span>,
    <StatusBadge
      text="REVOKED"
      color="bg-slate-700/50 text-slate-400"
    />,
    <span className="text-slate-500 text-center">—</span>,
  ],
];

export const auditLogHeaders = [
  "WHEN",
  "USER",
  "EVENT",
  "IP",
  "RESULT",
];

export const auditLogRows = [
  [
    <span className="font-mono text-slate-300">Today 08:12</span>,
    <span className="font-mono text-slate-300">dhananjay@kafm.io</span>,
    <span className="text-slate-200">Sign-in · password + MFA</span>,
    <span className="font-mono text-slate-300">103.212.14.8</span>,
    <StatusBadge
      text="OK"
      color="bg-emerald-500/15 text-emerald-400"
    />,
  ],

  [
    <span className="font-mono text-slate-300">Today 07:56</span>,
    <span className="font-mono text-slate-300">kavya@kafm.io</span>,
    <span className="text-slate-200">
      Role changed · Technician → M&E Supervisor
    </span>,
    <span className="font-mono text-slate-300">49.37.201.55</span>,
    <StatusBadge
      text="OK"
      color="bg-emerald-500/15 text-emerald-400"
    />,
  ],

  [
    <span className="font-mono text-slate-300">Today 07:31</span>,
    <span className="font-mono text-slate-300">unknown@ext.net</span>,
    <span className="text-slate-200">
      Sign-in · wrong password (3rd attempt)
    </span>,
    <span className="font-mono text-slate-300">91.240.118.7</span>,
    <StatusBadge
      text="FAILED"
      color="bg-rose-500/15 text-rose-400"
    />,
  ],

  [
    <span className="font-mono text-slate-300">Today 06:58</span>,
    <span className="font-mono text-slate-300">rahul@kafm.io</span>,
    <span className="text-slate-200">
      Device trusted · KAFM Mobile (30 days)
    </span>,
    <span className="font-mono text-slate-300">152.58.33.104</span>,
    <StatusBadge
      text="OK"
      color="bg-emerald-500/15 text-emerald-400"
    />,
  ],

  [
    <span className="font-mono text-slate-300">Yesterday 17:40</span>,
    <span className="font-mono text-slate-300">kavya@kafm.io</span>,
    <span className="text-slate-200">
      Password reset · self-service link
    </span>,
    <span className="font-mono text-slate-300">49.37.201.55</span>,
    <StatusBadge
      text="OK"
      color="bg-emerald-500/15 text-emerald-400"
    />,
  ],

  [
    <span className="font-mono text-slate-300">Yesterday 14:05</span>,
    <span className="font-mono text-slate-300">meera@kafm.io</span>,
    <span className="text-slate-200">
      MFA reset by admin · device revoked
    </span>,
    <span className="font-mono text-slate-300">103.212.14.31</span>,
    <StatusBadge
      text="PENDING"
      color="bg-amber-500/15 text-amber-400"
    />,
  ],

  [
    <span className="font-mono text-slate-300">Jun 30 09:12</span>,
    <span className="font-mono text-slate-300">admin@kafm.io</span>,
    <span className="text-slate-200">
      Sign-in policy updated · idle timeout 30 min
    </span>,
    <span className="font-mono text-slate-300">103.212.14.8</span>,
    <StatusBadge
      text="OK"
      color="bg-emerald-500/15 text-emerald-400"
    />,
  ],
];

export default function SecurityPortal() {
  const [enforceMfa, setEnforceMfa] = useState(true);
  const [keepMeSignedIn, setKeepMeSignedIn] = useState(true);
  const [reAuthenticate, setReAuthenticate] = useState(false);

  return (
    <div className="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-[10px] font-bold tracking-widest uppercase font-mono">
            <span className="text-teal-400">PLATFORM</span>
            <span className="text-slate-500">•</span>
            <span className="text-slate-500">SECURITY</span>
          </div>
          <h1 className="text-3xl font-bold text-white tracking-tight mt-1">
            Security & sessions
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
            Platform-wide sign-in policy, trusted devices and the immutable authentication audit trail. Sign-ins, MFA, resets and policy changes are logged automatically.
          </p>
        </div>

        {/* --- HEADER BUTTONS --- */}
        <div className="flex items-center gap-3 self-start md:mt-2">
          <Button className="bg-slate-900/80 hover:bg-slate-800 text-slate-200 border border-slate-700/60 text-xs px-4 py-2.5 rounded-lg flex items-center gap-2 font-semibold transition-colors">
            <BarChart3 className="w-4 h-4 text-slate-300" />
            <span>Export log</span>
          </Button>

          <Button className="bg-emerald-400 hover:bg-emerald-300 text-slate-950 font-semibold text-xs px-4 py-2.5 rounded-lg flex items-center gap-2 transition-colors shadow-lg shadow-emerald-500/10">
            <span>Publish policy</span>
          </Button>
        </div>
      </div>

      {/* --- STAT CARDS --- */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <StatCard
          variant="icon"
          title="MFA coverage"
          value="83%"
          icon={Shield}
          badgeText="of platform users"
          badgeClassName="text-amber-400 lowercase font-mono"
          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
        />

        <StatCard
          variant="icon"
          title="Active sessions"
          value="12"
          icon={Users}
          badgeText="right now"
          badgeClassName="text-slate-400 lowercase font-mono"
          iconContainerClassName="bg-slate-800/50 border-slate-700/40 text-sky-400"
        />

        <StatCard
          variant="icon"
          title="Failed sign-ins"
          value="3"
          icon={AlertTriangle}
          badgeText="last 24 h"
          badgeClassName="text-rose-400 lowercase font-mono"
          iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
        />

        <StatCard
          variant="icon"
          title="Trusted devices"
          value="3"
          icon={ShieldCheck}
          badgeText="MFA skipped"
          badgeClassName="text-slate-400 lowercase font-mono"
          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
        />
      </div>

      {/* --- TOP GRID SECTION: AUDIT LOG + SIGN-IN POLICY --- */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-6">
        
        {/* --- LEFT: AUDIT LOG TABLE CONTAINER --- */}
        <div className="lg:col-span-8 bg-slate-900/60 border border-slate-800/80 rounded-xl p-5 flex flex-col justify-between space-y-4">
          <div>
            <div className="mb-4">
              <h2 className="text-base font-semibold text-white tracking-tight">
                Authentication audit trail
              </h2>
              <div className="flex items-center gap-2 text-[11px] font-mono text-slate-400 mt-0.5">
                <span>immutable</span>
                <span>•</span>
                <span>90-day retention</span>
              </div>
            </div>

            {/* AUDIT LOG TABLE */}
            <Table headers={auditLogHeaders} rows={auditLogRows} />
          </div>
        </div>

        {/* --- RIGHT: SIGN-IN POLICY PANEL --- */}
        <div className="lg:col-span-4 bg-slate-900/60 border border-slate-800/80 rounded-xl p-5 space-y-6">
          <h2 className="text-base font-semibold text-white tracking-tight">
            Sign-in policy
          </h2>

          <div className="space-y-6 text-sm">
            {/* Toggle 1: Enforce MFA */}
            <div className="flex items-center justify-between gap-4">
              <div>
                <p className="font-semibold text-slate-100">Enforce MFA for all users</p>
                <p className="text-xs text-slate-400 leading-snug mt-0.5">
                  6-digit code required on every untrusted device
                </p>
              </div>
              <button 
                onClick={() => setEnforceMfa(!enforceMfa)}
                className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${enforceMfa ? 'bg-teal-400' : 'bg-slate-800'}`}
              >
                <span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${enforceMfa ? 'translate-x-5' : 'translate-x-0'}`} />
              </button>
            </div>

            {/* Select 1: Idle Session Timeout */}
            <div className="flex items-center justify-between gap-4">
              <div>
                <p className="font-semibold text-slate-100">Idle session timeout</p>
                <p className="text-xs text-slate-400 leading-snug mt-0.5">
                  Auto sign-out after inactivity
                </p>
              </div>
              <div className="relative shrink-0">
                <select className="appearance-none bg-slate-950/80 border border-slate-800 rounded-lg pl-3 pr-8 py-1.5 text-xs text-slate-200 font-medium focus:outline-none focus:border-slate-700 cursor-pointer">
                  <option value="30">30 minutes</option>
                  <option value="15">15 minutes</option>
                  <option value="60">1 hour</option>
                </select>
                <ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400 pointer-events-none" />
              </div>
            </div>

            {/* Toggle 2: Keep me signed in */}
            <div className="flex items-center justify-between gap-4">
              <div>
                <p className="font-semibold text-slate-100">“Keep me signed in” by default</p>
                <p className="text-xs text-slate-400 leading-snug mt-0.5">
                  Pre-checks the persistent-session option at sign-in
                </p>
              </div>
              <button 
                onClick={() => setKeepMeSignedIn(!keepMeSignedIn)}
                className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${keepMeSignedIn ? 'bg-teal-400' : 'bg-slate-800'}`}
              >
                <span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${keepMeSignedIn ? 'translate-x-5' : 'translate-x-0'}`} />
              </button>
            </div>

            {/* Toggle 3: Re-authenticate */}
            <div className="flex items-center justify-between gap-4">
              <div>
                <p className="font-semibold text-slate-100">Re-authenticate for sensitive actions</p>
                <p className="text-xs text-slate-400 leading-snug mt-0.5">
                  Password prompt before user, role or policy changes
                </p>
              </div>
              <button 
                onClick={() => setReAuthenticate(!reAuthenticate)}
                className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${reAuthenticate ? 'bg-teal-400' : 'bg-slate-800'}`}
              >
                <span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${reAuthenticate ? 'translate-x-5' : 'translate-x-0'}`} />
              </button>
            </div>

            {/* Select 2: Trusted device window */}
            <div className="flex items-center justify-between gap-4">
              <div>
                <p className="font-semibold text-slate-100">Trusted device window</p>
                <p className="text-xs text-slate-400 leading-snug mt-0.5">
                  Days MFA is skipped on a trusted device
                </p>
              </div>
              <div className="relative shrink-0">
                <select className="appearance-none bg-slate-950/80 border border-slate-800 rounded-lg pl-3 pr-8 py-1.5 text-xs text-slate-200 font-medium focus:outline-none focus:border-slate-700 cursor-pointer">
                  <option value="30">30</option>
                  <option value="60">60</option>
                  <option value="90">90</option>
                </select>
                <ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400 pointer-events-none" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* --- BOTTOM SECTION: TRUSTED DEVICES TABLE CONTAINER --- */}
      <div className="bg-slate-900/60 border border-slate-800/80 rounded-xl p-5 mb-6 space-y-4">
        <div className="flex items-start justify-between">
          <div>
            <h2 className="text-base font-semibold text-white tracking-tight">
              Trusted devices
            </h2>
            <p className="text-[11px] font-mono text-slate-400 mt-0.5">
              MFA skipped until expiry
            </p>
          </div>
          <Button className="rounded-md border border-slate-700/80 bg-slate-800/50 px-3.5 py-1.5 text-xs font-semibold text-slate-200 hover:bg-slate-800 transition-colors">
            Revoke all
          </Button>
        </div>

        {/* TRUSTED DEVICES TABLE */}
        <Table headers={trustedDeviceHeaders} rows={trustedDeviceRows} />

        <p className="text-xs text-slate-400 pt-1">
          Revoking forces MFA on the next sign-in from that device. Password changes revoke all devices automatically.
        </p>
      </div>

      {/* --- INFO BANNER --- */}
      <div className="mt-6">
        <InfoBanner 
          boldText='Every event is logged:' 
          normalText='the audit trail above updates live — try signing out and back in, requesting a password reset, or trusting a device on the login screen.' 
        />
      </div>

    
    </div>
  );
}