'use client';
import { useState } from 'react';
import { disciplinaryCases as initialCases, DisciplinaryCase } from './disciplinaryData';
import DisciplinaryDashboard from './DisciplinaryDashboard';
import CaseRegisterTab from './CaseRegisterTab';
import NewCaseModal from './NewCaseModal';
import CaseDetailModal from './CaseDetailModal';
import EditCaseModal from './EditCaseModal';
import DeleteConfirmModal from './DeleteConfirmModal';
import { useAuth } from '../../../lib/authContext';

export default function DisciplinaryContent() {
  const { user } = useAuth();
  const [cases, setCases] = useState<DisciplinaryCase[]>(initialCases);
  const [severityFilter, setSeverityFilter] = useState('All');
  const [showNew, setShowNew] = useState(false);
  const [viewCase, setViewCase] = useState<DisciplinaryCase | null>(null);
  const [editCase, setEditCase] = useState<DisciplinaryCase | null>(null);
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [showRegister, setShowRegister] = useState(false);

  const role = user?.role || 'employee';
  const isHRAdmin = role === 'hr' || role === 'admin';
  const isPrivilegedUser = isHRAdmin;
  const canSeeConfidential = isHRAdmin;
  const canEditDelete = isHRAdmin;
  const currentUser = user?.name || 'Unknown';
  const currentUserRole = role === 'hr' ? 'HR' : role === 'admin' ? 'Admin' : 'Employee';

  const handleSaveNew = (c: DisciplinaryCase) => {
    setCases(prev => [c, ...prev]);
    setShowNew(false);
  };

  const handleSaveEdit = (c: DisciplinaryCase) => {
    setCases(prev => prev.map(x => x.id === c.id ? c : x));
    setEditCase(null);
    setViewCase(c);
  };

  const handleDelete = (id: string) => {
    setCases(prev => prev.filter(c => c.id !== id));
    setDeleteId(null);
    setViewCase(null);
  };

  const handleFilterSeverity = (s: string) => {
    setSeverityFilter(prev => prev === s ? 'All' : s);
    setShowRegister(true);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="p-6">
        <DisciplinaryDashboard
          cases={cases}
          onFilterSeverity={handleFilterSeverity}
          activeFilter={severityFilter}
          onNew={() => setShowNew(true)}
          onViewRegister={() => setShowRegister(true)}
        />

        {showRegister && (
          <div className="bg-white rounded-2xl shadow-sm border overflow-hidden" style={{ borderColor: '#E9D5F5' }}>
            <div className="flex items-center justify-between px-5 py-4 border-b" style={{ borderColor: '#E9D5F5', background: '#F9E6F5' }}>
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 flex items-center justify-center rounded-lg" style={{ background: '#E9D5F5' }}>
                  <i className="ri-file-list-3-line text-lg" style={{ color: '#B22698' }}></i>
                </div>
                <div>
                  <h2 className="font-bold text-gray-800">Case Register</h2>
                  <p className="text-xs text-gray-500">{cases.length} total cases</p>
                </div>
              </div>
              <button onClick={() => setShowRegister(false)}
                className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 cursor-pointer">
                <i className="ri-close-line text-gray-500 text-lg"></i>
              </button>
            </div>
            <div className="p-5">
              <CaseRegisterTab
                cases={cases}
                onView={c => setViewCase(c)}
                onNew={() => setShowNew(true)}
                severityFilter={severityFilter}
                onSeverityFilter={setSeverityFilter}
                canSeeConfidential={canSeeConfidential}
                currentUserId={currentUser}
              />
            </div>
          </div>
        )}

        {!showRegister && (
          <div className="bg-white rounded-2xl shadow-sm border p-5" style={{ borderColor: '#E9D5F5' }}>
            <CaseRegisterTab
              cases={cases}
              onView={c => setViewCase(c)}
              onNew={() => setShowNew(true)}
              severityFilter={severityFilter}
              onSeverityFilter={setSeverityFilter}
              canSeeConfidential={canSeeConfidential}
              currentUserId={currentUser}
            />
          </div>
        )}
      </div>

      {showNew && (
        <NewCaseModal
          onClose={() => setShowNew(false)}
          onSave={handleSaveNew}
          isPrivilegedUser={isPrivilegedUser}
          currentUser={currentUser}
          currentUserRole={currentUserRole}
        />
      )}

      {viewCase && !editCase && (
        <CaseDetailModal
          caseData={viewCase}
          onClose={() => setViewCase(null)}
          onEdit={c => { setEditCase(c); setViewCase(null); }}
          onDelete={id => { setDeleteId(id); setViewCase(null); }}
          canEditDelete={canEditDelete}
        />
      )}

      {editCase && (
        <EditCaseModal
          caseData={editCase}
          onClose={() => setEditCase(null)}
          onSave={handleSaveEdit}
        />
      )}

      {deleteId && (
        <DeleteConfirmModal
          caseNumber={cases.find(c => c.id === deleteId)?.caseNumber || ''}
          onConfirm={() => handleDelete(deleteId)}
          onCancel={() => setDeleteId(null)}
        />
      )}
    </div>
  );
}