import React, { useState, useEffect } from 'react';
import { adminAPI, marketAPI } from '@/api';
import type { AdBanner, MarketApp } from '@/types';
import { formatBjDate } from '@/utils/datetime';
import './Ads.css';

const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    {children}
  </svg>
);

const typeLabels: Record<string, string> = { skill: 'Skill', agent: 'Agent', mcp: 'MCP' };

const Ads: React.FC = () => {
  const [banners, setBanners] = useState<AdBanner[]>([]);
  const [appOptions, setAppOptions] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [editingBanner, setEditingBanner] = useState<AdBanner | null>(null);
  const [showModal, setShowModal] = useState(false);
  const [isNew, setIsNew] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [generating, setGenerating] = useState(false);
  const [genPrompt, setGenPrompt] = useState('');

  const emptyForm: AdBanner = {
    id: '', title: '', imageUrl: '',
    linkAppId: '', linkAppName: '',
    sortOrder: banners.length + 1, clickCount: 0,
    status: 'active', createdAt: new Date().toISOString(),
  };

  const [form, setForm] = useState<AdBanner>(emptyForm);

  const loadBanners = async () => {
    try {
      setLoading(true);
      const res: any = await adminAPI.getAds();
      const data = Array.isArray(res) ? res : (res.data || []);
      setBanners(data.map((a: any) => ({
        id: a.id,
        title: a.title,
        imageUrl: a.image_url || a.imageUrl || '',
        linkAppId: a.link_app_id || a.linkAppId || '',
        linkAppName: a.link_app_name || a.linkAppName || '',
        sortOrder: a.sort_order ?? a.sortOrder ?? 0,
        clickCount: a.click_count ?? a.clickCount ?? 0,
        status: a.status || 'active',
        createdAt: a.created_at || a.createdAt || new Date().toISOString(),
      })));
    } catch (e) {
      console.error('加载广告失败:', e);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadBanners();
    // 加载应用列表用于关联选择
    marketAPI.getApps({}).then((res: any) => {
      const items = res.data?.items || [];
      setAppOptions(items);
    }).catch(() => {});
  }, []);

  const handleCreate = () => {
    setIsNew(true);
    setForm({ ...emptyForm, sortOrder: banners.length + 1 });
    setEditingBanner(null);
    setGenPrompt('');
    setShowModal(true);
  };

  const handleEdit = (banner: AdBanner) => {
    setIsNew(false);
    setEditingBanner(banner);
    setForm({ ...banner });
    setGenPrompt('');
    setShowModal(true);
  };

  const handleSave = async () => {
    try {
      if (isNew) {
        await adminAPI.addAd({
          title: form.title,
          image_url: form.imageUrl || undefined,
          link_app_id: form.linkAppId || undefined,
          link_app_name: form.linkAppName || undefined,
          sort_order: form.sortOrder,
          status: form.status,
        });
      } else if (editingBanner) {
        await adminAPI.updateAd(editingBanner.id, {
          title: form.title,
          image_url: form.imageUrl || undefined,
          link_app_id: form.linkAppId || undefined,
          link_app_name: form.linkAppName || undefined,
          sort_order: form.sortOrder,
          status: form.status,
        });
      }
      setShowModal(false);
      setEditingBanner(null);
      loadBanners();
    } catch (err: any) {
      alert('保存失败：' + (err.detail || err.message));
    }
  };

  const handleDelete = async (id: string) => {
    if (!window.confirm('确定要删除此广告吗？')) return;
    try {
      await adminAPI.deleteAd(id);
      loadBanners();
    } catch (err: any) {
      alert('删除失败：' + (err.detail || err.message));
    }
  };

  const toggleStatus = async (id: string, currentStatus: string) => {
    const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
    try {
      await adminAPI.updateAd(id, { status: newStatus });
      loadBanners();
    } catch (err: any) {
      alert('切换状态失败：' + (err.detail || err.message));
    }
  };

  const handleAppSelect = (appId: string) => {
    const app = appOptions.find(a => a.id === appId);
    setForm(prev => ({
      ...prev,
      linkAppId: appId,
      linkAppName: app ? app.name : '',
    }));
  };

  // 真实图片上传
  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setUploading(true);
    try {
      const formData = new FormData();
      formData.append('file', file);
      const token = localStorage.getItem('aiflow_token');
      const res = await fetch('/app/api/admin/ads/upload-image', {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${token}` },
        body: formData,
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({ detail: '上传失败' }));
        throw new Error(err.detail || '上传失败');
      }
      const data = await res.json();
      setForm({ ...form, imageUrl: data.image_url });
    } catch (err: any) {
      alert('图片上传失败：' + err.message);
    } finally {
      setUploading(false);
    }
  };

  // AI生成图片
  const handleAIGenerate = async () => {
    setGenerating(true);
    try {
      const token = localStorage.getItem('aiflow_token');
      const prompt = genPrompt || form.title || 'AI智能平台广告横幅';
      const res = await fetch(`/app/api/admin/ads/generate-image?prompt=${encodeURIComponent(prompt)}`, {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${token}` },
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({ detail: '生成失败' }));
        throw new Error(err.detail || '生成失败');
      }
      const data = await res.json();
      setForm({ ...form, imageUrl: data.image_url });
    } catch (err: any) {
      alert('AI绘图失败：' + err.message);
    } finally {
      setGenerating(false);
    }
  };

  // 生成渐变色预览色块
  const getPreviewGradient = (appId?: string): string => {
    const gradients: Record<string, string> = {
      a1: 'linear-gradient(135deg, #667eea, #764ba2)',
      a2: 'linear-gradient(135deg, #f093fb, #f5576c)',
      a3: 'linear-gradient(135deg, #4facfe, #00f2fe)',
      a4: 'linear-gradient(135deg, #43e97b, #38f9d7)',
      a5: 'linear-gradient(135deg, #fa709a, #fee140)',
      a6: 'linear-gradient(135deg, #a18cd1, #fbc2eb)',
      a8: 'linear-gradient(135deg, #ffecd2, #fcb69f)',
    };
    return gradients[appId || ''] || 'linear-gradient(135deg, #5B5FED, #A78BFA)';
  };

  return (
    <div style={{ animation: 'fadeIn var(--transition-normal)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-xl)' }}>
        <h1 className="admin-page-title" style={{ marginBottom: 0 }}>广告管理</h1>
        <button className="admin-btn admin-btn-primary" onClick={handleCreate}>
          <SVGIcon size={14}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></SVGIcon>
          新增广告位
        </button>
      </div>

      {/* Banner List */}
      {loading ? (
        <div style={{ textAlign: 'center', padding: 40 }}>加载中...</div>
      ) : banners.length === 0 ? (
        <div className="admin-card" style={{ textAlign: 'center', padding: 40, color: 'var(--color-text-tertiary)' }}>
          暂无广告位，点击"新增广告位"按钮创建
        </div>
      ) : (
        <div className="admin-card">
          <div className="admin-card-header">
            <h3 className="admin-card-title">轮播图广告位列表</h3>
            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>
              共 {banners.length} 个广告位，活跃 {banners.filter(b => b.status === 'active').length} 个
            </span>
          </div>
          <div style={{ overflowX: 'auto' }}>
            <table className="admin-table">
              <thead>
                <tr>
                  <th style={{ width: 60 }}>预览</th>
                  <th>标题</th>
                  <th>关联应用</th>
                  <th>排序</th>
                  <th>点击次数</th>
                  <th>状态</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                {banners.sort((a, b) => a.sortOrder - b.sortOrder).map(banner => (
                  <tr key={banner.id}>
                    <td>
                      <div
                        style={{
                          width: 48, height: 32, borderRadius: 'var(--radius-sm)',
                          background: getPreviewGradient(banner.linkAppId),
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                        }}
                      >
                        <SVGIcon size={14}><rect x="1" y="3" width="22" height="16" rx="2"/><polyline points="23 7 13 17 8 12"/></SVGIcon>
                      </div>
                    </td>
                    <td style={{ fontWeight: 600 }}>{banner.title}</td>
                    <td>
                      {banner.linkAppName ? (
                        <span className="admin-badge badge-info" style={{ fontSize: 'var(--text-xs)' }}>
                          {banner.linkAppName}
                        </span>
                      ) : (
                        <span style={{ color: 'var(--color-text-tertiary)', fontSize: 'var(--text-xs)' }}>未关联</span>
                      )}
                    </td>
                    <td style={{ fontFamily: 'var(--font-mono)', textAlign: 'center' }}>{banner.sortOrder}</td>
                    <td style={{ fontFamily: 'var(--font-mono)', textAlign: 'center' }}>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                        <SVGIcon size={12}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></SVGIcon>
                        {banner.clickCount.toLocaleString()}
                      </span>
                    </td>
                    <td>
                      <span
                        className={`admin-badge ${banner.status === 'active' ? 'badge-success' : 'badge-neutral'}`}
                        style={{ cursor: 'pointer' }}
                        onClick={() => toggleStatus(banner.id, banner.status)}
                      >
                        {banner.status === 'active' ? '投放中' : '已暂停'}
                      </span>
                    </td>
                    <td style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>
                      {formatBjDate(banner.createdAt)}
                    </td>
                    <td>
                      <div style={{ display: 'flex', gap: 'var(--space-xs)' }}>
                        <button className="admin-btn admin-btn-outline admin-btn-sm" onClick={() => handleEdit(banner)}>
                          <SVGIcon size={12}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></SVGIcon>
                          编辑
                        </button>
                        <button
                          className="admin-btn admin-btn-outline admin-btn-sm"
                          style={{ color: 'var(--color-danger)', borderColor: 'var(--color-danger)' }}
                          onClick={() => handleDelete(banner.id)}
                        >
                          <SVGIcon size={12}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></SVGIcon>
                          删除
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Edit/Create Modal */}
      {showModal && (
        <div
          className="ads-modal-overlay"
          onClick={() => { setShowModal(false); setEditingBanner(null); }}
        >
          <div className="ads-modal" onClick={e => e.stopPropagation()}>
            <h3 className="ads-modal-title">
              {isNew ? '新增广告位' : `编辑 - ${editingBanner?.title}`}
            </h3>

            {/* Preview */}
            <div className="ads-form-group">
              <label className="admin-form-label">广告位预览</label>
              <div
                className="ads-preview-card"
                style={{ background: getPreviewGradient(form.linkAppId) }}
              >
                <div className="ads-preview-badge">推荐</div>
                <h4 className="ads-preview-title">{form.title || '广告标题'}</h4>
                {form.linkAppName && (
                  <p className="ads-preview-sub">关联应用: {form.linkAppName}</p>
                )}
                <div className="ads-preview-visual">
                  <div className="ads-vc ads-vc1"/>
                  <div className="ads-vc ads-vc2"/>
                  <div className="ads-vc ads-vc3"/>
                </div>
              </div>
            </div>

            {/* Title */}
            <div className="admin-form-group">
              <label className="admin-form-label">广告标题</label>
              <input
                className="admin-form-input"
                value={form.title}
                onChange={e => setForm({ ...form, title: e.target.value })}
                placeholder="输入轮播图展示标题"
              />
            </div>

            {/* Image URL + Upload + AIGC */}
            <div className="admin-form-group">
              <label className="admin-form-label">背景图片</label>
              <div style={{ display: 'flex', gap: 'var(--space-sm)', marginBottom: 'var(--space-sm)' }}>
                <input
                  className="admin-form-input"
                  style={{ flex: 1 }}
                  value={form.imageUrl}
                  onChange={e => setForm({ ...form, imageUrl: e.target.value })}
                  placeholder="图片URL / 上传后自动填入 / 留空使用渐变色"
                />
              </div>
              <div style={{ display: 'flex', gap: 'var(--space-sm)', alignItems: 'center', flexWrap: 'wrap' }}>
                <label
                  className="admin-btn admin-btn-outline admin-btn-sm"
                  style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}
                >
                  <SVGIcon size={12}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></SVGIcon>
                  {uploading ? '上传中...' : '上传图片'}
                  <input
                    type="file"
                    accept="image/*"
                    style={{ display: 'none' }}
                    onChange={handleImageUpload}
                    disabled={uploading}
                  />
                </label>
                <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
                  <input
                    type="text"
                    className="admin-form-input"
                    style={{ width: 180, fontSize: 'var(--text-xs)' }}
                    value={genPrompt}
                    onChange={e => setGenPrompt(e.target.value)}
                    placeholder="AI绘图提示词..."
                  />
                  <button
                    type="button"
                    className="admin-btn admin-btn-outline admin-btn-sm"
                    style={{ display: 'inline-flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap' }}
                    onClick={handleAIGenerate}
                    disabled={generating}
                  >
                    <SVGIcon size={12}><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></SVGIcon>
                    {generating ? '生成中...' : 'AI绘图'}
                  </button>
                </div>
                {form.imageUrl && (
                  <button
                    type="button"
                    className="admin-btn admin-btn-outline admin-btn-sm"
                    style={{ color: 'var(--color-error)', borderColor: 'var(--color-error)', display: 'inline-flex', alignItems: 'center', gap: 4 }}
                    onClick={() => setForm({ ...form, imageUrl: '' })}
                  >
                    <SVGIcon size={12}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></SVGIcon>
                    清除图片
                  </button>
                )}
              </div>
              {form.imageUrl && (
                <div style={{ marginTop: 'var(--space-sm)', borderRadius: 'var(--radius-md)', overflow: 'hidden', border: '1px solid var(--color-border)', maxWidth: 320, height: 80 }}>
                  <img src={form.imageUrl} alt="预览" style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
                </div>
              )}
            </div>

            {/* Link App */}
            <div className="admin-form-group">
              <label className="admin-form-label">关联应用（点击跳转）</label>
              <select
                className="admin-form-input"
                value={form.linkAppId || ''}
                onChange={e => handleAppSelect(e.target.value)}
              >
                <option value="">-- 不关联应用 --</option>
                {appOptions.map((app: any) => (
                  <option key={app.id} value={app.id}>
                    [{typeLabels[app.type] || 'app'}] {app.name}
                  </option>
                ))}
              </select>
            </div>

            {/* Sort Order */}
            <div className="admin-form-row">
              <div className="admin-form-group">
                <label className="admin-form-label">排序</label>
                <input
                  className="admin-form-input"
                  type="number"
                  value={form.sortOrder}
                  onChange={e => setForm({ ...form, sortOrder: Number(e.target.value) })}
                  min={1}
                />
              </div>
              <div className="admin-form-group">
                <label className="admin-form-label">状态</label>
                <div style={{ display: 'flex', gap: 'var(--space-sm)', paddingTop: 4 }}>
                  <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-xs)', cursor: 'pointer', fontSize: 'var(--text-sm)' }}>
                    <input
                      type="radio"
                      name="adStatus"
                      checked={form.status === 'active'}
                      onChange={() => setForm({ ...form, status: 'active' })}
                    /> 投放中
                  </label>
                  <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-xs)', cursor: 'pointer', fontSize: 'var(--text-sm)' }}>
                    <input
                      type="radio"
                      name="adStatus"
                      checked={form.status === 'inactive'}
                      onChange={() => setForm({ ...form, status: 'inactive' })}
                    /> 已暂停
                  </label>
                </div>
              </div>
            </div>

            <div className="admin-form-actions">
              <button
                className="admin-btn admin-btn-primary"
                onClick={handleSave}
                disabled={!form.title.trim()}
              >
                {isNew ? '创建' : '保存'}
              </button>
              <button
                className="admin-btn admin-btn-outline"
                onClick={() => { setShowModal(false); setEditingBanner(null); }}
              >
                取消
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Ads;