function SettingsView() {
  const [n8nSettings, setN8n] = useState(() => JSON.parse(localStorage.getItem('earthlab_n8n_settings') || '{"hookData":"", "hookPrompts":""}'));
  const [saved, setSaved]   = useState(false);

  const handleSave = () => {
    localStorage.setItem('earthlab_n8n_settings', JSON.stringify(n8nSettings));
    setSaved(true); setTimeout(() => setSaved(false), 2500);
  };

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:'var(--section-gap)', maxWidth:720 }} className="fade-up">
      <ViewHeader title="ตั้งค่าการเชื่อมต่อ" en="Integrations & Settings" sub="เชื่อมต่อระบบ Automation ผ่าน n8n Webhook เพื่อดึงข้อมูลและสั่งการอัตโนมัติ" />

      <div className="card">
        <div className="card-head" style={{ alignItems:'flex-start' }}>
          <div style={{ display:'flex', gap:14 }}>
            <div style={{ width:38, height:38, borderRadius:'var(--radius-sm)', background:'var(--accent-soft)', color:'var(--accent-strong)', display:'grid', placeItems:'center', flexShrink:0 }}>
              <IconNetwork size={18} />
            </div>
            <div>
              <h3 className="card-title" style={{ marginBottom:3 }}>n8n Webhook <span className="eyebrow" style={{ marginLeft:4 }}>AUTOMATION</span></h3>
              <p style={{ margin:0, fontSize:12.5, color:'var(--ink-2)' }}>ดึงข้อมูลภาพรวม, วิเคราะห์แคมเปญ และระบบสั่งการอัตโนมัติ</p>
            </div>
          </div>
        </div>
          <div style={{ padding:'var(--pad-card)', display:'flex', flexDirection:'column', gap:10 }}>
            <label style={{ fontSize:13, fontWeight:500, color:'var(--ink-2)', marginBottom:-4 }}>1. ภาพรวมแคมเปญ & วิเคราะห์เจาะลึก (Data Fetching & Analytics)</label>
            <input className="field" type="url" placeholder="Webhook URL (Dashboard & Analytics)" value={n8nSettings.hookData || ''} onChange={e => setN8n({...n8nSettings, hookData: e.target.value})} style={{ marginBottom: 6 }} />
            
            <label style={{ fontSize:13, fontWeight:500, color:'var(--ink-2)', marginBottom:-4 }}>2. คำสั่ง AI (AI Prompts Engine)</label>
            <input className="field" type="url" placeholder="Webhook URL (AI Prompts)" value={n8nSettings.hookPrompts || ''} onChange={e => setN8n({...n8nSettings, hookPrompts: e.target.value})} />
          </div>
      </div>

      <div style={{ display:'flex', justifyContent:'flex-end' }}>
        <button className="btn btn-primary" onClick={handleSave}>
          <IconSave size={16} /> {saved ? 'บันทึกสำเร็จ' : 'บันทึกการตั้งค่า'}
        </button>
      </div>
    </div>
  );
}