import { useMemo } from 'react';
import { Puzzle, KeyRound, UserCircle } from 'lucide-react';
import type { LayoutNode, PanelComponents } from 'officerdev';
import { WorkspaceLayout } from 'officerdev';
import { useAuth } from 'hooks/useAuth';
import { useGlobal } from 'hooks/useGlobal';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';

import { SettingsSidebar, SettingsContent, type SettingsSection } from '../SettingsPanel';
import { GoogleOAuthConfig } from './GoogleOAuthConfig';
import { GoogleAccount } from './GoogleAccount';

const GLOBAL_KEY = 'INTEGRATIONS_SETTINGS_SELECTED';
const TAB_KEY = 'INTEGRATIONS_SETTINGS_TAB';

const enterpriseSections: SettingsSection[] = [
  { key: 'google-oauth', icon: KeyRound, title: 'Google OAuth', description: 'Client ID and secret for Google APIs', content: <GoogleOAuthConfig /> },
];

const personalSections: SettingsSection[] = [
  { key: 'google-account', icon: UserCircle, title: 'Google Account', description: 'Connect your Google account', content: <GoogleAccount /> },
];

const IntegrationsSidebar = () => {
  const { user } = useAuth();
  const isSuperAdmin = user?.role === 'Super Admin';
  const [tab, setTab] = useGlobal<string>(TAB_KEY, isSuperAdmin ? 'enterprise' : 'personal');
  const sections = tab === 'enterprise' ? enterpriseSections : personalSections;

  return (
    <div className="flex flex-col h-full">
      <div className="p-3 pb-2">
        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium bg-duck-teal/15 text-duck-teal">
          <Puzzle className="h-4 w-4" />
          Integrations
        </div>
      </div>
      {isSuperAdmin && (
        <div className="px-3 pb-2">
          <Tabs value={tab} onValueChange={setTab}>
            <TabsList className="w-full">
              <TabsTrigger value="enterprise" className="flex-1 cursor-pointer">
                Enterprise
              </TabsTrigger>
              <TabsTrigger value="personal" className="flex-1 cursor-pointer">
                Personal
              </TabsTrigger>
            </TabsList>
          </Tabs>
        </div>
      )}
      <SettingsSidebar globalKey={GLOBAL_KEY} icon={Puzzle} label="Integrations" sections={sections} hideHeader />
    </div>
  );
};

const IntegrationsContent = () => {
  const { user } = useAuth();
  const isSuperAdmin = user?.role === 'Super Admin';
  const [tab] = useGlobal<string>(TAB_KEY, isSuperAdmin ? 'enterprise' : 'personal');
  const sections = tab === 'enterprise' ? enterpriseSections : personalSections;

  return <SettingsContent globalKey={GLOBAL_KEY} sections={sections} />;
};

const layout: LayoutNode = {
  type: 'group',
  id: 'integrations-root',
  direction: 'horizontal',
  children: [
    { node: { type: 'panel', id: 'integrations-left', appType: null }, size: 20 },
    { node: { type: 'panel', id: 'integrations-right', appType: null }, size: 80 },
  ],
};

export const IntegrationsSettings = () => {
  const panelComponents: PanelComponents = useMemo(
    () => ({
      'integrations-left': IntegrationsSidebar,
      'integrations-right': IntegrationsContent,
    }),
    [],
  );

  return (
    <div className="h-full w-full pt-2">
      <WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
    </div>
  );
};