'use client';

import Link from 'next/link';
import type { User } from '@/types';
import { useRouter } from 'next/navigation';
import MyAssignedJDs from './MyAssignedJDs';
import ProfileCompletionModal from './careers/ProfileCompletionModal';
import CandidateHome from './careers/CandidateHome';

export interface DashboardStats {
  users?: number;
  jobs?: number;
  clients?: number;
}

function displayName(user: User): string {
  if (user.full_name && user.full_name.trim()) return user.full_name.trim();
  const local = user.email.split('@')[0].replace(/[._-]+/g, ' ');
  return local.replace(/\b\w/g, (c) => c.toUpperCase());
}

interface RoleConfig {
  title: string;
  blurb: string;
  icon: React.ReactNode;
  accent: string; // badge classes
  ring: string;   // left accent bar
}

const ROLE_CONFIG: Record<string, RoleConfig> = {
  ADMIN: {
    title: 'Administrator',
    blurb: 'You have full control over users, roles, and system configuration.',
    icon: <i className="fa-solid fa-shield-halved text-rose-500 mr-2"></i>,
    accent: 'text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-950/40 border-rose-200 dark:border-rose-900/50',
    ring: 'from-rose-500 to-orange-500',
  },
  RECRUITER: {
    title: 'Recruiter',
    blurb: 'Manage job descriptions and client companies to drive your hiring pipeline.',
    icon: <i className="fa-solid fa-bullseye text-indigo-500 mr-2"></i>,
    accent: 'text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-950/40 border-indigo-200 dark:border-indigo-900/50',
    ring: 'from-indigo-500 to-purple-500',
  },
  INTERVIEWER: {
    title: 'Interviewer',
    blurb: 'Review job openings and conduct candidate interviews assigned to you.',
    icon: <i className="fa-solid fa-comments text-amber-500 mr-2"></i>,
    accent: 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/40 border-amber-200 dark:border-amber-900/50',
    ring: 'from-amber-500 to-yellow-500',
  },
  CANDIDATE: {
    title: 'Candidate',
    blurb: 'Browse open positions and keep your profile up to date.',
    icon: <i className="fa-solid fa-rocket text-emerald-500 mr-2"></i>,
    accent: 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/40 border-emerald-200 dark:border-emerald-900/50',
    ring: 'from-emerald-500 to-teal-500',
  },
  USER: {
    title: 'User',
    blurb: 'Welcome to the TA-ATS portal.',
    icon: <i className="fa-solid fa-hand text-slate-500 mr-2"></i>,
    accent: 'text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700',
    ring: 'from-slate-500 to-slate-400',
  },
};


interface StatCard { label: string; value: number | string; icon: string; tint: string; path?: string; }
interface StatCard { label: string; value: number | string; icon: string; tint: string; href?: string; }
interface QuickLink { label: string; href: string; desc: string; icon: React.ReactNode; }

// Velzon-style soft tinted icon badges
const T = {
  primary: 'bg-[#405189]/10 text-[#405189]',
  blue: 'bg-[#3577f1]/10 text-[#3577f1]',
  success: 'bg-[#0ab39c]/10 text-[#0ab39c]',
  warning: 'bg-[#f7b84b]/15 text-[#dd9b19]',
};

function buildStats(role: string, stats: DashboardStats): StatCard[] {
  switch (role) {
    case 'ADMIN':
      return [

        { label: 'Total Users', value: stats.users ?? '—', icon: 'fa-solid fa-users', tint: T.primary, path: '/admins/users' },
        { label: 'Roles', value: 4, icon: 'fa-solid fa-key', tint: T.warning, path: '/admins/roles' },
        { label: 'Job Descriptions', value: stats.jobs ?? '—', icon: 'fa-solid fa-briefcase', tint: T.blue, path: '/jobs' },
        { label: 'Clients', value: stats.clients ?? '—', icon: 'fa-solid fa-building', tint: T.success, path: '/clients' },
      ];
    case 'RECRUITER':
      return [
        { label: 'Job Descriptions', value: stats.jobs ?? '—', icon: 'fa-solid fa-briefcase', tint: T.blue, path: '/jobs' },
        { label: 'Clients', value: stats.clients ?? '—', icon: 'fa-solid fa-building', tint: T.success, path: '/clients' },
      ];
    case 'INTERVIEWER':
      return [
        { label: 'Open Jobs', value: stats.jobs ?? '—', icon: 'fa-solid fa-briefcase', tint: T.blue, path: '/jobs' },
        { label: 'Assigned Interviews', value: 'Soon', icon: 'fa-solid fa-comments', tint: T.warning, path: '/jobs' },
      ];
    case 'CANDIDATE':
      // Candidate KPIs are shown as dedicated sections (My Applications, Latest Jobs).
      return [];
    default:
      return [];
  }
}

function buildLinks(role: string): QuickLink[] {
  switch (role) {
    case 'ADMIN':
      return [
        { label: 'User Management', href: '/admins/users', desc: 'Create users & assign roles', icon: <i className="fa-solid fa-users text-2xl"></i> },
        { label: 'Groups & Permissions', href: '/admins/roles', desc: 'Configure access per role', icon: <i className="fa-solid fa-key text-2xl"></i> },
        { label: 'Job Descriptions', href: '/jobs', desc: 'View & manage all jobs', icon: <i className="fa-solid fa-briefcase text-2xl"></i> },
        { label: 'Clients', href: '/clients', desc: 'Manage hiring clients', icon: <i className="fa-solid fa-building text-2xl"></i> },
      ];
    case 'RECRUITER':
      return [
        { label: 'Job Descriptions', href: '/jobs', desc: 'Post & manage openings', icon: <i className="fa-solid fa-briefcase text-2xl"></i> },
        { label: 'Clients', href: '/clients', desc: 'Manage hiring clients', icon: <i className="fa-solid fa-building text-2xl"></i> },
      ];
    case 'INTERVIEWER':
      return [
        { label: 'Job Descriptions', href: '/jobs', desc: 'Review open roles', icon: <i className="fa-solid fa-briefcase text-2xl"></i> },
      ];
    case 'CANDIDATE':
      return [
        { label: 'Browse Jobs', href: '/careers/jobs', desc: 'Find open positions', icon: <i className="fa-solid fa-magnifying-glass text-2xl"></i> },
      ];
    default:
      return [];
  }
}

export default function RoleDashboard({ user, stats }: { user: User; stats: DashboardStats }) {
  const router = useRouter();
  const cfg = ROLE_CONFIG[user.role] || ROLE_CONFIG.USER;
  const statCards = buildStats(user.role, stats);
  const links = buildLinks(user.role);

  // Candidates get a dedicated two-column home (profile + applied JDs | jobs list).
  if (user.role === 'CANDIDATE') {
    return (
      <>
        <ProfileCompletionModal />
        <CandidateHome user={user} />
      </>
    );
  }

  return (
    <div className="space-y-6">
      {/* Welcome banner */}
      <div className="relative overflow-hidden bg-white dark:bg-slate-900 border border-vz-border dark:border-slate-800 rounded-none p-6 shadow-sm">
        <div className={`absolute inset-y-0 left-0 w-1 bg-gradient-to-b ${cfg.ring}`} />
        <div className="flex items-start justify-between gap-4 flex-wrap">
          <div>
            <p className="text-sm text-vz-muted">Welcome back,</p>
            <h2 className="text-xl font-semibold text-[#495057] dark:text-white mt-0.5 flex items-center">
              {cfg.icon}{displayName(user)}
            </h2>
            <p className="text-sm text-vz-muted mt-2 max-w-lg">{cfg.blurb}</p>
          </div>
          <span className={`text-xs tracking-wider font-semibold uppercase px-3 py-1.5 rounded-none border ${cfg.accent}`}>
            {cfg.title} Dashboard
          </span>
        </div>
      </div>

      {/* Stat cards */}
      {statCards.length > 0 && (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {statCards.map((s) => {
            const card = (
              <>
                <div>
                  <p className="text-[11px] uppercase tracking-wider text-vz-muted font-medium">{s.label}</p>
                  <p className="text-2xl font-semibold text-[#495057] dark:text-white mt-1">{s.value}</p>
                </div>
                <span className={`w-11 h-11 rounded-full flex items-center justify-center text-lg shrink-0 ${s.tint}`}>
                  <i className={s.icon}></i>
                </span>
              </>
            );
            const cardCls = 'bg-white dark:bg-slate-900 border border-vz-border dark:border-slate-800 rounded-none p-4 shadow-sm flex items-center justify-between';
            return s.path ? (
              <div
                key={s.label}
                onClick={() => router.push(s.path!)}
                className={`${cardCls} hover:translate-y-[-2px] hover:border-[#405189] cursor-pointer hover:shadow-md transition duration-200`}
              >
                {card}
              </div>
            ) : s.href ? (
              <Link key={s.label} href={s.href} className={`${cardCls} hover:border-[#405189] dark:hover:border-[#405189] hover:shadow-md transition`}>
                {card}
              </Link>
            ) : (
              <div key={s.label} className={cardCls}>
                {card}
              </div>
            );
          })}
        </div>
      )}

      {/* Recruiter: only the JDs assigned to them */}
      {user.role === 'RECRUITER' && <MyAssignedJDs />}

      {/* Quick actions */}
      {links.length > 0 && (
        <div>
          <h3 className="text-xs font-semibold uppercase tracking-wider text-vz-muted mb-3">Quick Actions</h3>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {links.map((l) => (
              <Link
                key={l.href + l.label}
                href={l.href}
                className="group bg-white dark:bg-slate-900 border border-vz-border dark:border-slate-800 rounded-none p-5 shadow-sm hover:border-[#405189] dark:hover:border-[#405189] hover:shadow-md transition"
              >
                <div className="mb-2 text-vz-muted group-hover:text-[#405189] transition-colors">{l.icon}</div>
                <p className="font-medium text-[#495057] dark:text-white group-hover:text-[#405189] transition">{l.label}</p>
                <p className="text-xs text-vz-muted mt-1">{l.desc}</p>
              </Link>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}