import React, { useState, useEffect, useMemo } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import { Slider } from '@/components/ui/slider'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import { Plus, Trash2, Eye, Clock } from 'lucide-react'
import type { FieldHookComponent } from '@/lib/field-hooks'
import type { ChatConfig } from '../types'

// 时间选择组件
const TimeRangePicker = React.memo(function TimeRangePicker({
  value,
  onChange,
}: {
  value: string
  onChange: (value: string) => void
}) {
  // 解析初始值
  const parsedValue = useMemo(() => {
    const parts = value.split('-')
    if (parts.length === 2) {
      const [start, end] = parts
      const [sh, sm] = start.split(':')
      const [eh, em] = end.split(':')
      return {
        startHour: sh ? sh.padStart(2, '0') : '00',
        startMinute: sm ? sm.padStart(2, '0') : '00',
        endHour: eh ? eh.padStart(2, '0') : '23',
        endMinute: em ? em.padStart(2, '0') : '59',
      }
    }
    return {
      startHour: '00',
      startMinute: '00',
      endHour: '23',
      endMinute: '59',
    }
  }, [value])

  const [startHour, setStartHour] = useState(parsedValue.startHour)
  const [startMinute, setStartMinute] = useState(parsedValue.startMinute)
  const [endHour, setEndHour] = useState(parsedValue.endHour)
  const [endMinute, setEndMinute] = useState(parsedValue.endMinute)

  // 当value变化时同步状态
  useEffect(() => {
    setStartHour(parsedValue.startHour)
    setStartMinute(parsedValue.startMinute)
    setEndHour(parsedValue.endHour)
    setEndMinute(parsedValue.endMinute)
  }, [parsedValue])

  const updateTime = (
    newStartHour: string,
    newStartMinute: string,
    newEndHour: string,
    newEndMinute: string
  ) => {
    const newValue = `${newStartHour}:${newStartMinute}-${newEndHour}:${newEndMinute}`
    onChange(newValue)
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="w-full justify-start font-mono text-sm">
          <Clock className="h-4 w-4 mr-2" />
          {value || '选择时间段'}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-72 sm:w-80">
        <div className="space-y-4">
          <div>
            <h4 className="font-medium text-sm mb-3">开始时间</h4>
            <div className="grid grid-cols-2 gap-2 sm:gap-3">
              <div>
                <Label className="text-xs">小时</Label>
                <Select
                  value={startHour}
                  onValueChange={(v) => {
                    setStartHour(v)
                    updateTime(v, startMinute, endHour, endMinute)
                  }}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {Array.from({ length: 24 }, (_, i) => i).map((h) => (
                      <SelectItem key={h} value={h.toString().padStart(2, '0')}>
                        {h.toString().padStart(2, '0')}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs">分钟</Label>
                <Select
                  value={startMinute}
                  onValueChange={(v) => {
                    setStartMinute(v)
                    updateTime(startHour, v, endHour, endMinute)
                  }}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {Array.from({ length: 60 }, (_, i) => i).map((m) => (
                      <SelectItem key={m} value={m.toString().padStart(2, '0')}>
                        {m.toString().padStart(2, '0')}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
          <div>
            <h4 className="font-medium text-sm mb-3">结束时间</h4>
            <div className="grid grid-cols-2 gap-2 sm:gap-3">
              <div>
                <Label className="text-xs">小时</Label>
                <Select
                  value={endHour}
                  onValueChange={(v) => {
                    setEndHour(v)
                    updateTime(startHour, startMinute, v, endMinute)
                  }}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {Array.from({ length: 24 }, (_, i) => i).map((h) => (
                      <SelectItem key={h} value={h.toString().padStart(2, '0')}>
                        {h.toString().padStart(2, '0')}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs">分钟</Label>
                <Select
                  value={endMinute}
                  onValueChange={(v) => {
                    setEndMinute(v)
                    updateTime(startHour, startMinute, endHour, v)
                  }}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {Array.from({ length: 60 }, (_, i) => i).map((m) => (
                      <SelectItem key={m} value={m.toString().padStart(2, '0')}>
                        {m.toString().padStart(2, '0')}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
})

// 预览窗口组件
const RulePreview = React.memo(function RulePreview({ rule }: { rule: { target: string; time: string; value: number } }) {
  const previewText = `{ target = "${rule.target}", time = "${rule.time}", value = ${rule.value.toFixed(1)} }`
  
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="sm">
          <Eye className="h-4 w-4 mr-1" />
          预览
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80 sm:w-96">
        <div className="space-y-2">
          <h4 className="font-medium text-sm">配置预览</h4>
          <div className="rounded-md bg-muted p-3 font-mono text-xs break-all">
            {previewText}
          </div>
          <p className="text-xs text-muted-foreground">
            这是保存到 bot_config.toml 文件中的格式
          </p>
        </div>
      </PopoverContent>
    </Popover>
  )
})

/**
 * ChatSection as a Field Hook Component
 * This component replaces the entire 'chat' nested config section rendering
 */
export const ChatSectionHook: FieldHookComponent = ({ value, onChange }) => {
  // Cast value to ChatConfig (assuming it's the entire chat config object)
  const config = value as ChatConfig

  // Helper to update config
  const updateConfig = (updates: Partial<ChatConfig>) => {
    if (onChange) {
      onChange({ ...config, ...updates })
    }
  }

  // 添加发言频率规则
  const addTalkValueRule = () => {
    updateConfig({
      talk_value_rules: [
        ...config.talk_value_rules,
        { target: '', time: '00:00-23:59', value: 1.0 },
      ],
    })
  }

  // 删除发言频率规则
  const removeTalkValueRule = (index: number) => {
    updateConfig({
      talk_value_rules: config.talk_value_rules.filter((_, i) => i !== index),
    })
  }

  // 更新发言频率规则
  const updateTalkValueRule = (
    index: number,
    field: 'target' | 'time' | 'value',
    value: string | number
  ) => {
    const newRules = [...config.talk_value_rules]
    newRules[index] = {
      ...newRules[index],
      [field]: value,
    }
    updateConfig({
      talk_value_rules: newRules,
    })
  }

  return (
    <div className="rounded-lg border bg-card p-4 sm:p-6 space-y-6">
      <div>
        <h3 className="text-lg font-semibold mb-4">聊天设置</h3>
        <div className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="talk_value">聊天频率（基础值）</Label>
            <Input
              id="talk_value"
              type="number"
              step="0.1"
              min="0"
              max="1"
              value={config.talk_value}
              onChange={(e) => updateConfig({ talk_value: parseFloat(e.target.value) })}
            />
            <p className="text-xs text-muted-foreground">越小越沉默，范围 0-1</p>
          </div>

          <div className="grid gap-2">
            <Label htmlFor="think_mode">思考模式</Label>
            <Select
              value={config.think_mode || 'classic'}
              onValueChange={(value) => updateConfig({ think_mode: value as 'classic' | 'deep' | 'dynamic' })}
            >
              <SelectTrigger id="think_mode">
                <SelectValue placeholder="选择思考模式" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="classic">经典模式 - 浅度思考和回复</SelectItem>
                <SelectItem value="deep">深度模式 - 进行深度思考和回复</SelectItem>
                <SelectItem value="dynamic">动态模式 - 自动选择思考深度</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground">
              控制麦麦的思考深度。经典模式回复快但简单；深度模式更深入但较慢；动态模式根据情况自动选择
            </p>
          </div>

          <div className="flex items-center space-x-2">
            <Switch
              id="mentioned_bot_reply"
              checked={config.mentioned_bot_reply}
              onCheckedChange={(checked) =>
                updateConfig({ mentioned_bot_reply: checked })
              }
            />
            <Label htmlFor="mentioned_bot_reply" className="cursor-pointer">
              启用提及必回复
            </Label>
          </div>

          <div className="grid gap-2">
            <Label htmlFor="max_context_size">上下文长度</Label>
            <Input
              id="max_context_size"
              type="number"
              min="1"
              value={config.max_context_size}
              onChange={(e) =>
                updateConfig({ max_context_size: parseInt(e.target.value) })
              }
            />
          </div>

          <div className="grid gap-2">
            <Label htmlFor="planner_smooth">规划器平滑</Label>
            <Input
              id="planner_smooth"
              type="number"
              step="1"
              min="0"
              value={config.planner_smooth}
              onChange={(e) =>
                updateConfig({ planner_smooth: parseFloat(e.target.value) })
              }
            />
            <p className="text-xs text-muted-foreground">
              增大数值会减小 planner 负荷，推荐 1-5，0 为关闭
            </p>
          </div>

          <div className="grid gap-2">
            <Label htmlFor="plan_reply_log_max_per_chat">每个聊天流最大日志数量</Label>
            <Input
              id="plan_reply_log_max_per_chat"
              type="number"
              step="1"
              min="100"
              value={config.plan_reply_log_max_per_chat ?? 1024}
              onChange={(e) =>
                updateConfig({ plan_reply_log_max_per_chat: parseInt(e.target.value) })
              }
            />
            <p className="text-xs text-muted-foreground">
              每个聊天流保存的 Plan/Reply 日志最大数量，超过此数量时会自动删除最老的日志
            </p>
          </div>

          <div className="flex items-center space-x-2">
            <Switch
              id="llm_quote"
              checked={config.llm_quote ?? false}
              onCheckedChange={(checked) =>
                updateConfig({ llm_quote: checked })
              }
            />
            <Label htmlFor="llm_quote" className="cursor-pointer">
              启用 LLM 控制引用
            </Label>
          </div>
          <p className="text-xs text-muted-foreground -mt-2 ml-10">
            启用后，LLM 可以决定是否在回复时引用消息
          </p>

          <div className="flex items-center space-x-2">
            <Switch
              id="enable_talk_value_rules"
              checked={config.enable_talk_value_rules}
              onCheckedChange={(checked) =>
                updateConfig({ enable_talk_value_rules: checked })
              }
            />
            <Label htmlFor="enable_talk_value_rules" className="cursor-pointer">
              启用动态发言频率规则
            </Label>
          </div>
        </div>
      </div>

      {/* 动态发言频率规则配置 */}
      {config.enable_talk_value_rules && (
        <div className="border-t pt-6">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h4 className="text-base font-semibold">动态发言频率规则</h4>
              <p className="text-xs text-muted-foreground mt-1">
                按时段或聊天流ID调整发言频率，优先匹配具体聊天，再匹配全局规则
              </p>
            </div>
            <Button onClick={addTalkValueRule} size="sm">
              <Plus className="h-4 w-4 mr-1" />
              添加规则
            </Button>
          </div>

          {config.talk_value_rules && config.talk_value_rules.length > 0 ? (
            <div className="space-y-4">
              {config.talk_value_rules.map((rule, index) => (
                <div key={index} className="rounded-lg border p-4 bg-muted/50 space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium text-muted-foreground">
                      规则 #{index + 1}
                    </span>
                    <div className="flex items-center gap-2">
                      <RulePreview rule={rule} />
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="ghost" size="sm">
                            <Trash2 className="h-4 w-4 text-destructive" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>确认删除</AlertDialogTitle>
                            <AlertDialogDescription>
                              确定要删除规则 #{index + 1} 吗？此操作无法撤销。
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>取消</AlertDialogCancel>
                            <AlertDialogAction onClick={() => removeTalkValueRule(index)}>
                              删除
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </div>

                  <div className="space-y-4">
                    {/* 配置类型选择 */}
                    <div className="grid gap-2">
                      <Label className="text-xs font-medium">配置类型</Label>
                      <Select
                        value={rule.target === '' ? 'global' : 'specific'}
                        onValueChange={(value) => {
                          if (value === 'global') {
                            updateTalkValueRule(index, 'target', '')
                          } else {
                            updateTalkValueRule(index, 'target', 'qq::group')
                          }
                        }}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="global">全局配置</SelectItem>
                          <SelectItem value="specific">详细配置</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    {/* 详细配置选项 - 只在非全局时显示 */}
                    {rule.target !== '' && (() => {
                      const parts = rule.target.split(':')
                      const platform = parts[0] || 'qq'
                      const chatId = parts[1] || ''
                      const chatType = parts[2] || 'group'
                      
                      return (
                        <div className="grid gap-4 p-3 sm:p-4 rounded-lg bg-muted/50">
                          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                            <div className="grid gap-2">
                              <Label className="text-xs font-medium">平台</Label>
                              <Select
                                value={platform}
                                onValueChange={(value) => {
                                  updateTalkValueRule(index, 'target', `${value}:${chatId}:${chatType}`)
                                }}
                              >
                                <SelectTrigger>
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="qq">QQ</SelectItem>
                                  <SelectItem value="wx">微信</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>

                            <div className="grid gap-2">
                              <Label className="text-xs font-medium">群 ID</Label>
                              <Input
                                value={chatId}
                                onChange={(e) => {
                                  updateTalkValueRule(index, 'target', `${platform}:${e.target.value}:${chatType}`)
                                }}
                                placeholder="输入群 ID"
                                className="font-mono text-sm"
                              />
                            </div>

                            <div className="grid gap-2">
                              <Label className="text-xs font-medium">类型</Label>
                              <Select
                                value={chatType}
                                onValueChange={(value) => {
                                  updateTalkValueRule(index, 'target', `${platform}:${chatId}:${value}`)
                                }}
                              >
                                <SelectTrigger>
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="group">群组（group）</SelectItem>
                                  <SelectItem value="private">私聊（private）</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                          </div>
                          <p className="text-xs text-muted-foreground">
                            当前聊天流 ID：{rule.target || '（未设置）'}
                          </p>
                        </div>
                      )
                    })()}

                    {/* 时间段选择器 */}
                    <div className="grid gap-2">
                      <Label className="text-xs font-medium">时间段 (Time)</Label>
                      <TimeRangePicker
                        value={rule.time}
                        onChange={(v) => updateTalkValueRule(index, 'time', v)}
                      />
                      <p className="text-xs text-muted-foreground">
                        支持跨夜区间，例如 23:00-02:00
                      </p>
                    </div>

                    {/* 发言频率滑块 */}
                    <div className="grid gap-3">
                      <div className="flex items-center justify-between">
                        <Label htmlFor={`rule-value-${index}`} className="text-xs font-medium">
                          发言频率值 (Value)
                        </Label>
                        <Input
                          id={`rule-value-${index}`}
                          type="number"
                          step="0.01"
                          min="0.01"
                          max="1"
                          value={rule.value}
                          onChange={(e) => {
                            const val = parseFloat(e.target.value)
                            if (!isNaN(val)) {
                              updateTalkValueRule(index, 'value', Math.max(0.01, Math.min(1, val)))
                            }
                          }}
                          className="w-20 h-8 text-xs"
                        />
                      </div>
                      <Slider
                        value={[rule.value]}
                        onValueChange={(values) =>
                          updateTalkValueRule(index, 'value', values[0])
                        }
                        min={0.01}
                        max={1}
                        step={0.01}
                        className="w-full"
                      />
                      <div className="flex justify-between text-xs text-muted-foreground">
                        <span>0.01 (极少发言)</span>
                        <span>0.5</span>
                        <span>1.0 (正常)</span>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-8 text-muted-foreground">
              <p className="text-sm">暂无规则，点击"添加规则"按钮创建</p>
            </div>
          )}

          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg">
            <h5 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-2">
              📝 规则说明
            </h5>
            <ul className="text-xs text-blue-800 dark:text-blue-200 space-y-1">
              <li>• <strong>Target 为空</strong>：全局规则，对所有聊天生效</li>
              <li>• <strong>Target 指定</strong>：仅对特定聊天流生效（格式：platform:id:type）</li>
              <li>• <strong>优先级</strong>：先匹配具体聊天流规则，再匹配全局规则</li>
              <li>• <strong>时间支持跨夜</strong>：例如 23:00-02:00 表示晚上11点到次日凌晨2点</li>
              <li>• <strong>数值范围</strong>：建议 0-1，0 表示完全沉默，1 表示正常发言</li>
            </ul>
          </div>
        </div>
      )}
    </div>
  )
}