import { useEffect, useState } from 'react';
import { View, Text } from '@tarojs/components';
import '../../styles/legal.css';
import Taro from '@tarojs/taro';
import PageShell from '../../components/PageShell';
import SubPageHeader from '../../components/SubPageHeader';
import { toast } from '../../lib/api';
import { getBrandAssetsSync, loadBrandAssets } from '../../lib/brand-assets';
import {
  BENEFIT_RULES_FOOTER,
  BENEFIT_RULES_SECTIONS,
  BENEFIT_RULES_SUMMARY,
  BENEFIT_RULES_TITLE,
} from '../../lib/benefit-copy';

export default function BenefitRulesPage() {
  const [phone, setPhone] = useState(() => getBrandAssetsSync().customerServicePhone);

  useEffect(() => {
    void loadBrandAssets().then((brand) => setPhone(brand.customerServicePhone));
  }, []);

  function dial() {
    const tel = phone.replace(/-/g, '');
    Taro.makePhoneCall({ phoneNumber: tel }).catch(() => toast('无法拨打电话'));
  }

  return (
    <PageShell variant="sub" className="legal-page benefit-rules-page">
      <SubPageHeader title={BENEFIT_RULES_TITLE} />
      <View className="sub-page-body inset-page legal-body">
        <View className="benefit-rules-summary">
          <Text className="benefit-rules-summary-text">
            {BENEFIT_RULES_SUMMARY.replace(/不可兑现、不可转卖。$/, '')}
            <Text className="benefit-rules-em">不可兑现、不可转卖。</Text>
          </Text>
        </View>

        {BENEFIT_RULES_SECTIONS.map((section) => (
          <View key={section.heading} className="benefit-rules-section">
            <View className="benefit-rules-heading-row">
              <View className="benefit-rules-heading-bar" />
              <Text className="benefit-rules-heading">{section.heading}</Text>
            </View>
            {section.paragraphs.map((p, i) => {
              const emphasize = 'emphasize' in section ? section.emphasize : '';
              const emphasizeAll = 'emphasizeAll' in section && section.emphasizeAll;
              if (emphasizeAll) {
                return (
                  <Text key={`${section.heading}-${i}`} className="benefit-rules-paragraph benefit-rules-em">
                    {p}
                  </Text>
                );
              }
              if (emphasize && p.includes(emphasize)) {
                const [before, after] = p.split(emphasize);
                return (
                  <Text key={`${section.heading}-${i}`} className="benefit-rules-paragraph">
                    {before}
                    <Text className="benefit-rules-em">{emphasize}</Text>
                    {after}
                  </Text>
                );
              }
              return (
                <Text key={`${section.heading}-${i}`} className="benefit-rules-paragraph">
                  {p}
                </Text>
              );
            })}
            {section.heading === '八、联系客服' ? (
              <Text className="benefit-rules-phone" onClick={dial}>
                {phone}
              </Text>
            ) : null}
          </View>
        ))}

        <Text className="benefit-rules-footer">{BENEFIT_RULES_FOOTER}</Text>
      </View>
    </PageShell>
  );
}