'use client';

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { User, Settings2, ShieldCheck, ShoppingCart, Database, HardDrive } from 'lucide-react';
import { useMemo, useState } from 'react';

type SettingsTabsClientProps = {
  accountContent: React.ReactNode;
  systemContent: React.ReactNode;
  posSettingsContent: React.ReactNode;
  permissionsContent: React.ReactNode;
  backupContent: React.ReactNode;
  storageConfigContent?: React.ReactNode;
  isAdmin: boolean;
};

export default function SettingsTabsClient({
  accountContent,
  systemContent,
  posSettingsContent,
  permissionsContent,
  backupContent,
  storageConfigContent,
  isAdmin,
}: SettingsTabsClientProps) {
  const [activeTab, setActiveTab] = useState<'account' | 'system' | 'pos-settings' | 'permissions' | 'backup' | 'storage-config'>('account');
  const submitConfig = useMemo(() => {
    if (activeTab === 'account') {
      return { formId: 'settings-account-form', label: 'تحديث كلمة المرور' };
    }
    if (activeTab === 'system') {
      return { formId: 'settings-system-form', label: 'حفظ إعدادات النظام' };
    }
    if (activeTab === 'pos-settings') {
      return { formId: 'settings-pos-form', label: 'حفظ إعدادات نقطة البيع' };
    }
    if (activeTab === 'permissions') {
      return { formId: 'settings-permissions-form', label: 'حفظ الصلاحيات' };
    }
    return null;
  }, [activeTab]);

  return (
    <Tabs defaultValue="account" value={activeTab} onValueChange={(value) => setActiveTab(value as 'account' | 'system' | 'pos-settings' | 'permissions' | 'backup' | 'storage-config')} className="w-full">
      <TabsList className="mb-6 flex h-auto flex-wrap justify-start gap-1 bg-muted p-1 rounded-lg">
        <TabsTrigger value="account" className="flex items-center gap-2 rounded-md px-4 py-2 text-sm">
          <User className="h-4 w-4" />
          الحساب
        </TabsTrigger>
        {isAdmin && (
          <TabsTrigger value="system" className="flex items-center gap-2 rounded-md px-4 py-2 text-sm">
            <Settings2 className="h-4 w-4" />
            النظام
          </TabsTrigger>
        )}
        {isAdmin && (
          <TabsTrigger value="pos-settings" className="flex items-center gap-2 rounded-md px-4 py-2 text-sm">
            <ShoppingCart className="h-4 w-4" />
            إعدادات نقطة البيع
          </TabsTrigger>
        )}
        {isAdmin && (
          <TabsTrigger value="permissions" className="flex items-center gap-2 rounded-md px-4 py-2 text-sm">
            <ShieldCheck className="h-4 w-4" />
            إدارة الصلاحيات
          </TabsTrigger>
        )}
        {isAdmin && (
          <TabsTrigger value="backup" className="flex items-center gap-2 rounded-md px-4 py-2 text-sm">
            <Database className="h-4 w-4" />
            النسخ الاحتياطي
          </TabsTrigger>
        )}
        {isAdmin && (
          <TabsTrigger value="storage-config" className="flex items-center gap-2 rounded-md px-4 py-2 text-sm">
            <HardDrive className="h-4 w-4" />
            إعدادات التخزين
          </TabsTrigger>
        )}
      </TabsList>

      {submitConfig && (
        <div className="mb-6 flex justify-end">
          <Button type="submit" form={submitConfig.formId}>
            {submitConfig.label}
          </Button>
        </div>
      )}

      <TabsContent value="account" className="grid gap-6">
        {accountContent}
      </TabsContent>

      {isAdmin && (
        <TabsContent value="system" className="grid gap-6">
          {systemContent}
        </TabsContent>
      )}

      {isAdmin && (
        <TabsContent value="pos-settings" className="grid gap-6">
          {posSettingsContent}
        </TabsContent>
      )}

      {isAdmin && (
        <TabsContent value="permissions" className="grid gap-6">
          {permissionsContent}
        </TabsContent>
      )}

      {isAdmin && (
        <TabsContent value="backup" className="grid gap-6">
          {backupContent}
        </TabsContent>
      )}

      {isAdmin && storageConfigContent && (
        <TabsContent value="storage-config" className="grid gap-6">
          {storageConfigContent}
        </TabsContent>
      )}
    </Tabs>
  );
}