'use client';

import { useEffect, useState } from 'react';

// Fixed demo/seed accounts — kept as a frontend constant on purpose (do not
// fetch from the API). Add new seeded demo users here.
export const DEMO_PASSWORD = 'ats@2468';

export const DEMO_ACCOUNTS: { role: string; email: string }[] = [
  { role: 'Admin', email: 'ats@admin.com' },
  { role: 'Hiring Manager', email: 'ats@hiringmanager.com' },
  { role: 'Project Manager', email: 'ats@projectmanager.com' },
  { role: 'Recruiter', email: 'ats@recruiter.com' },
  { role: 'Interviewer', email: 'ats@interviewer.com' },
  { role: 'Candidate', email: 'ats@candidate.com' },
];

interface DemoCredentialsModalProps {
  isOpen: boolean;
  onClose: () => void;
  /** Called when the user clicks "Use" on an account. Fills the login form; never auto-submits. */
  onUse: (email: string, password: string) => void;
}

export default function DemoCredentialsModal({ isOpen, onClose, onUse }: DemoCredentialsModalProps) {
  const [copiedKey, setCopiedKey] = useState<string | null>(null);

  useEffect(() => {
    if (!isOpen) return;
    const handleEscapeKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handleEscapeKey);
    return () => window.removeEventListener('keydown', handleEscapeKey);
  }, [isOpen, onClose]);

  useEffect(() => {
    if (!isOpen) setCopiedKey(null);
  }, [isOpen]);

  if (!isOpen) return null;

  const copy = async (key: string, text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopiedKey(key);
      setTimeout(() => setCopiedKey((k) => (k === key ? null : k)), 1500);
    } catch {
      /* Clipboard unavailable (e.g. insecure context) — silently ignore */
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="fixed inset-0 bg-slate-950/40 backdrop-blur-sm" onClick={onClose} />

      <div className="bg-white border border-slate-200 rounded-none shadow-2xl w-full max-w-lg max-h-[90vh] flex flex-col relative z-10">
        {/* Header */}
        <div className="bg-gradient-to-r from-slate-50 to-slate-100 border-b border-slate-200 px-5 py-4 flex items-center justify-between flex-shrink-0">
          <div className="flex items-center gap-3">
            <h2 className="text-lg font-semibold text-[#232a45]">Demo Accounts</h2>
            <span className="text-[10px] tracking-widest font-black uppercase px-2 py-0.5 rounded-none border text-amber-600 bg-amber-50 border-amber-200">
              Demo
            </span>
          </div>
          <button onClick={onClose} className="text-slate-400 hover:text-slate-600 text-2xl font-light transition cursor-pointer" title="Close (Esc)">✕</button>
        </div>

        {/* Body */}
        <div className="overflow-y-auto px-5 py-4">
          <p className="text-xs text-slate-500 mb-4">
            These are the seeded demo account emails. Click <span className="font-semibold text-[#405189]">Use</span> to fill both email and password into the login form.
          </p>

          <div className="border border-slate-200 divide-y divide-slate-100">
            {DEMO_ACCOUNTS.map((acc) => (
              <div key={acc.email} className="flex items-center gap-3 px-3.5 py-2.5">
                <div className="flex-1 min-w-0">
                  <div className="text-xs font-semibold text-[#232a45]">{acc.role}</div>
                  <div className="text-xs text-slate-500 truncate">{acc.email}</div>
                </div>
                <button
                  type="button"
                  onClick={() => copy(acc.email, acc.email)}
                  className="text-slate-400 hover:text-[#405189] transition cursor-pointer p-1.5"
                  title="Copy email"
                >
                  <i className={copiedKey === acc.email ? 'fa-solid fa-check text-emerald-500' : 'fa-regular fa-copy'}></i>
                </button>
                <button
                  type="button"
                  onClick={() => { onUse(acc.email, DEMO_PASSWORD); onClose(); }}
                  className="text-xs font-medium text-white bg-[#405189] hover:bg-[#364574] px-3 py-1.5 rounded-none transition cursor-pointer"
                >
                  Use
                </button>
              </div>
            ))}
          </div>

          {/* Common Password Box */}
          <div className="mt-4 p-3 bg-amber-50/60 border border-amber-200/80 rounded-none flex items-center justify-between">
            <div className="flex items-center gap-2.5">
              <div className="w-7 h-7 rounded-none bg-amber-100 border border-amber-200 text-amber-700 flex items-center justify-center text-xs flex-shrink-0">
                <i className="fa-solid fa-key"></i>
              </div>
              <div>
                <div className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">Common Password</div>
                <div className="text-xs font-mono font-bold text-[#232a45] mt-0.5 select-all">
                  {DEMO_PASSWORD}
                </div>
              </div>
            </div>
            <button
              type="button"
              onClick={() => copy('password', DEMO_PASSWORD)}
              className="text-xs text-[#405189] hover:text-[#364574] transition cursor-pointer font-medium px-2.5 py-1 bg-white border border-slate-200 hover:border-slate-300 flex items-center gap-1.5 shadow-2xs"
              title="Copy password"
            >
              <i className={copiedKey === 'password' ? 'fa-solid fa-check text-emerald-500' : 'fa-regular fa-copy text-slate-400'}></i>
              <span>{copiedKey === 'password' ? 'Copied' : 'Copy'}</span>
            </button>
          </div>
        </div>

        {/* Footer */}
        <div className="border-t border-slate-200 px-5 py-3 flex justify-end flex-shrink-0">
          <button
            onClick={onClose}
            className="text-sm text-slate-600 hover:text-slate-800 border border-slate-200 hover:border-slate-300 px-4 py-2 rounded-none transition cursor-pointer"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
}