import type { ReactNode } from 'react';
import { Boxes, Building2, Gauge, History, KeyRound, Route, ServerCog, ShieldCheck, UsersRound, Workflow } from 'lucide-react';
import type {
  BaseModelUpsertRequest,
  CatalogProviderUpsertRequest,
  GatewayAccessRuleBatchRequest,
  GatewayAccessRuleUpsertRequest,
  GatewayTenantUpsertRequest,
  GatewayUserUpsertRequest,
  PricingRuleSetUpsertRequest,
  RuntimePolicySetUpsertRequest,
  UserGroupUpsertRequest,
  WalletBalanceAdjustmentRequest,
} from '@easyai-ai-gateway/contracts';
import type { ConsoleData, StatItem } from '../app-state';
import { EntityTable } from '../components/EntityTable';
import { StatGrid } from '../components/StatGrid';
import { Badge, Card, CardContent, CardHeader, CardTitle, Tabs } from '../components/ui';
import type { AdminSection, LoadState, PlatformWithModelsInput } from '../types';
import { AccessRulesPanel } from './admin/AccessRulesPanel';
import { AuditLogsPanel } from './admin/AuditLogsPanel';
import { BaseModelCatalogPanel } from './admin/BaseModelCatalogPanel';
import { TenantsPanel, UserGroupsPanel, UsersPanel } from './admin/IdentityManagementPanels';
import { PlatformManagementPanel } from './admin/PlatformManagementPanel';
import { PricingRulesPanel } from './admin/PricingRulesPanel';
import { ProviderManagementPanel } from './admin/ProviderManagementPanel';
import { RuntimePoliciesPanel } from './admin/RuntimePoliciesPanel';

const tabs = [
  { value: 'overview', label: '总览', icon: <Workflow size={15} /> },
  { value: 'globalModels', label: 'Provider', icon: <Boxes size={15} /> },
  { value: 'pricing', label: '定价规则', icon: <Gauge size={15} /> },
  { value: 'runtime', label: '运行策略', icon: <ShieldCheck size={15} /> },
  { value: 'baseModels', label: '基准模型库', icon: <Boxes size={15} /> },
  { value: 'platforms', label: '平台管理', icon: <ServerCog size={15} /> },
  { value: 'tenants', label: '租户', icon: <Building2 size={15} /> },
  { value: 'users', label: '用户', icon: <UsersRound size={15} /> },
  { value: 'userGroups', label: '用户组', icon: <UsersRound size={15} /> },
  { value: 'accessRules', label: '模型权限', icon: <KeyRound size={15} /> },
  { value: 'auditLogs', label: '审计日志', icon: <History size={15} /> },
] satisfies Array<{ value: AdminSection; label: string; icon: ReactNode }>;

export function AdminPage(props: {
  data: ConsoleData;
  operationMessage: string;
  section: AdminSection;
  stats: StatItem[];
  state: LoadState;
  onDeleteBaseModel: (baseModelId: string) => Promise<void>;
  onDeletePlatform: (platformId: string) => Promise<void>;
  onDeleteProvider: (providerId: string) => Promise<void>;
  onDeletePricingRuleSet: (ruleSetId: string) => Promise<void>;
  onDeleteRuntimePolicySet: (policySetId: string) => Promise<void>;
  onDeleteAccessRule: (ruleId: string) => Promise<void>;
  onDeleteTenant: (tenantId: string) => Promise<void>;
  onDeleteUser: (userId: string) => Promise<void>;
  onDeleteUserGroup: (groupId: string) => Promise<void>;
  onSaveBaseModel: (input: BaseModelUpsertRequest, baseModelId?: string) => Promise<void>;
  onResetAllBaseModels: () => Promise<void>;
  onResetBaseModel: (baseModelId: string) => Promise<void>;
  onBatchAccessRules: (input: GatewayAccessRuleBatchRequest) => Promise<void>;
  onSavePlatform: (input: PlatformWithModelsInput) => Promise<void>;
  onSaveProvider: (input: CatalogProviderUpsertRequest, providerId?: string) => Promise<void>;
  onSavePricingRuleSet: (input: PricingRuleSetUpsertRequest, ruleSetId?: string) => Promise<void>;
  onSaveRuntimePolicySet: (input: RuntimePolicySetUpsertRequest, policySetId?: string) => Promise<void>;
  onSaveAccessRule: (input: GatewayAccessRuleUpsertRequest, ruleId?: string) => Promise<void>;
  onSaveTenant: (input: GatewayTenantUpsertRequest, tenantId?: string) => Promise<void>;
  onSaveUser: (input: GatewayUserUpsertRequest, userId?: string) => Promise<void>;
  onSetUserWalletBalance: (userId: string, input: WalletBalanceAdjustmentRequest) => Promise<void>;
  onSaveUserGroup: (input: UserGroupUpsertRequest, groupId?: string) => Promise<void>;
  onSectionChange: (value: AdminSection) => void;
}) {
  return (
    <div className="pageStack">
      <div className="subPageLayout">
        <Tabs className="sideTabs" value={props.section} tabs={tabs} onValueChange={props.onSectionChange} />
        <div className="subPageContent">
          {props.section === 'overview' && <OverviewPanel data={props.data} stats={props.stats} />}
          {props.section === 'globalModels' && (
            <ProviderManagementPanel
              message={props.operationMessage}
              providers={props.data.providers}
              state={props.state}
              onDeleteProvider={props.onDeleteProvider}
              onSaveProvider={props.onSaveProvider}
            />
          )}
          {props.section === 'baseModels' && (
            <BaseModelCatalogPanel
              baseModels={props.data.baseModels}
              message={props.operationMessage}
              pricingRuleSets={props.data.pricingRuleSets}
              providers={props.data.providers}
              runtimePolicySets={props.data.runtimePolicySets}
              state={props.state}
              onDeleteBaseModel={props.onDeleteBaseModel}
              onResetAllBaseModels={props.onResetAllBaseModels}
              onResetBaseModel={props.onResetBaseModel}
              onSaveBaseModel={props.onSaveBaseModel}
            />
          )}
          {props.section === 'runtime' && (
            <RuntimePoliciesPanel
              message={props.operationMessage}
              runtimePolicySets={props.data.runtimePolicySets}
              state={props.state}
              onDeleteRuntimePolicySet={props.onDeleteRuntimePolicySet}
              onSaveRuntimePolicySet={props.onSaveRuntimePolicySet}
            />
          )}
          {props.section === 'accessRules' && (
            <AccessRulesPanel
              accessRules={props.data.accessRules}
              baseModels={props.data.baseModels}
              message={props.operationMessage}
              platformModels={props.data.models}
              platforms={props.data.platforms}
              state={props.state}
              userGroups={props.data.userGroups}
              onBatchAccessRules={props.onBatchAccessRules}
            />
          )}
          {props.section === 'pricing' && (
            <PricingRulesPanel
              message={props.operationMessage}
              pricingRuleSets={props.data.pricingRuleSets}
              state={props.state}
              onDeletePricingRuleSet={props.onDeletePricingRuleSet}
              onSavePricingRuleSet={props.onSavePricingRuleSet}
            />
          )}
          {props.section === 'platforms' && (
            <PlatformManagementPanel
              baseModels={props.data.baseModels}
              message={props.operationMessage}
              platformModels={props.data.models}
              platforms={props.data.platforms}
              pricingRuleSets={props.data.pricingRuleSets}
              providers={props.data.providers}
              state={props.state}
              onDeletePlatform={props.onDeletePlatform}
              onSavePlatform={props.onSavePlatform}
            />
          )}
          {props.section === 'tenants' && <TenantsPanel {...identityPanelProps(props)} />}
          {props.section === 'users' && <UsersPanel {...identityPanelProps(props)} />}
          {props.section === 'userGroups' && <UserGroupsPanel {...identityPanelProps(props)} />}
          {props.section === 'auditLogs' && <AuditLogsPanel auditLogs={props.data.auditLogs} message={props.operationMessage} />}
        </div>
      </div>
    </div>
  );
}

function identityPanelProps(props: {
  data: ConsoleData;
  operationMessage: string;
  state: LoadState;
  onDeleteTenant: (tenantId: string) => Promise<void>;
  onDeleteUser: (userId: string) => Promise<void>;
  onDeleteUserGroup: (groupId: string) => Promise<void>;
  onSaveTenant: (input: GatewayTenantUpsertRequest, tenantId?: string) => Promise<void>;
  onSaveUser: (input: GatewayUserUpsertRequest, userId?: string) => Promise<void>;
  onSetUserWalletBalance: (userId: string, input: WalletBalanceAdjustmentRequest) => Promise<void>;
  onSaveUserGroup: (input: UserGroupUpsertRequest, groupId?: string) => Promise<void>;
}) {
  return {
    data: props.data,
    operationMessage: props.operationMessage,
    state: props.state,
    onDeleteTenant: props.onDeleteTenant,
    onDeleteUser: props.onDeleteUser,
    onDeleteUserGroup: props.onDeleteUserGroup,
    onSaveTenant: props.onSaveTenant,
    onSaveUser: props.onSaveUser,
    onSetUserWalletBalance: props.onSetUserWalletBalance,
    onSaveUserGroup: props.onSaveUserGroup,
  };
}

function OverviewPanel(props: { data: ConsoleData; stats: StatItem[] }) {
  const enabledPlatforms = props.data.platforms.filter((item) => item.status === 'enabled');
  const chatModels = props.data.models.filter((item) => item.modelType.includes('text_generate') && item.enabled);
  const imageModels = props.data.models.filter((item) => item.modelType.some((type) => type.includes('image')) && item.enabled);

  return (
    <div className="pageStack">
      <StatGrid items={props.stats} />
      <section className="contentGrid three">
        <ManagementCard icon={<Route size={18} />} label="路由候选" value={enabledPlatforms.length} detail="平台优先级 / 失败切换" />
        <ManagementCard icon={<ShieldCheck size={18} />} label="策略对象" value={props.data.userGroups.length} detail="用户组 / 折扣 / 并发" />
        <ManagementCard icon={<Workflow size={18} />} label="运行窗口" value={props.data.rateLimitWindows.length} detail="TPM / RPM / 并发" />
      </section>
      <section className="contentGrid two">
        <Card>
          <CardHeader>
            <CardTitle>可用平台</CardTitle>
          </CardHeader>
          <CardContent>
            <EntityTable
              columns={['Provider', '平台', '状态', '优先级']}
              empty="暂无平台"
              rows={props.data.platforms.slice(0, 6).map((item) => [item.provider, item.internalName || item.name, item.status, item.priority])}
            />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>近期任务</CardTitle>
          </CardHeader>
          <CardContent>
            {props.data.taskResult ? (
              <div className="taskPreview">
                <Badge variant={props.data.taskResult.status === 'succeeded' ? 'success' : 'secondary'}>{props.data.taskResult.status}</Badge>
                <strong>{props.data.taskResult.model}</strong>
                <pre>{JSON.stringify(props.data.taskResult.result ?? {}, null, 2)}</pre>
              </div>
            ) : (
              <div className="emptyState">
                <KeyRound size={18} />
                <strong>暂无任务记录</strong>
              </div>
            )}
          </CardContent>
        </Card>
      </section>
      <section className="contentGrid two">
        <Card>
          <CardHeader>
            <CardTitle>模型能力</CardTitle>
          </CardHeader>
          <CardContent>
            <EntityTable
              columns={['能力', '数量', '阶段', '入口']}
              empty="暂无模型"
              rows={[
                ['对话', chatModels.length, 'Phase 1', '/v1/chat/completions'],
                ['图像', imageModels.length, 'Phase 1', '/v1/images/*'],
                ['视频', props.data.models.filter((item) => item.modelType.some((type) => type.includes('video'))).length, 'Next', '/v1/videos/*'],
              ]}
            />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>限流窗口</CardTitle>
          </CardHeader>
          <CardContent>
            <EntityTable
              columns={['Scope', '指标', '使用', '限制']}
              empty="暂无限流窗口"
              rows={props.data.rateLimitWindows.slice(0, 6).map((item) => [item.scopeKey, item.metric, item.usedValue, item.limitValue])}
            />
          </CardContent>
        </Card>
      </section>
    </div>
  );
}

function ManagementCard(props: { detail: string; icon: ReactNode; label: string; value: number }) {
  return (
    <Card>
      <CardContent className="capabilityCard">
        <div className="iconBox">{props.icon}</div>
        <div>
          <span>{props.label}</span>
          <strong>{props.value}</strong>
          <small>{props.detail}</small>
        </div>
      </CardContent>
    </Card>
  );
}