import { CheckCircle2 } from 'lucide-react';
import type { AppFooterProps } from '@/business/app-shell/types';
import {
  CORE_FOOTER_LINKS,
  OPERATIONS_FOOTER_LINKS,
  PLATFORM_FOOTER_ITEMS,
} from '@/shared/constants/footerNavigation';

export function AppFooter({
  userName,
  userRole,
  setCurrentModule,
}: AppFooterProps) {
  return (
    <footer className="mt-12 pb-6">
      <div className="max-w-7xl mx-auto">
        <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-6 md:p-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="md:col-span-1">
              <div className="flex items-center gap-2 mb-3">
                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-amber-400 flex items-center justify-center shadow-lg shadow-violet-500/20">
                  <span className="text-white font-bold text-sm">F</span>
                </div>
                <span className="font-bold text-lg bg-gradient-to-r from-violet-400 to-amber-400 bg-clip-text text-transparent">
                  FRAMEworks
                </span>
              </div>
              <p className="text-xs text-slate-500 leading-relaxed">
                A modular, role-based school operations platform designed for autism-focused educational environments.
              </p>
            </div>
            <div>
              <h4 className="font-semibold text-sm text-slate-300 mb-3">Core Modules</h4>
              <ul className="space-y-1.5">
                {CORE_FOOTER_LINKS.map((item) => (
                  <li key={item.label}>
                    <button
                      onClick={() => setCurrentModule(item.moduleId)}
                      className="text-xs text-slate-500 hover:text-violet-400 transition-colors"
                    >
                      {item.label}
                    </button>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-sm text-slate-300 mb-3">Operations</h4>
              <ul className="space-y-1.5">
                {OPERATIONS_FOOTER_LINKS.map((item) => (
                  <li key={item.label}>
                    <button
                      onClick={() => setCurrentModule(item.moduleId)}
                      className="text-xs text-slate-500 hover:text-violet-400 transition-colors"
                    >
                      {item.label}
                    </button>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-sm text-slate-300 mb-3">Platform</h4>
              <ul className="space-y-1.5">
                {PLATFORM_FOOTER_ITEMS.map((item) => (
                  <li key={item} className="text-xs text-slate-500">{item}</li>
                ))}
              </ul>
            </div>
          </div>
          <div className="mt-6 pt-4 border-t border-slate-700/40 flex flex-col md:flex-row items-center justify-between gap-2">
            <p className="text-[10px] text-slate-600">
              FRAMEworks &copy; 2026 - Built for autism-focused school communities
            </p>
            <div className="flex items-center gap-2">
              <CheckCircle2 size={10} className="text-emerald-500" />
              <span className="text-[10px] text-slate-600">
                {`Signed in as ${userName} (${userRole})`}
              </span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
