"use client";

import { Suspense } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { PageHeader } from "@/components/ui/PageHeader";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import { useOcrWorkflow } from "@/hooks/useOcrWorkflow";
import { WorkflowStepIndicator } from "@/components/ocr/WorkflowStepIndicator";
import { WorkflowUploadSection } from "@/components/ocr/WorkflowUploadSection";
import { WorkflowDocumentsList } from "@/components/ocr/WorkflowDocumentsList";
import { WorkflowLedgerResults } from "@/components/ocr/WorkflowLedgerResults";
import { WorkflowCompareSection } from "@/components/ocr/WorkflowCompareSection";
import { CreateBankDialog } from "@/components/ocr/CreateBankDialog";
import { ReviewPositionsDialog } from "@/components/ocr/ReviewPositionsDialog";
import { DuplicateDocumentDialog } from "@/components/ocr/DuplicateDocumentDialog";
import { DuplicateTransactionDialog } from "@/components/ocr/DuplicateTransactionDialog";
import {
  ArrowLeft,
  Save,
  Loader2,
  BookOpen,
} from "lucide-react";

function OcrWorkflowContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const customerId = searchParams.get("customer_id")
    ? Number(searchParams.get("customer_id"))
    : undefined;

  const workflow = useOcrWorkflow(customerId);
  const { state } = workflow;

  const reviewDoc =
    workflow.reviewDocIndex !== null
      ? state.documents[workflow.reviewDocIndex]
      : null;

  // Get default bank info for the create bank dialog
  const createBankDoc = workflow.createBankDocId
    ? state.documents.find(
        (d) => d.document_id === workflow.createBankDocId
      )
    : null;

  const actions = (
    <button
      onClick={() => router.push("/ocr")}
      className="inline-flex items-center gap-1.5 px-3 py-2 text-xs font-medium border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors"
    >
      <ArrowLeft className="h-3.5 w-3.5" />
      Back to Documents
    </button>
  );

  return (
    <div className="container mx-auto px-4 py-10">
      <PageHeader
        title={
          state.customerName
            ? `OCR Workflow - ${state.customerName}`
            : "OCR Workflow"
        }
        breadcrumbs={[...BREADCRUMBS.ocrWorkflow]}
        actions={actions}
      />

      <div className="mt-6 space-y-6">
        {/* Error banner */}
        {state.error && (
          <div className="bg-red-50 text-red-700 px-4 py-3 rounded text-sm">
            {state.error}
          </div>
        )}

        {/* Toast */}
        {workflow.toast && (
          <div
            className={`fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg text-sm font-medium ${
              workflow.toast.type === "success"
                ? "bg-green-50 text-green-800 border border-green-200"
                : "bg-red-50 text-red-800 border border-red-200"
            }`}
          >
            {workflow.toast.message}
          </div>
        )}

        {/* Step Indicator */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-200/80 p-5 animate-[fadeIn_0.4s_ease-out]">
          <WorkflowStepIndicator currentStep={state.currentStep} />
        </div>

        {/* Step Content */}
        {state.currentStep === 1 ? (
          <div className="space-y-6">
            {/* Upload Section */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-200/80 p-5 animate-[fadeSlideUp_0.5s_ease-out_0.1s_both]">
              <WorkflowUploadSection
                onUpload={workflow.uploadAndProcessFiles}
                isUploading={state.isUploading}
                uploadProgress={state.uploadProgress}
              />
            </div>

            {/* Documents List */}
            {state.documents.length > 0 && (
              <div className="bg-white rounded-xl shadow-sm border border-gray-200/80 p-5 animate-[fadeSlideUp_0.5s_ease-out_0.2s_both]">
                <WorkflowDocumentsList
                  documents={state.documents}
                  banks={state.banks}
                  onAssignBank={workflow.assignBank}
                  onCreateBank={workflow.openCreateBankForDoc}
                  onReviewPositions={workflow.openReviewPositions}
                />
              </div>
            )}

            {/* Ledger Results */}
            {state.ledgerResults && (
              <div className="bg-white rounded-xl shadow-sm border border-gray-200/80 p-5 animate-[fadeSlideUp_0.5s_ease-out_0.3s_both]">
                <h3 className="text-sm font-semibold text-gray-700 mb-4">
                  Ledger Results
                </h3>
                <WorkflowLedgerResults
                  ledger={state.ledgerResults.ledger}
                  selectedTransactions={workflow.selectedTransactions}
                  assetTypeOverrides={workflow.assetTypeOverrides}
                  onToggleTransaction={workflow.toggleTransaction}
                  onSetAssetType={workflow.setAssetTypeOverride}
                  onToggleAllInPeriod={workflow.toggleAllInPeriod}
                />
              </div>
            )}
          </div>
        ) : (
          /* Step 2: Compare */
          <div className="bg-white rounded-xl shadow-sm border border-gray-200/80 p-5 animate-[fadeSlideUp_0.5s_ease-out_0.1s_both]">
            <h3 className="text-sm font-semibold text-gray-700 mb-4">
              Compare with Database
            </h3>
            <WorkflowCompareSection
              documents={state.documents}
              selectedDocIndices={workflow.selectedDocIndices}
              onToggleDocSelection={workflow.toggleDocSelection}
              onCompare={workflow.compareWithDatabase}
              isComparing={state.isComparing}
              comparisonResults={state.comparisonResults}
            />
          </div>
        )}

        {/* Footer Actions */}
        {state.currentStep === 1 && state.documents.length > 0 && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-200/80 p-4 animate-[fadeSlideUp_0.5s_ease-out_0.4s_both]">
            <div className="flex items-center justify-end gap-3">
              {/* Create Ledger - when no ledger results yet */}
              {!state.ledgerResults && (
                <button
                  onClick={workflow.createLedger}
                  disabled={
                    state.isCreatingLedger ||
                    state.documents.filter((d) => d.status === "processed" && d.bank_id).length === 0
                  }
                  className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-medium bg-[#428B4D] text-white rounded-md hover:bg-[#357a3f] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  {state.isCreatingLedger ? (
                    <>
                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
                      Creating Ledger...
                    </>
                  ) : (
                    <>
                      <BookOpen className="h-3.5 w-3.5" />
                      Create Ledger
                    </>
                  )}
                </button>
              )}

              {/* Save Selected - only when ledger exists */}
              {state.ledgerResults && (
                <button
                  onClick={workflow.saveSelectedTransactions}
                  disabled={
                    state.isSaving ||
                    workflow.selectedTransactions.size === 0
                  }
                  className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-medium bg-[#428B4D] text-white rounded-md hover:bg-[#357a3f] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  {state.isSaving ? (
                    <>
                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
                      Saving...
                    </>
                  ) : (
                    <>
                      <Save className="h-3.5 w-3.5" />
                      Save Selected ({workflow.selectedTransactions.size})
                    </>
                  )}
                </button>
              )}
            </div>
          </div>
        )}

        {state.currentStep === 2 && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-200/80 p-4 animate-[fadeSlideUp_0.5s_ease-out_0.4s_both]">
            <button
              onClick={() => workflow.goToStep(1)}
              className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-medium border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors"
            >
              <ArrowLeft className="h-3.5 w-3.5" />
              Back to Step 1
            </button>
          </div>
        )}
      </div>

      {/* Dialogs */}
      <CreateBankDialog
        open={workflow.showCreateBankDialog}
        onOpenChange={workflow.setShowCreateBankDialog}
        customerId={state.customerId}
        defaultBankName={createBankDoc?.clientInfo?.bankName || createBankDoc?.bank_type || ""}
        defaultAccountNumber={
          createBankDoc?.clientInfo?.portfolioNumber || ""
        }
        defaultCurrency={
          createBankDoc?.clientInfo?.referenceCurrency || "USD"
        }
        onBankCreated={workflow.createBank}
      />

      <ReviewPositionsDialog
        open={workflow.showReviewPositionsDialog}
        onOpenChange={() => workflow.closeReviewPositions()}
        filename={reviewDoc?.filename || ""}
        extractedData={reviewDoc?.extracted_data || undefined}
      />

      <DuplicateDocumentDialog
        open={workflow.showDuplicateDocDialog}
        onOpenChange={(open) => {
          if (!open) workflow.resolveDuplicateDocuments(null);
        }}
        duplicates={workflow.pendingDuplicateDocuments}
        onResolve={workflow.resolveDuplicateDocuments}
      />

      <DuplicateTransactionDialog
        open={workflow.showDuplicateTransDialog}
        onOpenChange={workflow.setShowDuplicateTransDialog}
        duplicates={workflow.pendingDuplicateTransactions}
        onResolve={workflow.resolveDuplicateTransactions}
      />
    </div>
  );
}

export default function OcrWorkflowPage() {
  return (
    <Suspense
      fallback={
        <div className="flex items-center justify-center py-20">
          <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
        </div>
      }
    >
      <OcrWorkflowContent />
    </Suspense>
  );
}