from datetime import datetime
import json
import urllib.request
from flask import Flask, jsonify, render_template_string, request

app = Flask(__name__)

# Telnyx 基本設定
API_KEY = "KEY01A0AEA6A3AF7C67488B8FB60E283A7F_rHUmpkF6Ewg8aeM9bxIfGP"
TELNYX_URL = "https://api.telnyx.com/v2/messages"
FROM_NUMBER = "+61420142275"  # 你的 Telnyx 號碼


# 精準計算字數、封數與金額的函數 (對標標準電信規則)
def calculate_sms_cost(text, recipient_count):
  if not text:
    return 0, 0, 0.0

  # 簡單判斷是否包含非 GSM-7 字元（如中文、特殊符號、Emoji）
  has_unicode = any(ord(char) > 127 for char in text)
  length = len(text)

  if has_unicode:
    # Unicode 編碼：單條上限 70 字元，超過則每 67 字元為一封
    if length <= 70:
      segments = 1
    else:
      segments = (length + 66) // 67
  else:
    # GSM-7 標準編碼：單條上限 160 字元，超過則每 153 字元為一封
    if length <= 160:
      segments = 1
    else:
      segments = (length + 152) // 153

  # 每封成本預設為 0.05 USD (可根據實際情況微調)
  cost_per_segment = 0.05
  total_cost = recipient_count * segments * cost_per_segment

  return length, segments, total_cost


# 首頁：展示任務列表與簡單導覽
@app.route("/")
def index():
  return render_template_string("""
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>AK8 SMS Gateway - 內部管理後台</title>
        <style>
            body { font-family: Arial, sans-serif; background: #f4f6f9; margin: 0; padding: 20px; color: #333; }
            .container { max-width: 1000px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
            h1 { font-size: 24px; color: #1a73e8; display: inline-block; }
            .btn { background: #1a73e8; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 16px; float: right; }
            .btn:hover { background: #1557b0; }
            table { width: 100%; border-collapse: collapse; margin-top: 20px; }
            th, td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
            th { background: #f8f9fa; }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>AK8 SMS Campaigns</h1>
            <a href="/create" class="btn">+ 新增任務 (Create Campaign)</a>
            <div style="clear: both;"></div>
            <table>
                <thead>
                    <tr>
                        <th>Campaign 名字</th>
                        <th>狀態</th>
                        <th>建立時間</th>
                        <th>發送數量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>test_campaign_01</td>
                        <td><span style="color: green;">已完成</span></td>
                        <td>2026-06-07 12:00:00</td>
                        <td>2 筆</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>
    """)


# 建立任務頁面（包含智慧表格與即時預覽）
@app.route("/create", methods=["GET", "POST"])
def create_campaign():
  if request.method == "POST":
    # 這裡接收前端送來的資料並執行 API 發送
    data = request.json
    campaign_name = data.get("campaign_name", "Default Campaign")
    message_template = data.get("message", "")
    contacts = data.get("contacts", [])  # 包含 name, phone, link, custom1...

    success_count = 0
    total_cost = 0.0

    headers = {
        "Authorization": f"Bearer {API_KEY}",
        "Content-Type": "application/json",
    }

    for contact in contacts:
      phone = contact.get("phone")
      if not phone:
        continue

      # 清洗電話號碼格式
      phone = str(phone).strip()
      if not phone.startswith("+"):
        phone = "+" + phone

      # 替換變數
      msg = message_template
      msg = msg.replace("{name}", contact.get("name", ""))
      msg = msg.replace("{link}", contact.get("link", ""))
      msg = msg.replace("{var1}", contact.get("var1", ""))
      msg = msg.replace("{var2}", contact.get("var2", ""))
      msg = msg.replace("{var3}", contact.get("var3", ""))

      payload = {"from": FROM_NUMBER, "to": phone, "text": msg}

      try:
        req = urllib.request.Request(
            TELNYX_URL,
            data=json.dumps(payload).encode("utf-8"),
            headers=headers,
            method="POST",
        )
        with urllib.request.urlopen(req) as response:
          res_data = json.loads(response.read().decode("utf-8"))
          cost_str = (
              res_data.get("data", {}).get("cost", {}).get("amount", "0.05")
          )
          total_cost += float(cost_str) if cost_str else 0.05
          success_count += 1
      except Exception as e:
        print(f"發送給 {phone} 失敗: {e}")

    return jsonify({
        "status": "success",
        "success_count": success_count,
        "total_cost": total_cost,
    })

  return render_template_string("""
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>建立新任務 - AK8 SMS</title>
        <style>
            body { font-family: Arial, sans-serif; background: #f4f6f9; margin: 0; padding: 20px; color: #333; }
            .container { max-width: 1200px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
            .form-group { margin-bottom: 20px; }
            label { display: block; font-weight: bold; margin-bottom: 5px; }
            input[type="text"], textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
            textarea { height: 120px; }
            .btn { background: #1a73e8; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
            .btn:hover { background: #1557b0; }
            .preview-box { background: #f8f9fa; border: 1px solid #ddd; padding: 15px; border-radius: 8px; margin-top: 20px; }
            table.sheet { width: 100%; border-collapse: collapse; margin-top: 10px; }
            table.sheet th, table.sheet td { border: 1px solid #ddd; padding: 8px; text-align: center; }
            table.sheet th { background: #f1f3f4; }
            table.sheet input { width: 95%; border: none; padding: 4px; text-align: center; }
        </style>
        <script>
            function updatePreview() {
                let msg = document.getElementById('message').value;
                // 示範用第一筆數據替換預覽
                let sampleName = "Eric";
                let sampleLink = "https://ak8.ink/u123";
                let sampleVar1 = "BONUS88";
                
                let rendered = msg
                    .replace(/{name}/g, sampleName)
                    .replace(/{link}/g, sampleLink)
                    .replace(/{var1}/g, sampleVar1);
                
                document.getElementById('phone-preview').innerText = rendered || "（請在下方輸入訊息內容...）";
                
                // 簡單字數計算
                let len = msg.length;
                let segments = len <= 160 ? 1 : Math.ceil(len / 153);
                document.getElementById('stats').innerText = `字數: ${len} 字 | 預估每筆分拆: ${segments} 封`;
            }

            function insertTag(tag) {
                let textarea = document.getElementById('message');
                textarea.value += tag;
                updatePreview();
            }
        </script>
    </head>
    <body>
        <div class="container">
            <h2>建立新發送任務 (New Campaign)</h2>
            
            <div class="form-group">
                <label>Campaign 名字</label>
                <input type="text" id="campaign_name" value="AK8_Campaign_01">
            </div>

            <div class="form-group">
                <label>名單表格 (智慧清洗：直接填寫或貼上)</label>
                <table class="sheet" id="contact-table">
                    <thead>
                        <tr>
                            <th>名字 (name)</th>
                            <th>電話 (phone)</th>
                            <th>專屬鏈接 (link)</th>
                            <th>變量 1 (var1)</th>
                            <th>變量 2 (var2)</th>
                            <th>變量 3 (var3)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" class="c-name" value="Eric"></td>
                            <td><input type="text" class="c-phone" value="+61420142275"></td>
                            <td><input type="text" class="c-link" value="https://ak8.ink/u001"></td>
                            <td><input type="text" class="c-var1" value="VIP88"></td>
                            <td><input type="text" class="c-var2" value=""></td>
                            <td><input type="text" class="c-var3" value=""></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="form-group">
                <label>訊息內容 (Message)</label>
                <div style="margin-bottom: 8px;">
                    <button type="button" onclick="insertTag('{name}')">{name}</button>
                    <button type="button" onclick="insertTag('{link}')">{link}</button>
                    <button type="button" onclick="insertTag('{var1}')">變量1</button>
                    <button type="button" onclick="insertTag('{var2}')">變量2</button>
                    <button type="button" onclick="insertTag('{var3}')">變量3</button>
                </div>
                <textarea id="message" oninput="updatePreview()">Hi {name}, 你的專屬福利已到帳，點擊領取：{link} 優惠碼: {var1}</textarea>
                <small id="stats" style="color: #666; display: block; margin-top: 5px;">字數: 0 字 | 預估每筆分拆: 1 封</small>
            </div>

            <div class="preview-box">
                <strong>📱 手機即時預覽 (第一筆資料展示)：</strong>
                <p id="phone-preview" style="background: white; padding: 10px; border-radius: 4px; margin-top: 5px; border: 1px solid #ddd;">請輸入內容...</p>
            </div>

            <div style="margin-top: 20px;">
                <button type="button" class="btn" onclick="sendCampaign()">SEND NOW (確認並發送)</button>
            </div>
        </div>

        <script>
            // 初始化預覽
            updatePreview();

            function sendCampaign() {
                let campaignName = document.getElementById('campaign_name').value;
                let message = document.getElementById('message').value;
                
                let contacts = [];
                let rows = document.querySelectorAll('#contact-table tbody tr');
                rows.forEach(row => {
                    contacts.push({
                        name: row.querySelector('.c-name').value,
                        phone: row.querySelector('.c-phone').value,
                        link: row.querySelector('.c-link').value,
                        var1: row.querySelector('.c-var1').value,
                        var2: row.querySelector('.c-var2').value,
                        var3: row.querySelector('.c-var3').value
                    });
                });

                if(!confirm(`確定要發送這場 Campaign [${campaignName}] 嗎？總共 ${contacts.length} 筆號碼。`)) {
                    return;
                }

                fetch('/create', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ campaign_name: campaignName, message: message, contacts: contacts })
                })
                .then(res => res.json())
                .then(data => {
                    alert(`發送完畢！成功發送: ${data.success_count} 筆，總花費: $${data.total_cost.toFixed(4)} USD`);
                    window.location.href = "/";
                })
                .catch(err => {
                    alert('發送發生錯誤: ' + err);
                });
            }
        </script>
    </body>
    </html>
    """)

if __name__ == "__main__":
  app.run(debug=True, port=5000)