import React, { useMemo } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  Activity, Bell, Building2, KeyRound, Shield, User as UserIcon, Users,
  ChevronRight, Sliders,
  ShieldCheck, Server
} from 'lucide-react';
import { Toggle, toast } from '@/components/ds';
import { useAssistantPanel } from '@/components/ai-assistant';
import {
  useJobPostings, usePreferences, useStaff, useUpdatePreferences,
} from '@/lib/krowHooks';
import { AdminPage } from '@/pages/admin/_shell';

/**
 * Admin Settings — Full-width platform configuration control center.
 */

export default function AdminSettings() {
  const navigate = useNavigate();
  const preferences = usePreferences();
  const updatePreferences = useUpdatePreferences();
  const panel = useAssistantPanel();

  const { data: postings = [] } = useJobPostings();
  const { data: staff = [] } = useStaff();

  const clientCount = useMemo(
    () => new Set(postings.map((p) => p.company).filter(Boolean)).size,
    [postings]
  );

  const setPreference = (key, value, message) => {
    updatePreferences.mutate({ [key]: value });
    toast.success(message);
  };

  return (
    <AdminPage
      title="Settings"
      subtitle="Manage your account, organization and system configuration."
    >
      <div className="space-y-6 w-full">
        {/* ── 1. Hero Banner (Full Width) ───────────────────────────────── */}
        <div className="relative overflow-hidden rounded-3xl bg-gradient-to-r from-[#0838E0] via-[#1E40AF] to-[#0284C7] p-6 sm:p-8 text-white shadow-xl w-full">
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-white/15 via-transparent to-transparent pointer-events-none" />
          <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div className="space-y-2">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/20 backdrop-blur-md text-white text-[12px] font-semibold border border-white/30">
                <Sliders className="w-3.5 h-3.5 text-sky-300" />
                Workspace Control Center
              </div>
              <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white">System Settings & Governance</h1>
              <p className="text-[14px] text-blue-100 font-normal max-w-2xl">
                Configure account credentials, access security policies, organizational workforce units, and system automation behavior.
              </p>
            </div>

            <div className="flex items-center gap-3 shrink-0">
              <div className="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/15 min-w-[130px] text-center">
                <p className="text-[11px] uppercase tracking-wider text-blue-200 font-semibold">Active Staff</p>
                <p className="text-2xl font-bold text-white mt-0.5">{staff.length}</p>
                <span className="text-[10px] text-blue-200">On Platform</span>
              </div>
              <div className="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/15 min-w-[130px] text-center">
                <p className="text-[11px] uppercase tracking-wider text-blue-200 font-semibold">Positions</p>
                <p className="text-2xl font-bold text-emerald-300 mt-0.5">{postings.length}</p>
                <span className="text-[10px] text-blue-200">Active Roles</span>
              </div>
              <div className="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/15 min-w-[130px] text-center">
                <p className="text-[11px] uppercase tracking-wider text-blue-200 font-semibold">Clients</p>
                <p className="text-2xl font-bold text-sky-300 mt-0.5">{clientCount}</p>
                <span className="text-[10px] text-blue-200">Organizations</span>
              </div>
            </div>
          </div>
        </div>

        {/* ── 2. Two-Column Full Width Grid ─────────────────────────────── */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
          {/* ── Left Column: Account & Organization ─────────────────────── */}
          <div className="space-y-6">
            {/* Account & Security Card */}
            <div className="bg-white rounded-2xl border border-[#E0E4EA] p-6 shadow-xs space-y-4">
              <div className="flex items-center justify-between border-b border-[#E0E4EA] pb-3">
                <div className="flex items-center gap-2">
                  <UserIcon className="w-5 h-5 text-[#0838E0]" />
                  <h2 className="text-[16px] font-bold text-[#101820]">Account & Security</h2>
                </div>
                <span className="text-[12px] font-semibold text-[#0838E0] bg-blue-50 px-2.5 py-0.5 rounded-full border border-blue-200/60">
                  Personal Credentials
                </span>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <Link
                  to="/admin/profile"
                  className="group p-4 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] hover:border-[#0838E0]/40 hover:shadow-xs transition-all flex items-start gap-3.5"
                >
                  <div className="w-10 h-10 rounded-xl bg-blue-50 text-[#0838E0] flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
                    <UserIcon className="w-5 h-5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <p className="text-[14px] font-bold text-[#101820] group-hover:text-[#0838E0] transition-colors">Profile Details</p>
                      <ChevronRight className="w-4 h-4 text-[#8B94A5] group-hover:text-[#0838E0] group-hover:translate-x-0.5 transition-all" />
                    </div>
                    <p className="text-[12px] text-[#687386] mt-1 leading-relaxed">Your name, email address, and platform identity information.</p>
                  </div>
                </Link>

                <Link
                  to="/admin/profile#security"
                  className="group p-4 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] hover:border-purple-300 hover:shadow-xs transition-all flex items-start gap-3.5"
                >
                  <div className="w-10 h-10 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
                    <KeyRound className="w-5 h-5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <p className="text-[14px] font-bold text-[#101820] group-hover:text-purple-600 transition-colors">Security & 2FA</p>
                      <ChevronRight className="w-4 h-4 text-[#8B94A5] group-hover:text-purple-600 group-hover:translate-x-0.5 transition-all" />
                    </div>
                    <p className="text-[12px] text-[#687386] mt-1 leading-relaxed">Password management, two-factor authentication and active sessions.</p>
                  </div>
                </Link>
              </div>
            </div>

            {/* Organization Management Card */}
            <div className="bg-white rounded-2xl border border-[#E0E4EA] p-6 shadow-xs space-y-4">
              <div className="flex items-center justify-between border-b border-[#E0E4EA] pb-3">
                <div className="flex items-center gap-2">
                  <Building2 className="w-5 h-5 text-indigo-600" />
                  <h2 className="text-[16px] font-bold text-[#101820]">Organization Structure</h2>
                </div>
                <span className="text-[12px] font-semibold text-indigo-600 bg-indigo-50 px-2.5 py-0.5 rounded-full border border-indigo-200/60">
                  Workforce Operations
                </span>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <Link
                  to="/admin/positions"
                  className="group p-4 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] hover:border-indigo-300 hover:shadow-xs transition-all flex items-start gap-3.5"
                >
                  <div className="w-10 h-10 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
                    <Building2 className="w-5 h-5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <p className="text-[14px] font-bold text-[#101820] group-hover:text-indigo-600 transition-colors">Clients & Positions</p>
                      <ChevronRight className="w-4 h-4 text-[#8B94A5] group-hover:text-indigo-600 group-hover:translate-x-0.5 transition-all" />
                    </div>
                    <p className="text-[12px] text-[#687386] mt-1 leading-relaxed">Companies and active positions currently being staffed.</p>
                    <div className="mt-2.5">
                      <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-indigo-700 bg-indigo-50 px-2.5 py-0.5 rounded-md">
                        {clientCount} clients · {postings.length} positions
                      </span>
                    </div>
                  </div>
                </Link>

                <Link
                  to="/admin/profile#perms"
                  className="group p-4 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] hover:border-emerald-300 hover:shadow-xs transition-all flex items-start gap-3.5"
                >
                  <div className="w-10 h-10 rounded-xl bg-emerald-50 text-[#16A765] flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
                    <Users className="w-5 h-5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <p className="text-[14px] font-bold text-[#101820] group-hover:text-[#16A765] transition-colors">Users & Permissions</p>
                      <ChevronRight className="w-4 h-4 text-[#8B94A5] group-hover:text-[#16A765] group-hover:translate-x-0.5 transition-all" />
                    </div>
                    <p className="text-[12px] text-[#687386] mt-1 leading-relaxed">Platform user roles and administrative permission scopes.</p>
                    <div className="mt-2.5">
                      <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-emerald-700 bg-emerald-50 px-2.5 py-0.5 rounded-md">
                        {staff.length} on staff
                      </span>
                    </div>
                  </div>
                </Link>
              </div>
            </div>

            {/* Audit Log Banner */}
            <Link
              to="/admin/activity"
              className="group p-5 rounded-2xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] hover:border-amber-300 hover:shadow-xs transition-all flex items-center justify-between gap-4"
            >
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
                  <Activity className="w-6 h-6" />
                </div>
                <div>
                  <p className="text-[15px] font-bold text-[#101820] group-hover:text-amber-600 transition-colors">Audit & System Activity Log</p>
                  <p className="text-[12px] text-[#687386] mt-0.5">Review all platform administrative actions, login events and security logs.</p>
                </div>
              </div>
              <ChevronRight className="w-5 h-5 text-[#8B94A5] group-hover:text-amber-600 group-hover:translate-x-0.5 transition-all" />
            </Link>
          </div>

          {/* ── Right Column: System Preferences & Governance ──────────────── */}
          <div className="space-y-6">
            {/* System Preferences Card */}
            <div className="bg-white rounded-2xl border border-[#E0E4EA] p-6 shadow-xs space-y-5">
              <div className="flex items-center justify-between border-b border-[#E0E4EA] pb-3">
                <div className="flex items-center gap-2">
                  <Sliders className="w-5 h-5 text-amber-600" />
                  <h2 className="text-[16px] font-bold text-[#101820]">Workspace Preferences</h2>
                </div>
                <span className="text-[12px] font-semibold text-amber-700 bg-amber-50 px-2.5 py-0.5 rounded-full border border-amber-200/60">
                  Automation Controls
                </span>
              </div>

              <div className="p-5 rounded-xl border border-[#E0E4EA] bg-[#F8F8F8]/50 space-y-4">
                <div className="flex items-center gap-2 pb-1">
                  <Bell className="w-4 h-4 text-[#0838E0]" />
                  <p className="text-[13px] font-bold text-[#101820]">Account Behaviors & Notifications</p>
                </div>

                <div className="space-y-4 divide-y divide-[#E0E4EA] pt-1">
                  <div className="pt-3 first:pt-0">
                    <Toggle
                      label="Owliver Workspace Assistant"
                      description="Open the AI contextual panel by default on supported admin pages"
                      checked={preferences.owliverDefault}
                      onCheckedChange={(v) => {
                        if (v) panel.open(); else panel.close();
                        setPreference(
                          'owliverDefault', v,
                          v ? 'Owliver opens by default' : 'Owliver stays collapsed'
                        );
                      }}
                    />
                  </div>

                  <div className="pt-3">
                    <Toggle
                      label="Compact UI Density"
                      description="Tighter table row spacing for high-density monitoring"
                      checked={preferences.compactDensity}
                      onCheckedChange={(v) => setPreference(
                        'compactDensity', v,
                        v ? 'Compact density on' : 'Standard density restored'
                      )}
                    />
                  </div>

                  <div className="pt-3">
                    <Toggle
                      label="Daily Executive Email Digest"
                      description="Automated daily summary of platform applications and actions"
                      checked={preferences.emailDigest}
                      onCheckedChange={(v) => setPreference(
                        'emailDigest', v,
                        v ? 'Daily digest on' : 'Daily digest off'
                      )}
                    />
                  </div>
                </div>
              </div>
            </div>

            {/* Governance & Environment Note Card */}
            <div className="bg-white rounded-2xl border border-[#E0E4EA] p-6 shadow-xs space-y-4">
              <div className="flex items-center gap-2 border-b border-[#E0E4EA] pb-3">
                <Server className="w-5 h-5 text-[#0838E0]" />
                <h2 className="text-[16px] font-bold text-[#101820]">Environment & Compliance</h2>
              </div>

              <dl className="space-y-3 text-[13px]">
                <div className="flex justify-between items-center border-b border-[#F1F4F7] pb-2.5">
                  <dt className="text-[#687386] font-medium">Environment</dt>
                  <dd className="font-semibold text-[#101820] flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-[#16A765]" /> Production (Live)
                  </dd>
                </div>
                <div className="flex justify-between items-center border-b border-[#F1F4F7] pb-2.5">
                  <dt className="text-[#687386] font-medium">Workspace Isolation</dt>
                  <dd className="font-semibold text-[#101820]">Enterprise Tenant #1042</dd>
                </div>
                <div className="flex justify-between items-center">
                  <dt className="text-[#687386] font-medium">Security Standard</dt>
                  <dd className="font-semibold text-[#16A765] inline-flex items-center gap-1">
                    <ShieldCheck className="w-3.5 h-3.5" /> SOC-2 Type II
                  </dd>
                </div>
              </dl>

              <div className="pt-1">
                <div className="flex items-center gap-2 p-3.5 rounded-xl bg-blue-50/60 border border-blue-200/50 text-[#0838E0] text-[12px] font-medium leading-relaxed">
                  <Shield className="w-4 h-4 shrink-0 text-[#0838E0]" />
                  <span>Administrator configurations apply across this entire workspace environment.</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </AdminPage>
  );
}