import { useState } from "react";
import { 
  Shield, 
  Users, 
  AlertTriangle, 
  ShieldCheck, 
  BarChart3,
  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 { auditLogHeaders, auditLogRows, trustedDeviceHeaders, trustedDeviceRows } from "@/constants/tabledata";


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-[12px] font-bold tracking-widest uppercase font-mono">
            <span className="text-gray-400">PLATFORM</span>
            <span className="text-gray-600">•</span>
            <span className="text-gray-400">SECURITY</span>
          </div>
          <h1 className="text-2xl 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>
  );
}