import { useState } from 'react';
import { Send, Bell, MessageSquare, Navigation, Mail, Check, ToggleLeft, ToggleRight, Webhook, Settings, TestTube } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { notificationChannels } from '@/lib/mock';

const iconMap: Record<string, React.ElementType> = {
  Send, Bell, MessageSquare, Navigation, Mail,
};

const channelStyle: Record<string, { bg: string; color: string }> = {
  feishu: { bg: 'bg-[rgba(0,150,255,0.15)]', color: 'text-[#00a8ff]' },
  dingtalk: { bg: 'bg-[rgba(0,160,255,0.15)]', color: 'text-[#0089ff]' },
  wechat: { bg: 'bg-[rgba(7,193,96,0.15)]', color: 'text-[#07c160]' },
  telegram: { bg: 'bg-[rgba(0,136,204,0.15)]', color: 'text-[#0088cc]' },
  email: { bg: 'bg-[rgba(220,50,32,0.15)]', color: 'text-[#ef5350]' },
};

const allEvents = [
  { key: 'ticket_created', label: '工单创建' },
  { key: 'ticket_approved', label: '审批通过' },
  { key: 'ticket_rejected', label: '审批拒绝' },
  { key: 'ticket_executed', label: '执行完成' },
  { key: 'ticket_failed', label: '执行失败' },
  { key: 'ticket_rollback', label: '工单回滚' },
];

export default function NotificationsPage() {
  const [channels, setChannels] = useState(notificationChannels);
  const [editChannel, setEditChannel] = useState<typeof notificationChannels[0] | null>(null);

  const toggleChannel = (id: number) => {
    setChannels(prev => prev.map(c => c.id === id ? { ...c, enabled: !c.enabled } : c));
  };

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold">通知渠道配置</h1>
          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多渠道通知，支持飞书、钉钉、企业微信、Telegram</p>
        </div>
        <button className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm font-medium hover:bg-[var(--dg-bg-hover)] hover:border-[var(--dg-text-muted)] transition-all">
          <Settings className="w-4 h-4" /> 全局设置
        </button>
      </div>

      <div className="grid grid-cols-5 gap-4">
        {[
          { label: '渠道总数', value: channels.length, icon: Webhook, color: 'text-blue-400', bg: 'bg-blue-400/10' },
          { label: '已启用', value: channels.filter(c => c.enabled).length, icon: Check, color: 'text-green-400', bg: 'bg-green-400/10' },
          { label: '未启用', value: channels.filter(c => !c.enabled).length, icon: Bell, color: 'text-gray-400', bg: 'bg-gray-400/10' },
        ].map((s, i) => (
          <Card key={i} className="dg-card">
            <CardContent className="p-4 flex items-center gap-3">
              <div className={`w-10 h-10 rounded-lg ${s.bg} flex items-center justify-center`}><s.icon className={`w-5 h-5 ${s.color}`} /></div>
              <div><div className="text-2xl font-bold">{s.value}</div><div className="text-xs text-[var(--dg-text-muted)]">{s.label}</div></div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-2 gap-4">
        {channels.map(channel => {
          const Icon = iconMap[channel.icon] || Bell;
          const style = channelStyle[channel.type] || channelStyle.email;
          return (
            <div
              key={channel.id}
              className={`dg-card p-5 cursor-pointer transition-all ${channel.enabled ? 'border-green-500/30 bg-green-500/5' : 'dg-card-hover'}`}
              onClick={() => setEditChannel(channel)}
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className={`w-12 h-12 rounded-xl ${style.bg} flex items-center justify-center`}>
                    <Icon className={`w-6 h-6 ${style.color}`} />
                  </div>
                  <div>
                    <div className="text-base font-semibold">{channel.name}</div>
                    <div className="text-xs text-[var(--dg-text-muted)] mt-0.5">{channel.description}</div>
                    {channel.enabled && channel.events && (
                      <div className="flex flex-wrap gap-1 mt-2">
                        {channel.events.slice(0, 3).map(e => (
                          <span key={e} className="px-1.5 py-0.5 bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] text-[10px] rounded">{allEvents.find(a => a.key === e)?.label || e}</span>
                        ))}
                        {channel.events.length > 3 && <span className="px-1.5 py-0.5 text-[var(--dg-text-muted)] text-[10px]">+{channel.events.length - 3}</span>}
                      </div>
                    )}
                  </div>
                </div>
                <div className="flex flex-col items-end gap-2">
                  <span className={`px-2.5 py-1 rounded-full text-xs font-medium ${channel.enabled ? 'bg-green-500/15 text-green-400' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'}`}>
                    {channel.enabled ? '已启用' : '未启用'}
                  </span>
                  <button
                    onClick={e => { e.stopPropagation(); toggleChannel(channel.id); }}
                    className="transition-colors"
                  >
                    {channel.enabled ? <ToggleRight className="w-7 h-7 text-green-400" /> : <ToggleLeft className="w-7 h-7 text-[var(--dg-text-muted)]" />}
                  </button>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* 编辑弹窗 */}
      {editChannel && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setEditChannel(null)}>
          <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-lg w-full mx-4" onClick={e => e.stopPropagation()}>
            <h3 className="text-xl font-semibold mb-5">配置 {editChannel.name}</h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2">Webhook URL</label>
                <input
                  className="w-full px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
                  defaultValue={editChannel.webhook || ''}
                  placeholder={`请输入 ${editChannel.name} Webhook 地址`}
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">密钥 (Secret)</label>
                <input
                  type="password"
                  className="w-full px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
                  placeholder="请输入密钥"
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-3">通知事件</label>
                <div className="grid grid-cols-2 gap-2">
                  {allEvents.map(evt => (
                    <label key={evt.key} className="flex items-center gap-2 p-2.5 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] cursor-pointer hover:border-[var(--dg-text-muted)] transition-colors">
                      <input type="checkbox" defaultChecked={editChannel.events?.includes(evt.key)} className="w-4 h-4 rounded border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)] text-blue-500 focus:ring-blue-500/20" />
                      <span className="text-sm">{evt.label}</span>
                    </label>
                  ))}
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">@ 提醒用户</label>
                <select className="w-full px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none">
                  <option>审批人</option>
                  <option>申请人</option>
                  <option>执行人</option>
                  <option>全部相关人员</option>
                </select>
              </div>
            </div>
            <div className="flex justify-end gap-3 mt-6">
              <button onClick={() => setEditChannel(null)} className="px-5 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">
                取消
              </button>
              <button className="flex items-center gap-2 px-5 py-2.5 bg-green-500/15 border border-green-500/30 rounded-lg text-sm font-medium text-green-400 hover:bg-green-500/25 transition-all">
                <TestTube className="w-4 h-4" /> 测试
              </button>
              <button onClick={() => setEditChannel(null)} className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity">
                保存
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}