const { useState, useEffect } = React;
const { Save, Check, Copy, FileText, Mail, ShieldAlert, Database, ExternalLink } = window.lucide;

function SettingsPanel({ onSettingsSaved }) {
  const [settings, setSettings] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [copied, setCopied] = useState(false);
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    fetchSettings();
  }, []);

  const fetchSettings = async () => {
    try {
      const res = await fetch('api.php?action=settings');
      if (res.ok) {
        const text = await res.text();
        try {
          const data = JSON.parse(text);
          setSettings(data);
        } catch (jsonErr) {
          console.error('Expected JSON from api.php?action=settings but got HTML/text:', text.substring(0, 100));
        }
      }
    } catch (e) {
      console.error('Failed to fetch settings:', e);
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async (e) => {
    e.preventDefault();
    if (!settings) return;

    setSaving(true);
    setSuccess(false);
    try {
      const res = await fetch('api.php?action=settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(settings)
      });
      if (res.ok) {
        setSuccess(true);
        if (onSettingsSaved) onSettingsSaved();
        setTimeout(() => setSuccess(false), 3000);
      }
    } catch (err) {
      console.error('Failed to save settings:', err);
    } finally {
      setSaving(false);
    }
  };

  const appsScriptCode = `function doPost(e) {
  try {
    var data = JSON.parse(e.postData.contents);
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    
    // หากชีตว่างเปล่า ให้สร้างหัวคอลัมน์ (Headers)
    if (sheet.getLastRow() == 0) {
      sheet.appendRow([
        "วันที่ประมวลผล (Timestamp)", 
        "แพลตฟอร์ม (Category)", 
        "เลขที่สั่งซื้อ (Order ID)", 
        "ชื่อผู้รับ (Customer Name)", 
        "ชื่อสินค้า (Product Name)", 
        "ราคาต่อหน่วย (Unit Price)", 
        "จำนวน (Quantity)", 
        "จำนวนเงินรวม (Item Amount)", 
        "ยอดชำระทั้งสิ้น (Total Paid Amount)"
      ]);
    }
    
    // เพิ่มข้อมูลสินค้าทีละแถวลงในชีต
    data.items.forEach(function(item) {
      sheet.appendRow([
        new Date(data.timestamp).toLocaleString("th-TH"),
        data.category,
        data.orderId || "",
        data.customerName || "",
        item.productName,
        item.price,
        item.quantity,
        item.amount,
        data.totalAmount
      ]);
    });
    
    return ContentService.createTextOutput(JSON.stringify({ status: "success", message: "Rows appended successfully" }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({ status: "error", message: error.toString() }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}`;

  const handleCopyScript = () => {
    navigator.clipboard.writeText(appsScriptCode);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  if (loading) {
    return (
      <div className="flex justify-center items-center h-48">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
      </div>
    );
  }

  if (!settings) {
    return <div className="text-red-500">ผิดพลาดในการโหลดตั้งค่า</div>;
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 animate-fade-in">
      {/* Settings Form */}
      <div className="lg:col-span-7 bg-white rounded-xl border border-gray-100 shadow-sm p-6">
        <h2 className="text-lg font-bold text-gray-900 mb-6 flex items-center gap-2">
          <Database className="w-5 h-5 text-indigo-600" />
          การตั้งค่าระบบเชื่อมต่อ (System Configurations)
        </h2>

        <form onSubmit={handleSave} className="space-y-6">
          {/* Section 1: Google Sheets */}
          <div className="border-b border-gray-100 pb-6">
            <div className="flex items-center justify-between mb-4">
              <div>
                <h3 className="text-sm font-semibold text-gray-900">1. Google Sheets Integration</h3>
                <p className="text-xs text-gray-500">ส่งข้อมูลสแกนไปยัง Google Sheet ของคุณอัตโนมัติ</p>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={settings.sheetsEnabled}
                  onChange={(e) => setSettings({ ...settings, sheetsEnabled: e.target.checked })}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
              </label>
            </div>

            {settings.sheetsEnabled && (
              <div className="space-y-4 pt-2">
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">
                    Google Sheets Webhook URL (จาก Google Apps Script)
                  </label>
                  <input
                    type="url"
                    required={settings.sheetsEnabled}
                    placeholder="https://script.google.com/macros/s/.../exec"
                    value={settings.sheetsWebhookUrl}
                    onChange={(e) => setSettings({ ...settings, sheetsWebhookUrl: e.target.value })}
                    className="w-full text-sm px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none transition-all"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">
                    Google Sheets URL (ลิงก์แผ่นงานของคุณ - สำหรับกดเปิดดูจากในระบบ)
                  </label>
                  <input
                    type="url"
                    placeholder="https://docs.google.com/spreadsheets/d/.../edit"
                    value={settings.googleSheetUrl}
                    onChange={(e) => setSettings({ ...settings, googleSheetUrl: e.target.value })}
                    className="w-full text-sm px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none transition-all"
                  />
                </div>
              </div>
            )}
          </div>

          {/* Section 2: Email Notification */}
          <div className="border-b border-gray-100 pb-6">
            <div className="flex items-center justify-between mb-4">
              <div>
                <h3 className="text-sm font-semibold text-gray-900">2. Email Notification System</h3>
                <p className="text-xs text-gray-500">แจ้งเตือนข้อมูลสรุปทันทีเมื่อสแกนเสร็จสิ้น</p>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={settings.emailEnabled}
                  onChange={(e) => setSettings({ ...settings, emailEnabled: e.target.checked })}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
              </label>
            </div>

            {settings.emailEnabled && (
              <div className="space-y-4 pt-2">
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">
                    อีเมลเป้าหมายสำหรับรับการแจ้งเตือน
                  </label>
                  <input
                    type="email"
                    required={settings.emailEnabled}
                    placeholder="example@gmail.com"
                    value={settings.targetEmail}
                    onChange={(e) => setSettings({ ...settings, targetEmail: e.target.value })}
                    className="w-full text-sm px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none transition-all"
                  />
                  <p className="text-xs text-gray-400 mt-1 leading-relaxed">
                    * ระบบเปิดใช้งานแบบจำลองจดหมาย (Simulated Mail) ทันทีเพื่อบันทึกและแสดงผล HTML อีเมลที่แท้จริงให้ทดสอบดูได้ในแถบ "จดหมายแจ้งเตือน"
                  </p>
                </div>

                <div className="bg-gray-50 rounded-lg p-4 border border-gray-100 space-y-4">
                  <div className="flex items-center gap-2">
                    <Mail className="w-4 h-4 text-gray-500" />
                    <span className="text-xs font-bold text-gray-700">ตั้งค่า SMTP เพื่อส่งอีเมลจริง (ถ้ามี)</span>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-[10px] font-bold text-gray-500 mb-1">SMTP HOST</label>
                      <input
                        type="text"
                        placeholder="smtp.gmail.com"
                        value={settings.smtpHost}
                        onChange={(e) => setSettings({ ...settings, smtpHost: e.target.value })}
                        className="w-full text-xs px-3 py-1.5 bg-white border border-gray-200 rounded"
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-gray-500 mb-1">SMTP PORT</label>
                      <input
                        type="number"
                        placeholder="587"
                        value={settings.smtpPort || ''}
                        onChange={(e) => setSettings({ ...settings, smtpPort: parseInt(e.target.value) || 0 })}
                        className="w-full text-xs px-3 py-1.5 bg-white border border-gray-200 rounded"
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-gray-500 mb-1">SMTP USER</label>
                      <input
                        type="text"
                        placeholder="user@example.com"
                        value={settings.smtpUser}
                        onChange={(e) => setSettings({ ...settings, smtpUser: e.target.value })}
                        className="w-full text-xs px-3 py-1.5 bg-white border border-gray-200 rounded"
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-gray-500 mb-1">SMTP PASSWORD</label>
                      <input
                        type="password"
                        placeholder="••••••••••••"
                        value={settings.smtpPass}
                        onChange={(e) => setSettings({ ...settings, smtpPass: e.target.value })}
                        className="w-full text-xs px-3 py-1.5 bg-white border border-gray-200 rounded"
                      />
                    </div>
                  </div>

                  <div className="flex items-center gap-2 pt-1">
                    <input
                      type="checkbox"
                      id="smtpSecure"
                      checked={settings.smtpSecure}
                      onChange={(e) => setSettings({ ...settings, smtpSecure: e.target.checked })}
                      className="rounded text-indigo-600 focus:ring-indigo-500"
                    />
                    <label htmlFor="smtpSecure" className="text-[11px] text-gray-600">เปิดใช้งาน SSL / TLS (Secure Connection)</label>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Section 3: Gemini API Key */}
          <div className="border-b border-gray-100 pb-6">
            <div className="flex items-center justify-between mb-4">
              <div>
                <h3 className="text-sm font-semibold text-gray-900">3. Custom Gemini API Key</h3>
                <p className="text-xs text-gray-500">ใส่ API Key ของคุณเองเพื่อนำระบบไปรันใช้งานจริงภายนอกได้อิสระ</p>
              </div>
            </div>

            <div className="space-y-4 pt-2">
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">
                  Gemini API Key ส่วนตัวของคุณ (AIzaSy...)
                </label>
                <input
                  type="password"
                  placeholder="หากปล่อยว่างไว้ ระบบจะใช้ API Key ส่วนกลางในการสแกน"
                  value={settings.geminiApiKey || ''}
                  onChange={(e) => setSettings({ ...settings, geminiApiKey: e.target.value })}
                  className="w-full text-sm px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none transition-all font-mono"
                />
                <p className="text-xs text-gray-400 mt-2 leading-relaxed">
                  💡 <b>วิธีเอาคีย์ฟรีมาใช้:</b> ไปที่ <a href="https://ai.google.dev/" target="_blank" rel="noreferrer" className="text-indigo-600 hover:underline font-bold inline-flex items-center gap-0.5 font-semibold">Google AI Studio <ExternalLink className="w-3 h-3 inline" /></a> ล็อกอินด้วย Gmail แล้วกดปุ่ม <b>"Get API key"</b> เพื่อสร้างคีย์ส่วนตัวฟรีได้เลยครับ!
                </p>
              </div>
            </div>
          </div>

          <div className="flex items-center justify-between pt-4">
            {success ? (
              <span className="text-sm font-medium text-emerald-600 flex items-center gap-1">
                <Check className="w-4 h-4" /> บันทึกการตั้งค่าเรียบร้อยแล้ว!
              </span>
            ) : <span />}

            <button
              type="submit"
              disabled={saving}
              className="px-6 py-2.5 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors flex items-center gap-2 shadow-sm disabled:bg-indigo-400 outline-none"
            >
              <Save className="w-4 h-4" />
              {saving ? 'กำลังบันทึก...' : 'บันทึกการตั้งค่า'}
            </button>
          </div>
        </form>
      </div>

      {/* Tutorial panel on Google Apps Script */}
      <div className="lg:col-span-5 space-y-6">
        <div className="bg-slate-900 rounded-xl text-slate-100 p-6 shadow-md border border-slate-800">
          <div className="flex items-center justify-between mb-4 border-b border-slate-800 pb-3">
            <h3 className="text-sm font-bold flex items-center gap-2 text-indigo-400">
              <FileText className="w-4 h-4" />
              โค้ด Google Apps Script
            </h3>
            <button
              onClick={handleCopyScript}
              className="px-3 py-1 bg-slate-800 hover:bg-slate-700 text-xs rounded transition-colors flex items-center gap-1.5 border border-slate-700 outline-none"
            >
              {copied ? (
                <>
                  <Check className="w-3.5 h-3.5 text-emerald-400" />
                  คัดลอกแล้ว
                </>
              ) : (
                <>
                  <Copy className="w-3.5 h-3.5" />
                  คัดลอกโค้ด
                </>
              )}
            </button>
          </div>

          <p className="text-xs text-slate-400 mb-4 leading-relaxed">
            ก๊อปปี้โค้ด JavaScript ด้านล่างนี้ไปวางในเครื่องมือ Apps Script ของ Google Sheets เพื่อเชื่อมต่อแบบเรียลไทม์:
          </p>

          <div className="bg-slate-950 rounded p-3 font-mono text-[11px] overflow-x-auto max-h-72 overflow-y-auto text-slate-300 border border-slate-900 scrollbar-thin">
            <pre>{appsScriptCode}</pre>
          </div>
        </div>

        {/* Setup Instructions card */}
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
          <h4 className="text-xs font-bold text-gray-900 uppercase tracking-wider mb-4 flex items-center gap-2">
            <ShieldAlert className="w-4 h-4 text-amber-500" />
            ขั้นตอนการเชื่อมต่อ Google Sheets ใน 3 นาที
          </h4>
          <ol className="text-xs text-gray-600 space-y-3 list-decimal list-inside pl-1">
            <li className="leading-relaxed">
              เปิด Google Sheet ใหม่ขึ้นมา จากนั้นกดที่เมนู <b>ส่วนขยาย &gt; Apps Script</b> (Extensions)
            </li>
            <li className="leading-relaxed">
              ลบโค้ดเริ่มต้นออกให้หมด แล้ววางโค้ดที่คุณเพิ่งคัดลอกจากด้านบนลงไป
            </li>
            <li className="leading-relaxed">
              กดปุ่ม <b>บันทึก (Save)</b> ด้านบน จากนั้นกดปุ่ม <b>การทำให้ใช้งานได้ใหม่ &gt; การทำให้ใช้งานได้รายการใหม่ (New Deployment)</b>
            </li>
            <li className="leading-relaxed">
              เลือกประเภทเป็น <b>เว็บแอป (Web App)</b> ตั้งค่ารายละเอียดดังนี้:
              <ul className="list-disc list-inside pl-4 mt-1 text-gray-500 space-y-1">
                <li>เรียกใช้ในฐานะ: <b>ฉัน (อีเมลของคุณ)</b></li>
                <li>ผู้มีสิทธิ์เข้าถึง: <b>ทุกคน (Anyone)</b></li>
              </ul>
            </li>
            <li className="leading-relaxed">
              กด <b>ทำให้ใช้งานได้ (Deploy)</b> แล้วอนุญาตสิทธิ์เข้าถึงให้เรียบร้อย (กด Advanced &gt; Go to Untitled project และ Allow)
            </li>
            <li className="leading-relaxed">
              คัดลอก <b>URL เว็บแอป (Web App URL)</b> ที่ได้ มากรอกลงในช่อง Webhook URL ฝั่งซ้าย แล้วบันทึก!
            </li>
          </ol>

          {settings.googleSheetUrl && (
            <div className="mt-4 pt-4 border-t border-gray-50">
              <a
                href={settings.googleSheetUrl}
                target="_blank"
                rel="noreferrer"
                className="w-full flex items-center justify-center gap-1.5 text-xs font-bold text-indigo-600 bg-indigo-50 hover:bg-indigo-100 py-2.5 rounded-lg transition-colors outline-none"
              >
                เข้าดู Google Sheet ของคุณ
                <ExternalLink className="w-3.5 h-3.5" />
              </a>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.SettingsPanel = SettingsPanel;