// app/admin/jobs/page.tsx

'use client';

import { useState } from 'react';
import {
  Search,
  Filter,
  Eye,
  Ban,
  CheckCircle,
  XCircle,
  Clock,
  MapPin,
  Calendar,
  DollarSign,
  Download,
  ChevronLeft,
  ChevronRight,
  X,
  MessageCircle,
  Flag,
  User,
  Briefcase,
  AlertCircle,
  Check,
  ThumbsUp,
  ThumbsDown,
} from 'lucide-react';

// Mock data for jobs
const jobsData = [
  {
    id: 'JOB-001',
    title: 'Caregiver needed for elderly mother',
    description: 'Looking for a compassionate caregiver for my 75-year-old mother who needs assistance with daily activities, bathing, and companionship. Must be patient and reliable.',
    seekerName: 'Sarah Johnson',
    seekerId: 1,
    seekerEmail: 'sarah.johnson@example.com',
    location: 'Brooklyn, NY 11201',
    budget: 25,
    hoursPerWeek: 20,
    careType: 'Personal Care',
    schedule: 'Weekdays, 10am-2pm',
    isUrgent: true,
    postedDate: '2025-04-08',
    status: 'active',
    proposalsCount: 5,
    assignedProvider: null,
    disputeStatus: null,
    disputeReason: null,
  },
  {
    id: 'JOB-002',
    title: 'Companion for senior father',
    description: 'Need a friendly companion to spend time with my father, play cards, watch TV, and take short walks.',
    seekerName: 'Robert Chen',
    seekerId: 2,
    seekerEmail: 'robert.chen@example.com',
    location: 'Manhattan, NY 10001',
    budget: 20,
    hoursPerWeek: 15,
    careType: 'Companionship',
    schedule: 'Afternoon, 1pm-5pm',
    isUrgent: false,
    postedDate: '2025-04-07',
    status: 'active',
    proposalsCount: 3,
    assignedProvider: null,
    disputeStatus: null,
    disputeReason: null,
  },
  {
    id: 'JOB-003',
    title: 'Memory care specialist needed',
    description: 'Seeking experienced caregiver for Alzheimer\'s patient. Must have memory care training and patience.',
    seekerName: 'Emily Davis',
    seekerId: 3,
    seekerEmail: 'emily.davis@example.com',
    location: 'Queens, NY 11354',
    budget: 30,
    hoursPerWeek: 10,
    careType: 'Memory Care',
    schedule: 'Morning, 8am-12pm',
    isUrgent: true,
    postedDate: '2025-04-06',
    status: 'in_progress',
    proposalsCount: 8,
    assignedProvider: 'Maria Rodriguez',
    assignedProviderId: 1,
    disputeStatus: null,
    disputeReason: null,
  },
  {
    id: 'JOB-004',
    title: 'Weekend respite care',
    description: 'Need a caregiver for weekends to give family a break. Light housekeeping and companionship.',
    seekerName: 'Michael Brown',
    seekerId: 4,
    seekerEmail: 'michael.brown@example.com',
    location: 'Staten Island, NY 10301',
    budget: 22,
    hoursPerWeek: 8,
    careType: 'Respite Care',
    schedule: 'Weekends, 9am-5pm',
    isUrgent: false,
    postedDate: '2025-04-05',
    status: 'completed',
    proposalsCount: 4,
    assignedProvider: 'James Wilson',
    assignedProviderId: 2,
    disputeStatus: null,
    disputeReason: null,
  },
  {
    id: 'JOB-005',
    title: 'Medication reminder specialist',
    description: 'Need someone to help with medication management and reminders for my mother.',
    seekerName: 'Lisa Martinez',
    seekerId: 5,
    seekerEmail: 'lisa.martinez@example.com',
    location: 'Staten Island, NY 10301',
    budget: 18,
    hoursPerWeek: 5,
    careType: 'Medication Reminders',
    schedule: 'Daily, 9am-9pm',
    isUrgent: false,
    postedDate: '2025-04-04',
    status: 'active',
    proposalsCount: 2,
    assignedProvider: null,
    disputeStatus: null,
    disputeReason: null,
  },
  {
    id: 'JOB-006',
    title: 'Transportation assistance',
    description: 'Need help driving my father to medical appointments twice a week.',
    seekerName: 'David Wilson',
    seekerId: 6,
    seekerEmail: 'david.wilson@example.com',
    location: 'Brooklyn, NY 11215',
    budget: 25,
    hoursPerWeek: 4,
    careType: 'Transportation',
    schedule: 'Tuesday & Thursday, 2pm-4pm',
    isUrgent: true,
    postedDate: '2025-04-03',
    status: 'active',
    proposalsCount: 6,
    assignedProvider: null,
    disputeStatus: null,
    disputeReason: null,
  },
  {
    id: 'JOB-007',
    title: '24/7 care for elderly',
    description: 'Round-the-clock care needed for bedridden grandmother.',
    seekerName: 'Jennifer Lee',
    seekerId: 7,
    seekerEmail: 'jennifer.lee@example.com',
    location: 'Manhattan, NY 10023',
    budget: 35,
    hoursPerWeek: 40,
    careType: '24/7 Support',
    schedule: 'Full time',
    isUrgent: true,
    postedDate: '2025-04-02',
    status: 'disputed',
    proposalsCount: 12,
    assignedProvider: 'Thomas Anderson',
    assignedProviderId: 8,
    disputeStatus: 'open',
    disputeReason: 'Provider did not show up for scheduled visits multiple times',
  },
];

const statusColors = {
  active: 'bg-emerald-100 text-emerald-700',
  in_progress: 'bg-blue-100 text-blue-700',
  completed: 'bg-gray-100 text-gray-700',
  disputed: 'bg-red-100 text-red-700',
};

const disputeStatusColors = {
  open: 'bg-red-100 text-red-700',
  resolved: 'bg-green-100 text-green-700',
  escalated: 'bg-purple-100 text-purple-700',
};

export default function JobsManagementPage() {
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [careTypeFilter, setCareTypeFilter] = useState('all');
  const [currentPage, setCurrentPage] = useState(1);
  const [selectedJob, setSelectedJob] = useState<typeof jobsData[0] | null>(null);
  const [showDetailsModal, setShowDetailsModal] = useState(false);
  const [showDisputeModal, setShowDisputeModal] = useState(false);
  const [showResolveDisputeModal, setShowResolveDisputeModal] = useState(false);
  const [showRemoveJobModal, setShowRemoveJobModal] = useState(false);
  const [resolutionNotes, setResolutionNotes] = useState('');
  const [removalReason, setRemovalReason] = useState('');

  const itemsPerPage = 10;

  const careTypes = ['All', ...new Set(jobsData.map(job => job.careType))];

  // Filter jobs based on search and filters
  const filteredJobs = jobsData.filter((job) => {
    const matchesSearch =
      job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      job.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
      job.seekerName.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = statusFilter === 'all' || job.status === statusFilter;
    const matchesCareType = careTypeFilter === 'all' || job.careType === careTypeFilter;
    return matchesSearch && matchesStatus && matchesCareType;
  });

  // Pagination
  const totalPages = Math.ceil(filteredJobs.length / itemsPerPage);
  const paginatedJobs = filteredJobs.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  // Statistics
  const stats = {
    total: jobsData.length,
    active: jobsData.filter((j) => j.status === 'active').length,
    inProgress: jobsData.filter((j) => j.status === 'in_progress').length,
    completed: jobsData.filter((j) => j.status === 'completed').length,
    disputed: jobsData.filter((j) => j.status === 'disputed').length,
    urgent: jobsData.filter((j) => j.isUrgent).length,
    totalProposals: jobsData.reduce((sum, j) => sum + j.proposalsCount, 0),
  };

  const handleViewDetails = (job: typeof jobsData[0]) => {
    setSelectedJob(job);
    setShowDetailsModal(true);
  };

  const handleResolveDispute = (job: typeof jobsData[0]) => {
    setSelectedJob(job);
    setResolutionNotes('');
    setShowResolveDisputeModal(true);
  };

  const handleRemoveJob = (job: typeof jobsData[0]) => {
    setSelectedJob(job);
    setRemovalReason('');
    setShowRemoveJobModal(true);
  };

  const confirmResolveDispute = () => {
    setShowResolveDisputeModal(false);
  };

  const confirmRemoveJob = () => {
    setShowRemoveJobModal(false);
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'active':
        return <CheckCircle className="w-4 h-4" />;
      case 'in_progress':
        return <Clock className="w-4 h-4" />;
      case 'completed':
        return <Check className="w-4 h-4" />;
      case 'disputed':
        return <AlertCircle className="w-4 h-4" />;
      default:
        return null;
    }
  };

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Jobs Management</h1>
        <p className="text-gray-500 mt-1">Monitor and moderate all job posts across the platform</p>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-5">
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between">
            <div className="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center">
              <Briefcase className="w-6 h-6 text-emerald-600" />
            </div>
            <span className="text-2xl font-bold text-gray-900">{stats.total}</span>
          </div>
          <p className="text-sm text-gray-500 mt-2">Total Jobs</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between">
            <div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
              <CheckCircle className="w-6 h-6 text-green-600" />
            </div>
            <span className="text-2xl font-bold text-gray-900">{stats.active}</span>
          </div>
          <p className="text-sm text-gray-500 mt-2">Active</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between">
            <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
              <Clock className="w-6 h-6 text-blue-600" />
            </div>
            <span className="text-2xl font-bold text-gray-900">{stats.inProgress}</span>
          </div>
          <p className="text-sm text-gray-500 mt-2">In Progress</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between">
            <div className="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center">
              <Check className="w-6 h-6 text-gray-600" />
            </div>
            <span className="text-2xl font-bold text-gray-900">{stats.completed}</span>
          </div>
          <p className="text-sm text-gray-500 mt-2">Completed</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between">
            <div className="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
              <AlertCircle className="w-6 h-6 text-red-600" />
            </div>
            <span className="text-2xl font-bold text-gray-900">{stats.disputed}</span>
          </div>
          <p className="text-sm text-gray-500 mt-2">Disputed</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between">
            <div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center">
              <Flag className="w-6 h-6 text-amber-600" />
            </div>
            <span className="text-2xl font-bold text-gray-900">{stats.urgent}</span>
          </div>
          <p className="text-sm text-gray-500 mt-2">Urgent</p>
        </div>
      </div>

      {/* Filters Bar */}
      <div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <div className="flex flex-col sm:flex-row gap-4">
          {/* Search */}
          <div className="flex-1 relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="Search by job title, ID or seeker name..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900 placeholder:text-gray-400"
            />
          </div>
          {/* Status Filter */}
          <div className="flex items-center gap-2">
            <Filter className="w-5 h-5 text-gray-400" />
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 outline-none text-gray-900"
            >
              <option value="all">All Status</option>
              <option value="active">Active</option>
              <option value="in_progress">In Progress</option>
              <option value="completed">Completed</option>
              <option value="disputed">Disputed</option>
            </select>
          </div>
          {/* Care Type Filter */}
          <select
            value={careTypeFilter}
            onChange={(e) => setCareTypeFilter(e.target.value)}
            className="px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 outline-none text-gray-900"
          >
            {careTypes.map((type) => (
              <option key={type} value={type.toLowerCase()}>
                {type}
              </option>
            ))}
          </select>
          {/* Export Button */}
          <button className="flex items-center gap-2 px-4 py-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-gray-700">
            <Download className="w-4 h-4" />
            <span>Export</span>
          </button>
        </div>
      </div>

      {/* Jobs Table */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50 border-b border-gray-100">
              <tr>
                <th className="text-left px-6 py-4 text-sm font-semibold text-gray-600">Job ID</th>
                <th className="text-left px-6 py-4 text-sm font-semibold text-gray-600">Title</th>
                <th className="text-left px-6 py-4 text-sm font-semibold text-gray-600">Seeker</th>
                <th className="text-left px-6 py-4 text-sm font-semibold text-gray-600">Location</th>
                <th className="text-left px-6 py-4 text-sm font-semibold text-gray-600">Budget</th>
                <th className="text-left px-6 py-4 text-sm font-semibold text-gray-600">Proposals</th>
                <th className="text-left px-6 py-4 text-sm font-semibold text-gray-600">Status</th>
                <th className="text-center px-6 py-4 text-sm font-semibold text-gray-600">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {paginatedJobs.map((job) => (
                <tr key={job.id} className="hover:bg-gray-50 transition-colors">
                  <td className="px-6 py-4">
                    <span className="text-sm font-medium text-gray-900">{job.id}</span>
                   </td>
                  <td className="px-6 py-4">
                    <div>
                      <p className="text-sm font-medium text-gray-900">{job.title}</p>
                      {job.isUrgent && (
                        <span className="inline-flex items-center gap-1 text-xs text-red-600 bg-red-50 px-2 py-0.5 rounded-full mt-1">
                          <Flag className="w-3 h-3" />
                          Urgent
                        </span>
                      )}
                    </div>
                   </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      <User className="w-4 h-4 text-gray-400" />
                      <span className="text-sm text-gray-900">{job.seekerName}</span>
                    </div>
                   </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-1">
                      <MapPin className="w-4 h-4 text-gray-400" />
                      <span className="text-sm text-gray-600">{job.location.split(',')[0]}</span>
                    </div>
                   </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-1">
                      <DollarSign className="w-4 h-4 text-gray-400" />
                      <span className="text-sm font-semibold text-gray-900">${job.budget}/hr</span>
                    </div>
                   </td>
                  <td className="px-6 py-4">
                    <span className="text-sm text-gray-900">{job.proposalsCount}</span>
                   </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-1">
                      {getStatusIcon(job.status)}
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${statusColors[job.status as keyof typeof statusColors]}`}>
                        {job.status.replace('_', ' ').charAt(0).toUpperCase() + job.status.replace('_', ' ').slice(1)}
                      </span>
                    </div>
                    {job.disputeStatus === 'open' && (
                      <span className="text-xs text-red-600 mt-1 block">Dispute Open</span>
                    )}
                   </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center justify-center gap-2">
                      <button
                        onClick={() => handleViewDetails(job)}
                        className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
                        title="View Details"
                      >
                        <Eye className="w-4 h-4 text-gray-500" />
                      </button>
                      {job.status === 'disputed' && (
                        <button
                          onClick={() => handleResolveDispute(job)}
                          className="p-1.5 rounded-lg hover:bg-emerald-50 transition-colors"
                          title="Resolve Dispute"
                        >
                          <CheckCircle className="w-4 h-4 text-emerald-500" />
                        </button>
                      )}
                      <button
                        onClick={() => handleRemoveJob(job)}
                        className="p-1.5 rounded-lg hover:bg-red-50 transition-colors"
                        title="Remove Job"
                      >
                        <Ban className="w-4 h-4 text-red-500" />
                      </button>
                    </div>
                   </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="flex items-center justify-between px-6 py-4 border-t border-gray-100">
            <p className="text-sm text-gray-500">
              Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, filteredJobs.length)} of {filteredJobs.length} results
            </p>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                disabled={currentPage === 1}
                className="p-2 rounded-lg border border-gray-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                <button
                  key={page}
                  onClick={() => setCurrentPage(page)}
                  className={`px-3 py-1 rounded-lg ${
                    currentPage === page
                      ? 'bg-emerald-600 text-white'
                      : 'border border-gray-200 hover:bg-gray-50 text-gray-700'
                  }`}
                >
                  {page}
                </button>
              ))}
              <button
                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                disabled={currentPage === totalPages}
                className="p-2 rounded-lg border border-gray-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Job Details Modal */}
      {showDetailsModal && selectedJob && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div className="sticky top-0 bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between">
              <h2 className="text-xl font-bold text-gray-900">Job Details</h2>
              <button
                onClick={() => setShowDetailsModal(false)}
                className="p-2 rounded-lg hover:bg-gray-100"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6 space-y-6">
              {/* Job Header */}
              <div className="flex items-start justify-between">
                <div>
                  <div className="flex items-center gap-2 mb-2">
                    <span className="text-sm text-gray-500">Job ID: {selectedJob.id}</span>
                    {selectedJob.isUrgent && (
                      <span className="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs font-medium flex items-center gap-1">
                        <Flag className="w-3 h-3" />
                        Urgent
                      </span>
                    )}
                  </div>
                  <h3 className="text-2xl font-bold text-gray-900">{selectedJob.title}</h3>
                </div>
                <span className={`px-3 py-1 rounded-full text-sm font-medium ${statusColors[selectedJob.status as keyof typeof statusColors]}`}>
                  {selectedJob.status.replace('_', ' ').charAt(0).toUpperCase() + selectedJob.status.replace('_', ' ').slice(1)}
                </span>
              </div>

              {/* Job Details Grid */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="p-3 bg-gray-50 rounded-xl">
                  <p className="text-xs text-gray-500">Budget</p>
                  <p className="text-lg font-bold text-gray-900">${selectedJob.budget}/hr</p>
                </div>
                <div className="p-3 bg-gray-50 rounded-xl">
                  <p className="text-xs text-gray-500">Hours/Week</p>
                  <p className="text-lg font-bold text-gray-900">{selectedJob.hoursPerWeek} hrs</p>
                </div>
                <div className="p-3 bg-gray-50 rounded-xl">
                  <p className="text-xs text-gray-500">Care Type</p>
                  <p className="text-lg font-bold text-gray-900">{selectedJob.careType}</p>
                </div>
                <div className="p-3 bg-gray-50 rounded-xl">
                  <p className="text-xs text-gray-500">Posted Date</p>
                  <p className="text-lg font-bold text-gray-900">{selectedJob.postedDate}</p>
                </div>
              </div>

              {/* Description */}
              <div>
                <p className="text-sm font-semibold text-gray-700 mb-2">Description</p>
                <p className="text-gray-600 leading-relaxed">{selectedJob.description}</p>
              </div>

              {/* Schedule */}
              <div>
                <p className="text-sm font-semibold text-gray-700 mb-2">Schedule</p>
                <div className="flex items-center gap-2 p-3 bg-gray-50 rounded-xl">
                  <Calendar className="w-5 h-5 text-gray-400" />
                  <span className="text-gray-900">{selectedJob.schedule}</span>
                </div>
              </div>

              {/* Location */}
              <div>
                <p className="text-sm font-semibold text-gray-700 mb-2">Location</p>
                <div className="flex items-center gap-2 p-3 bg-gray-50 rounded-xl">
                  <MapPin className="w-5 h-5 text-gray-400" />
                  <span className="text-gray-900">{selectedJob.location}</span>
                </div>
              </div>

              {/* Seeker Information */}
              <div>
                <p className="text-sm font-semibold text-gray-700 mb-2">Posted By</p>
                <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                  <div className="w-10 h-10 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-full flex items-center justify-center text-white font-semibold">
                    {selectedJob.seekerName.charAt(0)}
                  </div>
                  <div>
                    <p className="font-medium text-gray-900">{selectedJob.seekerName}</p>
                    <p className="text-sm text-gray-500">{selectedJob.seekerEmail}</p>
                  </div>
                </div>
              </div>

              {/* Provider Information (if assigned) */}
              {selectedJob.assignedProvider && (
                <div>
                  <p className="text-sm font-semibold text-gray-700 mb-2">Assigned Provider</p>
                  <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white font-semibold">
                      {selectedJob.assignedProvider.charAt(0)}
                    </div>
                    <div>
                      <p className="font-medium text-gray-900">{selectedJob.assignedProvider}</p>
                      <p className="text-sm text-gray-500">Provider ID: {selectedJob.assignedProviderId}</p>
                    </div>
                  </div>
                </div>
              )}

              {/* Dispute Information */}
              {selectedJob.disputeStatus === 'open' && (
                <div className="border border-red-200 rounded-xl p-4 bg-red-50">
                  <div className="flex items-center gap-2 mb-3">
                    <AlertCircle className="w-5 h-5 text-red-600" />
                    <p className="font-semibold text-red-700">Open Dispute</p>
                  </div>
                  <p className="text-sm text-red-600">{selectedJob.disputeReason}</p>
                </div>
              )}

              {/* Proposals Count */}
              <div className="border-t border-gray-100 pt-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <MessageCircle className="w-5 h-5 text-gray-400" />
                    <span className="text-sm font-medium text-gray-700">Proposals Received</span>
                  </div>
                  <span className="text-2xl font-bold text-gray-900">{selectedJob.proposalsCount}</span>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex gap-3 pt-4 border-t border-gray-100">
                <button className="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-lg font-medium hover:bg-emerald-700">
                  Contact Seeker
                </button>
                {selectedJob.status === 'disputed' && (
                  <button
                    onClick={() => {
                      setShowDetailsModal(false);
                      handleResolveDispute(selectedJob);
                    }}
                    className="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-lg font-medium hover:bg-emerald-700"
                  >
                    Resolve Dispute
                  </button>
                )}
                <button
                  onClick={() => {
                    setShowDetailsModal(false);
                    handleRemoveJob(selectedJob);
                  }}
                  className="flex-1 px-4 py-2 border border-red-500 text-red-600 rounded-lg font-medium hover:bg-red-50"
                >
                  Remove Job
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Resolve Dispute Modal */}
      {showResolveDisputeModal && selectedJob && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl max-w-md w-full p-6">
            <div className="text-center">
              <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="w-8 h-8 text-emerald-600" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 mb-2">Resolve Dispute</h3>
              <p className="text-gray-500 mb-4">
                Resolving dispute for job <span className="font-semibold">{selectedJob.id}</span>
              </p>
              <div className="mb-4 p-3 bg-red-50 rounded-lg text-left">
                <p className="text-sm font-medium text-red-700 mb-1">Dispute Reason:</p>
                <p className="text-sm text-red-600">{selectedJob.disputeReason}</p>
              </div>
              <textarea
                value={resolutionNotes}
                onChange={(e) => setResolutionNotes(e.target.value)}
                placeholder="Resolution notes (optional)"
                rows={3}
                className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900 placeholder:text-gray-400 resize-none mb-4"
              />
              <div className="flex gap-3">
                <button
                  onClick={() => setShowResolveDisputeModal(false)}
                  className="flex-1 px-4 py-2 border border-gray-200 rounded-lg font-medium hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={confirmResolveDispute}
                  className="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-lg font-medium hover:bg-emerald-700"
                >
                  Resolve Dispute
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Remove Job Modal */}
      {showRemoveJobModal && selectedJob && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl max-w-md w-full p-6">
            <div className="text-center">
              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Ban className="w-8 h-8 text-red-600" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 mb-2">Remove Job</h3>
              <p className="text-gray-500 mb-4">
                Are you sure you want to remove job <span className="font-semibold">{selectedJob.id}</span>?
                This action cannot be undone.
              </p>
              <textarea
                value={removalReason}
                onChange={(e) => setRemovalReason(e.target.value)}
                placeholder="Reason for removal (optional)"
                rows={3}
                className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900 placeholder:text-gray-400 resize-none mb-4"
              />
              <div className="flex gap-3">
                <button
                  onClick={() => setShowRemoveJobModal(false)}
                  className="flex-1 px-4 py-2 border border-gray-200 rounded-lg font-medium hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={confirmRemoveJob}
                  className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700"
                >
                  Remove Job
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}