'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';

const DEFAULT_LOGIN_LOGO = process.env.NEXT_PUBLIC_DEFAULT_LOGIN_LOGO_URL || '';

type PublicSystemSettings = {
  loginLogoUrl?: string | null;
  siteName?: string | null;
};

export default function ActivatePage() {
  const router = useRouter();
  const freeTrialActivationEnabled = process.env.NEXT_PUBLIC_ENABLE_FREE_TRIAL_ACTIVATION === 'true';
  const [initialAdmin, setInitialAdmin] = useState<{
    email: string;
    username: string;
    password: string | null;
    mustChangePassword: boolean;
    passwordSource?: string | null;
  } | null>(null);
  const [licenseKey, setLicenseKey] = useState('');
  const [loading, setLoading] = useState(false);
  const [checking, setChecking] = useState(true);
  const [error, setError] = useState('');
  const [activated, setActivated] = useState(false);
  const [showFreeTrialModal, setShowFreeTrialModal] = useState(false);
  const [customerName, setCustomerName] = useState('');
  const [contactInfo, setContactInfo] = useState('');
  const [loginLogoUrl, setLoginLogoUrl] = useState(DEFAULT_LOGIN_LOGO);
  const [siteName, setSiteName] = useState('FLNXI素材库');
  const [logoError, setLogoError] = useState(false);

  useEffect(() => {
    const loadSettings = async () => {
      try {
        const response = await fetch('/api/system-settings');
        if (response.ok) {
          const settings = await response.json() as PublicSystemSettings;
          setLoginLogoUrl(settings.loginLogoUrl || DEFAULT_LOGIN_LOGO);
          setSiteName(settings.siteName || 'FLNXI素材库');
          setLogoError(false);
        }
      } catch (error) {
        console.error('加载系统设置失败:', error);
      }
    };

    loadSettings();
  }, []);

  useEffect(() => {
    if (!loginLogoUrl) return;

    if (loginLogoUrl.startsWith('/')) {
      setLogoError(false);
      return;
    }

    try {
      const parsed = new URL(loginLogoUrl);
      const host = parsed.hostname.toLowerCase();
      const isLocal = host === 'localhost' || host === '127.0.0.1';
      if (isLocal && typeof window !== 'undefined') {
        const currentHost = window.location.hostname.toLowerCase();
        if (currentHost !== host) {
          console.warn(
            `[Activate] Logo 地址 ${loginLogoUrl} 指向本地服务，但当前访问域名为 ${currentHost}，自动降级为占位符`
          );
          setLogoError(true);
        }
      }
    } catch (error) {
      console.warn('[Activate] Logo 地址解析失败，自动降级为占位符:', loginLogoUrl, error);
      setLogoError(true);
    }
  }, [loginLogoUrl]);

  // 页面加载时检查数据库中是否已有许可证
  useEffect(() => {
    const checkLicense = async () => {
      try {
        const res = await fetch('/api/license/check');
        const data = await res.json();

        if (data.activated) {
          // 数据库中已有许可证，cookie 已自动恢复，重定向到首页
          router.push('/');
          return;
        }
      } catch (error) {
        console.error('检查许可证状态失败:', error);
      } finally {
        setChecking(false);
      }
    };

    checkLicense();
  }, [router]);

  // 格式化许可证密钥输入（自动添加横杠）
  const formatLicenseKey = (value: string) => {
    const cleaned = value.toUpperCase().replace(/[^A-Z0-9]/g, '');
    const parts = [];
    for (let i = 0; i < cleaned.length && i < 16; i += 4) {
      parts.push(cleaned.slice(i, i + 4));
    }
    return parts.join('-');
  };

  const handleKeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setLicenseKey(formatLicenseKey(e.target.value));
    setError('');
  };

  // 激活许可证
  const handleActivate = async () => {
    if (!licenseKey || licenseKey.length !== 19) {
      setError('请输入完整的许可证密钥');
      return;
    }

    setLoading(true);
    setError('');

    try {
      const res = await fetch('/api/license/activate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ licenseKey }),
      });

      const data = await res.json();

      if (data.success) {
        setInitialAdmin(data.initialAdmin || null);
        setActivated(true);
      } else {
        setError(data.error || '激活失败，请检查许可证密钥');
      }
    } catch {
      setError('网络错误，请检查网络连接');
    } finally {
      setLoading(false);
    }
  };

  // 打开临时授权申请弹窗
  const openFreeTrialModal = () => {
    if (!freeTrialActivationEnabled) {
      setError('当前部署未开放临时授权申请，请使用许可证密钥或联系系统交付人员');
      return;
    }
    setCustomerName('');
    setContactInfo('');
    setShowFreeTrialModal(true);
  };

  // 临时授权申请
  const handleFreeTrial = async () => {
    if (!freeTrialActivationEnabled) {
      setError('当前部署未开放临时授权申请，请使用许可证密钥或联系系统交付人员');
      setShowFreeTrialModal(false);
      return;
    }

    const trimmedName = customerName.trim();
    const trimmedContact = contactInfo.trim();

    if (!trimmedName) {
      setError('请输入客户名称');
      return;
    }
    if (!trimmedContact) {
      setError('请输入联系方式');
      return;
    }

    setLoading(true);
    setError('');
    setShowFreeTrialModal(false);

    try {
      const res = await fetch('/api/license/activate-free', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          customerName: trimmedName,
          contactInfo: trimmedContact
        }),
      });

      let data;
      try {
        data = await res.json();
      } catch (jsonError) {
        // 如果响应不是JSON（可能是HTML重定向），显示详细错误
        const text = await res.text();
        console.error('激活响应不是JSON:', text.substring(0, 200));
        setError(`服务器返回了无效响应（${res.status}），请检查网络连接`);
        return;
      }

      if (data.success) {
        setInitialAdmin(data.initialAdmin || null);
        setActivated(true);
      } else {
        // 处理各种错误消息格式
        let errorMsg = data.error || '激活失败，请检查输入信息';
        if (errorMsg === 'Required' || errorMsg.includes('required')) {
          errorMsg = '请填写完整的客户信息（客户名称和联系方式都是必填项）';
        }
        setError(errorMsg);
      }
    } catch (error) {
      console.error('激活请求失败:', error);
      setError('网络错误，请检查网络连接');
    } finally {
      setLoading(false);
    }
  };

  // 检查中或已激活，显示加载状态
  if (checking) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex items-center justify-center p-4">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-slate-700 dark:border-slate-300 mb-4"></div>
          <p className="text-slate-600 dark:text-slate-400">正在检查许可证状态...</p>
        </div>
      </div>
    );
  }

  // 激活成功页面
  if (activated) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex items-center justify-center p-4">
        <div className="w-full max-w-md">
          <div className="bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm p-6">
            <div className="text-center mb-6">
              <div className="w-10 h-10 bg-emerald-50 dark:bg-emerald-900/20 rounded-full flex items-center justify-center mx-auto mb-4 border border-emerald-100 dark:border-emerald-900/40">
                <svg className="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <h1 className="text-xl font-semibold text-slate-900 dark:text-white">激活成功</h1>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-2">系统已准备就绪</p>
            </div>

            {initialAdmin ? (
              <>
                <div className="bg-slate-50 dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700 rounded-lg p-4 mb-6">
                  <h3 className="text-sm font-medium text-slate-800 dark:text-slate-200 mb-3">初始管理员账号</h3>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between gap-3">
                      <span className="text-slate-600 dark:text-slate-400">邮箱：</span>
                      <span className="font-mono font-medium text-slate-900 dark:text-white break-all text-right">{initialAdmin.email}</span>
                    </div>
                    {initialAdmin.password ? (
                      <div className="flex justify-between gap-3">
                        <span className="text-slate-600 dark:text-slate-400">密码：</span>
                        <span className="font-mono font-medium text-slate-900 dark:text-white break-all text-right">{initialAdmin.password}</span>
                      </div>
                    ) : initialAdmin.passwordSource === 'environment' ? (
                      <p className="text-slate-700 dark:text-slate-300">初始密码已由部署配置提供，系统不会在页面或日志中回显明文。</p>
                    ) : (
                      <p className="text-slate-700 dark:text-slate-300">管理员账号已存在，请使用现有管理员密码登录。</p>
                    )}
                  </div>
                </div>

                <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-800 rounded-lg p-3 mb-6">
                  <p className="text-xs text-amber-700 dark:text-amber-400">
                    {initialAdmin.password
                      ? '初始密码只在当前页面展示一次，首次登录后将强制修改密码。'
                      : '首次登录后将强制修改密码。'}
                  </p>
                </div>
              </>
            ) : (
              <div className="bg-slate-50 dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700 rounded-lg p-4 mb-6">
                <p className="text-sm text-slate-700 dark:text-slate-300">系统已激活，请使用现有管理员账号登录。</p>
              </div>
            )}

            <button
              onClick={() => router.push('/login')}
              className="w-full py-3 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 rounded-lg font-medium hover:bg-slate-800 dark:hover:bg-white transition-colors"
            >
              前往登录
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <div className="bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm p-6">
          {/* Logo */}
          <div className="text-center mb-8">
            <div className="flex justify-center mb-4">
              {loginLogoUrl && !logoError ? (
                <Image
                  src={loginLogoUrl}
                  alt={siteName}
                  width={80}
                  height={80}
                  unoptimized
                  className="rounded-lg border border-slate-200 dark:border-slate-700 shadow-sm"
                  onError={() => setLogoError(true)}
                />
              ) : (
                <div className="w-20 h-20 rounded-lg border border-slate-200 dark:border-slate-700 shadow-sm bg-slate-900 dark:bg-slate-700 flex items-center justify-center">
                  <span className="text-3xl font-bold text-white">{siteName.charAt(0) || 'F'}</span>
                </div>
              )}
            </div>
            <h1 className="text-xl font-semibold text-slate-900 dark:text-white">{siteName}</h1>
            <p className="text-sm text-slate-500 dark:text-slate-400 mt-2">请输入交付给您的许可证密钥</p>
          </div>

          {/* 许可证输入 */}
          <div className="mb-6">
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
              许可证密钥
            </label>
            <input
              type="text"
              value={licenseKey}
              onChange={handleKeyChange}
              placeholder="XXXX-XXXX-XXXX-XXXX"
              className="w-full px-4 py-3 border border-slate-300 dark:border-slate-700 rounded-lg focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-700 focus:border-slate-900 dark:focus:border-slate-500 text-center text-base font-mono bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
              maxLength={19}
              disabled={loading}
            />
          </div>

          {/* 错误提示 */}
          {error && (
            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
              {error}
            </div>
          )}

          {/* 激活按钮 */}
          <button
            onClick={handleActivate}
            disabled={loading || licenseKey.length !== 19}
            className="w-full py-3 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 rounded-lg font-medium hover:bg-slate-800 dark:hover:bg-white disabled:bg-slate-300 dark:disabled:bg-slate-700 disabled:cursor-not-allowed transition-colors"
          >
            {loading ? '激活中...' : '激活许可证'}
          </button>

          {freeTrialActivationEnabled && (
            <>
              {/* 分隔线 */}
              <div className="my-6 flex items-center">
                <div className="flex-1 border-t border-slate-200 dark:border-slate-700"></div>
                <span className="px-4 text-sm text-slate-400">或</span>
                <div className="flex-1 border-t border-slate-200 dark:border-slate-700"></div>
              </div>

              {/* 临时授权 */}
              <button
                onClick={openFreeTrialModal}
                disabled={loading}
                className="w-full py-3 border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg font-medium hover:bg-slate-50 dark:hover:bg-slate-800 disabled:cursor-not-allowed transition-colors"
              >
                申请临时授权
              </button>

              {/* 免费版说明 */}
              <p className="mt-4 text-center text-xs text-slate-400">
                临时授权会按当前授权服务规则生成受限许可证
              </p>
            </>
          )}
        </div>

        {/* 联系信息 */}
        <p className="mt-6 text-center text-sm text-slate-500">
          如需许可证，请联系系统交付人员或管理员
        </p>
      </div>

      {/* 临时授权弹窗 */}
      {freeTrialActivationEnabled && showFreeTrialModal && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
          <form
            className="bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm p-6 w-full max-w-sm mx-4"
            onSubmit={(e) => {
              e.preventDefault();
              handleFreeTrial();
            }}
          >
            <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">申请临时授权</h3>
            <div className="mb-4">
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                交付单位名称 <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={customerName}
                onChange={(e) => setCustomerName(e.target.value)}
                placeholder="请输入单位或团队名称"
                className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 rounded-lg focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-700 focus:border-slate-900 dark:focus:border-slate-500 bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
                autoFocus
                required
              />
            </div>
            <div className="mb-4">
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                联系方式 <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={contactInfo}
                onChange={(e) => setContactInfo(e.target.value)}
                placeholder="手机号/微信/邮箱"
                className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 rounded-lg focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-700 focus:border-slate-900 dark:focus:border-slate-500 bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
                required
              />
              <p className="mt-1 text-xs text-slate-500">用于授权联系和交付核验</p>
            </div>
            <div className="flex gap-3">
              <button
                type="button"
                onClick={() => setShowFreeTrialModal(false)}
                className="flex-1 py-2 border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
              >
                取消
              </button>
              <button
                type="submit"
                disabled={!customerName.trim() || !contactInfo.trim()}
                className="flex-1 py-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 rounded-lg hover:bg-slate-800 dark:hover:bg-white disabled:bg-slate-300 dark:disabled:bg-slate-700 disabled:cursor-not-allowed transition-colors"
              >
                确认申请
              </button>
            </div>
          </form>
        </div>
      )}
    </div>
  );
}