import React, { useMemo } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import {
  GraduationCap, Sparkles, TrendingUp,
  BookOpen, ArrowRight
} from 'lucide-react';
import { usePreferences } from '@/lib/krowHooks';
import { allSkills } from '@/lib/skills/registry';
import { useWorkforcePaths } from '@/lib/skills/usePageSkills';
import { AdminPage } from '@/pages/admin/_shell';
import { cn } from '@/lib/utils';

/**
 * Workspace & Skills — Full-width workforce capabilities & AI governance hub.
 */

export default function AdminWorkspace() {
  const navigate = useNavigate();
  const preferences = usePreferences();

  /* Owliver's skills from Markdown registry */
  const skills = useMemo(
    () => allSkills(preferences.customSkills || []),
    [preferences.customSkills]
  );
  const disabledSkills = preferences.disabledSkills || [];
  const activeSkills = skills.filter((s) => !disabledSkills.includes(s.id)).length;

  /* Workforce training paths from registry */
  const { paths } = useWorkforcePaths();

  return (
    <AdminPage
      title="Workspace & Skills"
      subtitle="Manage workforce capabilities, Owliver skills and training."
    >
      <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">
                <Sparkles className="w-3.5 h-3.5 text-sky-300" />
                Workforce Intelligence Hub
              </div>
              <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white">Capabilities & Skill Governance</h1>
              <p className="text-[14px] text-blue-100 font-normal max-w-2xl">
                Govern Owliver AI agent capabilities, configure workforce training paths, and track talent progression across your organization.
              </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">Registered Skills</p>
                <p className="text-2xl font-bold text-white mt-0.5">{skills.length}</p>
                <span className="text-[10px] text-emerald-300 font-medium">{activeSkills} Active</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">Training Paths</p>
                <p className="text-2xl font-bold text-sky-300 mt-0.5">{paths.length}</p>
                <span className="text-[10px] text-blue-200">Verified Ladders</span>
              </div>
            </div>
          </div>
        </div>

        {/* ── 2. Full Width 2-Column Grid ───────────────────────────────── */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
          {/* ── Left Column: Owliver AI Capabilities ───────────────────── */}
          <div className="space-y-6">
            <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">
                  <Sparkles className="w-5 h-5 text-[#0838E0]" />
                  <h2 className="text-[16px] font-bold text-[#101820]">Owliver AI Capabilities</h2>
                </div>
                <span className="text-[12px] font-semibold text-[#0838E0] bg-blue-50 px-3 py-1 rounded-full border border-blue-200/60">
                  {skills.length} Registered · {activeSkills} Active
                </span>
              </div>

              <p className="text-[13px] text-[#687386]">
                Owliver capabilities define what the AI assistant can execute autonomously during candidate screening, background matching, and contextual analysis.
              </p>

              {/* Skills Sample List */}
              <div className="space-y-3">
                {skills.slice(0, 4).map((s) => {
                  const isActive = !disabledSkills.includes(s.id);
                  return (
                    <div key={s.id} className="p-3.5 rounded-xl border border-[#E0E4EA] bg-[#F8F8F8]/50 flex items-center justify-between gap-3">
                      <div className="min-w-0 flex-1">
                        <p className="text-[13px] font-bold text-[#101820]">{s.name || s.id}</p>
                        {s.description && <p className="text-[12px] text-[#687386] truncate mt-0.5">{s.description}</p>}
                      </div>
                      <span className={cn(
                        'px-2.5 py-0.5 rounded-full text-[11px] font-semibold shrink-0',
                        isActive ? 'bg-emerald-50 text-[#16A765] border border-emerald-200' : 'bg-gray-100 text-gray-500'
                      )}>
                        {isActive ? 'Active' : 'Disabled'}
                      </span>
                    </div>
                  );
                })}
              </div>

              {/* CTA Button */}
              <div className="pt-2">
                <Link
                  to="/admin/workspace/skills"
                  className="w-full inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-[#0838E0] hover:bg-[#062BAF] text-white text-[13px] font-semibold transition-all shadow-md shadow-blue-500/20 hover:scale-[1.01]"
                >
                  <Sparkles className="w-4 h-4" />
                  Manage Owliver Skills & Agent Capabilities
                  <ArrowRight className="w-4 h-4" />
                </Link>
              </div>
            </div>
          </div>

          {/* ── Right Column: Workforce Training & Skill Development ──────── */}
          <div className="space-y-6">
            {/* Workforce Training */}
            <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">
                  <GraduationCap className="w-5 h-5 text-indigo-600" />
                  <h2 className="text-[16px] font-bold text-[#101820]">Workforce Training Paths</h2>
                </div>
                <span className="text-[12px] font-semibold text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full border border-indigo-200/60">
                  {paths.length} Active Paths
                </span>
              </div>

              <p className="text-[13px] text-[#687386]">
                Structured learning challenges and skill verification ladders where workforce candidates prove their real-world capabilities.
              </p>

              {/* Paths Sample List */}
              <div className="space-y-3">
                {paths.slice(0, 3).map((p) => (
                  <div key={p.id} className="p-3.5 rounded-xl border border-[#E0E4EA] bg-[#F8F8F8]/50 flex items-center justify-between gap-3">
                    <div className="min-w-0 flex-1">
                      <p className="text-[13px] font-bold text-[#101820]">{p.name || p.id}</p>
                      {p.category && <p className="text-[12px] text-[#687386] capitalize mt-0.5">{p.category} Path</p>}
                    </div>
                    <span className="px-2.5 py-0.5 rounded-full bg-indigo-50 text-indigo-700 text-[11px] font-semibold border border-indigo-200">
                      Verified Path
                    </span>
                  </div>
                ))}
              </div>

              {/* CTA Button */}
              <div className="pt-2">
                <Link
                  to="/admin/university"
                  className="w-full inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] text-[#101820] text-[13px] font-semibold transition-all shadow-xs"
                >
                  <GraduationCap className="w-4 h-4 text-indigo-600" />
                  Manage Training Paths & Proving Challenges
                  <ArrowRight className="w-4 h-4" />
                </Link>
              </div>
            </div>

            {/* Skill Development */}
            <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">
                  <TrendingUp className="w-5 h-5 text-[#16A765]" />
                  <h2 className="text-[16px] font-bold text-[#101820]">Skill Progression Tracking</h2>
                </div>
                <span className="text-[12px] font-semibold text-[#16A765] bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200/60">
                  Live Analytics
                </span>
              </div>

              <p className="text-[13px] text-[#687386]">
                Track talent advancement across training paths, verified levels, and candidate endorsement histories.
              </p>

              <div className="pt-2">
                <Link
                  to="/admin/workspace/skill-development"
                  className="w-full inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] text-[#101820] text-[13px] font-semibold transition-all shadow-xs"
                >
                  <TrendingUp className="w-4 h-4 text-[#16A765]" />
                  View Skill Progression & Talent Growth
                  <ArrowRight className="w-4 h-4" />
                </Link>
              </div>
            </div>
          </div>
        </div>

        {/* ── 3. Unified Registry Architecture Banner ───────────────────── */}
        <div className="flex items-start gap-3.5 p-5 rounded-2xl bg-blue-50/60 border border-blue-200/50 text-[#0838E0] text-[13px] leading-relaxed">
          <BookOpen className="w-5 h-5 shrink-0 text-[#0838E0] mt-0.5" />
          <div>
            <p className="font-bold text-[#101820]">Unified Markdown Registry Architecture</p>
            <p className="text-[#687386] mt-0.5">
              Skills define what Owliver can execute autonomously. Training paths define what the human workforce can be verified in. Both are defined as structured Markdown in one central registry, keeping candidate evaluation and skill progression seamlessly synchronized.
            </p>
          </div>
        </div>
      </div>
    </AdminPage>
  );
}