"use client";
import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { PlusIcon, SettingsIcon, UsersIcon, WorkflowIcon } from "@/components/icons";
import { ApprovalWorkflowForm } from "@/components/form/ApprovalWorkflowForm";
import { UserLevelsForm } from "@/components/form/UserLevelsForm";
import { useWorkflowModal } from "@/components/modals/WorkflowModalProvider";
import { useWorkflowStatusCheck } from "@/hooks/useWorkflowStatusCheck";
import {
  CreateApprovalWorkflowWithClientSettingsRequest,
  UserLevelsCreateRequest,
  UserLevel,
  getUserLevels,
  getApprovalWorkflowComprehensiveDetails,
  ComprehensiveWorkflowResponse,
  createUserLevel,
} from "@/service/approval-workflows";

function TenantSettingsContent() {
  const [activeTab, setActiveTab] = useState("workflows");
  const [isUserLevelDialogOpen, setIsUserLevelDialogOpen] = useState(false);
  const [workflow, setWorkflow] = useState<ComprehensiveWorkflowResponse | null>(null);
  const [userLevels, setUserLevels] = useState<UserLevel[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isEditingWorkflow, setIsEditingWorkflow] = useState(false);
  const { checkWorkflowStatus } = useWorkflowStatusCheck();
  const { showWorkflowModal } = useWorkflowModal();

  // Load data on component mount
  React.useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    setIsLoading(true);
    try {
      const [comprehensiveWorkflowRes, userLevelsRes] = await Promise.all([
        getApprovalWorkflowComprehensiveDetails(4), // Using workflow ID 4 as per API example
        getUserLevels(),
      ]);

      if (!comprehensiveWorkflowRes?.error) {
        setWorkflow(comprehensiveWorkflowRes?.data?.data || null);
      } else {
        setWorkflow(null);
      }
      
      if (!userLevelsRes?.error) {
        setUserLevels(userLevelsRes?.data?.data || []);
      }
    } catch (error) {
      console.error("Error loading data:", error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleWorkflowSave = async (data: CreateApprovalWorkflowWithClientSettingsRequest) => {
    setIsEditingWorkflow(false);
    await loadData(); // Reload data after saving
  };

  const handleUserLevelSave = async (data: UserLevelsCreateRequest) => {
    try {
      const response = await createUserLevel(data);
      
      if (response?.error) {
        console.error("Error creating user level:", response?.message);
        // You can add error handling here (e.g., show error message)
      } else {
        console.log("User level created successfully:", response);
        // You can add success handling here (e.g., show success message)
      }
    } catch (error) {
      console.error("Error creating user level:", error);
    }
    
    setIsUserLevelDialogOpen(false);
    await loadData(); // Reload data after saving
  };

  const handleBulkUserLevelSave = async (data: UserLevelsCreateRequest[]) => {
    setIsUserLevelDialogOpen(false);
    await loadData(); // Reload data after saving
  };

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Tenant Settings</h1>
          <p className="text-gray-600 mt-2">
            Manage approval workflows and user levels for your tenant
          </p>
        </div>
        <div className="flex items-center gap-2">
          <SettingsIcon className="h-6 w-6 text-gray-500" />
          <Button 
            variant="outline" 
            size="sm"
            onClick={checkWorkflowStatus}
          >
            Check Workflow Status
          </Button>
          <Button 
            variant="outline" 
            size="sm"
            onClick={() => showWorkflowModal({ hasWorkflowSetup: false })}
            className="bg-red-50 text-red-600 border-red-200 hover:bg-red-100"
          >
            Test Modal
          </Button>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="workflows" className="flex items-center gap-2">
            <WorkflowIcon className="h-4 w-4" />
            Approval Workflows
          </TabsTrigger>
          <TabsTrigger value="user-levels" className="flex items-center gap-2">
            <UsersIcon className="h-4 w-4" />
            User Levels
          </TabsTrigger>
        </TabsList>

        {/* Approval Workflows Tab */}
        <TabsContent value="workflows" className="space-y-6">
          <div className="flex items-center justify-between">
            <h2 className="text-2xl font-semibold">Approval Workflow Setup</h2>
            {workflow && !isEditingWorkflow && (
              <Button 
                onClick={() => setIsEditingWorkflow(true)}
                className="flex items-center gap-2"
              >
                <SettingsIcon className="h-4 w-4" />
                Edit Workflow
              </Button>
            )}
          </div>

          {isEditingWorkflow ? (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  <span>Setup Approval Workflow</span>
                  <Button
                    variant="outline"
                    onClick={() => setIsEditingWorkflow(false)}
                  >
                    Cancel
                  </Button>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ApprovalWorkflowForm
                  initialData={workflow ? {
                    name: workflow.workflow.name,
                    description: workflow.workflow.description,
                    isDefault: workflow.workflow.isDefault,
                    isActive: workflow.workflow.isActive,
                    requiresApproval: workflow.workflow.requiresApproval,
                    autoPublish: workflow.workflow.autoPublish,
                    steps: workflow.steps?.map(step => ({
                      stepOrder: step.stepOrder,
                      stepName: step.stepName,
                      requiredUserLevelId: step.requiredUserLevelId,
                      canSkip: step.canSkip,
                      autoApproveAfterHours: step.autoApproveAfterHours,
                      isActive: step.isActive,
                      conditionType: step.conditionType,
                      conditionValue: step.conditionValue,
                    })) || [],
                    clientApprovalSettings: {
                      approvalExemptCategories: workflow.clientSettings.exemptCategoriesDetails || [],
                      approvalExemptRoles: workflow.clientSettings.exemptRolesDetails || [],
                      approvalExemptUsers: workflow.clientSettings.exemptUsersDetails || [],
                      autoPublishArticles: workflow.clientSettings.autoPublishArticles,
                      isActive: workflow.clientSettings.isActive,
                      requireApprovalFor: workflow.clientSettings.requireApprovalFor || [],
                      requiresApproval: workflow.clientSettings.requiresApproval,
                      skipApprovalFor: workflow.clientSettings.skipApprovalFor || []
                    }
                  } : undefined}
                  onSave={handleWorkflowSave}
                  onCancel={() => setIsEditingWorkflow(false)}
                />
              </CardContent>
            </Card>
          ) : workflow ? (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  <span>{workflow.workflow.name}</span>
                  <div className="flex items-center gap-2">
                    {workflow.workflow.isDefault && (
                      <span className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">
                        Default
                      </span>
                    )}
                    {workflow.workflow.isActive ? (
                      <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
                        Active
                      </span>
                    ) : (
                      <span className="px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded-full">
                        Inactive
                      </span>
                    )}
                  </div>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 text-sm mb-4">
                  {workflow.workflow.description}
                </p>
                
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                  <div className="text-center p-4 bg-gray-50 rounded-lg">
                    <div className="text-2xl font-bold text-blue-600">{workflow.workflow.totalSteps}</div>
                    <div className="text-sm text-gray-600">Total Steps</div>
                  </div>
                  
                  <div className="text-center p-4 bg-gray-50 rounded-lg">
                    <div className="text-2xl font-bold text-green-600">{workflow.workflow.activeSteps}</div>
                    <div className="text-sm text-gray-600">Active Steps</div>
                  </div>
                  
                  <div className="text-center p-4 bg-gray-50 rounded-lg">
                    <div className={`text-2xl font-bold ${workflow.workflow.requiresApproval ? 'text-green-600' : 'text-red-600'}`}>
                      {workflow.workflow.requiresApproval ? 'Yes' : 'No'}
                    </div>
                    <div className="text-sm text-gray-600">Requires Approval</div>
                  </div>

                  <div className="text-center p-4 bg-gray-50 rounded-lg">
                    <div className={`text-2xl font-bold ${workflow.workflow.autoPublish ? 'text-green-600' : 'text-red-600'}`}>
                      {workflow.workflow.autoPublish ? 'Yes' : 'No'}
                    </div>
                    <div className="text-sm text-gray-600">Auto Publish</div>
                  </div>
                </div>

                {/* Workflow Steps Overview */}
                {workflow.steps && workflow.steps.length > 0 && (
                  <div className="mb-6">
                    <h4 className="text-lg font-medium mb-3">Workflow Steps</h4>
                    <div className="space-y-2">
                      {workflow.steps.map((step: any, index: number) => (
                        <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                          <div className="flex items-center gap-3">
                            <div className="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium">
                              {step.stepOrder}
                            </div>
                            <div>
                              <div className="font-medium">{step.stepName}</div>
                              <div className="text-sm text-gray-500">
                                {step.conditionType && `Condition: ${step.conditionType}`}
                                {step.autoApproveAfterHours && ` • Auto-approve after ${step.autoApproveAfterHours}h`}
                                {step.requiredUserLevelName && ` • Required Level: ${step.requiredUserLevelName}`}
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            {step.canSkip && (
                              <span className="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">
                                Can Skip
                              </span>
                            )}
                            {step.isParallel && (
                              <span className="px-2 py-1 text-xs bg-purple-100 text-purple-800 rounded-full">
                                Parallel
                              </span>
                            )}
                            {step.isActive && (
                              <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
                                Active
                              </span>
                            )}
                            {step.isFirstStep && (
                              <span className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">
                                First Step
                              </span>
                            )}
                            {step.isLastStep && (
                              <span className="px-2 py-1 text-xs bg-orange-100 text-orange-800 rounded-full">
                                Last Step
                              </span>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Client Settings */}
                <div className="mb-6">
                  <h4 className="text-lg font-medium mb-3">Client Settings</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Default Workflow</div>
                      <div className="text-sm text-gray-600">{workflow.clientSettings.defaultWorkflowName}</div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Auto Publish Articles</div>
                      <div className={`text-sm font-medium ${workflow.clientSettings.autoPublishArticles ? 'text-green-600' : 'text-red-600'}`}>
                        {workflow.clientSettings.autoPublishArticles ? 'Yes' : 'No'}
                      </div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Requires Approval</div>
                      <div className={`text-sm font-medium ${workflow.clientSettings.requiresApproval ? 'text-green-600' : 'text-red-600'}`}>
                        {workflow.clientSettings.requiresApproval ? 'Yes' : 'No'}
                      </div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Settings Active</div>
                      <div className={`text-sm font-medium ${workflow.clientSettings.isActive ? 'text-green-600' : 'text-red-600'}`}>
                        {workflow.clientSettings.isActive ? 'Yes' : 'No'}
                      </div>
                    </div>
                  </div>
                </div>

                {/* Statistics */}
                <div className="mb-6">
                  <h4 className="text-lg font-medium mb-3">Workflow Statistics</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Total Articles Processed</div>
                      <div className="text-2xl font-bold text-blue-600">{workflow.statistics.totalArticlesProcessed}</div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Pending Articles</div>
                      <div className="text-2xl font-bold text-yellow-600">{workflow.statistics.pendingArticles}</div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Approved Articles</div>
                      <div className="text-2xl font-bold text-green-600">{workflow.statistics.approvedArticles}</div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Rejected Articles</div>
                      <div className="text-2xl font-bold text-red-600">{workflow.statistics.rejectedArticles}</div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Average Processing Time</div>
                      <div className="text-2xl font-bold text-purple-600">{workflow.statistics.averageProcessingTime}h</div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Most Active Step</div>
                      <div className="text-sm text-gray-600">{workflow.statistics.mostActiveStep || 'N/A'}</div>
                    </div>
                  </div>
                </div>

                {/* Workflow Metadata */}
                <div className="mb-6">
                  <h4 className="text-lg font-medium mb-3">Workflow Information</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Client ID</div>
                      <div className="text-sm text-gray-600 font-mono">{workflow.workflow.clientId}</div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Created At</div>
                      <div className="text-sm text-gray-600">
                        {new Date(workflow.workflow.createdAt).toLocaleString()}
                      </div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Updated At</div>
                      <div className="text-sm text-gray-600">
                        {new Date(workflow.workflow.updatedAt).toLocaleString()}
                      </div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Workflow ID</div>
                      <div className="text-sm text-gray-600 font-mono">{workflow.workflow.id}</div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Has Branches</div>
                      <div className={`text-sm font-medium ${workflow.workflow.hasBranches ? 'text-green-600' : 'text-gray-600'}`}>
                        {workflow.workflow.hasBranches ? 'Yes' : 'No'}
                      </div>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-sm font-medium text-gray-700 mb-1">Max Step Order</div>
                      <div className="text-sm text-gray-600">{workflow.workflow.maxStepOrder}</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ) : (
            <Card>
              <CardContent className="flex items-center justify-center py-12">
                <div className="text-center">
                  <WorkflowIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 mb-2">No Workflow Configured</h3>
                  <p className="text-gray-500 mb-4">
                    Set up your approval workflow to manage content approval process
                  </p>
                  <Button onClick={() => setIsEditingWorkflow(true)}>
                    <PlusIcon className="h-4 w-4 mr-2" />
                    Setup Workflow
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}
        </TabsContent>

        {/* User Levels Tab */}
        <TabsContent value="user-levels" className="space-y-6">
          <div className="flex items-center justify-between">
            <h2 className="text-2xl font-semibold">User Levels</h2>
            <Dialog open={isUserLevelDialogOpen} onOpenChange={setIsUserLevelDialogOpen}>
              <DialogTrigger asChild>
                <Button className="flex items-center gap-2">
                  <PlusIcon className="h-4 w-4" />
                  Create User Level
                </Button>
              </DialogTrigger>
              <DialogContent className="md:max-w-6xl max-h-[90vh] overflow-y-auto">
                <DialogHeader>
                  <DialogTitle>Create New User Level</DialogTitle>
                </DialogHeader>
                <UserLevelsForm
                  mode="single"
                  onSave={handleUserLevelSave}
                  onCancel={() => setIsUserLevelDialogOpen(false)}
                />
              </DialogContent>
            </Dialog>
          </div>

          {/* User Levels Summary */}
          {userLevels.length > 0 && (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
              <div className="text-center p-4 bg-gray-50 rounded-lg">
                <div className="text-2xl font-bold text-blue-600">{userLevels.length}</div>
                <div className="text-sm text-gray-600">Total User Levels</div>
              </div>
              
              <div className="text-center p-4 bg-gray-50 rounded-lg">
                <div className="text-2xl font-bold text-green-600">
                  {userLevels.filter(ul => ul.isActive).length}
                </div>
                <div className="text-sm text-gray-600">Active Levels</div>
              </div>
              
              <div className="text-center p-4 bg-gray-50 rounded-lg">
                <div className="text-2xl font-bold text-purple-600">
                  {userLevels.filter(ul => ul.isApprovalActive).length}
                </div>
                <div className="text-sm text-gray-600">Approval Active</div>
              </div>

              <div className="text-center p-4 bg-gray-50 rounded-lg">
                <div className="text-2xl font-bold text-orange-600">
                  {userLevels.filter(ul => ul.parentLevelId).length}
                </div>
                <div className="text-sm text-gray-600">Child Levels</div>
              </div>
            </div>
          )}

          {/* User Levels Hierarchy */}
          {userLevels.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <UsersIcon className="h-5 w-5" />
                  User Levels Hierarchy
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {userLevels
                    .filter(ul => !ul.parentLevelId) // Root levels
                    .sort((a, b) => a.levelNumber - b.levelNumber)
                    .map(rootLevel => (
                      <div key={rootLevel.id} className="space-y-2">
                        {/* Root Level */}
                        <div className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                          <div className="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium">
                            {rootLevel.levelNumber}
                          </div>
                          <div className="flex-1">
                            <div className="font-medium">{rootLevel.name}</div>
                            <div className="text-sm text-gray-500">
                              {rootLevel.aliasName} • {rootLevel.group || 'No group'}
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            {rootLevel.isActive && (
                              <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
                                Active
                              </span>
                            )}
                            {rootLevel.isApprovalActive && (
                              <span className="px-2 py-1 text-xs bg-purple-100 text-purple-800 rounded-full">
                                Approval Active
                              </span>
                            )}
                          </div>
                        </div>
                        
                        {/* Child Levels */}
                        {userLevels
                          .filter(ul => ul.parentLevelId === rootLevel.id)
                          .sort((a, b) => a.levelNumber - b.levelNumber)
                          .map(childLevel => (
                            <div key={childLevel.id} className="ml-8 flex items-center gap-3 p-3 bg-gray-50 rounded-lg border-l-4 border-gray-300">
                              <div className="w-6 h-6 bg-gray-100 text-gray-600 rounded-full flex items-center justify-center text-xs font-medium">
                                {childLevel.levelNumber}
                              </div>
                              <div className="flex-1">
                                <div className="font-medium text-sm">{childLevel.name}</div>
                                <div className="text-xs text-gray-500">
                                  {childLevel.aliasName} • {childLevel.group || 'No group'}
                                </div>
                              </div>
                              <div className="flex items-center gap-1">
                                {childLevel.isActive && (
                                  <span className="px-1 py-0.5 text-xs bg-green-100 text-green-800 rounded-full">
                                    Active
                                  </span>
                                )}
                                {childLevel.isApprovalActive && (
                                  <span className="px-1 py-0.5 text-xs bg-purple-100 text-purple-800 rounded-full">
                                    Approval
                                  </span>
                                )}
                              </div>
                            </div>
                          ))}
                      </div>
                    ))}
                </div>
              </CardContent>
            </Card>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {userLevels.length > 0 ? userLevels.map((userLevel) => (
              <Card key={userLevel.id} className="hover:shadow-lg transition-shadow">
                <CardHeader>
                  <CardTitle className="flex items-center justify-between">
                    <span className="truncate">{userLevel.name}</span>
                    <div className="flex items-center gap-2">
                      <span className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">
                        Level {userLevel.levelNumber}
                      </span>
                      {userLevel.isActive ? (
                        <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
                          Active
                        </span>
                      ) : (
                        <span className="px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded-full">
                          Inactive
                        </span>
                      )}
                    </div>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2 mb-4">
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-500">Alias:</span>
                      <span className="font-mono text-xs bg-gray-100 px-2 py-1 rounded">
                        {userLevel.aliasName}
                      </span>
                    </div>
                    
                    {userLevel.group && (
                      <div className="flex items-center justify-between text-sm">
                        <span className="text-gray-500">Group:</span>
                        <span className="font-medium">{userLevel.group}</span>
                      </div>
                    )}
                    
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-500">Approval Active:</span>
                      <span className={`font-medium ${userLevel.isApprovalActive ? 'text-green-600' : 'text-red-600'}`}>
                        {userLevel.isApprovalActive ? 'Yes' : 'No'}
                      </span>
                    </div>

                    {userLevel.parentLevelId && (
                      <div className="flex items-center justify-between text-sm">
                        <span className="text-gray-500">Parent Level:</span>
                        <span className="font-medium">
                          { userLevels.length > 0 ? userLevels.find(ul => ul.id === userLevel.parentLevelId)?.name || `Level ${userLevel.parentLevelId}` : `Level ${userLevel.parentLevelId}`}
                        </span>
                      </div>
                    )}

                    {userLevel.provinceId && (
                      <div className="flex items-center justify-between text-sm">
                        <span className="text-gray-500">Province:</span>
                        <span className="font-medium">Province {userLevel.provinceId}</span>
                      </div>
                    )}

                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-500">Created:</span>
                      <span className="font-medium text-xs">
                        {userLevel.createdAt ? new Date(userLevel.createdAt).toLocaleDateString() : 'N/A'}
                      </span>
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-2">
                    <Button variant="outline" size="sm" className="flex-1">
                      Edit
                    </Button>
                    <Button variant="outline" size="sm" className="flex-1">
                      Users
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )) : ''}
          </div>

          {userLevels.length === 0 && !isLoading && (
            <Card>
              <CardContent className="flex items-center justify-center py-12">
                <div className="text-center">
                  <UsersIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 mb-2">No User Levels Found</h3>
                  <p className="text-gray-500 mb-4">
                    Create your first user level to define approval hierarchy
                  </p>
                  <Button onClick={() => setIsUserLevelDialogOpen(true)}>
                    <PlusIcon className="h-4 w-4 mr-2" />
                    Create User Level
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}

export default function TenantSettingsPage() {
  return <TenantSettingsContent />;
}