import { Mail, Phone, MapPin, Book, Globe, Brain, Save } from 'lucide-react';
import { chain, TextEditor } from './components/TextEditor';
import { toast, ToastContainer } from 'react-toastify';
import { Provider } from './Provider';
// @ts-ignore
import Logo from './assets/logo-1.png';
import { useState } from 'react';
import { CodeDescModal } from './modules/CodeDescModal';
import { query } from './modules/query.ts';
import { toastSuccess, toastWeChat } from './modules/RedirectSuccess.tsx';
import { WeChat } from './components/Icon.tsx';
const getOrigin = () => {
  let origin = window.location.origin;
  if (origin.includes('www.kevisual.cn')) {
    origin = origin.replace('www.kevisual.cn', 'kevisual.cn');
  }
  return origin;
};
export const Main = () => {
  const [showPreview, setShowPreview] = useState(false);
  const [html, setHtml] = useState<string>('');
  const [open, setOpen] = useState(false);
  const [resultUrl, setResultUrl] = useState<string>('');
  const [url] = useState<string>('https://kevisual.cn');
  const onSubmit = async (values: { title: string; description: string }) => {
    setResultUrl('');
    const uploadData = {
      title: values?.title,
      description: values?.description,
      content: chain.getContent(),
    };
    const res = await query.post({
      path: 'app',
      key: 'public-upload-html',
      data: uploadData,
    });
    if (res.code === 200) {
      const url = res.data?.url;
      if (url) {
        let origin = getOrigin();
        const newUrl = new URL(url, origin);
        // toast.success('创建成功, 访问地址' + newUrl.toString(), { autoClose: 3000 });
        toastSuccess(newUrl.toString());
        setResultUrl(newUrl.toString());
      }
    }
  };
  return (
    <div className='min-h-screen bg-gray-50'>
      {/* Hero Section */}
      <header className=''>
        <nav className='px-4 mx-auto h-16 flex justify-between items-center bg-white border-b border-b-gray-200 w-full'>
          <div
            className='flex items-center space-x-4 cursor-pointer'
            onClick={() => {
              window.open(url, '_blank');
            }}>
            <img src={Logo} alt='可视化助手 Logo' className='h-10 w-30 ' />
          </div>
          <div className='hidden md:flex space-x-6'>
            <a
              className='hover:text-gray-400 cursor-pointer'
              onClick={(e) => {
                e.preventDefault();
                const url = new URL('/root/center/', getOrigin());
                window.open(url.toString(), '_blank');
              }}>
              管理中心
            </a>
            <a href='#features' className='hover:text-gray-400 cursor-pointer'>
              功能
            </a>
            <a href='#contact' className='hover:text-gray-400 cursor-pointer'>
              联系方式
            </a>
          </div>
        </nav>
      </header>
      <main
        className='flex flex-col overflow-hidden'
        style={{
          height: 'calc(100vh - 64px)',
        }}>
        <nav className='h-12 bg-white flex'>
          <button
            className='flex items-center px-4 h-full bg-white border-b border-b-gray-200 hover:bg-gray-50 cursor-pointer'
            onClick={() => {
              const content = chain.getContent();
              if (!content) {
                toast.error('内容不能为空', { position: 'top-center', autoClose: 1000 });
                return;
              }
              setOpen(true);
            }}>
            <span className='text-gray-700'>创建</span>
            <Save className='ml-2 w-4 h-4 text-gray-500' />
          </button>

          <button
            className='flex items-center px-4 h-full bg-white border-b border-b-gray-200 hover:bg-gray-50 cursor-pointer'
            style={{
              backgroundColor: showPreview ? '#f0f0f0' : 'white',
            }}
            onClick={() => {
              setShowPreview(!showPreview);
            }}>
            <span className='text-gray-700'>预览</span>
            <Globe className='ml-2 w-4 h-4 text-gray-500' />
          </button>
        </nav>
        <div className='p-2 rounded shadow flex' style={{ height: 'calc(100% - 48px - 48px)' }}>
          <div className='h-full overflow-auto flex-1'>
            <TextEditor content={''} chain={chain} onChange={setHtml} />
          </div>
          {showPreview && (
            <div className='w-1/2 shrink-1 border-l border-gray-200 h-full overflow-auto'>
              <iframe className='w-full h-full border-0' srcDoc={html} title='预览' sandbox='allow-scripts allow-same-origin allow-popups' />
            </div>
          )}
        </div>
        <footer className='h-12'>
          {!resultUrl && <div className='flex items-center h-full text-gray-500 px-2 italic'>粘贴您的 HTML 内容到编辑器中，点击“创建”按钮生成链接。</div>}
          {resultUrl && (
            <div className='flex items-center gap-2 px-4 h-full bg-white border-t border-t-gray-200'>
              <span className='text-gray-700'>生成的链接:</span>
              <a href={resultUrl} target='_blank' rel='noopener noreferrer' className='text-blue-600 hover:underline'>
                {resultUrl}
              </a>
            </div>
          )}
        </footer>
        <CodeDescModal open={open} onClose={() => setOpen(false)} onSubmit={onSubmit} />
      </main>

      {/* Features Section */}
      <section id='features' className='py-20 bg-white'>
        <div className='container mx-auto px-6'>
          <h2 className='text-3xl font-bold text-center mb-16'>核心功能</h2>

          <div className='grid md:grid-cols-3 gap-12'>
            <div className='p-6 rounded-lg shadow-lg bg-white'>
              <Globe className='w-12 h-12 text-blue-600 mb-4' />
              <h3 className='text-xl font-semibold mb-4'>网页部署平台</h3>
              <p className='text-gray-600'>轻松管理您的博客和自定义网页，支持文件管理、站点创建和域名自定义</p>
            </div>

            <div className='p-6 rounded-lg shadow-lg bg-white'>
              <Brain className='w-12 h-12 text-blue-600 mb-4' />
              <h3 className='text-xl font-semibold mb-4'>应用共享</h3>
              <p className='text-gray-600'>根据用户需求，某一些应用只能自己访问或者共享</p>
            </div>

            <div className='p-6 rounded-lg shadow-lg bg-white'>
              <Book className='w-12 h-12 text-blue-600 mb-4' />
              <h3 className='text-xl font-semibold mb-4'>临时网页</h3>
              <p className='text-gray-600'>当个网页助手，帮助您快速生成临时网页</p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id='contact' className='py-20 bg-white'>
        <div className='container mx-auto px-6'>
          <h2 className='text-3xl font-bold text-center mb-16'>联系我们</h2>
          <div className='max-w-2xl mx-auto w-[200px]'>
            <div className='space-y-6'>
              <div className='flex items-center space-x-4'>
                <Mail className='w-6 h-6 text-blue-600' />
                <span>kevisual@kevisual.cn</span>
              </div>
              <div className='flex items-center space-x-4'>
                <Phone className='w-6 h-6 text-blue-600' />
                <span>18324451015</span>
              </div>
              <div className='flex items-center space-x-4'>
                <MapPin className='w-6 h-6 text-blue-600' />
                <span>浙江省杭州市</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className='bg-gray-900 text-white py-12'>
        <div className='container mx-auto px-6'>
          <div className='grid md:grid-cols-4 gap-8'>
            <div>
              <h3 className='text-lg font-semibold mb-4'>Kevisual 助手</h3>
              <p className='text-gray-400'>加速你的工作，生活，学习</p>
            </div>
            <div>
              <h3 className='text-lg font-semibold mb-4'>快速链接</h3>
              <ul className='space-y-2 text-gray-400'>
                <li>
                  <a href='#features' className='hover:text-white'>
                    功能
                  </a>
                </li>
                <li>
                  <a href='#contact' className='hover:text-white'>
                    联系方式
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className='text-lg font-semibold mb-4'>法律信息</h3>
              <ul className='space-y-2 text-gray-400'>
                <li>
                  <a href='./privacy' className='hover:text-white'>
                    隐私政策
                  </a>
                </li>
                <li>
                  <a href='./terms' className='hover:text-white'>
                    用户协议
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className='text-lg font-semibold mb-4'>联系我们</h3>
              <div className='flex space-x-4'>
                <a href='mailto:feedback@kevisual.cn' className='text-gray-400 hover:text-white cursor-pointer'>
                  <Mail className='w-6 h-6' />
                </a>
                <a href='tel:18324451015' className='text-gray-400 hover:text-white cursor-pointer'>
                  <Phone className='w-6 h-6' />
                </a>
                <a
                  className='text-gray-400 hover:text-white cursor-pointer'
                  onClick={(e) => {
                    e.preventDefault();
                    toastWeChat();
                  }}>
                  <WeChat className='w-6 h-6' />
                </a>
              </div>
            </div>
          </div>
          <div
            className='mt-12 pt-8 border-t border-gray-800 text-center text-gray-400'
            onClick={() => {
              window.open('https://beian.miit.gov.cn/', '_blank');
            }}>
            <p>浙ICP备2025158778号</p>
            <p>© 2025 杭州余杭逸文设计工作室. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export const App = () => {
  return (
    <>
      <Provider>
        <ToastContainer autoClose={2000}></ToastContainer>
        <Main />
      </Provider>
    </>
  );
};
