import { useState } from 'react';
import Modal from './Modal';
import './TermsModal.css';

type TabType = 'terms' | 'privacy';

const COMPANY = '厦门美家卡科技有限公司';
const APP_NAME = '美家卡智影';

const termsContent = `
一、服务条款的确认与接纳

${COMPANY}（以下简称"本公司"）运营 ${APP_NAME} 平台（以下简称"本平台"），为用户提供 AI 视频创作相关服务。您在使用本平台服务前，应当仔细阅读本协议。当您点击同意或实际使用本平台服务时，即视为您已阅读、理解并同意接受本协议全部条款的约束。

二、服务内容

本平台提供的服务包括但不限于：AI 脚本生成、AI 配音合成（TTS）、视频生成、声音复刻、视频字幕生成、压制成片等功能。具体服务内容以本平台实际提供的为准。

本公司有权根据业务发展需要，随时调整、新增或终止部分或全部服务，恕不另行通知。

三、用户账号

您在使用本平台部分功能时可能需要注册账号。您应当提供真实、准确、完整的注册信息，并及时更新。因您提供的信息不真实、不准确或不完整而导致的任何损失，由您自行承担。

您应妥善保管账号及密码，对账号下的所有行为承担法律责任。如发现账号被盗用或存在安全漏洞，应立即通知本公司。

四、用户行为规范

您在使用本平台服务时，应当遵守法律法规，不得利用本平台制作、复制、发布、传播以下内容：

（一）反对宪法所确定的基本原则的；
（二）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；
（三）损害国家荣誉和利益的；
（四）煽动民族仇恨、民族歧视，破坏民族团结的；
（五）破坏国家宗教政策，宣扬邪教和封建迷信的；
（六）散布谣言，扰乱社会秩序，破坏社会稳定的；
（七）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；
（八）侮辱或者诽谤他人，侵害他人合法权益的；
（九）含有法律、行政法规禁止的其他内容的。

您不得利用本平台从事任何侵犯他人知识产权、肖像权、名誉权等合法权益的行为。如因您使用本平台服务而产生的任何纠纷，由您自行承担全部责任。

五、知识产权

本平台提供的所有内容，包括但不限于文字、图片、音频、视频、软件、代码、界面设计等，其知识产权均归本公司或相关权利人所有。未经授权，您不得复制、修改、传播或用于商业用途。

您使用本平台生成的内容，其知识产权归属以您与本公司另行约定为准。如无特别约定，您享有生成内容的使用权，但不得用于违法或侵权目的。

六、服务变更、中断与终止

本公司有权在必要时修改、中断或终止本平台服务，无需事先通知您。如因系统维护、升级或其他不可抗力因素导致服务暂时中断，本公司不承担任何责任。

如您违反本协议约定，本公司有权随时终止向您提供服务，并保留追究法律责任的权利。

七、免责声明

本平台基于人工智能技术提供服务，生成内容仅供参考，不构成专业建议。您应当对生成内容进行审核，并自行承担使用后果。

本公司不对因网络状况、设备故障、第三方服务中断等非本公司原因导致的服务异常承担责任。

八、协议的修改

本公司有权根据需要不时修改本协议条款。修改后的协议将在本平台公示，您继续使用本平台服务即视为接受修改后的协议。

九、法律适用与争议解决

本协议的订立、执行和解释及争议的解决均适用中华人民共和国法律。如双方就本协议内容或其执行发生任何争议，应友好协商解决；协商不成时，任何一方均可向本公司所在地有管辖权的人民法院提起诉讼。
`;

const privacyContent = `
一、引言

${COMPANY}（以下简称"本公司"）非常重视用户的隐私保护。本《隐私政策》旨在向您说明，在您使用 ${APP_NAME} 平台（以下简称"本平台"）时，我们如何收集、使用、存储和保护您的个人信息。

请您在使用本平台前仔细阅读本政策。如您不同意本政策的任何内容，请停止使用本平台服务。

二、信息收集

我们可能收集以下类型的信息：

（一）您主动提供的信息：包括手机号、验证码等账号注册和登录所需信息。

（二）设备信息：包括设备型号、操作系统版本、唯一设备标识符等，用于优化服务体验和保障账号安全。

（三）使用数据：包括您使用本平台功能的情况、操作日志等，用于改进服务质量和用户体验。

（四）创作内容：包括您上传的素材、生成的脚本、配音文本、视频等，用于提供核心创作服务。

三、信息使用

我们收集的信息将用于以下目的：

（一）提供、维护和改进本平台服务；
（二）保障账号安全和系统稳定；
（三）处理您的反馈和客服请求；
（四）进行数据分析和研究，以优化产品功能；
（五）遵守法律法规的要求。

四、信息存储与保护

我们采取合理的安全措施保护您的个人信息，防止信息泄露、篡改或丢失。您的数据存储在安全可靠的服务器中，并经过加密处理。

我们不会将您的个人信息出售、出租或以其他方式非法提供给第三方，但以下情形除外：

（一）获得您的明确授权；
（二）根据法律法规的要求；
（三）为维护社会公共利益或本公司合法权益所必需。

五、Cookie 与类似技术

本平台可能使用 Cookie 或类似技术来提升用户体验，记录您的偏好设置。您可以通过浏览器设置管理或拒绝 Cookie，但这可能影响部分功能的正常使用。

六、第三方服务

本平台可能集成第三方服务（如 AI 模型提供商、云存储服务等）。这些第三方服务有其独立的隐私政策，我们建议您查阅相关隐私政策以了解其信息处理方式。

七、未成年人的信息保护

本平台主要面向成年用户。如您为未成年人，请在监护人指导下使用本平台，并在监护人的同意下提供个人信息。

八、您的权利

您有权查阅、更正、删除您的个人信息，有权撤回已同意的授权。如您需要行使上述权利，可通过本平台提供的渠道与我们联系。

九、政策的更新

我们可能根据业务发展或法律法规变化不时更新本隐私政策。更新后的政策将在本平台公示，您继续使用本平台服务即视为接受更新后的政策。

十、联系我们

如您对本隐私政策有任何疑问或建议，请通过本平台提供的反馈渠道与我们联系。
`;

interface TermsModalProps {
  open: boolean;
  defaultTab?: TabType;
  onClose: () => void;
}

export default function TermsModal({ open, defaultTab = 'terms', onClose }: TermsModalProps) {
  const [activeTab, setActiveTab] = useState<TabType>(defaultTab);

  const tabs = [
    { id: 'terms' as TabType, label: '用户服务协议' },
    { id: 'privacy' as TabType, label: '隐私政策' },
  ];

  const content = activeTab === 'terms' ? termsContent : privacyContent;

  return (
    <Modal open={open} onClose={onClose} width="640px">
      <div className="terms-modal">
        <div className="terms-tabs">
          {tabs.map(tab => (
            <button
              key={tab.id}
              className={`terms-tab ${activeTab === tab.id ? 'active' : ''}`}
              onClick={() => setActiveTab(tab.id)}
            >
              {tab.label}
            </button>
          ))}
        </div>
        <div className="terms-content">
          {content.split('\n').map((line, i) => {
            if (line.trim() === '') {return <div key={i} className="terms-paragraph-spacer" />;}
            if (line.match(/^（?[一二三四五六七八九十]+[）、]/)) {
              return <h4 key={i} className="terms-section-title">{line.trim()}</h4>;
            }
            return <p key={i} className="terms-paragraph">{line.trim()}</p>;
          })}
        </div>
        <div className="terms-footer">
          <button className="terms-confirm-btn" onClick={onClose}>
            我知道了
          </button>
        </div>
      </div>
    </Modal>
  );
}
