"use client"

import * as React from "react"
import {Input} from "@/components/ui/input"
import {Switch} from "@/components/ui/switch"
import {ManageDetailPanel, ManagePage} from "@/components/common/general/manage-pannel"
import {Tabs, TabsList, TabsTrigger} from "@/components/ui/tabs"

import {formatDateTime} from "@/lib/utils"
import type {SystemConfig} from "@/lib/services"
import {useAdmin} from "@/contexts/admin-context"


/**
 * 系统配置
 * 显示系统配置的详细信息和编辑面板
 *
 * @example
 * ```tsx
 * <SystemConfigDetailPanel
 *   config={config}
 *   editData={editData}
 *   onEditDataChange={onEditDataChange}
 *   onSave={onSave}
 *   saving={saving}
 * />
 * ```
 * @param {SystemConfig} config - 系统配置
 * @param {Partial<SystemConfig>} editData - 编辑数据
 * @param {function} onEditDataChange - 编辑数据改变回调
 * @param {function} onSave - 保存回调
 * @param {boolean} saving - 是否正在保存
 * @returns {React.ReactNode} 系统配置详情面板组件
 */
function SystemConfigDetailPanel({
  config,
  editData,
  onEditDataChange,
  onSave,
  saving
}: {
  config: SystemConfig | null
  editData: Partial<SystemConfig>
  onEditDataChange: (field: keyof SystemConfig, value: SystemConfig[keyof SystemConfig]) => void
  onSave: () => void
  saving: boolean
}) {

  return (
    <ManageDetailPanel
      isEmpty={!config}
      onSave={onSave}
      saving={saving}
    >
      <div className="grid grid-cols-1 gap-0">
        <div className="border border-dashed rounded-lg">
          <div className="px-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0">
            <label className="text-xs font-medium text-muted-foreground">配置键</label>
            <p className="text-xs text-muted-foreground font-mono">{config?.key}</p>
          </div>

          <div className="pl-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0">
            <label className="text-xs font-medium text-muted-foreground">配置值</label>
            <div className="flex gap-1 w-[90%] justify-end items-center pr-3">
              {config?.key.endsWith('_enabled') ? (
                <Switch
                  checked={editData.value !== undefined ? editData.value === 'true' : (config?.value === 'true')}
                  onCheckedChange={(checked) => {
                    onEditDataChange('value', checked ? 'true' : 'false')
                  }}
                />
              ) : (
                <Input
                  type={
                    config?.key && (
                      config.key.endsWith('_limit') ||
                      config.key.endsWith('_minutes') ||
                      config.key.endsWith('_days') ||
                      config.key.endsWith('_seconds') ||
                      config.key.endsWith('_hours') ||
                      config.key.endsWith('_ttl') ||
                      config.key.endsWith('_max') ||
                      config.key.endsWith('_min') ||
                      config.key.includes('max_') ||
                      config.key.includes('min_') ||
                      config.key.includes('limit') ||
                      config.key.includes('count')
                    ) ? "number" : "text"
                  }
                  step="1"
                  min="0"
                  value={editData.value !== undefined ? editData.value : (config?.value || '')}
                  placeholder={editData.value === undefined && !config?.value ? '必需' : ''}
                  onChange={(e) => {
                    const value = e.target.value
                    if (value === '') {
                      onEditDataChange('value', '')
                      return
                    }
                    onEditDataChange('value', value)
                  }}
                  className="!text-[12px] text-right h-4 rounded-none border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:!text-[12px] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]"
                  style={{
                    MozAppearance: 'textfield'
                  }}
                />
              )}
            </div>
          </div>

          <div className="pl-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0">
            <label className="text-xs font-medium text-muted-foreground">配置描述</label>
            <div className="flex gap-1 w-[90%]">
              <Input
                type="text"
                value={editData.description !== undefined ? editData.description : (config?.description || '')}
                placeholder="可选描述"
                onChange={(e) => {
                  const value = e.target.value
                  onEditDataChange('description', value)
                }}
                className="!text-[12px] text-right h-4 rounded-none border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:!text-[12px]"
              />
            </div>
          </div>

          <div className="px-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0">
            <label className="text-xs font-medium text-muted-foreground">公共可见</label>
            <Switch
              checked={(editData.visibility ?? config?.visibility ?? 0) === 1}
              onCheckedChange={(checked) => {
                onEditDataChange('visibility', checked ? 1 : 0)
              }}
            />
          </div>

          <div className="px-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0">
            <label className="text-xs font-medium text-muted-foreground">配置类型</label>
            <span className={`text-[11px] px-1.5 py-0.5 rounded font-medium ${
              config?.type === 'system'
                ? 'bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400'
                : 'bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400'
            }`}>
              {config?.type === 'system' ? '系统配置' : '业务配置'}
            </span>
          </div>

          <div className="px-3 py-2 flex items-center justify-between">
            <label className="text-xs font-medium text-muted-foreground">创建时间</label>
            <p className="text-xs text-muted-foreground">{config ? formatDateTime(config.created_at) : ''}</p>
          </div>
        </div>
      </div>
    </ManageDetailPanel>
  )
}



/**
 * 系统配置管理组件
 *
 * @example
 * ```tsx
 * <SystemConfigs />
 * ```
 * @returns {React.ReactNode} 系统配置管理组件
 */
export function SystemConfigs() {
  const {
    systemConfigs: configs,
    systemConfigsLoading: loading,
    systemConfigsError: error,
    refetchSystemConfigs,
    updateSystemConfig
  } = useAdmin()

  const [activeTab, setActiveTab] = React.useState<'system' | 'business'>('business')

  React.useEffect(() => {
    refetchSystemConfigs(activeTab)
  }, [activeTab, refetchSystemConfigs])

  const getInitialEditData = (config: SystemConfig) => ({
    value: config.value,
    visibility: config.visibility,
    description: config.description
  })

  const handleSave = async (config: SystemConfig, editData: Partial<SystemConfig>) => {
    if (!config) return

    await updateSystemConfig(config.key, {
      value: editData.value ?? config.value,
      visibility: editData.visibility ?? config.visibility,
      description: editData.description ?? config.description
    })
  }

  return (
    <ManagePage<SystemConfig>
      title="系统配置"
      data={configs}
      loading={loading}
      error={error}
      onReload={() => refetchSystemConfigs(activeTab)}
      getInitialEditData={getInitialEditData}
      onSave={handleSave}
      getId={(config) => config.key}
      emptyDescription="未发现系统配置"
      loadingDescription="配置加载中"
      headerExtra={
        <Tabs value={activeTab} onValueChange={(val) => setActiveTab(val as 'system' | 'business')} className="w-[180px]">
          <TabsList className="grid w-full grid-cols-2 h-8">
            <TabsTrigger value="business" className="text-[11px] h-7">业务配置</TabsTrigger>
            <TabsTrigger value="system" className="text-[11px] h-7">系统配置</TabsTrigger>
          </TabsList>
        </Tabs>
      }
      columns={[
        { header: "配置键", cell: (item) => <span className="font-mono font-medium">{item.key}</span>, width: "200px" },
        { header: "配置值", cell: (item) => <span className="truncate max-w-[120px] inline-block" title={item.value}>{item.value}</span>, width: "120px" },
        { header: "公共可见", cell: (item) => <span>{item.visibility === 1 ? "可见" : "不可见"}</span>, width: "80px" },
        { header: "描述", cell: (item) => <span className="truncate max-w-[200px] inline-block text-muted-foreground" title={item.description}>{item.description}</span>, width: "200px" },
      ]}
      renderDetail={({ selected, hovered, editData, onEditDataChange, onSave, saving }) => (
        <SystemConfigDetailPanel
          config={selected || hovered}
          editData={editData}
          onEditDataChange={onEditDataChange}
          onSave={onSave}
          saving={saving}
        />
      )}
    />
  )
}