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 {
  Scale,
  Plus,
  Search,
  Filter,
  RefreshCw,
  Edit2,
  Eye,
  Layers,
  Calendar,
  User as UserIcon,
  Tag,
  CheckCircle2,
  AlertCircle,
  GitBranch,
} from 'lucide-react';
import { Modal } from '../ui/Modal';
import { HelpTooltip } from '../ui/HelpTooltip';
import { useToast } from '../ui/Toast';
import { ExportButton } from '../ui/ExportButton';
import { ExportColumn } from '../../utils/exportUtils';
import { useTableSort, SortableTh } from '../../utils/tableSort';
import {
  Rule,
  Programme,
  ActivityStatus,
} from '../../types';
import {
  getRules,
  createRule,
  updateRule,
} from '../../services/api';
import {
  getActivityStatusBadge,
  formatDate,
  getUserEmail,
  ACTIVITY_STATUS_OPTIONS,
} from '../../lib/formatters';

const ruleSchema = z.object({
  programmeId: z.coerce.number().min(1, 'Please select an associated programme from the dropdown'),
  name: z.string().min(3, 'Rule name must be at least 3 characters'),
  description: z.string().min(5, 'Description is required (minimum 5 characters)'),
  version: z.coerce.number().min(1, 'Version must be at least 1').default(1),
  status: z.coerce.number().default(ActivityStatus.Active),
});

type RuleFormValues = z.infer<typeof ruleSchema>;

interface RulesSectionProps {
  programmes: Programme[];
  currentUserId: string;
  preselectedProgrammeId?: string | number | null;
  onClearPreselectedProgramme?: () => void;
  isCreateModalOpenExternal?: boolean;
  onCloseCreateModalExternal?: () => void;
}

export const RulesSection: React.FC<RulesSectionProps> = ({
  programmes,
  currentUserId,
  preselectedProgrammeId,
  onClearPreselectedProgramme,
  isCreateModalOpenExternal,
  onCloseCreateModalExternal,
}) => {
  const queryClient = useQueryClient();
  const { success, error: toastError } = useToast();

  const [searchTerm, setSearchTerm] = useState('');
  const [selectedProgrammeFilter, setSelectedProgrammeFilter] = useState<string>(
    preselectedProgrammeId ? String(preselectedProgrammeId) : 'all'
  );
  const [statusFilter, setStatusFilter] = useState<string>('all');

  // Modals
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingRule, setEditingRule] = useState<Rule | null>(null);
  const [inspectingRule, setInspectingRule] = useState<Rule | null>(null);

  // Sync external create trigger
  React.useEffect(() => {
    if (isCreateModalOpenExternal) {
      setEditingRule(null);
      ruleForm.reset({
        programmeId: preselectedProgrammeId ? Number(preselectedProgrammeId) : (programmes[0]?.id ? Number(programmes[0].id) : 0),
        name: '',
        description: '',
        version: 1,
        status: ActivityStatus.Active,
      });
      setIsModalOpen(true);
    }
  }, [isCreateModalOpenExternal, preselectedProgrammeId, programmes]);

  // Form setup
  const ruleForm = useForm<RuleFormValues>({
    resolver: zodResolver(ruleSchema),
    defaultValues: {
      programmeId: programmes[0]?.id ? Number(programmes[0].id) : 0,
      name: '',
      description: '',
      version: 1,
      status: ActivityStatus.Active,
    },
  });

  // Query: Get all rules (with programme filter)
  const {
    data: rules = [],
    isLoading,
    isFetching,
    refetch,
  } = useQuery({
    queryKey: ['rules', selectedProgrammeFilter],
    queryFn: () =>
      getRules(
        { page: 1, pageSize: 200 },
        selectedProgrammeFilter !== 'all' ? selectedProgrammeFilter : undefined
      ),
  });

  // Programme lookup helper
  const programmeMap = useMemo(() => {
    const map = new Map<string, Programme>();
    programmes.forEach((p) => map.set(String(p.id), p));
    return map;
  }, [programmes]);

  // Mutation: Create or Update Rule
  const mutation = useMutation({
    mutationFn: async (data: RuleFormValues) => {
      if (editingRule) {
        await updateRule({
          ruleId: editingRule.id,
          programmeId: data.programmeId,
          name: data.name,
          description: data.description,
          status: data.status !== undefined ? Number(data.status) : ActivityStatus.Active,
          version: Number(data.version) || 1,
          userId: currentUserId,
        });
      } else {
        await createRule({
          programmeId: data.programmeId,
          name: data.name,
          description: data.description,
          userId: currentUserId,
        });
      }
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['rules'] });
      success(
        editingRule ? 'Rule Mutated' : 'Rule Created',
        editingRule
          ? 'Programme rule record mutated successfully.'
          : 'New programme rule registered and linked to programme.'
      );
      setIsModalOpen(false);
      setEditingRule(null);
      if (onCloseCreateModalExternal) onCloseCreateModalExternal();
    },
    onError: (err: unknown) => {
      toastError('Save Failed', err);
    },
  });

  // Handlers
  const openCreateModal = (programmeId?: number | string) => {
    setEditingRule(null);
    ruleForm.reset({
      programmeId: programmeId
        ? Number(programmeId)
        : selectedProgrammeFilter !== 'all'
        ? Number(selectedProgrammeFilter)
        : programmes[0]?.id
        ? Number(programmes[0].id)
        : 0,
      name: '',
      description: '',
      version: 1,
      status: ActivityStatus.Active,
    });
    setIsModalOpen(true);
  };

  const openEditModal = (rule: Rule) => {
    setEditingRule(rule);
    ruleForm.reset({
      programmeId: Number(rule.programmeId),
      name: rule.name || '',
      description: rule.description || '',
      version: Number(rule.version) > 0 ? Number(rule.version) : 1,
      status: Number(rule.status),
    });
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setEditingRule(null);
    if (onCloseCreateModalExternal) onCloseCreateModalExternal();
  };

  // Filter rules
  const filteredRules = useMemo(() => {
    return rules.filter((r) => {
      // Programme filter
      if (selectedProgrammeFilter !== 'all' && String(r.programmeId) !== String(selectedProgrammeFilter)) {
        return false;
      }
      // Status filter
      if (statusFilter !== 'all' && String(r.status) !== String(statusFilter)) {
        return false;
      }
      // Search term
      if (searchTerm.trim()) {
        const query = searchTerm.toLowerCase();
        const pName = programmeMap.get(String(r.programmeId))?.name?.toLowerCase() || '';
        const matchName = (r.name || '').toLowerCase().includes(query);
        const matchDesc = (r.description || '').toLowerCase().includes(query);
        const matchProg = pName.includes(query);
        if (!matchName && !matchDesc && !matchProg) {
          return false;
        }
      }
      return true;
    });
  }, [rules, selectedProgrammeFilter, statusFilter, searchTerm, programmeMap]);

  // Sorting hook
  const {
    sortedData: sortedRules,
    sortColumn: ruleSortCol,
    sortDirection: ruleSortDir,
    handleSort: handleRuleSort,
  } = useTableSort<Rule>(filteredRules, null, null, {
    name: (r: Rule) => r.name,
    programmeId: (r: Rule) => programmeMap.get(String(r.programmeId))?.name || `Programme #${r.programmeId}`,
    version: (r: Rule) => r.version || 1,
    status: (r: Rule) => getActivityStatusBadge(r.status).label,
    createdAt: (r: Rule) => r.createdAt,
  });

  // Export columns definition
  const ruleExportColumns: ExportColumn<Rule>[] = useMemo(
    () => [
      { header: 'Rule ID', key: 'id' },
      { header: 'Rule Name', key: 'name', format: (val) => val || 'Untitled Rule' },
      {
        header: 'Strategic Programme',
        key: 'programmeId',
        format: (val) => programmeMap.get(String(val))?.name || `Programme #${val}`,
      },
      { header: 'Version', key: 'version', format: (val) => `v${val || 1}` },
      {
        header: 'Status',
        key: 'status',
        format: (val) => (Number(val) === ActivityStatus.Active ? 'Active' : 'Inactive'),
      },
      { header: 'Rule Description', key: 'description', format: (val) => val || '—' },
      { header: 'Created Date', key: 'createdAt', format: (val) => (val ? formatDate(val) : '—') },
    ],
    [programmeMap]
  );

  return (
    <div className="space-y-4">
      {/* Top Filter and Actions Bar */}
      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 bg-[#0d121f]/90 p-4 rounded-2xl border border-slate-800/80 backdrop-blur-sm">
        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 flex-1">
          {/* Search Input */}
          <div className="relative flex-1 max-w-md">
            <Search className="w-4 h-4 text-slate-500 absolute left-3 top-3" />
            <input
              type="text"
              placeholder="Search rules by title, description, or programme..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-9 pr-4 py-2.5 text-xs bg-[#090d16] border border-slate-700/80 rounded-xl focus:outline-none focus:ring-1 focus:ring-blue-500 text-slate-200 placeholder:text-slate-500 transition shadow-xs"
            />
          </div>

          {/* Programme Filter Dropdown */}
          <div className="flex items-center gap-2">
            <label className="text-xs text-slate-400 whitespace-nowrap flex items-center gap-1 font-medium">
              <Layers className="w-3.5 h-3.5 text-slate-400" />
              Programme:
            </label>
            <select
              value={selectedProgrammeFilter}
              onChange={(e) => {
                setSelectedProgrammeFilter(e.target.value);
                if (onClearPreselectedProgramme && e.target.value === 'all') {
                  onClearPreselectedProgramme();
                }
              }}
              className="px-3 py-2 text-xs bg-[#090d16] border border-slate-700/80 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500 max-w-[200px]"
            >
              <option value="all">All Programmes ({programmes.length})</option>
              {programmes.map((p) => (
                <option key={p.id} value={String(p.id)}>
                  {p.name}
                </option>
              ))}
            </select>
          </div>

          {/* Status Filter Dropdown */}
          <div className="flex items-center gap-2">
            <label className="text-xs text-slate-400 whitespace-nowrap flex items-center gap-1 font-medium">
              <Filter className="w-3.5 h-3.5 text-slate-400" />
              Status:
            </label>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="px-3 py-2 text-xs bg-[#090d16] border border-slate-700/80 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
            >
              <option value="all">All Statuses</option>
              <option value={String(ActivityStatus.Active)}>Active</option>
              <option value={String(ActivityStatus.Inactive)}>Inactive</option>
            </select>
          </div>
        </div>

        {/* Action Buttons: Refresh, Export & Add */}
        <div className="flex items-center gap-2 self-end lg:self-center">
          <button
            type="button"
            onClick={() => {
              refetch();
              success('Refreshed', 'Programme rules updated from API.');
            }}
            disabled={isFetching}
            className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-slate-300 bg-[#0d121f] hover:bg-slate-800 border border-slate-700/80 rounded-xl transition cursor-pointer shadow-xs disabled:opacity-50"
            title="Refresh Programme Rules from API"
          >
            <RefreshCw className={`w-3.5 h-3.5 text-blue-400 ${isFetching ? 'animate-spin' : ''}`} />
            <span>Refresh</span>
          </button>

          <ExportButton
            claim="governance"
            title="Programme Rules Registry"
            subtitle="Statutory, regulatory, and eligibility rules governing strategic funding programmes"
            filename={`pfm-programme-rules-${new Date().toISOString().split('T')[0]}`}
            columns={ruleExportColumns}
            data={filteredRules}
          />

          <button
            type="button"
            onClick={() => openCreateModal()}
            className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-md shadow-blue-500/20 transition cursor-pointer"
          >
            <Plus className="w-4 h-4" />
            <span>Add Rule</span>
          </button>
        </div>
      </div>

      {/* Rules Table & Cards */}
      <div className="rounded-2xl border border-slate-800/80 bg-[#0d121f]/90 overflow-hidden shadow-xl">
        <div className="p-4 border-b border-slate-800/80 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Scale className="w-4 h-4 text-amber-400" />
            <h3 className="text-xs font-bold text-slate-200 uppercase tracking-wider">
              Programme Rules & Governance Directives ({filteredRules.length})
            </h3>
            <HelpTooltip
              title="Programme Rules"
              content="Binding regulatory, operational, and eligibility rules associated with specific funding programmes. Enforces statutory constraints on grant allocation."
              placement="right"
              size="sm"
            />
          </div>
          <span className="text-[11px] text-slate-400 font-mono">
            {filteredRules.length} of {rules.length} recorded
          </span>
        </div>

        {isLoading ? (
          <div className="p-12 text-center text-xs text-slate-400 flex flex-col items-center justify-center gap-2">
            <RefreshCw className="w-5 h-5 animate-spin text-amber-400" />
            <span>Loading programme rules directory...</span>
          </div>
        ) : filteredRules.length === 0 ? (
          <div className="p-12 text-center text-xs text-slate-400 space-y-3">
            <div className="text-slate-500">
              {searchTerm || selectedProgrammeFilter !== 'all' || statusFilter !== 'all'
                ? 'No programme rules match the active filters.'
                : 'No programme rules registered yet. Link rules to programmes using the button below.'}
            </div>
            <button
              type="button"
              onClick={() => openCreateModal()}
              className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-xl transition cursor-pointer"
            >
              <Plus className="w-4 h-4" />
              Add First Rule
            </button>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="border-b border-slate-800/80 bg-slate-900/50 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
                  <SortableTh column="name" currentColumn={ruleSortCol} direction={ruleSortDir} onSort={handleRuleSort} className="py-3 px-4">
                    Rule Title & Directives
                  </SortableTh>
                  <SortableTh column="programmeId" currentColumn={ruleSortCol} direction={ruleSortDir} onSort={handleRuleSort} className="py-3 px-4">
                    Associated Programme
                  </SortableTh>
                  <SortableTh column="version" currentColumn={ruleSortCol} direction={ruleSortDir} onSort={handleRuleSort} className="py-3 px-4">
                    Version
                  </SortableTh>
                  <SortableTh column="status" currentColumn={ruleSortCol} direction={ruleSortDir} onSort={handleRuleSort} className="py-3 px-4">
                    Status
                  </SortableTh>
                  <SortableTh column="createdAt" currentColumn={ruleSortCol} direction={ruleSortDir} onSort={handleRuleSort} className="py-3 px-4">
                    Audit Info
                  </SortableTh>
                  <th className="py-3 px-4 text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800/60 text-xs text-slate-300">
                {sortedRules.map((r) => {
                  const statusBadge = getActivityStatusBadge(r.status);
                  const parentProg = programmeMap.get(String(r.programmeId));

                  return (
                    <tr key={r.id} className="hover:bg-slate-800/30 transition-colors">
                      <td className="py-3.5 px-4">
                        <div className="font-semibold text-white max-w-sm">{r.name}</div>
                        {r.description && (
                          <div className="text-[11px] text-slate-400 line-clamp-1 mt-0.5 max-w-md">
                            {r.description}
                          </div>
                        )}
                      </td>
                      <td className="py-3.5 px-4">
                        {parentProg ? (
                          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-slate-800/80 text-slate-200 border border-slate-700 font-medium">
                            <Layers className="w-3 h-3 text-amber-400" />
                            {parentProg.name}
                          </span>
                        ) : (
                          <span className="text-slate-500 font-mono text-xs">
                            Programme #{r.programmeId}
                          </span>
                        )}
                      </td>
                      <td className="py-3.5 px-4 font-mono">
                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-semibold bg-amber-500/10 text-amber-400 border border-amber-500/20">
                          <GitBranch className="w-3 h-3" />v{r.version || 1}
                        </span>
                      </td>
                      <td className="py-3.5 px-4">
                        <span
                          className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold border ${statusBadge.className}`}
                        >
                          {statusBadge.label}
                        </span>
                      </td>
                      <td className="py-3.5 px-4 text-[11px] text-slate-400 font-mono">
                        <div>{formatDate(r.createdAt)}</div>
                        {r.createdBy && (
                          <div className="text-[10px] text-slate-500">{getUserEmail(r.createdBy)}</div>
                        )}
                      </td>
                      <td className="py-3.5 px-4 text-right">
                        <div className="flex items-center justify-end gap-1.5">
                          <button
                            type="button"
                            onClick={() => setInspectingRule(r)}
                            className="inline-flex items-center gap-1 text-xs font-semibold text-cyan-400 hover:text-white bg-cyan-500/10 hover:bg-cyan-500/20 border border-cyan-500/30 px-2.5 py-1 rounded-lg transition shadow-xs cursor-pointer"
                            title="Inspect Rule"
                          >
                            <Eye className="w-3 h-3" />
                            Inspect
                          </button>
                          <button
                            type="button"
                            onClick={() => openEditModal(r)}
                            className="inline-flex items-center gap-1 text-xs font-semibold text-slate-200 hover:text-white bg-slate-900/80 hover:bg-slate-800 border border-slate-700/80 px-2.5 py-1 rounded-lg transition shadow-xs cursor-pointer"
                            title="Edit / Mutate Rule"
                          >
                            <Edit2 className="w-3 h-3" />
                            Edit
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Modal: Create / Edit Rule */}
      <Modal
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        title={editingRule ? 'Edit Programme Rule' : 'Register New Programme Rule'}
        subtitle={
          editingRule
            ? `Mutating Rule: ${editingRule.name || `#${editingRule.id}`}`
            : 'Authoritative compliance rule associated with an existing funding programme'
        }
        helpText="Each rule must be associated with an existing programme chosen from the dropdown below. Rules define statutory constraints and mandatory eligibility."
      >
        <form
          onSubmit={ruleForm.handleSubmit((data) => mutation.mutate(data))}
          className="space-y-4"
        >
          {/* Associated Programme Dropdown (User must choose from dropdown!) */}
          <div>
            <div className="flex items-center gap-1 mb-1">
              <label className="block text-xs font-semibold text-slate-300">
                Associated Programme *
              </label>
              <HelpTooltip
                title="Associated Programme Selection"
                content="Choose the existing funding programme to which this rule will apply. Each rule is strictly associated with a programme."
                size="sm"
              />
            </div>
            <select
              {...ruleForm.register('programmeId')}
              className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
            >
              <option value="">Select an associated programme from dropdown...</option>
              {programmes.map((p) => (
                <option key={p.id} value={Number(p.id)}>
                  {p.name}
                </option>
              ))}
            </select>
            {ruleForm.formState.errors.programmeId && (
              <p className="text-red-400 text-[11px] mt-1">
                {ruleForm.formState.errors.programmeId.message}
              </p>
            )}
          </div>

          {/* Rule Name */}
          <div>
            <div className="flex items-center gap-1 mb-1">
              <label className="block text-xs font-semibold text-slate-300">Rule Name *</label>
              <HelpTooltip
                title="Rule Name"
                content="Title or clause name of the programme rule (e.g., Mandatory BEE Level 2 Threshold)."
                size="sm"
              />
            </div>
            <input
              type="text"
              placeholder="e.g. Environmental Impact Assessment Mandatory Clearance"
              {...ruleForm.register('name')}
              className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
            {ruleForm.formState.errors.name && (
              <p className="text-red-400 text-[11px] mt-1">
                {ruleForm.formState.errors.name.message}
              </p>
            )}
          </div>

          {/* Description */}
          <div>
            <div className="flex items-center gap-1 mb-1">
              <label className="block text-xs font-semibold text-slate-300">
                Rule Directives & Description *
              </label>
              <HelpTooltip
                title="Rule Directives"
                content="Full text and verification criteria of the rule enforced across all projects in the programme."
                size="sm"
              />
            </div>
            <textarea
              rows={4}
              placeholder="Specify the exact statutory rule, criteria, threshold, verification mechanism, and non-compliance penalty..."
              {...ruleForm.register('description')}
              className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
            {ruleForm.formState.errors.description && (
              <p className="text-red-400 text-[11px] mt-1">
                {ruleForm.formState.errors.description.message}
              </p>
            )}
          </div>

          {/* Version & Status */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <div className="flex items-center justify-between mb-1">
                <div className="flex items-center gap-1">
                  <label className="block text-xs font-semibold text-slate-300">Rule Version</label>
                  <HelpTooltip
                    title="Rule Version"
                    content="System-managed version number tracking revisions of this statutory rule (read-only)."
                    size="sm"
                  />
                </div>
                <span className="text-[10px] font-mono uppercase tracking-wider text-slate-500 bg-slate-800/60 px-1.5 py-0.5 rounded border border-slate-700/50">
                  Read-Only
                </span>
              </div>
              <input
                type="number"
                min="1"
                readOnly
                tabIndex={-1}
                {...ruleForm.register('version')}
                className="w-full px-3 py-2 text-xs bg-slate-900/80 border border-slate-700/70 rounded-xl text-slate-400 font-mono cursor-not-allowed select-none focus:outline-none focus:ring-0 focus:border-slate-700/70"
              />
              {ruleForm.formState.errors.version && (
                <p className="text-red-400 text-[11px] mt-1">
                  {ruleForm.formState.errors.version.message}
                </p>
              )}
            </div>

            <div>
              <div className="flex items-center gap-1 mb-1">
                <label className="block text-xs font-semibold text-slate-300">Status</label>
                <HelpTooltip
                  title="Rule Enforcement Status"
                  content="Active rules are actively evaluated in grant awards and milestones."
                  size="sm"
                />
              </div>
              <select
                {...ruleForm.register('status')}
                className="w-full px-3 py-2 text-xs bg-[#090d16] border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:ring-1 focus:ring-blue-500"
              >
                {ACTIVITY_STATUS_OPTIONS.map((opt) => (
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>
            </div>
          </div>

          {/* Footer Actions */}
          <div className="pt-3 border-t border-slate-800 flex justify-end gap-2">
            <button
              type="button"
              onClick={handleCloseModal}
              className="px-4 py-2 text-xs font-semibold text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-xl transition cursor-pointer"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={mutation.isPending}
              className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-xl shadow-md transition disabled:opacity-50 cursor-pointer"
            >
              {mutation.isPending && <RefreshCw className="w-3.5 h-3.5 animate-spin" />}
              {editingRule ? 'Save Rule Changes' : 'Register Programme Rule'}
            </button>
          </div>
        </form>
      </Modal>

      {/* Modal: Inspect Rule Detail */}
      {inspectingRule && (
        <Modal
          isOpen={!!inspectingRule}
          onClose={() => setInspectingRule(null)}
          title={`Programme Rule: ${inspectingRule.name || ''}`}
          subtitle={`Version ${inspectingRule.version || 1} • Rule #${inspectingRule.id}`}
          maxWidth="lg"
        >
          <div className="space-y-4 text-xs">
            <div className="p-4 rounded-xl border border-slate-800 bg-[#0d121f] space-y-3">
              <div className="flex items-center justify-between">
                <span className="font-mono text-xs font-bold text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded border border-amber-500/20 flex items-center gap-1">
                  <GitBranch className="w-3.5 h-3.5" />
                  Version {inspectingRule.version || 1}
                </span>
                {(() => {
                  const badge = getActivityStatusBadge(inspectingRule.status);
                  return (
                    <span
                      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border ${badge.className}`}
                    >
                      {badge.label}
                    </span>
                  );
                })()}
              </div>

              <div>
                <h4 className="text-sm font-bold text-white mb-1">{inspectingRule.name}</h4>
                <p className="text-slate-300 whitespace-pre-wrap leading-relaxed">
                  {inspectingRule.description || 'No detailed description provided.'}
                </p>
              </div>

              <div className="pt-3 border-t border-slate-800/80 grid grid-cols-2 gap-3 text-[11px]">
                <div>
                  <span className="text-slate-500 block">Associated Programme</span>
                  <span className="text-slate-200 font-semibold">
                    {programmeMap.get(String(inspectingRule.programmeId))?.name ||
                      `Programme #${inspectingRule.programmeId}`}
                  </span>
                </div>
                <div>
                  <span className="text-slate-500 block">Created On</span>
                  <span className="text-slate-200 font-mono">
                    {formatDate(inspectingRule.createdAt)}
                  </span>
                </div>
                <div>
                  <span className="text-slate-500 block">Created By</span>
                  <span className="text-slate-200 font-mono">
                    {inspectingRule.createdBy ? getUserEmail(inspectingRule.createdBy) : '—'}
                  </span>
                </div>
                {inspectingRule.updatedAt && (
                  <div>
                    <span className="text-slate-500 block">Last Mutated</span>
                    <span className="text-slate-200 font-mono">
                      {formatDate(inspectingRule.updatedAt)}
                    </span>
                  </div>
                )}
              </div>
            </div>

            <div className="pt-2 border-t border-slate-800 flex justify-between items-center">
              <button
                type="button"
                onClick={() => {
                  const r = inspectingRule;
                  setInspectingRule(null);
                  openEditModal(r);
                }}
                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-200 bg-slate-800 hover:bg-slate-700 rounded-xl border border-slate-700 cursor-pointer"
              >
                <Edit2 className="w-3.5 h-3.5" />
                Edit Rule
              </button>
              <button
                type="button"
                onClick={() => setInspectingRule(null)}
                className="px-4 py-2 text-xs font-semibold text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-xl cursor-pointer"
              >
                Close
              </button>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
};