import React, { useState, useMemo } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
  GitPullRequest,
  AlertOctagon,
  Plus,
  CheckCircle2,
  AlertCircle,
  RefreshCw,
  Search,
  Check,
  XCircle,
  Edit2,
  FolderKanban,
  Coins,
  Calendar,
  User,
  Clock,
  ArrowRight,
} from 'lucide-react';
import {
  getProjects,
  getProjectIssues,
  createIssue,
  updateIssue,
  getProjectChangeRequests,
  createChangeRequest,
  updateChangeRequest,
  getUsers,
} from '../services/api';
import { Modal } from '../components/ui/Modal';
import { useToast } from '../components/ui/Toast';
import { ExportButton } from '../components/ui/ExportButton';
import { ExportColumn } from '../utils/exportUtils';
import { useTableSort, SortableTh } from '../utils/tableSort';
import { Issue, ChangeRequest, ApprovalStatus, ActivityStatus, Priority } from '../types';
import {
  getApprovalStatusBadge,
  getPriorityBadge,
  formatDate,
  formatZAR,
  getUserEmail,
  PRIORITY_OPTIONS,
} from '../lib/formatters';

const issueSchema = z.object({
  title: z.string().min(3, 'Issue title required'),
  description: z.string().min(5, 'Description required'),
  priority: z.coerce.number().min(1).max(4),
  assignedTo: z.string().min(1, 'Assignee is required'),
});

const resolveIssueSchema = z.object({
  resolution: z.string().min(5, 'Resolution notes required'),
  status: z.coerce.number(),
});

const changeRequestSchema = z.object({
  title: z.string().min(3, 'Title required'),
  justification: z.string().min(5, 'Justification required'),
  revisedBudget: z.coerce.number().min(0, 'Revised budget must be non-negative'),
  revisionDate: z.string().min(4, 'Revision date required'),
});

const resolveChangeSchema = z.object({
  status: z.coerce.number(),
  justification: z.string().min(3, 'Decision justification required'),
});

type IssueFormValues = z.infer<typeof issueSchema>;
type ResolveIssueFormValues = z.infer<typeof resolveIssueSchema>;
type ChangeRequestFormValues = z.infer<typeof changeRequestSchema>;
type ResolveChangeFormValues = z.infer<typeof resolveChangeSchema>;

export const ChangeManagementPage: React.FC = () => {
  const queryClient = useQueryClient();
  const { success, error: toastError } = useToast();

  const [selectedProjectId, setSelectedProjectId] = useState<string>('all');
  const [activeTab, setActiveTab] = useState<'issues' | 'changes'>('issues');
  const [searchTerm, setSearchTerm] = useState('');
  const [priorityFilter, setPriorityFilter] = useState('all');
  const [issueStatusFilter, setIssueStatusFilter] = useState('all');
  const [changeStatusFilter, setChangeStatusFilter] = useState('all');

  // Modals
  const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
  const [editingIssue, setEditingIssue] = useState<Issue | null>(null);

  const [isResolveIssueModalOpen, setIsResolveIssueModalOpen] = useState(false);
  const [resolvingIssue, setResolvingIssue] = useState<Issue | null>(null);

  const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
  const [editingChange, setEditingChange] = useState<ChangeRequest | null>(null);

  const [isResolveChangeModalOpen, setIsResolveChangeModalOpen] = useState(false);
  const [resolvingChange, setResolvingChange] = useState<ChangeRequest | null>(null);

  // Queries
  const { data: projects = [], isLoading: loadingProjects } = useQuery({
    queryKey: ['projects'],
    queryFn: () => getProjects(),
  });

  const { data: users = [] } = useQuery({
    queryKey: ['users-directory'],
    queryFn: () => getUsers(1, 200),
  });

  const effectiveProjectId = selectedProjectId !== 'all' ? selectedProjectId : projects[0]?.id;

  const {
    data: issues = [],
    isLoading: loadingIssues,
    refetch: refetchIssues,
    isFetching: fetchingIssues,
  } = useQuery({
    queryKey: ['issues', effectiveProjectId],
    queryFn: () => (effectiveProjectId ? getProjectIssues(effectiveProjectId) : Promise.resolve([])),
    enabled: !!effectiveProjectId,
  });

  const {
    data: changeRequests = [],
    isLoading: loadingChanges,
    refetch: refetchChanges,
    isFetching: fetchingChanges,
  } = useQuery({
    queryKey: ['changeRequests', effectiveProjectId],
    queryFn: () => (effectiveProjectId ? getProjectChangeRequests(effectiveProjectId) : Promise.resolve([])),
    enabled: !!effectiveProjectId,
  });

  // Forms
  const issueForm = useForm<IssueFormValues>({
    resolver: zodResolver(issueSchema),
    defaultValues: { title: '', description: '', priority: Priority.Medium, assignedTo: '' },
  });

  const resolveIssueForm = useForm<ResolveIssueFormValues>({
    resolver: zodResolver(resolveIssueSchema),
    defaultValues: { resolution: '', status: ActivityStatus.Inactive },
  });

  const changeForm = useForm<ChangeRequestFormValues>({
    resolver: zodResolver(changeRequestSchema),
    defaultValues: {
      title: '',
      justification: '',
      revisedBudget: 0,
      revisionDate: new Date().toISOString().split('T')[0],
    },
  });

  const resolveChangeForm = useForm<ResolveChangeFormValues>({
    resolver: zodResolver(resolveChangeSchema),
    defaultValues: { status: ApprovalStatus.Approved, justification: '' },
  });

  // Mutations
  const createIssueMutation = useMutation({
    mutationFn: (vals: IssueFormValues) => {
      if (!effectiveProjectId) throw new Error('No project selected');
      return createIssue({
        projectId: effectiveProjectId,
        title: vals.title,
        description: vals.description,
        priority: vals.priority,
        assignedTo: vals.assignedTo,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['issues'] });
      setIsIssueModalOpen(false);
      issueForm.reset();
      success('Issue Logged', 'New project issue created and assigned.');
    },
    onError: (err: any) => toastError('Creation Failed', err.message || 'Unable to log issue.'),
  });

  const updateIssueMutation = useMutation({
    mutationFn: (vals: IssueFormValues) => {
      if (!editingIssue) throw new Error('No issue selected');
      return updateIssue({
        issueId: editingIssue.id,
        title: vals.title,
        description: vals.description,
        priority: vals.priority,
        assignedTo: vals.assignedTo,
        resolution: editingIssue.resolution || '',
        resolvedAt: editingIssue.resolvedAt || null,
        status: editingIssue.status || ActivityStatus.Active,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['issues'] });
      setIsIssueModalOpen(false);
      setEditingIssue(null);
      issueForm.reset();
      success('Issue Updated', 'Issue record saved.');
    },
    onError: (err: any) => toastError('Update Failed', err.message || 'Unable to update issue.'),
  });

  const resolveIssueMutation = useMutation({
    mutationFn: (vals: ResolveIssueFormValues) => {
      if (!resolvingIssue) throw new Error('No issue selected');
      return updateIssue({
        issueId: resolvingIssue.id,
        title: resolvingIssue.title || '',
        description: resolvingIssue.description || '',
        priority: resolvingIssue.priority || Priority.Medium,
        assignedTo: resolvingIssue.assignedTo || '',
        resolution: vals.resolution,
        resolvedAt: new Date().toISOString(),
        status: vals.status,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['issues'] });
      setIsResolveIssueModalOpen(false);
      setResolvingIssue(null);
      resolveIssueForm.reset();
      success('Issue Resolved', 'Resolution recorded and issue status updated.');
    },
    onError: (err: any) => toastError('Resolution Failed', err.message || 'Unable to resolve issue.'),
  });

  const createChangeMutation = useMutation({
    mutationFn: (vals: ChangeRequestFormValues) => {
      if (!effectiveProjectId) throw new Error('No project selected');
      return createChangeRequest({
        projectId: effectiveProjectId,
        title: vals.title,
        justification: vals.justification,
        revisedBudget: vals.revisedBudget,
        revisionDate: vals.revisionDate,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['changeRequests'] });
      setIsChangeModalOpen(false);
      changeForm.reset();
      success('Change Request Submitted', 'Formal change request submitted for review.');
    },
    onError: (err: any) => toastError('Submission Failed', err.message || 'Unable to submit change request.'),
  });

  const resolveChangeMutation = useMutation({
    mutationFn: (vals: ResolveChangeFormValues) => {
      if (!resolvingChange) throw new Error('No change request selected');
      return updateChangeRequest({
        changeRequestId: resolvingChange.id,
        title: resolvingChange.title || '',
        justification: vals.justification || resolvingChange.justification || '',
        revisedBudget: resolvingChange.revisedBudget || 0,
        status: vals.status,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['changeRequests'] });
      setIsResolveChangeModalOpen(false);
      setResolvingChange(null);
      resolveChangeForm.reset();
      success('Change Decision Applied', 'Change request decision successfully resolved.');
    },
    onError: (err: any) => toastError('Decision Failed', err.message || 'Unable to resolve change request.'),
  });

  // Filtered & Sorted Issues
  const filteredIssues = useMemo(() => {
    return issues.filter((iss) => {
      const matchSearch =
        !searchTerm.trim() ||
        (iss.title && iss.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
        (iss.description && iss.description.toLowerCase().includes(searchTerm.toLowerCase()));
      const matchPrio = priorityFilter === 'all' || String(iss.priority) === String(priorityFilter);
      const isResolved = iss.status === ActivityStatus.Inactive || !!iss.resolvedAt;
      const matchStatus =
        issueStatusFilter === 'all' ||
        (issueStatusFilter === 'open' && !isResolved) ||
        (issueStatusFilter === 'resolved' && isResolved);
      return matchSearch && matchPrio && matchStatus;
    });
  }, [issues, searchTerm, priorityFilter, issueStatusFilter]);

  const { sortedData: sortedIssues, sortColumn: issueSortCol, sortDirection: issueSortDir, handleSort: handleIssueSort } =
    useTableSort(filteredIssues);

  // Filtered & Sorted Change Requests
  const filteredChanges = useMemo(() => {
    return changeRequests.filter((cr) => {
      const matchSearch =
        !searchTerm.trim() ||
        (cr.title && cr.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
        (cr.justification && cr.justification.toLowerCase().includes(searchTerm.toLowerCase()));
      const matchStatus =
        changeStatusFilter === 'all' ||
        (changeStatusFilter === 'approved' && cr.status === ApprovalStatus.Approved) ||
        (changeStatusFilter === 'rejected' && cr.status === ApprovalStatus.Rejected) ||
        (changeStatusFilter === 'pending' && (cr.status === ApprovalStatus.Pending || cr.status === ApprovalStatus.Review));
      return matchSearch && matchStatus;
    });
  }, [changeRequests, searchTerm, changeStatusFilter]);

  const { sortedData: sortedChanges, sortColumn: changeSortCol, sortDirection: changeSortDir, handleSort: handleChangeSort } =
    useTableSort(filteredChanges);

  // Exports
  const issueExportCols: ExportColumn<Issue>[] = [
    { header: 'Title', key: 'title' },
    { header: 'Description', key: 'description' },
    { header: 'Priority', key: 'priority', format: (val) => (val === Priority.Critical ? 'Critical' : 'Standard') },
    { header: 'Assigned To', key: 'assignedTo', format: (val) => (val ? getUserEmail(val) : 'Unassigned') },
    { header: 'Status', key: 'status', format: (val) => (val === ActivityStatus.Active ? 'Active' : 'Resolved') },
  ];

  const changeExportCols: ExportColumn<ChangeRequest>[] = [
    { header: 'Change Title', key: 'title' },
    { header: 'Justification', key: 'justification' },
    { header: 'Revised Budget', key: 'revisedBudget', format: (val) => formatZAR(val || 0) },
    { header: 'Status', key: 'status', format: (val) => (val === ApprovalStatus.Approved ? 'Approved' : 'Pending') },
  ];

  const openResolveIssue = (iss: Issue) => {
    setResolvingIssue(iss);
    resolveIssueForm.reset({ resolution: iss.resolution || '', status: ActivityStatus.Inactive });
    setIsResolveIssueModalOpen(true);
  };

  const openResolveChange = (cr: ChangeRequest, statusToApply: ApprovalStatus) => {
    setResolvingChange(cr);
    resolveChangeForm.reset({
      status: statusToApply,
      justification: `Approved by Project Governance for execution.`,
    });
    setIsResolveChangeModalOpen(true);
  };

  return (
    <div className="space-y-8 pb-16">
      {/* Header Banner */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gradient-to-r from-[#0d1322] via-[#0f172a] to-[#0d1322] p-6 sm:p-8 rounded-3xl border border-slate-800/80 shadow-2xl relative overflow-hidden">
        <div className="absolute -right-10 -bottom-10 w-60 h-60 bg-amber-600/10 rounded-full blur-3xl pointer-events-none" />
        <div className="space-y-2 relative z-10">
          <div className="flex items-center gap-3">
            <div className="h-12 w-12 rounded-2xl bg-amber-600/20 border border-amber-500/30 flex items-center justify-center text-amber-400 shadow-lg shadow-amber-500/10">
              <GitPullRequest className="w-6 h-6" />
            </div>
            <div>
              <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white flex items-center gap-2.5">
                Change Management & Issue Resolution
              </h1>
              <p className="text-xs sm:text-sm text-slate-400">
                Track project execution impediments, review contractual variations, and resolve change requests in-place.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* KPI Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
          <div className="flex items-center justify-between text-slate-400">
            <span className="text-xs font-semibold uppercase tracking-wider">Active Issues</span>
            <AlertOctagon className="w-4 h-4 text-rose-400" />
          </div>
          <p className="text-2xl font-bold text-rose-400">{issues.filter((i) => i.status !== ActivityStatus.Inactive).length}</p>
          <p className="text-[11px] text-slate-400">Open project impediments</p>
        </div>

        <div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
          <div className="flex items-center justify-between text-slate-400">
            <span className="text-xs font-semibold uppercase tracking-wider">Resolved Issues</span>
            <CheckCircle2 className="w-4 h-4 text-emerald-400" />
          </div>
          <p className="text-2xl font-bold text-emerald-400">
            {issues.filter((i) => i.status === ActivityStatus.Inactive).length}
          </p>
          <p className="text-[11px] text-slate-400">Closed with documented resolution</p>
        </div>

        <div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
          <div className="flex items-center justify-between text-slate-400">
            <span className="text-xs font-semibold uppercase tracking-wider">Pending Changes</span>
            <GitPullRequest className="w-4 h-4 text-amber-400" />
          </div>
          <p className="text-2xl font-bold text-amber-400">
            {changeRequests.filter((c) => c.status === ApprovalStatus.Pending || c.status === ApprovalStatus.Review).length}
          </p>
          <p className="text-[11px] text-slate-400">Awaiting governance review</p>
        </div>

        <div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
          <div className="flex items-center justify-between text-slate-400">
            <span className="text-xs font-semibold uppercase tracking-wider">Approved Variations</span>
            <Coins className="w-4 h-4 text-blue-400" />
          </div>
          <p className="text-2xl font-bold text-blue-400">
            {changeRequests.filter((c) => c.status === ApprovalStatus.Approved).length}
          </p>
          <p className="text-[11px] text-slate-400">Contract amendments enacted</p>
        </div>
      </div>

      {/* Tabs */}
      <div className="space-y-4">
        <div className="flex border-b border-slate-800 bg-[#0d121f]/80 px-2 sm:px-4 rounded-2xl backdrop-blur-sm overflow-x-auto gap-2">
          <button
            onClick={() => setActiveTab('issues')}
            className={`py-3.5 px-4 text-xs font-semibold border-b-2 transition-colors flex items-center gap-2 cursor-pointer whitespace-nowrap ${
              activeTab === 'issues'
                ? 'border-amber-500 text-amber-400'
                : 'border-transparent text-slate-400 hover:text-slate-200'
            }`}
          >
            <AlertOctagon className="w-4 h-4" />
            <span>Project Issues ({issues.length})</span>
          </button>

          <button
            onClick={() => setActiveTab('changes')}
            className={`py-3.5 px-4 text-xs font-semibold border-b-2 transition-colors flex items-center gap-2 cursor-pointer whitespace-nowrap ${
              activeTab === 'changes'
                ? 'border-amber-500 text-amber-400'
                : 'border-transparent text-slate-400 hover:text-slate-200'
            }`}
          >
            <GitPullRequest className="w-4 h-4" />
            <span>Change Requests ({changeRequests.length})</span>
          </button>
        </div>

        {/* Tab 1: Issues Toolbar & Content */}
        {activeTab === 'issues' && (
          <div className="space-y-4">
            <div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3 bg-[#0d121f]/60 p-3.5 rounded-2xl border border-slate-800/80">
              <div className="flex items-center gap-2.5 flex-wrap flex-1">
                {/* Search */}
                <div className="relative flex-1 min-w-[200px] max-w-sm">
                  <Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-slate-400" />
                  <input
                    type="text"
                    placeholder="Search issues by title or details..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-8 pr-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500 shadow-xs"
                  />
                </div>

                {/* Priority Filter */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <select
                    value={priorityFilter}
                    onChange={(e) => setPriorityFilter(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500"
                  >
                    <option value="all">All Priorities</option>
                    <option value={String(Priority.Critical)}>Critical Priority</option>
                    <option value={String(Priority.High)}>High Priority</option>
                    <option value={String(Priority.Medium)}>Medium Priority</option>
                    <option value={String(Priority.Low)}>Low Priority</option>
                  </select>
                </div>

                {/* Status Filter */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <select
                    value={issueStatusFilter}
                    onChange={(e) => setIssueStatusFilter(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500"
                  >
                    <option value="all">All Statuses</option>
                    <option value="open">Open / Active</option>
                    <option value="resolved">Resolved / Closed</option>
                  </select>
                </div>

                {/* Project Selector */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <FolderKanban className="w-3.5 h-3.5 text-amber-400" />
                  <select
                    value={selectedProjectId}
                    onChange={(e) => setSelectedProjectId(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500 max-w-[180px] truncate"
                  >
                    {projects.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.name}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Actions: Refresh, Export, Log Issue */}
              <div className="flex items-center gap-2 flex-wrap justify-end">
                <button
                  type="button"
                  onClick={() => {
                    refetchIssues();
                    success('Refreshed', 'Project issues updated from API.');
                  }}
                  disabled={fetchingIssues}
                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-900 text-slate-300 hover:text-white border border-slate-800 hover:bg-slate-800 transition cursor-pointer disabled:opacity-50"
                  title="Force refresh issues"
                >
                  <RefreshCw className={`w-3.5 h-3.5 text-amber-400 ${fetchingIssues ? 'animate-spin' : ''}`} />
                  <span>Refresh</span>
                </button>

                <ExportButton
                  data={sortedIssues}
                  columns={issueExportCols}
                  filename={`project_issues_${new Date().toISOString().split('T')[0]}`}
                  title="Project Issues Register"
                />

                <button
                  onClick={() => {
                    setEditingIssue(null);
                    issueForm.reset({ title: '', description: '', priority: Priority.Medium, assignedTo: '' });
                    setIsIssueModalOpen(true);
                  }}
                  className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-gradient-to-r from-amber-600 to-orange-600 text-white hover:from-amber-500 hover:to-orange-500 shadow-md shadow-amber-600/25 transition cursor-pointer"
                >
                  <Plus className="w-3.5 h-3.5" />
                  <span>Log Issue</span>
                </button>
              </div>
            </div>

            <div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs border-collapse">
                <thead>
                  <tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
                    <SortableTh column="title" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-5 whitespace-nowrap">
                      Issue Summary
                    </SortableTh>
                    <SortableTh column="priority" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-4 whitespace-nowrap">
                      Priority
                    </SortableTh>
                    <SortableTh column="assignedTo" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-4 whitespace-nowrap">
                      Assigned To
                    </SortableTh>
                    <SortableTh column="status" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-4 whitespace-nowrap">
                      Status
                    </SortableTh>
                    <th className="py-3.5 px-4 font-semibold whitespace-nowrap">Resolution Notes</th>
                    <th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800/60">
                  {loadingIssues ? (
                    <tr>
                      <td colSpan={6} className="py-12 text-center text-slate-400">
                        <div className="flex flex-col items-center gap-2">
                          <div className="w-6 h-6 border-2 border-amber-500 border-t-transparent rounded-full animate-spin" />
                          <span>Loading project issues...</span>
                        </div>
                      </td>
                    </tr>
                  ) : sortedIssues.length === 0 ? (
                    <tr>
                      <td colSpan={6} className="py-12 text-center text-slate-400">
                        No issues recorded for this project.
                      </td>
                    </tr>
                  ) : (
                    sortedIssues.map((iss) => {
                      const isResolved = iss.status === ActivityStatus.Inactive || !!iss.resolvedAt;
                      return (
                        <tr key={iss.id} className="hover:bg-slate-800/40 transition-colors">
                          <td className="py-3.5 px-5 font-semibold text-white">
                            <div className="flex items-start gap-2.5">
                              <AlertOctagon
                                className={`w-4 h-4 mt-0.5 shrink-0 ${isResolved ? 'text-emerald-400' : 'text-rose-400'}`}
                              />
                              <div>
                                <p className="font-semibold text-white">{iss.title}</p>
                                <p className="text-[11px] text-slate-400 font-normal line-clamp-1">{iss.description}</p>
                              </div>
                            </div>
                          </td>
                          <td className="py-3.5 px-4 whitespace-nowrap">{getPriorityBadge(iss.priority)}</td>
                          <td className="py-3.5 px-4 whitespace-nowrap text-slate-300">
                            <div className="flex items-center gap-1.5">
                              <User className="w-3.5 h-3.5 text-slate-400" />
                              <span className="truncate max-w-[150px]">{iss.assignedTo ? getUserEmail(iss.assignedTo) : 'Unassigned'}</span>
                            </div>
                          </td>
                          <td className="py-3.5 px-4 whitespace-nowrap">
                            {isResolved ? (
                              <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                                <CheckCircle2 className="w-3 h-3" /> Resolved
                              </span>
                            ) : (
                              <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-rose-500/10 text-rose-400 border border-rose-500/20">
                                <Clock className="w-3 h-3" /> Open
                              </span>
                            )}
                          </td>
                          <td className="py-3.5 px-4 text-slate-400 max-w-xs truncate">
                            {iss.resolution || <span className="italic text-slate-600">Pending resolution...</span>}
                          </td>
                          <td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
                            <button
                              onClick={() => openResolveIssue(iss)}
                              className="px-2.5 py-1 text-xs font-medium text-amber-400 hover:text-amber-300 bg-amber-950/40 hover:bg-amber-900/40 rounded-lg border border-amber-800/40 transition cursor-pointer"
                            >
                              Resolve
                            </button>
                            <button
                              onClick={() => {
                                setEditingIssue(iss);
                                issueForm.reset({
                                  title: iss.title || '',
                                  description: iss.description || '',
                                  priority: iss.priority || Priority.Medium,
                                  assignedTo: iss.assignedTo || '',
                                });
                                setIsIssueModalOpen(true);
                              }}
                              className="p-1 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition cursor-pointer"
                              title="Edit issue"
                            >
                              <Edit2 className="w-3.5 h-3.5" />
                            </button>
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>
          </div>
          </div>
        )}

        {/* Tab 2: Change Requests Table */}
        {activeTab === 'changes' && (
          <div className="space-y-4">
            <div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3 bg-[#0d121f]/60 p-3.5 rounded-2xl border border-slate-800/80">
              <div className="flex items-center gap-2.5 flex-wrap flex-1">
                {/* Search */}
                <div className="relative flex-1 min-w-[200px] max-w-sm">
                  <Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-slate-400" />
                  <input
                    type="text"
                    placeholder="Search change proposal, justification..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-8 pr-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500 shadow-xs"
                  />
                </div>

                {/* Status Filter */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <select
                    value={changeStatusFilter}
                    onChange={(e) => setChangeStatusFilter(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500"
                  >
                    <option value="all">All Change Statuses</option>
                    <option value="pending">Pending Review</option>
                    <option value="approved">Approved & Enacted</option>
                    <option value="rejected">Rejected</option>
                  </select>
                </div>

                {/* Project Selector */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <FolderKanban className="w-3.5 h-3.5 text-amber-400" />
                  <select
                    value={selectedProjectId}
                    onChange={(e) => setSelectedProjectId(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500 max-w-[180px] truncate"
                  >
                    {projects.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.name}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Actions: Refresh, Export, Request Change */}
              <div className="flex items-center gap-2 flex-wrap justify-end">
                <button
                  type="button"
                  onClick={() => {
                    refetchChanges();
                    success('Refreshed', 'Change requests updated from API.');
                  }}
                  disabled={fetchingChanges}
                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-900 text-slate-300 hover:text-white border border-slate-800 hover:bg-slate-800 transition cursor-pointer disabled:opacity-50"
                  title="Force refresh change requests"
                >
                  <RefreshCw className={`w-3.5 h-3.5 text-amber-400 ${fetchingChanges ? 'animate-spin' : ''}`} />
                  <span>Refresh</span>
                </button>

                <ExportButton
                  data={sortedChanges}
                  columns={changeExportCols}
                  filename={`change_requests_${new Date().toISOString().split('T')[0]}`}
                  title="Change Requests Register"
                />

                <button
                  onClick={() => {
                    setEditingChange(null);
                    changeForm.reset({
                      title: '',
                      justification: '',
                      revisedBudget: 0,
                      revisionDate: new Date().toISOString().split('T')[0],
                    });
                    setIsChangeModalOpen(true);
                  }}
                  className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-slate-800 text-white hover:bg-slate-700 border border-slate-700 shadow-md transition cursor-pointer"
                >
                  <GitPullRequest className="w-3.5 h-3.5 text-blue-400" />
                  <span>Request Change</span>
                </button>
              </div>
            </div>

            <div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs border-collapse">
                <thead>
                  <tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
                    <SortableTh column="title" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-5 whitespace-nowrap">
                      Change Proposal
                    </SortableTh>
                    <SortableTh column="justification" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-4 whitespace-nowrap">
                      Justification
                    </SortableTh>
                    <SortableTh column="revisedBudget" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-4 whitespace-nowrap">
                      Revised Budget
                    </SortableTh>
                    <SortableTh column="status" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-4 whitespace-nowrap">
                      Governance Status
                    </SortableTh>
                    <th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">In-Place Decision</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800/60">
                  {loadingChanges ? (
                    <tr>
                      <td colSpan={5} className="py-12 text-center text-slate-400">
                        <div className="flex flex-col items-center gap-2">
                          <div className="w-6 h-6 border-2 border-amber-500 border-t-transparent rounded-full animate-spin" />
                          <span>Loading change requests...</span>
                        </div>
                      </td>
                    </tr>
                  ) : sortedChanges.length === 0 ? (
                    <tr>
                      <td colSpan={5} className="py-12 text-center text-slate-400">
                        No change requests logged for this project.
                      </td>
                    </tr>
                  ) : (
                    sortedChanges.map((cr) => (
                      <tr key={cr.id} className="hover:bg-slate-800/40 transition-colors">
                        <td className="py-3.5 px-5 whitespace-nowrap font-semibold text-white">
                          <div className="flex items-center gap-2">
                            <GitPullRequest className="w-4 h-4 text-amber-400 shrink-0" />
                            <span>{cr.title}</span>
                          </div>
                        </td>
                        <td className="py-3.5 px-4 text-slate-300 max-w-xs truncate" title={cr.justification || ''}>
                          {cr.justification || 'None'}
                        </td>
                        <td className="py-3.5 px-4 whitespace-nowrap font-mono font-semibold text-slate-200">
                          {formatZAR(cr.revisedBudget || 0)}
                        </td>
                        <td className="py-3.5 px-4 whitespace-nowrap">{getApprovalStatusBadge(cr.status)}</td>
                        <td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
                          {cr.status === ApprovalStatus.Approved ? (
                            <span className="text-xs font-semibold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-lg border border-emerald-500/20">
                              Resolved & Enacted
                            </span>
                          ) : (
                            <div className="inline-flex items-center gap-1.5">
                              <button
                                onClick={() => openResolveChange(cr, ApprovalStatus.Approved)}
                                className="px-2.5 py-1 text-xs font-semibold text-emerald-300 bg-emerald-950/50 hover:bg-emerald-900/60 border border-emerald-700/50 rounded-lg transition cursor-pointer flex items-center gap-1"
                              >
                                <Check className="w-3 h-3" /> Approve
                              </button>
                              <button
                                onClick={() => openResolveChange(cr, ApprovalStatus.Rejected)}
                                className="px-2.5 py-1 text-xs font-semibold text-rose-300 bg-rose-950/50 hover:bg-rose-900/60 border border-rose-700/50 rounded-lg transition cursor-pointer flex items-center gap-1"
                              >
                                <XCircle className="w-3 h-3" /> Reject
                              </button>
                            </div>
                          )}
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </div>
          </div>
        )}
      </div>

      {/* Modal: Create/Edit Issue */}
      <Modal
        isOpen={isIssueModalOpen}
        onClose={() => setIsIssueModalOpen(false)}
        title={editingIssue ? 'Edit Project Issue' : 'Log Project Issue'}
        size="md"
      >
        <form
          onSubmit={issueForm.handleSubmit((d) => (editingIssue ? updateIssueMutation.mutate(d) : createIssueMutation.mutate(d)))}
          className="space-y-4"
        >
          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Issue Title *</label>
            <input
              {...issueForm.register('title')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
              placeholder="e.g. Procurement delays for regional solar supplies"
            />
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Description *</label>
            <textarea
              rows={3}
              {...issueForm.register('description')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
              placeholder="Detail root cause and operational impact..."
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-semibold text-slate-300 mb-1">Priority</label>
              <select
                {...issueForm.register('priority')}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
              >
                {PRIORITY_OPTIONS.map((opt) => (
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-300 mb-1">Assigned Person *</label>
              <select
                {...issueForm.register('assignedTo')}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
              >
                <option value="">Select Assignee</option>
                {users.map((u) => (
                  <option key={u.id} value={u.id}>
                    {u.name || u.email || u.id}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
            <button
              type="button"
              onClick={() => setIsIssueModalOpen(false)}
              className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={createIssueMutation.isPending || updateIssueMutation.isPending}
              className="px-4 py-2 rounded-xl text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white transition shadow-md shadow-amber-600/30"
            >
              {editingIssue ? 'Update Issue' : 'Log Issue'}
            </button>
          </div>
        </form>
      </Modal>

      {/* Modal: In-place Resolve Issue */}
      <Modal
        isOpen={isResolveIssueModalOpen}
        onClose={() => setIsResolveIssueModalOpen(false)}
        title={`Resolve Issue: ${resolvingIssue?.title || ''}`}
        size="md"
      >
        <form onSubmit={resolveIssueForm.handleSubmit((d) => resolveIssueMutation.mutate(d))} className="space-y-4">
          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Resolution Summary & Remediation Notes *</label>
            <textarea
              rows={4}
              {...resolveIssueForm.register('resolution')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
              placeholder="Explain how the issue was resolved or mitigated..."
            />
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Status Transition</label>
            <select
              {...resolveIssueForm.register('status')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
            >
              <option value={ActivityStatus.Inactive}>Resolved & Closed</option>
              <option value={ActivityStatus.Active}>Keep Open with Progress Notes</option>
            </select>
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
            <button
              type="button"
              onClick={() => setIsResolveIssueModalOpen(false)}
              className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={resolveIssueMutation.isPending}
              className="px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-600 hover:bg-emerald-500 text-white transition shadow-md shadow-emerald-600/30"
            >
              Confirm Resolution
            </button>
          </div>
        </form>
      </Modal>

      {/* Modal: Create Change Request */}
      <Modal
        isOpen={isChangeModalOpen}
        onClose={() => setIsChangeModalOpen(false)}
        title="Request Contractual & Budgetary Change"
        size="md"
      >
        <form onSubmit={changeForm.handleSubmit((d) => createChangeMutation.mutate(d))} className="space-y-4">
          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Change Proposal Title *</label>
            <input
              {...changeForm.register('title')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
              placeholder="e.g. Scope expansion to include 2 additional clinics"
            />
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Business Justification *</label>
            <textarea
              rows={3}
              {...changeForm.register('justification')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
              placeholder="Provide statutory and contractual justification..."
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-semibold text-slate-300 mb-1">Revised Total Budget (ZAR) *</label>
              <input
                type="number"
                {...changeForm.register('revisedBudget')}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
              />
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-300 mb-1">Revision Date *</label>
              <input
                type="date"
                {...changeForm.register('revisionDate')}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
              />
            </div>
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
            <button
              type="button"
              onClick={() => setIsChangeModalOpen(false)}
              className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={createChangeMutation.isPending}
              className="px-4 py-2 rounded-xl text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white transition shadow-md shadow-amber-600/30"
            >
              Submit Change
            </button>
          </div>
        </form>
      </Modal>

      {/* Modal: Resolve Change Request Decision */}
      <Modal
        isOpen={isResolveChangeModalOpen}
        onClose={() => setIsResolveChangeModalOpen(false)}
        title={`Resolve Change: ${resolvingChange?.title || ''}`}
        size="md"
      >
        <form onSubmit={resolveChangeForm.handleSubmit((d) => resolveChangeMutation.mutate(d))} className="space-y-4">
          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Decision Justification / Sign-off Comments *</label>
            <textarea
              rows={3}
              {...resolveChangeForm.register('justification')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500"
            />
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
            <button
              type="button"
              onClick={() => setIsResolveChangeModalOpen(false)}
              className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={resolveChangeMutation.isPending}
              className="px-4 py-2 rounded-xl text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white transition shadow-md shadow-blue-600/30"
            >
              Apply Decision
            </button>
          </div>
        </form>
      </Modal>
    </div>
  );
};