import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { AlertCircle, BarChart2, Clock, Plus, ShieldCheck, Zap } from 'lucide-react';
import { ConfirmationModal, useErrorToast } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { useApp } from '@nexuscrm/host-sdk';
import { tryBuildAppNavigationPath } from './platform/core/navigation/appNavigationCapabilities';
import { tryGetSetupCapabilityPagePath } from './platform/core/navigation/setupPagePaths';
import { formatApiError, getErrorMessage } from '@nexuscrm/host-sdk';
import { COMMON_FIELDS } from './platform/core/constants';
import { ApprovalProcessDetailPage } from './platform/features/approvals/ApprovalProcessDetailPage';
import { ApprovalProcessSetup } from './platform/features/approvals/ApprovalProcessSetup';
import { ApprovalProcessSetupWizard } from './platform/features/approvals/ApprovalProcessSetupWizard';
import { FlowDetailPage } from './platform/features/flows/components/FlowDetailPage';
import { FlowExecutionModal } from './platform/features/flows/components/FlowExecutionModal';
import { FlowInterviewPanel } from './platform/features/flows/components/FlowInterviewPanel';
import { FlowList } from './platform/features/flows/components/FlowList';
import { FlowPropertiesModal } from './platform/features/flows/components/FlowPropertiesModal';
import { FlowTestCoveragePanel } from './platform/features/flows/components/FlowTestCoveragePanel';
import { VisualFlowBuilder } from './platform/features/flows/components/builder/VisualFlowBuilder';
import { useDeleteFlow, useFlows, useToggleFlowStatus } from './platform/features/flows/hooks/useFlowQueries';
import { flowsApi, type Flow } from './platform/infrastructure/api/flows';

export {
  ApprovalProcessDetailPage as CrmApprovalProcessDetailPage,
  ApprovalProcessSetup as CrmApprovalProcessSetup,
  ApprovalProcessSetupWizard as CrmApprovalProcessSetupWizard,
  FlowDetailPage as CrmFlowDetailPage,
  VisualFlowBuilder as CrmVisualFlowBuilder,
};

export const CrmFlowsPage: React.FC = () => {
  const navigate = useNavigate();
  const { currentFrontendAppId } = useApp();
  const showError = useErrorToast();
  const [activeTab, setActiveTab] = useState<'flows' | 'approvals'>('flows');

  const { data: flows = [], isLoading: loadingFlows, error: flowQueryError } = useFlows();
  const toggleStatusMutation = useToggleFlowStatus();
  const deleteFlowMutation = useDeleteFlow();

  const [deleteFlowModalOpen, setDeleteFlowModalOpen] = useState(false);
  const [flowToDelete, setFlowToDelete] = useState<Flow | null>(null);
  const [deleteFlowError, setDeleteFlowError] = useState<string | null>(null);
  const [executeModalOpen, setExecuteModalOpen] = useState(false);
  const [flowToExecute, setFlowToExecute] = useState<Flow | null>(null);
  const [togglingFlowId, setTogglingFlowId] = useState<string | null>(null);
  const [interviewPanelOpen, setInterviewPanelOpen] = useState(false);
  const [coveragePanelOpen, setCoveragePanelOpen] = useState(false);
  const [editPropsModalOpen, setEditPropsModalOpen] = useState(false);
  const [flowForEditProps, setFlowForEditProps] = useState<Flow | null>(null);
  const [flowError, setFlowError] = useState<string | null>(null);

  const flowListPath = tryGetSetupCapabilityPagePath(currentFrontendAppId, 'flowList');
  const flowListChildPath = (id: string) => (flowListPath ? `${flowListPath.replace(/\/$/, '')}/${id}` : '/');
  const flowBuilderPath = (id: string) => (
    tryBuildAppNavigationPath(currentFrontendAppId, 'flowBuilder', { id }) ?? flowListChildPath(id)
  );

  const handleToggleStatus = async (flow: Flow) => {
    setTogglingFlowId(flow[COMMON_FIELDS.ID]);
    setFlowError(null);
    try {
      await toggleStatusMutation.mutateAsync(flow);
    } catch (err: unknown) {
      setFlowError(`Failed to toggle flow status: ${getErrorMessage(err)}`);
    } finally {
      setTogglingFlowId(null);
    }
  };

  const confirmDeleteFlow = async () => {
    if (!flowToDelete) return;
    setFlowError(null);
    setDeleteFlowError(null);
    try {
      await deleteFlowMutation.mutateAsync(flowToDelete);
      setDeleteFlowModalOpen(false);
      setFlowToDelete(null);
    } catch (err: unknown) {
      const apiError = formatApiError(err);
      const message = `Failed to delete flow: ${apiError.message}`;
      setFlowError(message);
      setDeleteFlowError(apiError.message);
      showError('Failed to delete flow', apiError.message);
    }
  };

  const displayError = flowError || (flowQueryError ? 'Failed to load flows' : null);

  return (
    <div className="p-6 max-w-7xl mx-auto">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl shadow-lg">
            <Zap className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Automation Studio</h1>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              Manage flows and approval processes
            </p>
          </div>
        </div>

        {activeTab === 'flows' ? (
          <div className="flex items-center gap-2">
            <button
              onClick={() => setCoveragePanelOpen(true)}
              className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-all"
            >
              <BarChart2 className="w-4 h-4" />
              Coverage
            </button>
            <button
              onClick={() => setInterviewPanelOpen(true)}
              className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-all"
            >
              <Clock className="w-4 h-4" />
              Interviews
            </button>
            <button
              onClick={() => navigate(flowBuilderPath('new'))}
              className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-600 text-white rounded-lg hover:from-purple-600 hover:to-indigo-700 transition-all shadow-md"
            >
              <Plus className="w-4 h-4" />
              New Flow
            </button>
          </div>
        ) : null}
      </div>

      <div className="flex bg-gray-100 dark:bg-gray-800 p-1 rounded-xl w-fit mb-6">
        <button
          onClick={() => setActiveTab('flows')}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === 'flows'
            ? 'bg-white dark:bg-gray-700 text-purple-600 dark:text-purple-400 shadow-sm'
            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
          }`}
        >
          <Zap className="w-4 h-4" />
          Flows
        </button>
        <button
          onClick={() => setActiveTab('approvals')}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === 'approvals'
            ? 'bg-white dark:bg-gray-700 text-green-600 dark:text-green-400 shadow-sm'
            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
          }`}
        >
          <ShieldCheck className="w-4 h-4" />
          Approval Processes
        </button>
      </div>

      {displayError && (
        <div className="mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-2 text-red-700 dark:text-red-400">
          <AlertCircle className="w-5 h-5" />
          {displayError}
        </div>
      )}

      {activeTab === 'flows' && (
        <FlowList
          flows={flows}
          loading={loadingFlows}
          togglingFlowId={togglingFlowId}
          onToggleStatus={handleToggleStatus}
          onEdit={(flow) => navigate(flowBuilderPath(flow[COMMON_FIELDS.ID]), { state: { initialFlow: flow } })}
          onDelete={(flow) => {
            setDeleteFlowError(null);
            setFlowToDelete(flow);
            setDeleteFlowModalOpen(true);
          }}
          onExecute={(flow) => {
            setFlowToExecute(flow);
            setExecuteModalOpen(true);
          }}
          onVersions={(flow) => navigate(flowListChildPath(flow.DeveloperName || flow[COMMON_FIELDS.ID]))}
          onEditProperties={(flow) => {
            setFlowForEditProps(flow);
            setEditPropsModalOpen(true);
          }}
          onCreate={() => navigate(flowBuilderPath('new'))}
        />
      )}

      {activeTab === 'approvals' && (
        <ApprovalProcessSetup />
      )}

      <ConfirmationModal
        isOpen={deleteFlowModalOpen}
        onClose={() => {
          setDeleteFlowModalOpen(false);
          setFlowToDelete(null);
          setDeleteFlowError(null);
        }}
        onConfirm={confirmDeleteFlow}
        title="Delete Flow"
        message={`Are you sure you want to delete the flow "${flowToDelete?.[COMMON_FIELDS.NAME]}"?`}
        errorMessage={deleteFlowError}
        confirmLabel="Delete"
        cancelLabel="Cancel"
        variant="danger"
        loading={deleteFlowMutation.isPending}
      />

      {flowToExecute && (
        <FlowExecutionModal
          isOpen={executeModalOpen}
          onClose={() => {
            setExecuteModalOpen(false);
            setFlowToExecute(null);
          }}
          flow={flowToExecute}
        />
      )}

      {interviewPanelOpen && (
        <FlowInterviewPanel onClose={() => setInterviewPanelOpen(false)} />
      )}

      {coveragePanelOpen && (
        <FlowTestCoveragePanel onClose={() => setCoveragePanelOpen(false)} />
      )}

      {flowForEditProps && (
        <FlowPropertiesModal
          isOpen={editPropsModalOpen}
          onClose={() => {
            setEditPropsModalOpen(false);
            setFlowForEditProps(null);
          }}
          flowName={flowForEditProps.Name}
          flowDescription={flowForEditProps.Description || ''}
          flowApiName={flowForEditProps.DeveloperName || flowForEditProps[COMMON_FIELDS.ID]}
          onSave={async (label, description) => {
            await flowsApi.updateFlowProperties(
              flowForEditProps.DeveloperName || flowForEditProps[COMMON_FIELDS.ID],
              label,
              description,
            );
          }}
        />
      )}
    </div>
  );
};

export default CrmFlowsPage;