import type { FormEvent, ReactNode } from 'react';
import { Boxes, Building2, Gauge, KeyRound, Route, ServerCog, ShieldCheck, UsersRound, Workflow } from 'lucide-react';
import type { BaseModelUpsertRequest, CatalogProviderUpsertRequest, PricingRuleSetUpsertRequest } from '@easyai-ai-gateway/contracts';
import type { ConsoleData, StatItem } from '../app-state';
import { EntityTable } from '../components/EntityTable';
import { PageHeader } from '../components/PageHeader';
import { StatGrid } from '../components/StatGrid';
import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Select, Tabs } from '../components/ui';
import type { AdminSection, LoadState, PlatformForm, PlatformModelForm } from '../types';
import { BaseModelCatalogPanel } from './admin/BaseModelCatalogPanel';
import { PricingRulesPanel } from './admin/PricingRulesPanel';
import { ProviderManagementPanel } from './admin/ProviderManagementPanel';

const tabs = [
  { value: 'overview', label: '总览', icon: <Workflow size={15} /> },
  { value: 'globalModels', label: 'Provider', icon: <Boxes size={15} /> },
  { value: 'baseModels', label: '基准模型库', icon: <Boxes size={15} /> },
  { value: 'pricing', label: '定价规则', icon: <Gauge 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: 'runtime', label: '运行限流', icon: <Gauge size={15} /> },
] satisfies Array<{ value: AdminSection; label: string; icon: ReactNode }>;

export function AdminPage(props: {
  data: ConsoleData;
  platformForm: PlatformForm;
  platformModelForm: PlatformModelForm;
  operationMessage: string;
  section: AdminSection;
  stats: StatItem[];
  state: LoadState;
  onDeleteBaseModel: (baseModelId: string) => Promise<void>;
  onDeleteProvider: (providerId: string) => Promise<void>;
  onDeletePricingRuleSet: (ruleSetId: string) => Promise<void>;
  onPlatformFormChange: (value: PlatformForm) => void;
  onPlatformModelFormChange: (value: PlatformModelForm) => void;
  onSaveBaseModel: (input: BaseModelUpsertRequest, baseModelId?: string) => Promise<void>;
  onSaveProvider: (input: CatalogProviderUpsertRequest, providerId?: string) => Promise<void>;
  onSavePricingRuleSet: (input: PricingRuleSetUpsertRequest, ruleSetId?: string) => Promise<void>;
  onSectionChange: (value: AdminSection) => void;
  onSubmitPlatform: (event: FormEvent<HTMLFormElement>) => void;
  onSubmitPlatformModel: (event: FormEvent<HTMLFormElement>) => void;
}) {
  return (
    <div className="pageStack">
      <PageHeader eyebrow="Admin" title="管理工作台" description="全局模型、平台、租户用户和运行策略。" />
      <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}
              providers={props.data.providers}
              state={props.state}
              onDeleteBaseModel={props.onDeleteBaseModel}
              onSaveBaseModel={props.onSaveBaseModel}
            />
          )}
          {props.section === 'pricing' && (
            <PricingRulesPanel
              message={props.operationMessage}
              pricingRuleSets={props.data.pricingRuleSets}
              state={props.state}
              onDeletePricingRuleSet={props.onDeletePricingRuleSet}
              onSavePricingRuleSet={props.onSavePricingRuleSet}
            />
          )}
          {props.section === 'platforms' && <PlatformsPanel {...props} />}
          {props.section === 'tenants' && <TenantsPanel data={props.data} />}
          {props.section === 'users' && <UsersPanel data={props.data} />}
          {props.section === 'userGroups' && <UserGroupsPanel data={props.data} />}
          {props.section === 'runtime' && <RuntimePanel data={props.data} />}
        </div>
      </div>
    </div>
  );
}

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 === 'chat' && item.enabled);
  const imageModels = props.data.models.filter((item) => item.modelType === '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.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 === '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>
  );
}

function PlatformsPanel(props: {
  data: ConsoleData;
  platformForm: PlatformForm;
  platformModelForm: PlatformModelForm;
  state: LoadState;
  onPlatformFormChange: (value: PlatformForm) => void;
  onPlatformModelFormChange: (value: PlatformModelForm) => void;
  onSubmitPlatform: (event: FormEvent<HTMLFormElement>) => void;
  onSubmitPlatformModel: (event: FormEvent<HTMLFormElement>) => void;
}) {
  return (
    <section className="contentGrid two">
      <Card>
        <CardHeader>
          <CardTitle>创建平台</CardTitle>
        </CardHeader>
        <CardContent>
          <form className="formGrid" onSubmit={props.onSubmitPlatform}>
            <Label>Provider<Input value={props.platformForm.provider} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, provider: event.target.value })} /></Label>
            <Label>平台 Key<Input value={props.platformForm.platformKey} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, platformKey: event.target.value })} /></Label>
            <Label>名称<Input value={props.platformForm.name} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, name: event.target.value })} /></Label>
            <Label>Base URL<Input value={props.platformForm.baseUrl} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, baseUrl: event.target.value })} /></Label>
            <Label>
              定价规则
              <Select value={props.platformForm.pricingRuleSetId} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, pricingRuleSetId: event.target.value })}>
                <option value="">默认规则</option>
                {props.data.pricingRuleSets.map((item) => <option value={item.id} key={item.id}>{item.name}</option>)}
              </Select>
            </Label>
            <Label>平台折扣率<Input value={props.platformForm.defaultDiscountFactor} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, defaultDiscountFactor: event.target.value })} /></Label>
            <Button type="submit" disabled={props.state === 'loading'}>创建平台</Button>
          </form>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>绑定平台模型</CardTitle>
        </CardHeader>
        <CardContent>
          <form className="formGrid" onSubmit={props.onSubmitPlatformModel}>
            <Label>
              平台
              <Select value={props.platformModelForm.platformId} onChange={(event) => props.onPlatformModelFormChange({ ...props.platformModelForm, platformId: event.target.value })}>
                <option value="">选择平台</option>
                {props.data.platforms.map((item) => <option value={item.id} key={item.id}>{item.name}</option>)}
              </Select>
            </Label>
            <Label>
              基准模型
              <Select value={props.platformModelForm.canonicalModelKey} onChange={(event) => updateBaseModel(event.target.value, props)}>
                <option value="">选择基准模型</option>
                {props.data.baseModels.map((item) => <option value={item.canonicalModelKey} key={item.id}>{item.canonicalModelKey}</option>)}
              </Select>
            </Label>
            <Label>模型名<Input value={props.platformModelForm.modelName} onChange={(event) => props.onPlatformModelFormChange({ ...props.platformModelForm, modelName: event.target.value })} /></Label>
            <Label>别名<Input value={props.platformModelForm.modelAlias} onChange={(event) => props.onPlatformModelFormChange({ ...props.platformModelForm, modelAlias: event.target.value })} /></Label>
            <Label>
              定价规则
              <Select value={props.platformModelForm.pricingRuleSetId} onChange={(event) => props.onPlatformModelFormChange({ ...props.platformModelForm, pricingRuleSetId: event.target.value })}>
                <option value="">继承平台规则</option>
                {props.data.pricingRuleSets.map((item) => <option value={item.id} key={item.id}>{item.name}</option>)}
              </Select>
            </Label>
            <Label>模型折扣率<Input value={props.platformModelForm.discountFactor} onChange={(event) => props.onPlatformModelFormChange({ ...props.platformModelForm, discountFactor: event.target.value })} /></Label>
            <Button type="submit" disabled={props.state === 'loading'}>绑定模型</Button>
          </form>
        </CardContent>
      </Card>

      <Card className="spanTwo">
        <CardHeader>
          <CardTitle>平台模型</CardTitle>
        </CardHeader>
        <CardContent>
          <EntityTable
            columns={['模型', '类型', '平台', '状态']}
            empty="暂无平台模型"
            rows={props.data.models.map((item) => [item.modelName, item.modelType, item.platformName ?? item.provider ?? '-', item.enabled ? 'enabled' : 'disabled'])}
          />
        </CardContent>
      </Card>
    </section>
  );
}

function TenantsPanel(props: { data: ConsoleData }) {
  return <Card><CardHeader><CardTitle>租户管理</CardTitle></CardHeader><CardContent><EntityTable columns={['Key', '名称', '来源', '状态']} empty="暂无租户" rows={props.data.tenants.map((item) => [item.tenantKey, item.name, item.source, item.status])} /></CardContent></Card>;
}

function UsersPanel(props: { data: ConsoleData }) {
  return <Card><CardHeader><CardTitle>用户管理</CardTitle></CardHeader><CardContent><EntityTable columns={['用户名', '租户', '来源', '状态']} empty="暂无用户" rows={props.data.users.map((item) => [item.username, item.tenantKey ?? '-', item.source, item.status])} /></CardContent></Card>;
}

function UserGroupsPanel(props: { data: ConsoleData }) {
  return <Card><CardHeader><CardTitle>用户组策略</CardTitle></CardHeader><CardContent><EntityTable columns={['Key', '名称', '优先级', '状态']} empty="暂无用户组" rows={props.data.userGroups.map((item) => [item.groupKey, item.name, item.priority, item.status])} /></CardContent></Card>;
}

function RuntimePanel(props: { data: ConsoleData }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>TPM / RPM / 并发窗口</CardTitle>
        <Badge variant="secondary">{props.data.rateLimitWindows.length}</Badge>
      </CardHeader>
      <CardContent>
        <EntityTable columns={['Scope', '指标', '使用', '限制']} empty="暂无限流窗口" rows={props.data.rateLimitWindows.map((item) => [item.scopeKey, item.metric, item.usedValue, item.limitValue])} />
      </CardContent>
    </Card>
  );
}

function updateBaseModel(value: string, props: Parameters<typeof PlatformsPanel>[0]) {
  const base = props.data.baseModels.find((item) => item.canonicalModelKey === value);
  props.onPlatformModelFormChange({
    ...props.platformModelForm,
    canonicalModelKey: value,
    modelAlias: value,
    modelName: base?.providerModelName ?? '',
    modelType: base?.modelType ?? props.platformModelForm.modelType,
  });
}